Разочаровывающие шаблоны проектирования: мега-выпадающие меню при наведении курсора

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

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

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

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

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

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

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

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

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

Тем не менее, есть также множество других ситуаций, которые следует учитывать. Просто назвать несколько:

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

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

Задержка входа/выхода при наведении

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

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

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

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

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

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

Прощение путей движения мыши: треугольник траектории

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

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

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

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

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

Области выхода пути SVG

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

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

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

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

Подводные камни мега-выпадающих меню, открывающихся при наведении

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

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

Поиск прерывается мега-выпадающим списком

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

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

Несколько поднавигаций появляются с задержками

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

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

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

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

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

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

Названия категорий делают слишком много вещей

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

Есть несколько вариантов решения этой проблемы:

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

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

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

Mailchimp — хороший пример мега-раскрывающегося списка, который позволяет избежать большинства проблем, описанных выше, а заголовки категорий действуют только для открытия мега-раскрывающегося списка. Выпадающий список доступен для пользователей клавиатуры со стилем :focus . После выбора каждая категория выделяется как подчеркнутая , и некоторые люди могут предположить, что заголовок превратился в ссылку, особенно потому, что подчеркивание точно такое же, как и для ссылки «Цены» в верхней части навигации. Возможно, выделение его фоновым цветом было бы немного более пуленепробиваемым. Отличный справочный пример для всплывающих меню.

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

Разработка улучшенного мега-выпадающего списка: меню «Нажмите/щелкните»

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

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

Хорошим примером этого в действии является веб-сайт Еврейского музея в Берлине. Не только верхняя панель навигации открывает мега-выпадающие меню при касании и щелчке, но и навигация на боковой панели на основе значков. Кроме того, поскольку пользователь должен активно открывать/закрывать оверлей, мы можем выделить выбранную категорию с помощью стилей :focus / :active .

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

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

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

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

Если вы ищете техническую реализацию, вы можете проверить In Praise of the Unambiguous Click Menu, в котором Марк Рут-Вили показывает, как создать доступное меню щелчка. Идея состоит в том, чтобы начать создавать меню как меню наведения только на CSS, которое использует li:hover > ul и li:focus-within > ul для отображения подменю.

Затем мы используем JavaScript для создания элементов <button> , устанавливаем атрибуты aria и добавляем обработчики событий. Окончательный результат доступен в виде примера кода на CodePen и в виде репозитория GitHub. Это также должно стать хорошей отправной точкой для вашего меню.

Аккордеоны против оверлеев против разделенных меню на мобильных устройствах

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

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

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

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

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

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

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

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

Какой вариант работает лучше всего?

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

Есть несколько преимуществ , которые обеспечивают как аккордеоны, так и разделенные меню:

• Нет необходимости отображать кнопку «Назад», чтобы вернуться на родительскую страницу.
• Глазу не нужно прыгать между верхней частью навигационного меню и поднавигацией раздела при каждом переходе.
• Клиенты могут быстрее перемещаться между несколькими уровнями: вместо того, чтобы несколько раз нажимать «Назад», они могут переходить к аккордеону, который им интересен.
• Клиенты могут просматривать несколько разделов одновременно (если реализация автоматически не закрывает один аккордеон, когда другой был открыт). С накладками это невозможно.

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

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

Когда Mega-Dropdown может не понадобиться

Мы уже ссылались на работу команды Gov.uk в предыдущей статье, но их идеи также ценны в контексте мега-раскрывающихся списков. Для большой многоуровневой навигации команда решила использовать выводы эксперта по формам Кэролайн Джарретт по принципу «одна вещь на странице». По словам Кэролайн, «вопросы, которые естественно «сочетаются» с точки зрения дизайнеров […], не обязательно должны быть на одной странице, чтобы работать на пользователей». Кэролайн в первую очередь применила его к дизайну веб-форм, но мы могли применить его и в контексте навигации.

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

Kanton Zurich использует ту же схему. Вместо слоев мега-раскрывающейся навигации все параметры отображаются в структурированном виде, при этом основные темы отображаются вверху как «Основные темы», а навигация в каждом разделе отображается в виде закрепленной панели навигации вверху.

Альтернативный подход — использовать шаблон навигации «Я хочу» . В дополнение к обычной навигации мы могли бы предоставить «раскрывающийся список навигации», чтобы клиенты могли создавать навигационные запросы по своему выбору и направлять их прямо на страницу, которую они ищут. По сути, это серия раскрывающихся списков, которые появляются под другим, чтобы позволить пользователю выбрать, что он собирается делать или найти на веб-сайте.

Какое-то время шаблон использовался на Commonbond (см. видео выше), а также на Corkchamber.ie. Интересный, хотя и нетрадиционный способ предоставить доступ к глубокому уровню навигации без необходимости вообще использовать мега-выпадающий список.

Контрольный список дизайна Mega-Dropdown Navigation

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

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

И, как всегда, вот несколько общих моментов, о которых следует помнить при разработке и создании мега-раскрывающегося списка:

• Не размещайте важные, часто используемые элементы рядом с выпадающим меню навигации (например, панель поиска, призыв к действию, значок корзины покупок) (при наведении курсора),
• Избегайте нескольких поднавигаций в мега-раскрывающемся списке, появляющихся друг за другом с задержками (при наведении),
• Избегайте перегрузки заголовков категорий несколькими функциями.
• Подчеркните названия категорий, чтобы идентифицировать их как ссылки на страницу категории (конечно, если они связаны со страницей категории).
• Если можете, добавьте ссылку «Главная» или кнопку «Просмотреть все» в каждой подкатегории вместо прямой ссылки на категорию.
• Избегайте горизонтальных наложений и подумайте о замене их вертикальными аккордеонами и раздельными меню.
• Добавьте значок , указывающий, что заголовок категории вызывает мега-раскрывающийся список при нажатии (например, шеврон), и всегда делайте его достаточно большим для удобного нажатия (например, 50 × 50 пикселей).
• Избегайте длинных переходов нарастания/затухания при появлении/исчезновении мега-раскрывающегося списка (максимум 300 мс),
• Рассмотрите возможность тестирования структурированного руководства или навигационного запроса (шаблон навигации «Я хочу») вместо или в дополнение к мегараскрывающемуся списку.
• По возможности избегайте мега-выпадающих меню .