28 августа 2017

Смерть от гамбургера

Почему три маленькие линии вредят вашему UX

Ааа, меню «гамбургер»

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

А что, если я не права? Нужно разобраться.

Взвесим “за” и “против”

Меню «гамбургер» — отличный ход, потому что оно экономит место на экране. Результат — простой и чистый дизайн. С другой стороны, пользователи вынуждены совершать больше манипуляций, чтобы перемещаться между разделами приложения. Следовательно, взаимодействие требует больше усилий. Хотя «гамбургер» может визуально упростить дизайн, он усложняет приложение с точки зрения структуры, потому что скрывает информацию за тремя маленькими линиями, которые не дают никакого намека на информацию.

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

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

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

Живые примеры: когда это приемлемо, а когда — нет

Давайте подробнее рассмотрим плюсы и минусы различных решений мобильной навигации.

Навигация по вкладкам FitBit, закрытые и расширенные

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

Мобильное приложение Twitter, вид «Главная» (слева) и «Моменты» (справа)

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

Uber (слева) использует меню «гамбургер»; Lyft (справа) использует вашу иконку профиля

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

Приложение Amazon с меню «гамбургер», закрытым и открытым.

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

Текущее мобильное приложение eBay (слева) использует навигацию по вкладкам, отказываясь от меню «гамбургер», как было в версии 4.0 их приложения (справа).

eBay, также как и Amazon, продает немереное количество вещей. Хотя их мобильное приложение и использовало когда-то меню «гамбургер», их последнее обновление отказалось от него в пользу панели вкладок. Мне было бы интересно узнать аналитику и мнения пользователей, которые привели к этим изменениям, и насколько текущий дизайн эффективней предшественника.

Кстати, существует множество примеров меню «гамбургер» и его вариаций, про которые можно узнать  в посте Люка Вроблевски.

Заключение

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

И, в поддержку этой мысли, я завершу статью своим любимым аргументом в области дизайна: «Но ведь крупная компания XYZ делает это.»

И что? Дизайн команда в любой крупной компании состоит из людей, таких же как вы и я, которые имеют дело с техническими ограничениями, бизнес-целями, и руководителями, которые принимают окончательное решение. Люди могут ошибаться. Они пытаются во всем разобраться, так же, как и мы.

Прокладывайте свой собственный путь. Ставьте все под сомнение.

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

31 мая 2018

AIC Design Day 19 мая 2018 года: Все видео и презентации

aic

9 ноября 2018

Почему стоит проводить презентации проектов лично

18 апреля 2020

Редизайн сайта Банка России

aic

15 ноября 2016

Основные тренды дизайна 2016

17 сентября 2018

Любовь живет три года. Дизайнер — только два

22 октября 2019

Новый сайт банка «Возрождение»

aic