Почему мегаменю – идеальное решение для сайта с множеством категорий

17 май

Время чтения: 10 минут

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

Большое пространство меню состоит из сгруппированных категорий.
Навигация внутри мегаменю организована с помощью способа расположения категорий, типографики и (в некоторых случаях) иконок.
Все категории на виду, пользователю не нужно их пролистывать.
Мегаменю может раскрываться из верхней части страницы или из левой стороны – зависит от расположения активирующей ссылки/кнопки.
Категории мегаменю (как и само мегаменю) активируются при клике или наведении курсора на ссылку или кнопку.

Мегаменю на сайте daveramsey.com объединяет категории в пять отдельных групп.

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

Пример неудачной организации пространства мегаменю – разделение групп визуально не проработано.

На сайте moleskine.com мегаменю дополнено изображениями продуктов, улучшающими разделение и идентификацию категорий.

Почему мегаменю работают?

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

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

Мегаменю и тайминг

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

1. Пользователь не собирается открывать мегаменю и двигается к другому элементу, «задевая» курсором кнопку меню.

2. Пользователь хочет увидеть меню.

Разделить эти два намерения можно с помощью правильно установленного тайминга. Отклик элемента, выводящего меню, должен составлять не меньше 0,5 секунды, иначе меню будет появляться при случайных наведениях курсора, выводя пользователей из себя. В то же время, задержка на кнопке или ссылке меню, превышающая 0,5 секунды, с большой вероятностью говорит о желании пользователя увидеть меню.

Советы по настройке тайминга для мегаменю можно объединить в три правила:

1. Отклик на наведение курсора с задержкой в полсекунды.

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

3. Убирать меню следует также с задержкой в 0,5 секунды после того, как курсор покинет пространство меню. Исчезнуть меню также должно за 0,1 секунды.

Примечание. В идеальном случае сайт должен распознавать намерение пользователя перевести курсор от ссылки, открывающей меню, к какой-либо категории внутри самого меню – в процессе такого движения курсор может покидать активную зону меню. При этом меню не должно исчезать (т.н. «диагональная проблема»).

Группировка категорий

Основные принципы:

Категории должны быть выделены в различные группы по очевидным и понятным пользователю критериям.
Объединяя категории в группы, руководствуйтесь здравым смыслом – объемные группы с большим количеством категорий также тяжелы для восприятия, как и множество небольших групп. Придерживайтесь среднего уровня разбиения категорий на группы.
Наименования групп должны быть краткими, но содержательными. Желательно, чтобы наименование начиналось со слова, являющегося наиболее ценным в информационном плане. Кроме того, стоит избегать слов, малопонятных для пользователя.
Порядок размещения групп также должен быть подчинен определенной логике – к примеру, наиболее значимые или популярные группы стоит размещать в верхней левой части меню.
Категории не должны повторяться – это вызывает растерянность у пользователя и занимает ценное пространство.

Чем проще – тем лучше

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

Accessibility

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

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

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

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

Повысить доступность меню можно двумя способами:

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

2. Серьезно доработать сайт, задействовав jQuery и его возможности по использованию экранного доступа в мегаменю. В этом случае придется внести изменения в HTML и CSS.

Выводы

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