Юзабилити меню: 15 рекомендаций

юзабилити меню
Статьи
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Каким должно быть меню, чтобы пользователям было удобно? Предлагаем простой чек-лист юзабилити меню, который выявит ошибки оптимизации навигационных элементов»

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

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

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

Навигационные меню стандартно представляются в виде панелей навигации или гамбургера. Без меню не обходится ни один сайт и ни одно приложение. Однако не все меню одинаково полезны для пользователей. Приводим чек-лист критериев проверки юзабилити меню на сайте. Иными словами, этот чек-лист позволит вам проверить, насколько меню удобны и понятны пользователям в теории. А как это есть на практике, проверят асессоры GetGoodRank.

Чек-лист юзабилити меню

Видимость меню

1. Не создавайте мелкие меню, если на сайте есть достаточно свободного пространства для отображения меню нормального размера.

2. Размещайте меню в ожидаемых местах на сайте. Стандартно пользователи ищут меню сайта или приложения под/над шапкой или в левой части экрана.

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

4. Меню должны быть различимы и выделяться на фоне остальных графических элементов сайта. Если меню располагается в стандартном месте, то ему не требуется дополнительной визуализации. Если же на сайте используется активная графика (перетягивающая на себя внимание пользователя), меню располагается в нетипичном месте на сайте, тогда важно выделить меню, обеспечив достаточно пустого пространства элементам.

5. Используйте контрастный цвет для текста ссылок на кнопках меню. Дизайнеры часто игнорируют рекомендации по контрасту элементов на сайте. Использование близких оттенков затрудняет чтение и восприятие информации.

Даже те дизайнеры и оптимизаторы, которые знакомы и соблюдают все рекомендации, часто ошибаются и создают меню, которые непонятны, незаметны или нелогичны для пользователей. Асессоры GetGoodRank оценивают сайт с точки зрения обычного посетителя, который попадает впервые на сайт. Каждый сайт проходит несколько проверок разными пользователям, что обеспечивает объективность оценки.

Хлебные крошки

6. Пользователю важно знать, где он находится в настоящий момент, и к какому подразделу/разделу сайта относится страница, которую он изучает. Хлебные крошки помогают пользователю быстро выренуться в нужный раздел в один клик.

Оптимизируйте меню под пользователей

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

8. Облегчите чтение меню для пользователя. Для этого эксперты NNGroup рекомендуют выравнивать текст ссылок по левому краю и использовать ключевые слова в начале названий пунктов.

9. Для масштабных сайтов (каталоги, интернет-магазины) используйте мега-меню, показывающие пользователю с одного клика содержимое всех разделов подкатегорий. Это экономит силы и время пользователя.

10. Используйте локальные навигационные меню, чтобы предоставить пользователю быстрый доступ к подобным товарам или другому тематическому контенту.

11. Используйте в меню графические элементы. Человеческому мозгу требуется меньше времени на обработку и понимание изображения, чем на прочтение и интерпретацию текста.

Простота взаимодействия

12. Элементы меню должны быть достаточно большими, чтобы пользователь легко попал мышкой или тапнул на сенсорном экране. Элементы меню также должны быть расположены на достаточном расстоянии друг от друга во избежание случайных кликов.

13. Выпадающие списки должны быть оптимизированы под размер экрана. Если выпадающий список больше одного экрана и требует прокрутки, то это вызывает неудобство и усложняет поиск и выбор нужного раздела. Убедитесь, что выпадающие списки удобны во взаимодействии. Часто список скрывается, как только курсор мышки смещается за пределы меню. Это вызывает неудобства и раздражает пользователя. Выпадающий список также не должен перекрывать всю страницу и должен быть отличим от самой страницы. Иначе пользователь может подумать, что случайно попал на другую страницу.

14. Для длинных страниц закрепите меню вверху страницы. Пользователи, достигшие конца страницы, вынуждены скроллить страницу обратно вверх, чтобы перейти в другой раздел, если искомый контент не найден. Убедитесь, что закрепленное меню нормальное по размерам, не занимает много полезного пространства на экране и не отвлекает/не раздражает пользователя.

15. Оптимизируйте порядок элементов в меню. Если вы используете выпадающие списки, то в начале списка располагаются ссылки на наиболее популярные разделы. В горизонтальных меню наиболее искомые элементы располагаются слева, менее искомые — справа.

Выводы:

анализ сайтаНе существует единой формулы создания эффективного меню. Любое изменение элементов меню требует тщательного тестирования.

анализ сайтаGetGoodRank проверяет, насколько удобно меню для пользователя, насколько логично организованы элементы, насколько просто пользователь найдет необходимый пункт.

Добавить комментарий

Войти с помощью: 

Статьи по теме

мега меню
Статьи
Мега меню — зло или благо
Мега меню — тип меню на сайте или в приложение, открывающее по действию список доступны...
Уровень конверсии
Статьи
Уровень конверсии по бизнес-нишам: исследование Unbounce
Какой уровень конверсии оптимален для бизнеса? Ответ прост. Смотря для какого бизнеса. ...