Для чего предусмотрена кнопка в бургер меню

Меню гамбургер

Меню гамбургер (англ. hamburger menu) – это имя значка меню в новых моделях программ и сайтов, который скрывает традиционное меню Файл. Такое меню также называют: значок гамбургер, меню HotDog, трех строчное меню. Значок получил такое название, так как похож на гамбургер (верхняя и нижняя булочка с котлетой между ними).

Ниже показан пример закрытого и открытого меню гамбургер в браузере Google Chrome.

Есть ли горячая клавиша открытия меню гамбургер?

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

Что такое кнопка гамбургера – и как она работает?

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

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

В этом руководстве мы углубимся в детали и поместим кнопку бургера под решетку: что такое кнопка гамбургера? Зачем возиться с этим стилем кнопки-булочки и как сделать ее в CSS? Какие существуют варианты, чтобы улучшить ваше моджо при приготовлении гамбургеров?

История кнопки гамбургера

Кнопка бургеров появилась в 1981 году, когда дизайнер Норм Кокс поработал над персональной рабочей станцией Xerox. Он пробовал другие варианты – включая стрелку, направленную вниз, звездочку и символ плюса – но ни одна из них не предлагала такой же простоты использования, как этот простой помощник по гамбургеру.

Пользователи быстро поняли концепцию: нажмите кнопку, чтобы открыть раскрывающееся меню с навигационными ссылками или ссылками на функции. Однако, помимо первоначального запуска в Xerox, дизайнеры особо не беспокоились о гамбургере – до тех пор, пока Twitter не начал использовать его в 2008 году. Год спустя он появился в iOS и сегодня является основным продуктом веб-дизайна, часто появляющимся в топе. в левом или верхнем правом углу веб-страниц и предоставляет удобное место для хранения больших меню, не загромождая ценное веб-пространство.

Булочка с гамбургером: плюсы и минусы

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

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

Но есть также преимущества у развертывания меню на основе булочек на вашем сайте, в том числе:

• Чистый вид – кнопка бургера почти не занимает места, что позволяет легко разместить ее в любом месте страницы, не отвлекаясь от других ключевых элементов. Пользователи знают, как это выглядит, а это значит, что вы можете потратить больше времени и усилий на другие элементы дизайна.
• Последовательная функция – это трехстрочное меню отлично справляется с одним и тем же. Это делает его отличным дополнением к единообразию в дизайне веб-сайтов – хотя он может и не показаться ярким, он предлагает солидную функциональность.
• Четкая цель – не все должно быть на главной странице вашего сайта. Гамбургер-меню предоставляет заранее определенное место для элементов навигации, которые не являются приоритетными, но все же стоит держать под рукой.

Как сделать кнопку гамбургера в CSS

Готовы попробовать свои силы в приготовлении бургеров? К счастью, создать кнопку гамбургера в CSS не так уж сложно.

Если вы предпочитаете создавать код CSS в автономном редакторе, попробуйте такие варианты, как RapidCSS или Stylizer. RapidCSS быстр, легок и хорошо подходит для пользователей с некоторым опытом работы с CSS. Stylizer предлагает формат, более дружественный к графическому интерфейсу пользователя, и предоставляет возможность немедленного предварительного просмотра, чтобы гарантировать, что код, который вы пишете, дает желаемые результаты.

Если вы предпочитаете кодировать внутри платформы, одним из самых простых вариантов является WordPress. Сначала войдите в свою учетную запись, найдите «Внешний вид» на левой боковой панели и нажмите «Настроить».

Перейдите в нижнюю часть нового меню слева и выберите «Дополнительные CSS».

Наконец, вы увидите страницу редактора CSS, которая позволяет вам ввести и протестировать код CSS, прежде чем размещать его на своем сайте.

Пришло время приготовить гамбургер. Допустим, вы хотите создать статический значок. Согласно W3Schools, лучше всего начать с HTML:

Этот код обеспечивает основу для кнопки гамбургера.

Затем добавьте свой CSS:

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

Создание динамической кнопки с помощью CSS

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

Нажмите, чтобы открыть меню, и оно превратится в это:

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

Чтобы создать этот динамический вариант, начните со своего HTML:

Теперь добавьте свой CSS:

Наконец, добавьте немного JavaScript:

Создание кнопки бургера без кода

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

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

1 HubSpot CMS

Сделайте все это с помощью HubSpot CMS. Создайте отличный веб-сайт, соответствующий вашим потребностям и охватывающий ваш целевой рынок, и убедитесь, что все работает, как задумано, с помощью мониторинга трафика и интеграции маркетинговых кампаний. Кнопки для гамбургеров входят в стандартную комплектацию.

2 Squarespace

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

3 Webnode

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

4 Site123

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

Хэмми это вверх

Не всем нравится кнопка гамбургера.

