Hamburger menu простое меню. Иконка-гамбургер: новые способы использования. Магия в мелочах

Вы наверняка уже устали читать статьи и постоянно слушать разные дискуссии о трех коротких линиях гамбургер-меню. Это плохой прием в дизайне интерфейсов? Или неплохой? Этот пост не такой - он не будет судить, хорошее или плохое это меню. Суть в том, что я считаю его не самым лучшим дизайн-решением, так или иначе. Но и у гамбургер-меню есть свои сильные стороны, особенно при использовании в мобильном дизайне, в условиях ограниченного пространства. Так что мы можем сделать? Просто принять гамбургер-меню таким, какое оно есть, несмотря на все недостатки, и жить дальше? Много сайтов и приложений, кажется, смирились с этим. А я считаю, что способен на лучшее.

А затем случились две вещи, которые заставили меня передумать. Во-первых, я наткнулся на . Это статья, которая действительно помогает понять последствия использования гамбургер-меню. В частности, сайты с таким меню терпят серьезное уменьшение вовлеченности пользователей. Обзор такой статистики как раз и начал менять мое мнение.

Следующий инцидент случился, когда я наблюдал за коллегой, пытающимся использовать новое веб-приложение, в котором как раз было такое меню. Это был разработчик, который очень хорошо знаком с интерфейсом гамбургер-меню, но когда дело дошло до использования приложения для своих нужд, он громко вслух спросил: “Как мне туда попасть?”. Учтите, это один из умнейших людей, которых я знаю, и он даже не подумал о том, чтобы коснуться значка гамбургер-меню. Если у кого-то настолько умного возникают проблемы с навигацией, что это говорит о типичном пользователе? Мое мнение окончательно приобрело твердое обоснование.

Поиск решения

Все, хватит о причинах моего неверия в силу гамбургер-меню - настало время поговорить о решении. Для начала я изучил особые преимущества использования гамбургер-меню:

• Масштабируемость : это, наверное, главный плюс и главная причина, почему так много сайтов и приложений выбирают его. Вы можете поместить очень много элементов навигации за маленькой иконкой.
• Аккуратность : это идет в пару к масштабируемости, но все же, не одно и то же. Дизайнеры хотят создавать лаконичные и аккуратные дизайны, оставляя достаточно места для основного контента. Использование гамбургер-меню придает ощущение визуальной простоты, привлекательное для любого дизайнера.

И если уж создавать альтернативу гамбургер-меню, она должна как-то решать связанные с ним проблемы:

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

Сложная часть: мобильная

Я решил начать с самой сложной проблемы и проверить, подойдет ли мое решение для мобильных дизайнов. После обдумывания массы идей я пришел к выводу, что меню панели вкладок iOS является одним из лучших решений для мобильных интерфейсов. Масса людей пытались сделать панель вкладок прокручиваемой (чтобы вмещалось более пяти опций) или добавить “more” в навигацию - что-то вроде Плюшкина, у которого есть дополнительная комната, которая быстро заполнится хламом. Также, обе эти опции все еще не выполняют главного требования - понятность, видимость всех возможностей отсутствует. Так что же можно сотворить с меню вкладок, чтобы это исправить?

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

Я создал тестовое приложение по оценке продуктивности команды, чтобы проиллюстрировать свой подход в деле. Используя этот способ, пользователь может четко видеть основные функции и способы использования продукта. И вместо засыпания полным списком элементов меню, скрытого за иконкой гамбургера, пользователю показывается несколько опций, которые относятся ко вкладке, на которую он кликнул. Так навигацию проще понять и переварить, все нужное всегда под рукой, позволяет пользователю видеть иерархию приложения.

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

Конечно, самая большая победа такого подхода - Масштабируемость. Да, вы по-прежнему ограничены пятью категориями, но это и хорошо. Честно, думаю, что любой сайт может вместить свои опции в пять категорий, если дизайнер с умом продумает навигацию. Ведь в каждой из этих категорий может быть еще по пять или шесть подпунктов.
Итого получается 30 возможных опций навигации без ощущения перегруза для пользователя и без оккупации всего пространства экрана.

Применение к планшетам

Интеграция такой панели вкладок в планшеты, как она есть, выглядела странной. Планшеты гораздо шире, и использование того же UI, что и для мобильных устройств, выглядело также нелепо, как подросток в одежде, из которой он давно вырос. Так что я пошел другим путем. Вместо размещения панели вкладок внизу, я разместил ее сбоку. Так оказалось удобнее в плане использования пространства экрана и выглядело очень естественно. Вдобавок многие пользователи держат планшет за бок, так что это как раз целевая область для касания пальцами.

