Вас не будут считать «полноценным» UX дизайнером, пока вы не опубликуете свои взгляды на «≡», под псевдонимом «гамбургер-меню», а также под псевдонимом Side Drawer Menu или выдвижное меню!
Недавнее обновление приложения Youtube для Android, разработанное Google, побудило меня прыгнуть на подножку уходящего поезда и выразить свои мысли об этом интересном образце пользовательского интерфейса или UI.
«≡» называется «гамбургер-меню» за свое сходство с гамбургером – верхние и нижние линии, представляющие булочку и ее средняя линия, представляющая заполнение гамбургера.
– Википедия
Google переходит к вкладкам?
2
Google + и YouTube приложения (Android), раскрывающееся меню и вкладки соответственно
Google+ и YouTube приложения были изначально созданы по образцу Гамбургер-меню. Google+ перешел к раскрывающемуся списку в мае 2014 года. Затем, обновленное YouTube-приложение в июле 2015 заимствовало Гамбургер-меню и приняло общий вид, основанный на вкладке.
Туда и обратно!
Давайте посмотрим, кто еще раньше переключился на Гамбургер-меню и вернулся с альтернативной навигацией.
Facebook Android и iPhone приложения с вкладками
Facebook Android и iPhone приложения с вкладками
Facebook по-прежнему использует значок Гамбургер-меню переименованный в правом углу в иконку «Дополнительно». Как всегда Android против iOS, панель вкладок находится либо в верхней части (Android) или снизу с метками (iOS).
Twitter на Android и iPhone приложениях с вкладками
Twitter приложение для Android и iPhone с вкладками
Значки «Уведомления», «Сообщения…» на Android-панели (панели приложения) в iOS имеют вид панели вкладок. Android объединяет иконки действий включая иконку приложения Twitter, поместив ее по правому краю. Вкладки «Главная», «Поиск» в верхней части приложения Android показаны с помощью нумерации страниц в iOS.
Программа Flipboard приложение с вкладками на Android и iPhone
Программа Flipboard приложение с вкладками на Android и iPhone
«Вложенные вкладки» в версии Android. Вы заметили название страницы «Читать» в iOS? Значок вкладки служит той же самой цели в Android приложениях.
Airbnb
Приложение Airbnb для Android и iPhone вкладками
Приложение Airbnb для Android и iPhone с вкладками
Значки действий на Android панели действий сгруппированы в два, с левым выравниванием. Панель вкладок iOS не поддерживает такое группирование.
9GAG
Приложение 9GAG для Android и iPhone с вкладками
Приложение 9GAG для Android и iPhone с вкладками
Это интересно! Вы когда-нибудь видели панель вкладок в Android приложении, заполненную ярлыками, как стандартный iOS? Кроме того, значок Гамбургер-меню превратилось в «Дополнительно», как в Facebook.
Кнопка «назад» на домашней странице
LinkedIn Android-приложение с кнопкой «назад» на главной странице (слева). Она служит в качестве значка Гамбургер-меню, раскрывая секцию меню (справа)
LinkedIn Android-приложение с кнопкой «назад» на главной странице (слева). Она служит в качестве значка Гамбургер-меню, раскрывая секцию меню (справа)
По неизвестным человечеству причинам, приложение LinkedIn Android просто заменило значок Гамбургер-меню иконкой «назад».
Это, вероятно, хитрый трюк, чтобы обмануть пользователя. Я думаю, что это новшество дает шанс обнаружить элементы в секции меню, в то время как пользователь отчаянно пытается «вернуться» к домашней странице.
Право есть право!
В большинстве приложений иконка Гамбургер размещена в левом углу. Это создает неудобства, особенно, если вы пытаетесь получить доступ к меню, находясь на какой-либо странице, глубоко в структуре. Поэтому, вы будете часто видеть значок «назад» в левом углу вместо иконки Гамбургер.
Есть решение?
Reverb News
Для Reverb News iPad приложение использует значок «домашняя страница» в левом углу. Рядом с ним находится иконка «реверберация новостей»
Для Reverb News iPad приложение использует значок «домашняя страница» в левом углу. Рядом с ним находится иконка «реверберация новостей»
Для реверберации новостей iPad-приложение всегда отображает значок «домашняя страница» в левом углу. Если вы находитесь внутри раздела, кнопка «назад» располагается в непосредственной близости от «домашней страницы». Это не практично в телефонах, так как пользователь может ошибиться и нажать значок «домашняя страница», вместо «назад».
Рецепты Джейми Оливера
Рецепты Джейми Оливера в iOS-приложении со значком Гамбургер-меню в правом углу
Рецепты Джейми Оливера в iOS-приложении со значком Гамбургер-меню в правом углу
Перемещение значка Гамбургер-меню в правый угол помогает нам отобразить иконки «назад» и «меню» вместе на одном экране. Рецепты Джейми Оливера в iOS-приложении и приложение Epicurious iPhone приведены в качестве примеров.
Epicurious
iPhone приложение Epicurious со значком Гамбургер-меню в правом углу.
iPhone приложение Epicurious со значком Гамбургер-меню в правом углу.
Интересно, что оба приведенных выше примера взяты из категории «кулинария»!
Использовать или не использовать? Вот в чем вопрос!
Гамбургер-меню экономит место на экране, где содержание обычно занимает много места. Возникает вопрос, сохраняются ли поисковые возможности такого меню, если вместо вкладок используется значок Гамбургер.
С другой стороны, если в вашей панели вкладок больше элементов, вы вынуждены использовать иконку «Дополнительно» в структуре Гамбургер-меню.
Самое лучшее решение в данном случае – это использовать комбинацию вкладок и Гамбургер меню (значок «Дополнительно»), размещенные в правом углу.
Если мы используем вкладки, пользователи всегда будут знать, где они находятся и куда они могут пойти. Они обнаружат больше функций в значке «Дополнительно».
Что вы думаете о моем наблюдении касательно Гамбургер-меню? Что вы будете делать в следующий раз при проектировании приложения? Поделитесь своими мыслями ниже.
Перевод статьи
