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

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

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

История

Иконка гамбургер-меню была создана в 1981 году дизайнером Нормом Коксом для первого в мире персонального компьютера Xerox Star. Она использовалась для обозначения списка пунктов меню.

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

Зачем используется гамбургер-меню

Экономия пространства

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

Чистота интерфейса

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

Единообразие

Большинство пользователей знакомы с этим элементом и понимают, что за ним скрывается навигация. Это стало стандартом интерфейсов.

Адаптивность

Гамбургер-меню легко адаптируется под разные размеры экранов и может содержать многоуровневую навигацию.

Где используется

Мобильные версии сайтов

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

Мобильные приложения

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

Десктопные версии

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

Варианты оформления

Классический

3 горизонтальные полоски, расположенные друг над другом. Самая узнаваемая версия.

Анимированный

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

С подписью

Иногда рядом с иконкой добавляют слово «Меню» для большей понятности, особенно в десктопных версиях.

С бейджем

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

Как работает

Открытие

При нажатии на иконку появляется панель с навигацией. Обычно она выезжает слева или справа, реже - открывается на весь экран.

Закрытие

Закрыть меню можно:

Нажав на крестик в углу панели
Нажав на затемнённую область за меню
Нажав на гамбургер ещё раз
Смахнув панель в сторону

Содержимое

В панели могут размещаться:

Основные разделы сайта
Категории каталога
Ссылки на личный кабинет
Контакты
Поиск

Преимущества

Экономит место - освобождает экран для контента
Узнаваемость - стандарт, понятный большинству
Чистота - не отвлекает от основного контента
Гибкость - может содержать много пунктов
Многоуровневость - легко организовать иерархию

Недостатки и критика

Снижение заметности

Основная критика: меню становится менее заметным. Пользователи могут не догадываться о его существовании или забывать про него.

Дополнительный клик

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

Нагрузка на память

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

Не всегда понятно

Некоторые пользователи, особенно старшего возраста, могут не понимать значение иконки.

Нарушение иерархии

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