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

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

27 августа 2017

Время UX-писателей

14 сентября 2016

Дуплекс в веб-дизайне: обзор цветового тренда, который захватывает мир

21 июня 2016

Что такое digital transformation и почему современному бизнесу нельзя игнорировать этот тренд?

11 октября 2016

Allo – первые впечатления

21 июня 2016

Бихевиористский подход к дизайну

5 июля 2016

Будущее брендинга — это дебрендинг