Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней

Кто «cъел» мой гамбургер?

1

Вас не будут считать «полноценным» UX дизайнером, пока вы не опубликуете свои взгляды на «≡», под псевдонимом «гамбургер-меню», а также под псевдонимом Side Drawer Menu или выдвижное меню!

Недавнее обновление приложения Youtube для Android, разработанное Google, побудило меня прыгнуть на подножку уходящего поезда и выразить свои мысли об этом интересном образце пользовательского интерфейса или UI.

«≡» называется «гамбургер-меню» за свое сходство с гамбургером – верхние и нижние линии, представляющие булочку и ее средняя линия, представляющая заполнение гамбургера.

– Википедия

Google переходит к вкладкам?

2
Google + и YouTube приложения (Android), раскрывающееся меню и вкладки соответственно
Google+ и YouTube приложения были изначально созданы по образцу Гамбургер-меню. Google+ перешел к раскрывающемуся списку в мае 2014 года. Затем, обновленное YouTube-приложение в июле 2015 заимствовало Гамбургер-меню и приняло общий вид, основанный на вкладке.

Туда и обратно!

Давайте посмотрим, кто еще раньше переключился на Гамбургер-меню и вернулся с альтернативной навигацией.

Facebook

Facebook Android и iPhone приложения с вкладками
Facebook Android и iPhone приложения с вкладками
Facebook по-прежнему использует значок Гамбургер-меню переименованный в правом углу в иконку «Дополнительно». Как всегда Android против iOS, панель вкладок находится либо в верхней части (Android) или снизу с метками (iOS).

Twitter

Twitter на Android и iPhone приложениях с вкладками
Twitter приложение для Android и iPhone с вкладками
Значки «Уведомления», «Сообщения…» на Android-панели (панели приложения) в iOS имеют вид панели вкладок. Android объединяет иконки действий включая иконку приложения Twitter, поместив ее по правому краю. Вкладки «Главная», «Поиск» в верхней части приложения Android показаны с помощью нумерации страниц в iOS.

Flipboard

Программа 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 со значком Гамбургер-меню в правом углу.
Интересно, что оба приведенных выше примера взяты из категории «кулинария»!

Использовать или не использовать? Вот в чем вопрос!

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

С другой стороны, если в вашей панели вкладок больше элементов, вы вынуждены использовать иконку «Дополнительно» в структуре Гамбургер-меню.

Самое лучшее решение в данном случае – это использовать комбинацию вкладок и Гамбургер меню (значок «Дополнительно»), размещенные в правом углу.

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

Что вы думаете о моем наблюдении касательно Гамбургер-меню? Что вы будете делать в следующий раз при проектировании приложения? Поделитесь своими мыслями ниже.

Перевод статьи

18 марта 2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".