Лого vc.ru

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

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

Дизайнер Золтан Коллин опубликовал в своём блоге на Medium материал, в котором предложил пять альтернатив меню-«гамбургеру» для организации навигации в мобильном приложении. Редакция vc.ru публикует адаптированный перевод заметки.

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

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

1. Вкладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

Теги

Гамбургер хорош всем, кроме конверсии. Ну и iOS юзеры давно приучены к таббару

Гамбургер и вкладки из одного теста -- навигации. И тут нужно сочетать практичность, количество контента, функциональность и использовать с умом навигацию. В одном варианте практичнее будут вкладки, в другом гамбургеры и иные всплывающие панели, а в третьем --граммотная комбинация.
Секрет в том, что нужно делать с умом!

Для исследования в статье маловато цифр (их нет), выводов тоже нет. Если уж даётся альтернатива чему-то, тогда надо пояснить преимущества/недостатки предлагаемой альтернативы.

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

Всё больше и больше проектов экспериментируют с альтернативными вариантами представления меню», — пишет Золтан Коллин

и предлагает варианты которым от 5 до 15 лет, и о которых знает любой начинающий дизайнер. какой умный Золтан

Показали бы что-то новенькое...

А пока типичный процесс выбора навигации по приложению:

- А может табы?
- Блин, нет - слишком много пунктов, не влезут...
- Ну ок, тогда боковое меню.

Особенно несознательные применяют сразу и то, и то.

0

Вот поэтому "гамбургер" и популярен, раз есть такие альтернативы.

«Гамбургер» не катит совсем, это как комната куда можно сложить весь не нужный хлам. Основные возможности всегда должны быть в «одном клике».

Значит лезть в сабменю выпадающее - это один клик, а гамбургер - это больше?)

0

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

Огорчен конечно.
4 из 5 альтернатив - табы в том или ином виде.
Думал что подчеркну, что нибудь новое для себя...

"4. Прокручивающееся меню
При этом дизайнерам следует убедиться, что пользователям ясно, как применять прокрутку — и установить визуальные подсказки."
Вот так вот из джифки на vc я и узнал, что оказывается в google now прокручивающееся меню в поиске. Ничего не скажешь, отличный UI.

0

Стрелочек хватает обычно)

0

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

0

Панорама из Метро от микрософта, самая удачная навигация, но что то пошло не так.

0

немного истории:

Иконка была придумана дизайнером Нормом Коксом для первого в мире компьютера с графическим пользовательским интерфейсом Xerox Star, вышедшего в 1981 году. По его словам, он хотел создать простое, чёткое, функционально запоминающееся изображение, которое было бы похоже на список.

0

Капитан Золтон!

Прямой эфир
Узнавайте первым важные новости
Подписаться