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

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

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

Вкладки

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

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

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

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

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

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

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

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

Пример Facebook

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

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

Пример ВВС

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

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

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

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

Примеры Medium и Google

 

Заключение

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