Лого 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

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

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

0

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

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Fedor Skuratov
Combot

Да, после 12 декабря. Я постараюсь не забыть сюда линк скинуть.

«ЧатКвест» — инструмент для создания маркетинговых квестов в мессенджерах
0
Vladimir Shilo

Я продолжаю говорить о том, что из "сегодня" может быть сложно представить "завтра" таким, чтобы оно непротиворечиво укладывалось в голове.
//Вы же предлагаете представить мир, где доступ к ресурсам и технологиям обеспечивается... Даже не известно чем, это не оговорено в ее статье. По праву рождения?
Хоть бы и так. Пусть доступ обеспечивается избытком, созданным роботами.
//Но даже не это основная проблема, проблема: чем занимается человек?? Как живет и чувствует себя человек, когда ему не нужно чем-то заниматься? Для чего он живет? Что им движет жить?
Вы путаете "не нужно" с "не заставляют ради физического выживания".
Человеку многое нужно. Например, еще раз взглянуть на пирамиду Маслоу.
//Всю историю человека им постоянно что-то двигало (голод, жадность, стремление исследовать и менять мир) - и вдруг все это сразу отпадает. Нет смысла исследовать и менять мир, потому что отсутствует потребность закрывать базовые потребности, нет мерила измерения успеха (кроме лайков где-то в сети, если они будут, конечно). На чем держатся амбиции? Что толкает вставать каждый день и делать что-то для других? Чтобы.. что?? Сделать мир ...каким? Он уже приторно-идеален
В том и дело, что в фантазии этой датчанки подразумевается, что базовые потребности уже удовлетворены и не мешают удовлетворять потребности более высокого уровня - исследовать(уже чтобы понять) и менять мир, итд. Мерила успеха никуда не исчезли - все лайки тому, кто лучше разобрался в актуальном вопросе, сделал мир понятнее. Идеальный мир - не тот, где полно жрачки и за нее не надо вставать каждый день. Это мир, где каждый занимается тем, что ему нравится и захватывает. На пляже бухать ведь надоест, рано или поздно.
Мир слишком большой и интересный, чтобы сидеть на месте и связывать себя своим персональным домом, автомобилем и лапшерезкой. Достаточно иметь ко всему этому доступ в нужное время, в нужном месте. А цыган прогонят те же роботы.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Пользователь Удален

Да так же как с AWS. Оплата постфактум. Никто мешает подсунуть карту с 1 долларом. После выставления счета народ сливается и заводит новый аккаунт. Амазон это устраивает, видимо, издержки покрываются доходами

Онлайн-ритейлер Amazon показал офлайн-магазин без касс и продавцов
0
Андрей Викторович

мне кажется ещё не дорос рынок ((

Холдинг «Е-генератор» запустил сервис для добровольной оплаты контента «Микроподписки»
1
Александр Савинов

правозащитник и ЛГБТ-активист Тайлер Окли тоже удивил, у него даже больше подписчиков чем у Розанны. Всё-таки Запад -- это совсем другой мир.

PewDiePie сохранил лидерство в рейтинге самых высокооплачиваемых YouTube-блогеров по версии Forbes
1
Показать еще