А как на счет десктопа?

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

Полное раскрытие

Я не знаю, как назвать эту штуку. Вкладочный выдвижник? Или TABurger (TAB “вкладка” + бургер)? Более того, я не знаю, создавал ли кто-либо подобное решение раньше. Учитывая простоту такого меню, я не могу допустить мысль, что я был первым. Знаю, что несколько приложений используют выдвижные меню на некоторых кнопках вкладок (например, Tweetbot), но обычно они реализованы как быстрый доступ к функциям для продвинутых пользователей, а не с целью наращивания иерархии навигации. Если у вас есть такой пример, дайте знать в комментариях.
Неважно, является ли такое меню новым или уже давно придуманным. Важно то, является ли оно лучшим, более креативным решением для навигации по сравнению с гамбургер-меню. Перестаньте говорить себе “В этом крутом сайте есть такое меню, значит, оно должно быть лучшим” или “Все так делают, значит это правильно”. Дизайн заслуживает лучшего, более внимательного подхода.
ОБНОВЛЕНИЯ
Коллин Эбергардт отметил в ТВиттере, что такой же UI реализован в Windows Phone. Я сам пользователь Windows Phone, и он прав. Хотя такой тип взаимодействий используется в Windows Phone только для опции “more” в панели вкладок.

Джеймс Перих привел еще один пример в Твиттере. Посмотрите на AHTabBarController, созданный Артуром Хеммером.

В котором предложил пять альтернатив меню-«гамбургеру» для организации навигации в мобильном приложении..

«Если вы работаете над цифровыми продуктами, то наверняка прочли десятки статей о том, как и почему меню-"гамбургер" вредит пользовательскому опыту на мобильных устройствах из-за его непонятности и неэффективности. Всё больше и больше проектов экспериментируют с альтернативными вариантами представления меню», - пишет Золтан Коллин.

Дизайнер отмечает, что ни одна из перечисленных в материале альтернатив не является заведомо более удобной и эффективной, чем другие - все они подойдут для различных ситуаций.

1. Вкладки

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

Разработчикам часто кажется, продолжает Коллин, что вкладки - один из простейших навигационных шаблонов. Но и при создании такого меню стоит придерживаться нескольких правил:

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

2. Вкладки с вариантом «Другое»

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

«Кажется, что такой вариант не лучше, чем меню-"гамбургер", однако если подобрать вкладки таким образом, чтобы почти вся необходимая пользователю информация находилась в первых четырёх разделах, UX почти не пострадает», - объясняет Коллин.

3. Разворачивающееся меню

Вариация вкладок с разделом «Другое» - меню, которое адаптируется под размер экрана и показывает различное количество вкладок на каждом разрешении. Те вкладки, которые не помещаются на экране, оказываются в разделе «Другое».

4. Прокручивающееся меню

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

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

При этом дизайнерам следует убедиться, что пользователям ясно, как применять прокрутку - и установить визуальные подсказки. Например, применить эффект «выцветания» для последнего элемента.

5. Выпадающее меню

По словам дизайнера, существует интересный, но не самый распространённый шаблон, который применяют, когда видимость и доступность разделов не имеет существенного значения, - выпадающее меню.

Такое меню служит заголовком страницы, на которой находится пользователь. В то же время стрелка рядом со словом даёт владельцу смартфона понять, что есть и другие разделы, на которые он может переключиться. И хотя варианты скрыты, пользователю ясно, что они либо аналогичны по важности открытому, либо являются его подразделами.

Иногда, замечает Коллин, хорошим решением может стать и меню-«гамбургер». По словам дизайнера, этот шаблон не рекомендуется использовать при проектировании основного меню, но он может пригодиться для вторичных навигационных функций. Также «гамбургер» можно использовать, когда все основные действия пользователь совершает на главном экране - например, как в приложении Uber.

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

За этой кнопкой скрываются пункты меню навигации, задумка в том, что на определенной ширине экрана, кликая по иконке, пользователь сам разворачивает меню, если ему это надо. Если не надо, то он сразу переходит к просмотру контента, не отвлекаясь на меню, поскольку оно спрятано.

Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS . Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на checkbox-ах , позже я поясню что это.

Гамбургер меню на JS

1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта