Мега меню — зло или благо

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

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

Мега-меню имеют следующие характерные черты:

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

пример мега меню

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

мега меню пример 2

Пример мега-меню на сайте Nova Scotia показывает категории, каждая из которых имеет свой графический элемент в заглавии. Это не самое удачное решение, в данном случае измененные шрифты, а также разные цветовые решения для категорий воспринимались бы лучше. Альтернативным решением для картинок каждой из категорий в данном меню становятся тематические схематические иконки, четко отражающие тему каждой из категорий. Они легче считываются при беглом просмотре.

мега меню пример 3

Пример сайта Moleskine показывает, как графическая визуализация категорий упрощает восприятие тематических категорий.

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

Почему мега-меню лучше стандартных выпадающих списков

Результаты тестирования мега-меню показали, что пользователи положительно воспринимают такой тип навигации:

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

Мега-меню по наведению мышки

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

  • он просто передвигает курсор и траектория движения мышки пересекается с кнопкой, за которой скрывается мега-меню
  • пользователь действительно хочет открыть мега-меню

В первом случае срабатывание и раскрытие мега-меню ухудшит пользовательский опыт, тогда как во втором случае важно своевременно открыть меню. Как понять, что хочет пользователь? Решение простое:

  • для срабатывания мега-меню должно быть выполнено условие — курсор мышки должен задержаться на навигационном элементе более 0,5 секунды.
  • если условие выполнено, то мега-меню должно открыться за 0,1 секунды
  • меню должно быть открыто, пока курсор мышки находится в поле меню
  • после того, как пользователь вывел курсор за пределы меню, оно должно исчезнуть в течение 0,1 секунды

Если эти условия не выполняются, пользовательский опыт станет просто невозможным, так как постоянно появляющиеся списки вызовут раздражение.

Что важно помнить при создании мега-меню

  • Правильная группировка элементов — следует избегать чрезмерной детализации, чем больше элементов будет доступно к просмотру, тем сложнее пользователю будет ориентироваться в предложенном наборе опций. Рекомендуем вспомнить о проблеме выбора в теории Барри Шварца.
  • Название каждой группы элементов должно четко называть тематику или описывать группу элементов в данной группе
  • Соблюдайте простоту — в одно мега-меню можно поместить всю структуру сайта, но надо ли?
  • Помните о доступности для скринридеров — динамические элементы всегда сложны для интерпретации и взаимодействия для пользователей с проблемами зрения, двигательной активности.
  • Задача мега-меню — упрощение навигации, мега-меню должно четко структурировать тематическую информацию, помещаться в пределах одного экрана, по наведению на пункт или подпункт меню не должно появляться дополнительных выпадающих списков.

Выводы:

анализ сайтаЛюбое нововведение на сайте требует тщательного А/В тестирования.

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

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

 

Источник

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

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

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

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