Альтернативы гамбургер-меню для мобильной навигации
Веб-дизайн 1 Комментарий

Альтернативы гамбургер-меню для мобильной навигации

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

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

Надо сказать, что ни одно из представленных в этой статье решений не является на 100% оптимальным. Их использование зависит от типа сайта, его тематики, контента и т.д.

Вкладки.

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

гамбургер-меню для мобильной навигации

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

  • Меню должно содержать не более 5 пунктов;
  • Одна из вкладок всегда должна быть активна и выделена визуально;
  • Первая вкладка должна везти на главную страницу, остальные же должны располагаться в порядке приоритета;
  • Вкладки могут располагаться как на верху, так и внизу страницы;

Примеры Linkedin и Google Photos:

гамбургер-меню для мобильной навигации

Вкладки с опцией «еще» («more»).

В случае, если пунктов меню больше 5, хорошим решением является меню, где показано 4 главных пункта, а все остальные скрыты в пункте «Еще» («Дальше» и т.д.)

гамбургер-меню для мобильной навигации

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

гамбургер-меню для мобильной навигации

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

Пример Facebook

гамбургер-меню для мобильной навигации

Постепенно расширяемое меню.

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

гамбургер-меню для мобильной навигации

Пример ВВС

гамбургер-меню для мобильной навигации

Прокручиваемое меню.

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

гамбургер-меню для мобильной навигации

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

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

Примеры Medium и Google

гамбургер-меню для мобильной навигации

гамбургер-меню для мобильной навигации

Заключение.

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



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Один комментарий для “Альтернативы гамбургер-меню для мобильной навигации

Добавить комментарий