Многие любят хороший гамбургер, одно из самых популярных блюд в мире. Таким же популярным оказалось и гамбургер-меню в мире дизайна, и сегодня я хочу обсудить с вами именно его.
История гамбургер-меню
Гамбургер-меню спроектировал Норм Кокс для Xerox Star, первого в мире графического интерфейса. Норм является сооснователем Cox & Hall и работает консультантом по дизайну пользовательского опыта и взаимодействия с 1982 года. Для того же интерфейса он создал иконку с документом. Правда, после Xerox Star иконка на какое-то время исчезла.
Зато гамбургер-меню восстало из мертвых, когда дизайнерам пришлось придумывать способ вместить все нужное в 4-дюймовый экран смартфона. Хотя сейчас невозможно определить, какое приложение начало использовать эту иконку первым, но точно гамбургер-меню уже используется достаточно много лет. Многие приложения используют эту навигацию, хотя вокруг гамбургер-меню ведется много споров. Даже Apple выступает против его использования.
Я смотрел выступление от одного из UX-евангелистов Apple по имени Майк Стерн на WWDC 2014, который рассказывал, почему не стоит использовать гамбургер в приложениях. Я хочу выделить несколько его аргументов:
“Гамбургер-меню ужасны, потому что меню нет на экране. Видна только кнопка меню. И мой опыт показывает, что разработчики сами это понимают”.
“Помните, что интуитивные системы навигации говорят вам, где вы находитесь, и показывают вам, куда ещё вы можете пойти”.
Это было хорошее выступление с множеством хороших аргументов, которые не поместятся в этой статье.
https://youtu.be/HAITh41jNX8
Почему гамбургер-меню не работает
Я знаю, это хорошее решение для того, чтобы собрать всю навигацию в одном месте. И оно по-прежнему популярно в мобильном вебе и в приложениях, хотя дискуссии о разумности этого подхода ведутся с 2014 года.
Но знаете ли вы, что гамбургер-меню отнимает у вашего пользователя много времени? В Spotify обнаружили, что с исчезновением кнопки навигации количество кликов по элементам навигации выросло на 30%. YouTube и Facebook сделали то же самое и перешли к меню на основе вкладок, что улучшило удобство их приложений для пользователя.
Гамбургер-меню конфликтует с моделью навигации платформы
Представьте, что вы создали приложение. Вы хотите, чтобы пользователи его исследовали, но прячете всю навигацию внутри гамбургер-меню. Как тогда будет выглядеть кнопка “Назад” при переходе на конкретную страницу?
Вы хотите, чтобы пользователи смогли перемещаться по приложению без проблем, поэтому резервируете часть интерфейса под гамбургер-меню. Но пользователю нужна возможность возврата на предыдущий экран. В таком случае дизайнер может совершить ошибку и перегрузить панель навигации, не оставив места под название экрана. Эта проблема чаще встречается на iOS, где на предыдущий экран можно перейти только при нажатии кнопки или свайпе.
Гамбургер-меню неэффективно
Гамбургер-меню чаще всего встречается в верхнем левом углу приложения или мобильного сайта. Исследование показало, что экраны смартфонов становятся больше с каждым годом, и левый верхний угол становится самым малодоступным местом для пользователей-правшей.
При этом пользователи не могут видеть доступные опции: им придется дотянуться до этого угла два раза, чтобы открыть меню, а затем выбрать нужный вариант. Если нужного варианта в меню не окажется, пользователям нужно будет возвращаться через несколько экранов, чтобы продолжить навигацию через сайт.
Непонятная архитектура информации
Когда вы создаете архитектуру сайта или приложения, то можете забыть, что пользователи ничего о ней не знают. Такой диалог вполне может состояться между дизайнерами:
— Что если пользователь захочет найти свой аккаунт?
— Все просто: нужно нажать на меню, потом на профиль, и там будет вся информация о профиле!
Да, звучит логично. Но дизайнер предполагает, что пользователь знает, что находится в меню до того, когда открывает приложение в первый раз. Но пользователи размышляют не так. Не нужно делать предположений.
Многие люди ориентируются при помощи “информационного чутья”. Когда они видят набор вариантов, они выберут опцию, которая будет ближе всего к тому, то им нужно. например, если пользователи ищут свой аккаунт на сайте, они будут искать слова “профиль”, “аккаунты”, “имя” и так далее. Если они ничего не найдут, они перейдут к плану B и начнут искать слова “зарегистрироваться”, “войти” и подобные. Они продолжат расширять круг понятий, пока не найдут что-то похожее или откажутся от поиска.
Гамбургер-меню совсем не похоже на то, что хотят пользователи. Это маленькая иконка в углу приложения. В ней нет никакой информации, и она не привлечет пользователей, даже если у них кончились варианты. Они могут не догадаться, что ответ спрятан за этими тремя полосками.
Что тогда делать?
Да, мобильная навигация сложна, потому что должна не только подходить под маленький экран, но и быть достаточно крупной для управления пальцами, а также учитывать разные точки назначения. Но это не значит, что ничего нельзя сделать.
Пересмотрите свою архитектуру информации
Люди используют гамбургер-меню, когда не могут добавить больше предметов без последствий. Это работает, только если ваши пользователи действительно используют меню и не путаются в интерфейсе.
Со временем ваше приложение начнет расти и приобретать больше функций, а информационная архитектура будет становиться все сложнее. Проведите исследование пользователей при помощи метода сортировки карточек. Позвольте пользователям разделить информацию на категории согласно интуиции и “информационному чутью”, чтобы узнать, как люди хотят использовать ваше приложение. После этого вы сможете создать новую архитектуру приложения. Сотрудники Mozilla использовали этот метод, когда создавали новый дизайн настроек.
Используйте вкладки
Вкладки кажутся мне лучшим решением для мобильного приложения. Вы можете поместить их в верхней или нижней части экрана: всё зависит от вас, но если вы создаете дизайн для респонсивного веба, лучше будет поместить вкладки в верхнюю часть. С новой архитектурой информации вы сможете выделить 4–5 иконок и текстовых кнопок для главных пунктов навигации. Этот подход применяет Facebook в структуре своих приложений:
Главное преимущество использования иконки и текста — это позволяет вам вместить весь нужный текст, сохранив кнопку достаточно большой. И такое меню доступно, когда пользователь находится глубоко в приложении.
Но мне нужно больше!
Не беспокоитесь, навигацию со вкладками можно расширить. Если вам нужно больше пяти вкладок, вы можете использовать последнюю вкладку для остальных опций. Если у ваших приложений для десктопа есть более надежное меню, возьмите из него главные элементы и превратите их во вкладки. Другие элементы могут быть доступны через вкладку “больше” или “другое”.
Интересную навигационную систему создали в Product Hunt. Они используют текстовую навигацию в мобильной версии и назвали эту вкладку “Навигация”.
А вот что с навигацией сделали в Medium:
Новую навигацию создать вполне можно. Да, это непросто, но UX-дизайнер должен быть готов к сложностям.
Используйте гамбургер-меню для особых случаев
Все вышесказанное не означает, что от гамбургер-меню нужно совсем отказаться. В некоторых случаях оно может быть идеальным выбором. Например, Uber использует кнопку с призывом к действию в качестве основной навигации, а гамбургер-меню — в качестве вторичной. Так они выделяют кнопку “Куда?” в качестве главного элемента.
Они создали заметную иконку меню, которая сообщает пользователю о вариантах навигации за этими линиями.
Заключение
Гамбургер-меню могут быть как хорошим, так и плохим вариантом для навигации. Их можно использовать так же хорошо, как и Uber, но можно и создать с их помощью непонятный и плохой интерфейс. Все зависит от того, как будут выглядеть ваши приложения и сайты и как пользователь будет ориентироваться в вашем продукте. В конечном счете все зависит от контекста.