- Статьи
- 3 мин на чтение
- 26
Как упростить запутанное мегаменю из 65 пунктов
Создайте более эффективную навигацию
Как бы вы спроектировали меню для сложного сайта со множеством категорий и подкатегорий? Большинство дизайнеров используют мегаменю, которое отображает все пункты в виде большого, подробного списка. Однако такой подход не так удобен для пользователей, как может показаться.
Для наглядности, ниже вы видите мегаменю, которое содержит 8 категорий, включающих 65 пунктов. Попробуйте найти в нём пункт «Speakers» и обратите внимание, сколько времени это займёт.
Скорее всего, вы потратили больше времени и усилий, чем ожидали. Вероятно, вы просмотрели несколько списков, пока наконец не наткнулись на нужный пункт. Мегаменю — запутанны и трудны в использовании, потому что они требуют слишком много времени на сканирование.
Не заставляйте пользователей просматривать множество списков, чтобы найти нужный пункт. Вместо этого спроектируйте меню так, чтобы люди сначала сканировали категории, а потом — список. В результате вы уберёте избыточное сканирование и сделаете акцент на отображении актуальных пунктов.
Для этого существует шаблон дизайна под названием «меню со вкладками». Он позволяет скрывать неактуальные списки и пункты до тех пор, пока пользователь не щёлкнет по вкладке. Каждая вкладка представляет собой категорию, которая расположена горизонтально, а снизу находится список пунктов.
Важно подчеркнуть, что строка вкладок содержит категории. Для этого можно использовать чипы, которые немного контрастируют с фоном. Выбранный чип сделайте более тёмным, линию, подчёркивающую слово, — яркой, а текстовое название — белым.
Преимущество такого подхода в том, что вы можете сделать вкладки наглядными с помощью иконок. Это сокращает время на чтение и позволяет пользователям быстрее распознавать категории.
Решение об использовании иконок зависит от того, реальные ваши пункты или абстрактные. Легко подобрать иконки для меню «Electronics», потому что эти товары — реальные. Однако иногда могут встречаться более абстрактные вещи, поэтому используйте визуальные вкладки с иконками только тогда, когда есть такая возможность.
Ещё одно преимущество применения меню со вкладками — больше горизонтального пространства. Ваш список пунктов может не заполнять его полностью, поэтому появляется дополнительное место для того, чтобы прорекламировать или выделить особый товар.
В меню «Electronics» список товаров находится слева, а рекламный баннер — справа. Реклама показывает скидки на технику, которые могут заинтересовать пользователей. Включение этого специального пункта в список усложнило бы его поиск и снизило коэффициент кликабельности. А его размещение вне списка позволяет большему числу пользователей увидеть и кликнуть по нему.
Вы также можете использовать это дополнительное пространство для навигации с помощью фильтров. Например, список фильтров «Shop by Brand» находится справа. Там пользователи могут выбирать камеры по названию бренда. Вместо того, чтобы переходить на страницу конкретного товара и выбирать фильтр, они могут сразу перейти на отфильтрованную страницу из меню.
Ещё один важный момент — меню со вкладками намного короче по длине, чем мегаменю. В результате оно не закрывает всю страницу, и текущий контекст остаётся видимым.
Если все категории не помещаются в строке вкладок, возможно, вам придётся создать в меню карусель. Разместите стрелки раскрытия по бокам строки, чтобы пользователи могли горизонтально прокручивать и видеть другие вкладки.
Мегаменю перегружают и путают пользователей, потому что отображают слишком много пунктов одновременно. Если у вас большой и сложный сайт, рассмотрите вариант создания меню со вкладками, чтобы люди могли без труда ориентироваться на сайте.
Перевод статьи How to Simplify a Confusing 65 Item Mega Menu из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
