Что такое мега-меню — и почему оно не должно открываться мгновенно

Ведёшь мышь от пункта меню к нужной ссылке в выпавшей панели. Путь идёт по диагонали — и по дороге курсор задевает соседний пункт. Панель тут же сменилась на чужую. Ссылка, к которой ты тянулся, исчезла. Начинай заново.

У этой досады есть имя: диагональная проблема. А Amazon когда-то решил её геометрией — воображаемым треугольником. Разберёмся, что такое мега-меню и как сделать, чтобы оно не играло с человеком в прятки.

Что такое мега-меню

Это большая выпадающая панель, в которой разделы сайта разложены не столбиком, а по площади. Исследователи юзабилити из Nielsen Norman Group описывают его так:

• большая двумерная панель, поделённая на группы;
• порядок задают раскладка, шрифты, иногда иконки;
• всё видно сразу, без прокрутки;
• открывается по наведению, клику или касанию.

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

NN/g по итогам тестов с пользователями прямо пишет: мега-меню хорошо работает для навигации по сайту.

Чем оно лучше обычного выпадающего списка

У обычного списка на большом сайте три беды.

1. Он прячет большую часть пунктов. Надо прокручивать. А при прокрутке исчезает верх, и сравнивать варианты приходится по памяти.
2. В нём нет нормальных групп. Разве что отбивать подпункты пробелами.
3. В нём только текст. Картинку товара или выделение главной ссылки размером туда не вставишь.

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

Как оно должно открываться: полсекунды и треугольник

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

NN/g советует такой тайминг:

1. Курсор должен замереть на пункте на 0,5 секунды.
2. Если он всё ещё там — показать панель быстрее чем за 0,1 секунды.
3. Держать панель, пока курсор не пробудет вне пункта и панели полсекунды.
4. Потом убрать — снова быстрее чем за 0,1 секунды.

Без паузы меню мерцает от каждого движения мыши. Но пауза сама по себе не лечит диагональ. Быстрый человек проскочит соседний пункт за доли секунды. А медленный, например пожилой, не успеет — панель сменится у него под рукой.

Тут и пригодился трюк Amazon. Разработчик Бен Каменс разобрал его в 2013 году. Вместо задержки меню следит за направлением курсора. Мысленно рисуется треугольник: от курсора к верхнему и нижнему углам открытой панели. Пока мышь движется внутри треугольника, человек, видимо, идёт в панель — и она остаётся. Вышла мышь за треугольник — пункт переключается мгновенно.

Меню ощущается быстрым и не теряет панель на диагонали. Каменс даже выложил это плагином jQuery-menu-aim.

Если собираешь меню с ИИ, есть путь проще: открывай по клику, а не по наведению. Клик — самый ясный сигнал намерения. Диагональной проблемы нет вовсе, а на тачскрине и с клавиатуры наведения всё равно не бывает.

Доступность и маленький экран

• Разметка. W3C строит навигацию сайта на паттерне «раскрытие»: у каждого раздела настоящая кнопка с aria-expanded, внутри — обычный список ссылок, а Esc закрывает панель. Роль menu для этого не нужна.
• Экранная лупа. Человек с лупой видит только кусок широкой панели и думает, что это всё. Лёгкую тень у правого края он не заметит. Не делай панель шире, чем нужно.
• Никаких форм внутри. NN/g против полей и кнопок в мега-меню. Особенно против поиска: он должен быть виден всегда, а не только в открытой панели.
• Телефон. На узком экране мега-меню превращается в разделы, которые раскрываются по касанию. Как перестраивать шапку под мобильные — в гайде как сделать сайт удобным на телефоне.

Мешает ли мега-меню поиску Google?

Если внутри панели обычные ссылки <a href>, которые есть в HTML сразу, робот их видит. Проблема появляется, когда ссылки подгружаются скриптом только при наведении: робот не наводит мышь. Подробнее — в статье что такое SEO.

Сколько групп делать в мега-меню?

Среднее количество. NN/g против гигантских групп, которые долго читать, и против россыпи крошечных. Подписи короткие, главное слово — первым, а каждый пункт появляется в меню только один раз.

Открывать по наведению или по клику?

Для новичка — по клику: так проще, надёжнее и доступнее. Наведение оправдано, если сделаешь паузу около полсекунды и защиту от диагонали. Без них лучше не пробовать.