Это имеет смысл; меню может вызвать путаницу или сделать важные параметры навигации недоступными. Но есть и преимущества гамбургера: создание собственной кнопки или использование инструмента для создания веб-сайтов позволяет вам решать, где это меню оказывает наибольшее влияние, и дает вам полный контроль над навигацией по вашему сайту.

Почему стоит избегать гамбургерных меню и как это сделать?

Все прекрасно знают о слабых местах этого паттерна, но какое может быть решение?

(Мы продолжаем переводить цикл статей по UX/UI. Полную подборку можно найти в коллекции «Дизайн навигации»)

На сегодняшний день мы располагаем информацией, что боковые меню — так называемые “гамбургерные” меню — вероятно приносят больше вреда, чем пользы.

Вот несколько статей на эту тему:

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

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

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

Проблемы гамбургерного меню:

1. Низкая обнаруживаемость
2. Малая эффективность
3. Конфликт с навигационными паттернами платформы
4. Малопонятно с первого взгляда

Низкая обнаруживаемость

По умолчанию боковое меню и все его содержимое скрыты.

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

Малая эффективность

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

Ниже вы видите яркий пример того, насколько мгновенной может быть навигация, когда все навигационные элементы расположены на виду.

Конфликт с навигационными паттернами платформы

Однако самой важной проблемой является то, что на некоторых платформах (вроде iOS) не получится реализовать гамбургерное меню без конфликта со стандартным паттерном навигации.

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

Малопонятно с первого взгляда

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

Можно сделать как в приложении Jawbone Up: показывать иконку, отражающую суть уведомления рядом с кнопкой бокового меню.

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

А вот противоположный пример — панель вкладок Твиттера, которая показывает пользователю контекст уведомления и дает возможность сразу перейти на соответствующий экран.

Осознание проблемы

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

Поэтому вопрос экономии экранного пространства может быть решен без нанесения ущерба навигации — и в соответствии с базовыми принципами HCI (человеко-компьютерного взаимодействия), которые требуют от нас предоставления обратной связи и отображения состояния приложения.

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

Решение

Мы много говорили о проблеме, но решение до сих пор не ясно.

Когда можно использовать гамбургерное меню?

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

IRCCloud — пример оправданного (в какой-то мере) использования кнопки-гамбургера: с ее помощью осуществляется навигация между каналами и участниками каналов.

Это приемлемо, так как у основного экрана нет никаких дочерних экранов, которым нужна иерархическая навигация; все содержимое представлено в модальном виде.

Но даже в этом случае видно, что интерфейс перегружен, а информационная архитектура требует пересмотра.

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

Это плавно подводит нас к следующему разделу статьи:

Чем заменить кнопку-гамбургер?

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

“Решение — в обновлении информационной архитектуры”.

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

Выводы:

1. Состояние представлено на вкладке Сообщения
2. Элементы интерфейса всегда видны и доступны
3. Нет конфликта между жестами навигации

В дополнение к тому, что мы решили основные проблемы, мы можем выиграть немного вертикального пространства, если спрячем панель навигации приложения при скроллинге вниз (см. пример Facebook, но это также используется и в Safari). Панель вкладок остается на своем месте, что позволяет нам пользоваться навигацией, даже когда панель навигации приложения спрятана.

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

[Обновление] В случае с веб-сайтами, вам также стоит пересмотреть информационную архитектуру, но вместо использования этих iOS-паттернов рекомендую отображать навигацию сверху, в виде списка: пример. Если будет очевидно, что это навигация сайта, люди обязательно проскролят дальше и сразу увидят все остальные доступные варианты.

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

Как это все масштабируется?

Я здесь привожу примеры iOS интерфейсов — лучшим решением на них является использование панели со вкладками или инструментами.

Но что, если на вашей панели вкладок больше 5 элементов?

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

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

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

Такая реализация сталкивается другой проблемой: после прокрутки панель инструментов остается в неопределенном состоянии. Rookie прячут панель после того, как пользователь выбирает одно из действий — обрезать, повернуть и т.п. Таким образом, неопределенное состояние панели “обнуляется”, и при повторном открытии она отображается в изначальном состоянии.

Заключение

Итак, вы прочитали статью о проблемах паттерна боковой панели и о их решении в рамках iOS, которые были заложены в систему с самого начала.

Надеюсь, статья была вам полезна и понятна. Если у вас есть комментарии, пишите мне в Твиттер.

[Обновление] Фидбэк по этой статье был невероятным! Более 24 тысяч читателей и, что еще важнее, классные обсуждения в Твиттере. Я сделал подборку клевых твитов на Storify. Кажется, что тема гамбургерного меню остается открытой в контексте Андроида, а особенно в части навигационных паттернов для Веб.

Другие статьи и твиты на эту тему:

Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.

Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн

Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!

Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!