5 альтернатив меню-«гамбургеру» на смартфонах и кейсы их применения09.11.2016 18:52

«Если вы работаете над цифровыми продуктами, то наверняка прочли десятки статей о том, как и почему меню-«гамбургер» вредит пользовательскому опыту на мобильных устройствах из-за его непонятности и неэффективности. Всё больше и больше проектов экспериментируют с альтернативными вариантами представления меню», — пишет Золтан Коллин.

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

1. Вкладки

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

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

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

2. Вкладки с вариантом «Другое»

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

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

«Кажется, что такой вариант не лучше, чем меню-«гамбургер», однако если подобрать вкладки таким образом, чтобы почти вся необходимая пользователю информация находилась в первых четырёх разделах, UX почти не пострадает», — объясняет Коллин.

3. Разворачивающееся меню

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

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

4. Прокручивающееся меню

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

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

При этом дизайнерам следует убедиться, что пользователям ясно, как применять прокрутку — и установить визуальные подсказки. Например, применить эффект «выцветания» для последнего элемента.

5. Выпадающее меню

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

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

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