Немногие иконки в цифровом дизайне за последнее десятилетие вызвали столько споров, как «гамбургер». Меню-«гамбургер», получившее свое прозвище из-за своего абстрактного, состоящего из трех полосок, напоминающего гамбургер внешнего вида, изначально было воспринято как хитроумный способ сэкономить место на маленьких экранах, спрятав основную навигацию за одной кнопкой. Хотя такой подход и очищал интерфейс, он также способствовал ухудшению юзабилити: пользователи не замечали его и тратили больше времени на выполнение задач как на мобильных, так и на настольных устройствах.
В этой статье:
Раньше: «Гамбургер» снижал удобство использования интерфейса
Сейчас: «Гамбургер» — привычный паттерн
Внимание: Когда привычность становится помехой
Рекомендации по дизайну иконок-«гамбургеров»
Вывод: Обновленный вердикт
Дополнительные материалы
Раньше: «Гамбургер» снижал удобство использования интерфейса
В 2015–2016 годах мы провели серию качественных и количественных исследований, сравнивая скрытые навигационные паттерны (например, меню-«гамбургер») с видимой, всегда включённой навигацией. Результаты были чёткими и последовательными:
- Пользователи меньше взаимодействовали с контентом, скрытым за иконкой-«гамбургером».
- Коэффициент успешности выполнения задач снизился.
- Время выполнения задачи увеличилось.
- Общая удовлетворённость уменьшилась.
Эти проблемы были актуальны как для мобильных, так и для настольных интерфейсов (хотя для настольных компьютеров они усугублялись). Тогда мы рекомендовали делать навигацию видимой, когда это возможно, и использовать меню-«гамбургер» ограниченно — только когда ограничения по пространству действительно этого требуют (и никогда на настольных компьютерах). Кроме того, если меню-«гамбургер» всё же использовалось, мы советовали следовать нескольким лучшим практикам, которые актуальны и сегодня (и обобщены в конце этой статьи).
Сейчас: «Гамбургер» — привычный паттерн
За последнее десятилетие меню-«гамбургер», подобно своему тёзке, стало классикой. По мере того как дизайн в первую очередь для мобильных устройств (mobile-first) набирал обороты, оно предложило чистое, экономящее пространство решение, и когда такие лидеры дизайна, как Apple и Amazon, приняли его, другие последовали за ними. Его растущая вездесущность помогла стандартизировать его значение: благодаря многократному воздействию пользователи научились распознавать и интерпретировать иконку с возрастающей уверенностью.
В недавнем исследовании, проведённом для книги Digital Icons That Work: A Comprehensive Guide to Enhancing Experience with Effective Iconography, участникам показали десятки иконок-«гамбургеров» в контексте и попросили предсказать их функцию. Хотя это исследование не измеряло время выполнения задачи или её успешность, как наши предыдущие исследования, оно оценивало узнаваемость: когда пользователи видели иконку, распознавали ли они в ней скрытое меню?
И они распознавали. По большей части участники правильно идентифицировали иконку-«гамбургер» как главное меню или категории верхнего уровня, особенно когда она появлялась в ожидаемых местах и со стандартным оформлением (3 расположенные друг над другом линии одинаковой длины).
Например, на мобильном сайте Dick’s Sporting Goods использовалась иконка-«гамбургер» в типичном стиле в стандартном месте (в верхнем левом углу экрана) для размещения навигации верхнего уровня. У пользователей не было проблем с интерпретацией этой иконки, даже когда мы убрали надпись «Меню» на скриншоте, показанном участникам.
Dickssportinggoods.com (мобильный): Участники интерпретировали иконку-«гамбургер» в типичном стиле в верхнем левом углу как меню, даже когда надпись «Меню» была убрана со скриншота.
Даже 2-линейная версия иконки-«гамбургера» с мобильного сайта электронной коммерции Vivaia была правильно интерпретирована, когда была размещена в ожидаемом месте.
Vivaia.com (мобильный): Пользователи были уверены, что 2-линейная версия иконки-«гамбургера» представляет собой главное меню сайта.
Для иконок-«гамбургеров» положение оказывает большое влияние на интерпретацию. Пользователи, как правило, понимают иконку как «категории спрятаны здесь», пока она появляется в ожидаемом месте: в верхнем левом углу экрана.
В нашем исследовании даже небольшие вариации в дизайне иконки-«гамбургера» не вызывали серьёзных проблем, при условии, что типичное положение сохранялось. Например, мобильный сайт Toms использовал версию иконки-«гамбургера», похожую на документ — три линии, заключённые в прямоугольную рамку, — в верхнем левом углу.
Большинство пользователей всё равно правильно интерпретировали её как главное меню, хотя рамка вносила небольшую путаницу. Один участник принял её за документ, в то время как другой, изначально неуверенный, рассуждал:
«Обычно это был бы пункт меню, но тот факт, что он в квадрате, заставляет меня думать, что это что-то другое. Но тот факт, что я не вижу меню в другом месте, заставляет меня думать, что это всё-таки меню».
Toms.com (мобильный): Один участник интерпретировал версию иконки-«гамбургера», заключённую в рамку, как документ, несмотря на её размещение в верхнем левом углу.
Мобильный сайт Newsweek показывал иконку-«гамбургер» с наложенной стрелкой (вероятно, попытка намекнуть на выдвигающуюся панель). Однако пользователи игнорировали добавленную деталь и всё равно правильно предсказывали, что иконка откроет общие категории сайта. Опять же, знакомое расположение иконки в верхнем левом углу, вероятно, помогло интерпретации.
Newsweek.com (мобильный): Пользователи интерпретировали иконку-«гамбургер» из трёх линий с наложенной стрелкой в верхнем левом углу как скрытое меню.
Тем не менее, такие украшения излишни: изменение знакомой формы может вызвать сомнения, даже если это не полностью блокирует распознавание.
Устойчивое распознавание иконки-«гамбургера», несмотря на небольшие вариации в дизайне, отражает то, что мы наблюдаем во всех цифровых взаимодействиях: когда-то незнакомые паттерны становятся второй натурой благодаря многократному воздействию. Однако это не означает, что меню-«гамбургер» является надёжным или универсально понятным — особенно для менее технически подкованной аудитории или в незнакомых макетах.
Кроме того, поскольку это исследование изучало только узнаваемость, мы не можем говорить о том, изменилось ли время выполнения задач или их успешность для задач, связанных с меню-«гамбургером», за эти годы. (Прошлые проблемы с удобством использования были связаны не только с распознаванием иконки; они также касались её обнаруживаемости, запоминаемости и общей привычности к паттерну).
Внимание: Когда привычность становится помехой
Меню-«гамбургер» стало настолько повсеместным, что его визуальная форма — три сложенные линии — теперь глубоко укоренилась в ментальных моделях пользователей. Настолько, что иконки, использующие аналогичную структуру, могут быть ошибочно истолкованы как меню-«гамбургер», даже когда они выполняют совершенно другие функции.
Такое визуальное вмешательство особенно распространено, когда иконки, основанные на линиях, такие как иконки списка или фильтров, размещаются в верхнем левом углу экрана — позиции, прочно ассоциирующейся с основной навигацией сайта.
Например, в настольном приложении Apple Notes иконка просмотра списка появилась в верхнем левом углу, рядом с иконкой просмотра галереи. Несмотря на наличие точек, похожих на маркеры, чтобы отличить её от традиционной иконки-«гамбургера», пользователи часто интерпретировали её как навигационное меню.
Один из участников объяснил:
«Это иконка-«гамбургер» в самом левом углу. Это какая-то расширяющаяся навигация. Она бы развернулась и показала список дополнительных пунктов меню или функций».
Apple Notes (настольное): Многие пользователи интерпретировали иконку просмотра списка в верхнем левом углу как иконку-«гамбургер», представляющую скрытое меню.
В другом примере иконка фильтров, основанная на линиях, в мобильном приложении YouTube вызвала путаницу. Многие пользователи интерпретировали её как категории или список избранного (термины, более тесно связанные с навигацией или списками, чем с фильтрацией).
Youtube.com (мобильный): Многие пользователи интерпретировали иконку фильтров поиска в контекстном меню в нижней части экрана как список категорий или избранного. (Обратите внимание, что надпись «Фильтры поиска» была удалена на скриншоте, показанном участникам.)
Этот пример показывает, насколько сильно пользователи ассоциируют сгруппированные линии с навигацией, даже когда иконка не размещена в верхнем левом углу.
Вывод для дизайна заключается в том, чтобы проявлять осторожность при использовании иконок на основе линий — таких как для списков, фильтров или просмотров контента — в позициях, которые пользователи обычно ассоциируют с навигацией. При размещении в верхнем левом углу, особенно, эти иконки могут быть ошибочно приняты за меню-«гамбургер». Кроме того, обязательно подписывайте иконки, чтобы поддержать узнаваемость и интерпретацию.
Рекомендации по дизайну иконок-«гамбургеров»
Недавние исследования подтверждают, что меню-«гамбургер» широко узнаваемо: большинство пользователей интерпретируют эту иконку как представляющую скрытое меню или список категорий. При вдумчивой реализации оно может быть эффективным навигационным инструментом.
Секрет удобных и обнаруживаемых меню-«гамбургеров» не изменился. Чтобы максимизировать удобство использования сегодня и в будущем, следуйте этим лучшим практикам:
- Используйте стандартную иконку из 3-х линий: Оригинальная иконка-«гамбургер» из 3-х линий находит сильный отклик у пользователей. Нет необходимости проявлять креативность: придерживайтесь знакомого паттерна, который ожидают пользователи.
- Размещайте её в верхнем левом углу: Пользователи постоянно ищут скрытую навигацию в верхнем левом углу экрана. Размещение меню в другом месте увеличивает риск того, что его не заметят или неправильно поймут.
- Избегайте дополнительного стиля или рамок: Декоративные элементы, такие как контуры или рамки, могут привести к тому, что пользователи ошибочно примут иконку за что-то другое (например, за иконку документа).
- Подписывайте иконку «Меню»: Надпись особенно полезна для менее опытных пользователей или при введении паттерна в незнакомых контекстах.
- Используйте тонкую анимацию или переходы: Если нажатие на иконку открывает навигационную панель, тонкие визуальные подсказки могут усилить взаимодействие и направить ожидания пользователя.
- Избегайте путаницы с другими иконками из 3-х линий: Будьте особенно осторожны с дифференциацией других иконок на основе линий (таких как просмотры списков или фильтры) и избегайте похожих иконок в верхнем левом углу экранов и панелей.
- Масштабируйте иконку-«гамбургер» соответствующим образом: Иконка-«гамбургер», предназначенная для смартфона, может стать почти невидимой на большом экране настольного компьютера.
- Сделайте её похожей на кликабельную: Экстремально плоский дизайн может скрывать её обнаруживаемость и ограничивать взаимодействие.
- Добавьте визуальные отступы вокруг иконки: Скопление иконки рядом с заголовками или другими элементами интерфейса снижает видимость.
- Обеспечьте достаточный контраст: Иконки с низким контрастом сливаются с фоном, особенно для пользователей с нарушениями зрения.
- Предоставьте дополнительные методы навигации: Поддерживайте «гамбургер» встроенными ссылками, списками связанных ссылок, хорошо видимой функцией поиска и ссылками в футере.
Хотя эти базовые принципы дизайна не изменились, ожидания и поведение пользователей, связанные с меню-«гамбургером», изменились.
И помните, старое правило по-прежнему верно: если вам не нужно скрывать навигацию, не делайте этого. Хотя большинство пользователей теперь распознают меню-«гамбургер», скрытая навигация всё равно добавляет стоимость взаимодействия, поскольку пользователям приходится делать дополнительный шаг для доступа к пунктам меню. (И, помните, повышенная узнаваемость не обязательно означает, что время выполнения задач или коэффициент успешности для задач с меню-«гамбургер» изменились).
Вывод: Обновленный вердикт
Меню-«гамбургер» теперь является знакомым, узнаваемым паттерном. Но одна лишь привычность не устраняет его фундаментальных компромиссов. Скрытие навигации всегда вводит стоимость взаимодействия, потому что пользователям приходится делать дополнительный шаг для доступа к ключевым опциям, а важный контент остаётся вне поля зрения. При вдумчивом использовании — особенно на экранах с ограниченным пространством — меню-«гамбургер» может быть эффективным. Знакомый дизайн, последовательное размещение и соблюдение лучших практик остаются критически важными.
Вердикт: Меню-«гамбургер» жизнеспособно, но не универсально. Используйте его с умом, следуйте лучшим практикам, учитывайте его компромиссы и всегда тестируйте его (и другие иконки) с пользователями, чтобы убедиться, что оно действительно отвечает их потребностям.
Дополнительные материалы
Изучите следующие ресурсы для получения информации об эволюции иконки-«гамбургера» и удобстве использования иконок:
- Скрытая навигация вредит показателям UX
- Методология исследования меню-«гамбургер»
- За пределами «гамбургера»: как сделать навигацию обнаруживаемой на настольных компьютерах
- Удобство использования иконок: когда и как оценивать цифровые иконки)
- Цифровые иконки, которые работают: полное руководство по улучшению опыта с помощью эффективной иконографии)