Мега меню! Как не разочаровать пользователей?

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

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

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

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

1. Почему выпадающие мега-меню разочаровывают пользователей?

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

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

Обычно мы исследуем такие сценарии:

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

Однако есть и другие ситуации, которые следует учитывать. Вот некоторые из них:

1. Пользователь хочет просматривать опции в выпадающем мега-меню и одновременно вводить текст в поле поиска с функцией автозаполнения. Для этого необходимо либо постоянно открывать выпадающее мега-меню, либо использовать две расположенные рядом вкладки в браузере.
2. Пользователь использует трекпад (или мышь) для управления большим дисплеем, поэтому движения курсора будут медленными, резкими и неточными. В этом случае выпадающее мега-меню будет случайно раскрываться каждый раз, когда пользователь задерживается в какой-либо точке на пути к CTA (кнопке призыва к действию) или корзине покупок в верхней части страницы.
3. Пользователь хочет открыть страницу определенной категории товара. Для этого он наводит курсор мыши на соответствующую ссылку и нажимает на нее. Может произойти так, что элементы интерфейса начнут мигать, поскольку выпадающее мега-меню появляется с задержкой.
4. Если выпадающее мега-меню включает вложенные подменю, а пользователь хочет изучить похожие опции внутри категории, которая у него открыта в данный момент, то из-за вложенности ему придется открывать мега-меню и наводить курсор на одни и те же элементы навигации снова и снова.
5. Если вы, например, хотите изменить размер окна и как только перемещаете курсор к правому его краю, появляется выпадающее меню. Это происходит потому, что курсор мыши оказался слишком близко к нему.
6. Пользователь начинает медленно прокручивать страницу вниз, чтобы просмотреть контент, однако меню продолжает появляться. А каждый раз, когда пользователь смещает курсор, чтобы прочитать содержимое выпадающего меню, оно исчезает.

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

2. Задержка при наведении курсора

Самое распространенное решение этой проблемы — предусмотреть задержку при наведении курсора. Необходимо убедиться, что меню открывается и закрывается не слишком быстро. Для этого нужно добавить задержку, обычно около 0,5 секунды. Это означает, что мы предоставляем пользователям паузу продолжительностью около 0,5 секунды, чтобы:

• При необходимости переместить курсор к необходимой цели;
• Продемонстрировать, что они планируют дальше изучать навигацию, оставаясь на соответствующей ссылке выпадающего мега-меню;
• Исправить ошибку, если они случайно переместили курсор за границы выпадающего мега-меню.

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

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

На сайте ADAC.de выпадающее меню постепенно появляется с задержкой 100 мс и исчезает с задержкой 300 мс. Это может быстро начать раздражать людей, которые часто его используют.

Иногда разработчики добавляют эффект постепенного появления/исчезновения, чтобы выпадающее меню возникало на экране не слишком резко, но на практике это приводит к увеличению задержки до 0,8-0,9 секунд. Пример такой реализации можно увидеть на сайте ADAC.de, где выпадающее меню плавно появляется с задержкой 100 мс и исчезает с задержкой 300 мс. (Эта задержка отсутствует, если пользователь переключается между разными категориями внутри раскрывающегося меню).

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

3. Свободная траектория перемещения курсора мыши: метод треугольника

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

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

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

Крис Койер разбирает некоторые технические тонкости реализации этой идеи в своем посте “Выпадающие меню с более свободной траекторией перемещения курсора мыши”, кроме того стоит обратить внимание на демо “Меню с учетом цели” Александра Попова с решением, созданным на ванильном JavaScript.

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

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

Можно усовершенствовать этот метод с помощью SVG-областей перемещения курсора.

4. SVG-области перемещения курсора

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

Решение Хакима является отзывчивым (адаптивным), поэтому, если подменю не будет умещаться на экране, оно отобразится рядом с элементом основной навигации в полную ширину или высоту. При прокрутке страницы вертикально или горизонтально — SVG-область будет пересчитана соответственно. На видео ниже продемонстрирована работа данного метода на практике (Хаким показывает режим отладки паттерна меню).

Каким образом вычисляются SVG-пути. Отрывок из фантастического выступления Хакима на конференции “Разработка лучших интерфейсов”.

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

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

5. Проблемы мега-меню, раскрывающихся при наведении курсора 

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

Появление выпадающего меню мешает пользователю осуществлять поиск

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

Важно предусмотреть достаточно продолжительную задержку при наведении курсора на элементы навигации. Иначе оверлей с выпадающим меню всегда будет препятствием для осуществления поиска и просмотра его результатов. Пример тому продемонстрирован на сайте Thesaurus.com, что показано в видео ниже. Каждый раз, при попытке пользователя переместить курсор мыши из поля поиска к результатам (и обратно), ему мешает выпадающее меню.

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

Несколько подменю, появляющихся с задержкой

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

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

В приведенном выше примере используется 4 уровня навигации, расположенных друг под другом. При этом 2 из них открываются при наведении курсора с задержкой в 300 мс. Поскольку название каждой категории является еще и ссылкой на соответствующую страницу, пользователи могут сразу перейти на нее. Однако после нажатия на нужную ссылку, во время ожидания появления новой страницы выпадающее меню на короткое время будет показано не полностью. А в силу недостатка времени пользователи могут так и не узнать, как оно должно было выглядеть.

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

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

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

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

• само меню будет немного больше;
• элементы внутри него можно оформить в виде колонок;
• попробуйте расположить опции внутри каждой категории в форме обычной навигационной панели (боковой или липкой верхней). 

Такой подход чаще всего устраняет все перечисленные проблемы.

Названия категорий выполняют слишком много функций

Иногда названия категорий выполняют сразу две разные функции:

• заголовок функционирует как ссылка, нажав на которую пользователи попадают на нужную им страницу;
• заголовок открывает оверлей с выпадающим мега-меню.

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

Существует несколько способов решить эту проблему:

1. Чтобы пользователям было проще понять, что название категории является ссылкой, было бы полезно подчеркнуть его;
2. Чтобы заголовок был более четко отделен от выпадающего меню, добавьте вертикальный разделитель (например, линию) или иконку (“шеврон”);
3. Оставьте названию категории лишь функцию открытия выпадающего мега-меню, и добавьте ссылку разделу “Главная страница” внутри оверлея. Это также может быть выделяющаяся кнопка “Посмотреть все опции” (см. пример The Guardian выше). 

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

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

На сайте Mailchimp представлен отличный пример выпадающего мега-меню, у которого нет большинства описанных выше недостатков, а названия категорий выполняют лишь одну функцию — открывают выпадающее меню. Навигация доступна для пользователей, которые взаимодействуют с сайтом при помощи клавиатуры (используется CSS-псевдокласс :focus). Выбранные категории выделяются подчеркиванием, из-за чего некоторые люди могут предположить, что название представляет собой ссылку, хотя это не так. Еще больше сбивает с толку то, что настоящая ссылка “Цены”, входящая в основную навигацию, обозначена точно таким же подчеркиванием. Возможно, было бы более логично менять цвет фона выбранной категории. В любом случае это отличный пример, который можно использовать при создании аналогичного