Чек-лист по юзабилити. 1/2

Общие стандарты растут. И требования пользователей к сайтам становятся все выше и выше. Уже никто не будет мириться с мелким шрифтом, автоматическим воспроизведением видео со звуком или кислотным дизайном. В условиях конкуренции выживают те сайты, которые нашли секрет юзабилити.

Вот вам подробный список факторов, влияющих на удобство пользования вашим сайтом — он поможет вашему ресурсу стать лучше.

Базовые факторы юзабилити

1. Скорость загрузки. Мы не зря поставили этот фактор первым. Если пользователь не увидит содержимое сайта за 1-2 секунды, то вам не поможет ни качественный дизайн, ни уникальный контент.

2. Правильная география. Ваш сайт должен быть оптимизирован под нужный регион: правильный язык, корректная информация, верная метрическая система и манера изложения.

3. Удобное переключение языка. Если такая функция присутствует на вашем сайте, то она должна просто переключать страницу, а не перебрасывать посетителя на главную.

4. Наличие адаптивности и кроссбраузерности. Сайт должен правильно и корректно отображаться на всех экранах и браузерах.

5. Сколько устройств, столько и сценариев юзабилити. Структура сайта для десктопной версии не всегда подходит для мобильной версии и наоборот. Проработайте юзабилити для каждого устройства отдельно.

6. Никаких ненужных полос прокрутки. При разрешении 1024х768 во всех браузерах горизонтальная полоса прокрутки не должна появляться.

7. Простой и понятный доступ к кнопкам. Пользователь должен всегда иметь простой способ купить товар, заказать звонок, оставить заявку.

8. Понятные иконки. Иконки на сайте должны отражать содержимое.

9. Единый интерфейс сайта. Весь сайт должен быть одинаков по оформлению – шапка, страница, подвал – на каждой странице за редким исключением (корзина, оформление заказа).

10. Понятность содержимого. Пользователь на каждой странице должен за 3 секунды понимать ее назначение и тематику.

11. Приверженность традициям. Люди привыкли, что логотип всегда в верхнем левом углу, контакты – это правый пункт меню, а онлайн-чат в правом нижнем углу. Пользователь интуитивно ищет эти элементы на своих местах.

12. Минимальное количество контактов. Слишком большое количество вариантов может запутать и оттолкнуть.

13. Взаимодействие с логотипом. Логотип должен быть кликабелен и вести на главную страницу, но не перезагружать ее, когда вы уже находитесь на главной.

14. Карта сайта. На сайте можно найти и посмотреть карту сайта.

15. Фавикон. Фавикон – это иконка, которая располагается рядом с сайтом в поисковой выдаче и слева с названием странице на вкладке. По фавикону пользователь находит ваш сайт среди всех открытых вкладок.

16. Ясная терминология. В названиях разделов и пунктов меню используются понятные названия и аббревиатуры. Нет никаких неочевидных формулировок.

17. Информационные блоки. На сайте есть возможность познакомиться с компанией. Ее историей и контактными лицами. Обычно это можно сделать на странице «о компании».

18. Красивая страница 404. Сайт должен обладать понятной и проработанной страницей ошибки. Как правило, она должна сообщать о возможных причинах ошибки и давать возможность быстро перейти на главную.

19. Социально-правильный маркетинг. Не нужно никаких раздражающих элементов типа автовоспроизведения видео со звуком, всплывающих окон и назойливой рекламы.

20. Кнопки возврата. На длинных страницах, например, лендингах, должны быть кнопки «Наверх», «Оглавление» и подобные.

21. Минимум действий для пользователя. Постарайтесь, чтобы от пользователя требовалось как можно меньше усилий – город определяется автоматически, также автоматически обновляются остатки товаров.

Кнопки

29. Честность. Все привыкли, что кнопка выполняет какое-то действие, а не перенаправляет на другую страницу – для этого есть ссылки.

30. Просто нажать. Кликабельной должна быть вся кнопка, а не только текст на ней.

31. Текст на кнопке. Он должен отображать последствия нажатия кнопки. Обычно, это глагол в инфинитивной форме, лаконичный и конкретный.

32. Кнопки отмены. Для очистки форм и отмены действий. Должны быть расположены отдельно от кнопок действий и выделены цветом.

Ссылки

33. Честность. Тут наоборот, от ссылки ждут перехода на другую страницу, а не выполнения какого-то действия.

34. Оформление. Все ссылки выделены и подчеркнуты, при наведении присутствует анимация. Стандартно – это синий цвет для новой ссылки и фиолетовый для нажатой.

35. Разделение. Если ссылка подразумевает разворачивание информационного блока, то она должна быть обозначена пунктиром и, иногда, треугольником слева.

36. Удобство клика. Текст должен быть достаточно длинным, чтобы по нему можно было легко попасть, а сама ссылка легко находилась в тексте.

Навигация

37. Хлебные крошки. Это отображение последовательности страниц в структуре сайта, начиная с главной, до той, на которой находится пользователь. Они нужны для удобства навигации по сайту.

38. Первый заголовок. Заголовок H1 должен быть на всех страницах и отображать информацию о ее содержимом.

Примечание: Заголовки на странице, как и в документе разделяются по значимости на H1, H2, H3 и далее по убыванию. H1 озаглавливает всю страницу целиком и отражает ее содержимое. Значение H1 присваивается заголовку в коде сайта. Такие заголовки помогают поисковым системам понять содержимое вашего сайта и отдельных страниц.

39. Кнопка «назад». Да, такая кнопка есть в функционале самого браузера. Но важно, чтобы при возврате на предыдущую страницу на ней были сохранены все предыдущие настройки сортировки и фильтрации, оставленные пользователем.

40. Раздел просмотренных товаров. Такой раздел актуален для интернет-магазинов, чтобы пользователь мог вернуться к ранее просмотренным товарам.

41. Внутренние ссылки. Ни одна страница не должна быть тупиковой на вашем сайте. Каждая страница должна приближать пользователя к конечному действию.

Главное меню

42. Доступность. Главное меню с основными разделами должно быть доступно на каждой странице сайта.

43. Выделение раздела присутствия. Раздел сайта, на котором в данный момент находится пользователь, должен выделяться цветом.

44. Подуровни. В главном меню старайтесь избегать большой степени вложенности. Максимум два подуровня у каждого пункта меню. Обозначайте, что у какого-то блока есть подуровни.

Коммуникации

45. Текст. Все контакты должны быть представлены текстом, а не картинкой, чтобы их можно было скопировать.

46. Отсутствие защиты. Если речь идет не об уникальном контенте, то такая защита не должна препятствовать копированию информации.

47. Закрепленное место за контактами. Телефон и другие контакты должны на всех страницах сайта располагаться в одном и том же месте.

48. Форма обратной связи. Обычно закреплена внизу страницы или в шапке сайте. Доступ к ней должен быть простым с любой страницы.

49. Быстрый заказ. Такие формы тоже должны быть на сайте, например, заказ обратного звонка.

Жуковский Александр