Гамбургер-меню: последние исследования и лучшие практики

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

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

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

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

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

Тогда: Гамбургер снижает юзабилити

В 2015–2016 годах мы провели серию качественных и количественных исследований, сравнивая видимую и скрытую навигацию. Результаты оказались четкими и последовательными:

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

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

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

Сейчас: Гамбургер — привычный шаблон

За прошедшие годы гамбургер-меню стало классикой. С повсеместным распространением мобильных устройств чистое, компактное решение было взято на вооружение такими лидерами отрасли, как Apple и Amazon, а за ними последовали и остальные. Это помогло стандартизировать значение иконки: благодаря многократному повторению пользователи научились узнавать и интерпретировать ее быстро и уверенно.

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

Время и успешность выполнения задачи не фиксировались (как в наших предыдущих исследованиях), оценивалась лишь узнаваемость: идентифицируют ли люди иконку как иконку меню?

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

Например, в мобильной версии сайта Dick's Sporting Goods навигация верхнего уровня была обозначена стандартной иконкой гамбургера, которая располагалась в привычном месте (в левом верхнем углу экрана). У пользователей не возникло проблем с интерпретацией этого значка, даже когда мы убрали подпись Menu.

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

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

В нашем исследовании даже небольшие вариации в ее дизайне не вызывали серьезных проблем, если размещение оставалось стандартным.

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

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

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

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

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

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

Устойчивое узнавание «гамбургера», несмотря на небольшие изменения в дизайне, отражает то, что мы наблюдаем повсеместно: когда-то незнакомые паттерны при многократном повторении становятся второй натурой. Однако это не говорит о полной универсальности и 100%-ной надежности — особенно когда мы имеем дело с менее технически подкованной аудиторией или нестандартными лейаутами. 

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

Когда узнаваемость становится помехой

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

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

Например, в десктопном приложении Apple Notes иконка «Просмотреть как список» располагается в левом верхнем углу рядом с иконкой «Просмотреть как галерею». Несмотря на наличие точек, символизирующих буллиты, которые отличают ее от стандартного «гамбургера», пользователи часто интерпретировали эту иконку как кнопку открытия меню.

Один из участников предположил:

«Гамбургер в крайнем левом углу — это иконка раскрытия навигации. Она откроет список дополнительных пунктов меню или функций».

Другой пример путаницы — иконка фильтра в мобильном приложении YouTube. Многие пользователи интерпретировали ее как иконку категорий или списка избранного (термины, более тесно связанные с навигацией, чем с фильтрацией).

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

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

Рекомендации по дизайну

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

Лучшие практики для создания удобных гамбургер-меню остаются прежними:

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

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

• Избегайте дополнительных элементов оформления или обводок: Декоративные элементы, такие как контуры или рамки, могут сбить пользователей с толку (пример с иконкой документа).

• Добавьте текстовую метку: Подпись будет особенно полезна для неопытных пользователей, а также при применении паттерна в незнакомом контексте.

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

• Избегайте путаницы с другими линейными значками: Будьте особенно осторожны с другими иконками из линий (например, иконками списков или фильтров) и не размещайте их в левом верхнем углу.

• Масштабируйте: Иконка гамбургера для смартфонов может стать почти невидимой на большом экране.

• Сделайте иконку кликабельной: Отсутствие эффектов наведения и других визуальных подсказок может помешать обнаружению и ограничить взаимодействие. 

• Добавьте отступы вокруг иконки: Иконка не должна «склеиваться» с заголовком и другими UI-элементами — отсутствие «воздуха» снижает видимость.

• Обеспечьте достаточный контраст: Малоконтрастные иконки сливаются с фоном, что особенно критично для пользователей с нарушениями зрения.

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

Хотя эти базовые принципы дизайна не изменились, изменились ожидания и поведение пользователей.

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

Заключение

Гамбургер-меню стало привычным и узнаваемым элементом интерфейса.

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

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

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