Символ гамбургер-меню сегодня: узнаваем ли он?
Содержание
- Тогда: гамбургер снизил удобство использования интерфейса
- Сейчас: гамбургер — привычная модель
- Внимание: когда привычность становится помехой
- Рекомендации по разработке иконок-гамбургеров
- Заключение: обновленный вердикт
Сегодня меню-гамбургеры стали более привычным шаблоном, чем 10 лет назад, но старые передовые методы скрытой навигации по-прежнему применимы.
Немногие иконки в цифровом дизайне вызывали столько споров за последнее десятилетие, как гамбургер. Меню-гамбургер, получившее свое прозвище из-за своего абстрактного, сложенного, похожего на гамбургер внешнего вида, изначально было принято как умный способ сэкономить место на маленьких экранах, спрятав основную навигацию за одной кнопкой. Хотя этот подход и расхламлял интерфейс, он также способствовал плохому удобству использования: пользователи не замечали его и требовали больше времени для выполнения задач как на мобильных устройствах, так и на настольных компьютерах.
Хотя тогда это был новый шаблон, сегодня большинство пользователей узнают меню гамбургера и знают, что оно означает. Тем не менее, многие из тех же дизайнерских рисков применимы. В этой статье мы пересматриваем наши ранние выводы по меню гамбургера, делимся исследованиями узнаваемости гамбургера сегодня и предлагаем лучшие практики визуального дизайна для значка гамбургера.
Нашим руководством было сделать навигацию видимой, когда это возможно, и использовать гамбургер-меню экономно — только когда этого действительно требуют ограничения пространства (и никогда на рабочем столе). Кроме того, если использовалось гамбургер-меню, мы рекомендовали следовать нескольким лучшим практикам, которые по-прежнему актуальны (и обобщены в конце этой статьи).
В недавнем исследовании, проведенном для книги «Цифровые иконки, которые работают: полное руководство по улучшению опыта с помощью эффективной иконографии» , участникам были показаны десятки иконок-гамбургеров в контексте и предложено предсказать их функцию.
Хотя в этом исследовании не измерялось время выполнения задачи или ее успешность, как в наших предыдущих исследованиях, оно оценивало узнаваемость: когда пользователи видели значок, распознавали ли они в нем скрытое меню?
И они это сделали. В большинстве случаев участники правильно идентифицировали значок гамбургера как главное меню или категории сайта верхнего уровня, особенно когда он появлялся в ожидаемых местах и со стандартным стилем (3 сложенные строки одинаковой длины).
В случае с иконками-гамбургерами позиция имеет большое влияние на интерпретацию. Пользователи обычно понимают, что иконка означает «здесь скрыты категории», если она появляется в ожидаемом месте: в верхнем левом углу экрана.
В нашем исследовании даже небольшие изменения дизайна значка гамбургера не вызывали серьезных проблем при условии сохранения типичного положения.
Например, на мобильном сайте Toms в верхнем левом углу использовалась похожая на документ версия значка гамбургера — три линии, заключенные в прямоугольную рамку.
Большинство пользователей по-прежнему правильно интерпретировали его как главное меню, хотя граница вносила небольшую путаницу. Один участник принял его за документ, а другой, изначально неуверенный, рассуждал так:
«Обычно это был бы пункт меню, но тот факт, что он в квадрате, заставляет меня думать, что это что-то другое. Но тот факт, что я не вижу меню в других местах, заставляет меня думать, что это меню».
На мобильном сайте Newsweek был изображен значок гамбургера с наложенной на него стрелкой (вероятно, попытка намекнуть на раздвижную панель).
Однако пользователи проигнорировали дополнительную информацию и все равно правильно предсказали, что значок покажет общие категории сайта. Опять же, привычное расположение значка в верхнем левом углу, вероятно, помогло интерпретации.
Newsweek.com (мобильная версия): Пользователи интерпретировали трехстрочный значок гамбургера с наложенной стрелкой в верхнем левом углу как скрытое меню.
Однако подобные украшения излишни: изменение привычной формы может вызвать сомнения, даже если не полностью исключает узнавание.
Устойчивое узнавание значка гамбургера, несмотря на небольшие изменения дизайна, отражает то, что мы видели в цифровых взаимодействиях: однажды незнакомые шаблоны становятся второй натурой благодаря многократному воздействию. Однако это не означает, что меню гамбургера надежно или универсально понятно — особенно для менее технически подкованной аудитории или в незнакомых макетах.
Кроме того, поскольку в этом исследовании рассматривалась только узнаваемость, мы не можем сказать, изменилось ли за эти годы время выполнения задач или показатели успешности для задач, связанных с гамбургер-меню. (Прошлые проблемы с удобством использования были связаны не только с узнаваемостью значка; они также включали обнаруживаемость, запоминаемость и общую знакомость с шаблоном.)
Этот вид визуальных помех особенно распространен, когда линейные значки, такие как значки списков или фильтров, размещаются в верхнем левом углу экрана — в месте, тесно связанном с основной навигацией по сайту.
Например, в настольном приложении Apple Notes в левом верхнем углу рядом со значком галереи появился значок списка. Несмотря на то, что он был снабжен точками, похожими на маркеры, чтобы отличить его от традиционного значка гамбургера, пользователи часто интерпретировали его как навигационное меню.
Один из участников объяснил:
«Это гамбургер [значок] слева. Это своего рода расширяющаяся навигация. Она бы расширялась и показывала список дополнительных пунктов меню или функций».
Apple Notes (для настольных ПК): многие пользователи интерпретировали значок списка в верхнем левом углу как значок гамбургера, представляющий скрытое меню.
В другом примере иконка фильтра в виде линии в мобильном приложении YouTube вызвала путаницу. Многие пользователи интерпретировали ее как категории или список избранного (термины, более тесно связанные с навигацией или представлениями списков, чем с фильтрацией).
Youtube.com (мобильная версия): многие пользователи интерпретировали значок «Фильтры поиска» в контекстном меню в нижней части экрана как список категорий или избранного.
Этот пример показывает, насколько сильно пользователи ассоциируют сгруппированные строки с навигацией, даже если значок не расположен в верхнем левом углу.
Вывод: нужно проявлять осторожность при использовании линейных иконок (например, для списков, фильтров или представлений контента) в местах, которые пользователи обычно связывают с навигацией. Особенно при размещении в верхнем левом углу эти иконки могут быть ошибочно приняты за меню-гамбургеры. Кроме того, обязательно маркируйте иконки для поддержки узнаваемости и интерпретации.
Секретный соус для удобных и понятных гамбургер-меню не изменился. Чтобы максимизировать удобство использования сегодня и в будущем, следуйте этим рекомендациям:
И помните, что старый принцип все еще верен, несмотря ни на что: если вам не нужно скрывать навигацию, не делайте этого. Несмотря на то, что большинство пользователей теперь узнают гамбургер-меню, скрытая навигация все еще увеличивает стоимость взаимодействия, поскольку пользователям приходится делать дополнительный шаг, чтобы получить доступ к элементам меню. (И помните, возросшая узнаваемость не обязательно означает, что время выполнения задач или показатели успешности для задач гамбургер-меню изменились.)
Но знакомство само по себе не отменяет его фундаментальных компромиссов. Скрытие навигации всегда приводит к затратам на взаимодействие , поскольку пользователи должны предпринять дополнительные шаги для доступа к ключевым опциям, а важный контент остается вне поля зрения.
При разумном использовании — особенно на экранах с ограниченным пространством — меню-гамбургер может быть эффективным. Знакомый дизайн, единообразное размещение и соблюдение передовых практик остаются критически важными.
Вердикт: меню-гамбургеры жизнеспособны, но не универсальны. Используйте их с умом, следуйте лучшим практикам, учитывайте их компромиссы и всегда тестируйте их (и другие значки) с пользователями , чтобы убедиться, что они действительно отвечают их потребностям.
Автор: Кейт Каплан.
Немногие иконки в цифровом дизайне вызывали столько споров за последнее десятилетие, как гамбургер. Меню-гамбургер, получившее свое прозвище из-за своего абстрактного, сложенного, похожего на гамбургер внешнего вида, изначально было принято как умный способ сэкономить место на маленьких экранах, спрятав основную навигацию за одной кнопкой. Хотя этот подход и расхламлял интерфейс, он также способствовал плохому удобству использования: пользователи не замечали его и требовали больше времени для выполнения задач как на мобильных устройствах, так и на настольных компьютерах.
Хотя тогда это был новый шаблон, сегодня большинство пользователей узнают меню гамбургера и знают, что оно означает. Тем не менее, многие из тех же дизайнерских рисков применимы. В этой статье мы пересматриваем наши ранние выводы по меню гамбургера, делимся исследованиями узнаваемости гамбургера сегодня и предлагаем лучшие практики визуального дизайна для значка гамбургера.
Тогда: гамбургер снизил удобство использования интерфейса
В 2015–2016 годах мы провели ряд качественных и количественных исследований, сравнивающих скрытые навигационные шаблоны (например, меню гамбургеров) с видимой, постоянно включенной навигацией. Результаты были ясными и последовательными:- Пользователи меньше взаимодействовали с контентом, скрытым за значком гамбургер-меню.
- Процент успешности выполнения задач снизился.
- Время выполнения задачи увеличилось.
- Общая удовлетворенность снизилась.
Нашим руководством было сделать навигацию видимой, когда это возможно, и использовать гамбургер-меню экономно — только когда этого действительно требуют ограничения пространства (и никогда на рабочем столе). Кроме того, если использовалось гамбургер-меню, мы рекомендовали следовать нескольким лучшим практикам, которые по-прежнему актуальны (и обобщены в конце этой статьи).
Сейчас: гамбургер — привычная модель
За последнее десятилетие меню-гамбургер — как и его тезка — стало классикой. Когда дизайн mobile-first закрепился, он предложил чистое, экономящее место решение, и когда лидеры дизайна, такие как Apple и Amazon, приняли его, другие последовали его примеру. Его растущая вездесущность помогла стандартизировать его значение: благодаря многократному воздействию пользователи научились узнавать и интерпретировать значок с большей уверенностью.В недавнем исследовании, проведенном для книги «Цифровые иконки, которые работают: полное руководство по улучшению опыта с помощью эффективной иконографии» , участникам были показаны десятки иконок-гамбургеров в контексте и предложено предсказать их функцию.
Хотя в этом исследовании не измерялось время выполнения задачи или ее успешность, как в наших предыдущих исследованиях, оно оценивало узнаваемость: когда пользователи видели значок, распознавали ли они в нем скрытое меню?
И они это сделали. В большинстве случаев участники правильно идентифицировали значок гамбургера как главное меню или категории сайта верхнего уровня, особенно когда он появлялся в ожидаемых местах и со стандартным стилем (3 сложенные строки одинаковой длины).
В случае с иконками-гамбургерами позиция имеет большое влияние на интерпретацию. Пользователи обычно понимают, что иконка означает «здесь скрыты категории», если она появляется в ожидаемом месте: в верхнем левом углу экрана.
В нашем исследовании даже небольшие изменения дизайна значка гамбургера не вызывали серьезных проблем при условии сохранения типичного положения.
Например, на мобильном сайте Toms в верхнем левом углу использовалась похожая на документ версия значка гамбургера — три линии, заключенные в прямоугольную рамку.
Большинство пользователей по-прежнему правильно интерпретировали его как главное меню, хотя граница вносила небольшую путаницу. Один участник принял его за документ, а другой, изначально неуверенный, рассуждал так:
«Обычно это был бы пункт меню, но тот факт, что он в квадрате, заставляет меня думать, что это что-то другое. Но тот факт, что я не вижу меню в других местах, заставляет меня думать, что это меню».
На мобильном сайте Newsweek был изображен значок гамбургера с наложенной на него стрелкой (вероятно, попытка намекнуть на раздвижную панель).
Однако пользователи проигнорировали дополнительную информацию и все равно правильно предсказали, что значок покажет общие категории сайта. Опять же, привычное расположение значка в верхнем левом углу, вероятно, помогло интерпретации.
Newsweek.com (мобильная версия): Пользователи интерпретировали трехстрочный значок гамбургера с наложенной стрелкой в верхнем левом углу как скрытое меню.
Однако подобные украшения излишни: изменение привычной формы может вызвать сомнения, даже если не полностью исключает узнавание.
Устойчивое узнавание значка гамбургера, несмотря на небольшие изменения дизайна, отражает то, что мы видели в цифровых взаимодействиях: однажды незнакомые шаблоны становятся второй натурой благодаря многократному воздействию. Однако это не означает, что меню гамбургера надежно или универсально понятно — особенно для менее технически подкованной аудитории или в незнакомых макетах.
Кроме того, поскольку в этом исследовании рассматривалась только узнаваемость, мы не можем сказать, изменилось ли за эти годы время выполнения задач или показатели успешности для задач, связанных с гамбургер-меню. (Прошлые проблемы с удобством использования были связаны не только с узнаваемостью значка; они также включали обнаруживаемость, запоминаемость и общую знакомость с шаблоном.)
Внимание: когда привычность становится помехой
Меню-гамбургер стало настолько вездесущим, что его визуальная форма — три сложенные линии — теперь глубоко укоренилась в ментальных моделях пользователей . Настолько, что иконки, использующие похожую структуру, могут быть неверно истолкованы как меню-гамбургер , даже если они выполняют совершенно другие функции.Этот вид визуальных помех особенно распространен, когда линейные значки, такие как значки списков или фильтров, размещаются в верхнем левом углу экрана — в месте, тесно связанном с основной навигацией по сайту.
Например, в настольном приложении Apple Notes в левом верхнем углу рядом со значком галереи появился значок списка. Несмотря на то, что он был снабжен точками, похожими на маркеры, чтобы отличить его от традиционного значка гамбургера, пользователи часто интерпретировали его как навигационное меню.
Один из участников объяснил:
«Это гамбургер [значок] слева. Это своего рода расширяющаяся навигация. Она бы расширялась и показывала список дополнительных пунктов меню или функций».
Apple Notes (для настольных ПК): многие пользователи интерпретировали значок списка в верхнем левом углу как значок гамбургера, представляющий скрытое меню.
В другом примере иконка фильтра в виде линии в мобильном приложении YouTube вызвала путаницу. Многие пользователи интерпретировали ее как категории или список избранного (термины, более тесно связанные с навигацией или представлениями списков, чем с фильтрацией).
Youtube.com (мобильная версия): многие пользователи интерпретировали значок «Фильтры поиска» в контекстном меню в нижней части экрана как список категорий или избранного.
Этот пример показывает, насколько сильно пользователи ассоциируют сгруппированные строки с навигацией, даже если значок не расположен в верхнем левом углу.
Вывод: нужно проявлять осторожность при использовании линейных иконок (например, для списков, фильтров или представлений контента) в местах, которые пользователи обычно связывают с навигацией. Особенно при размещении в верхнем левом углу эти иконки могут быть ошибочно приняты за меню-гамбургеры. Кроме того, обязательно маркируйте иконки для поддержки узнаваемости и интерпретации.
Рекомендации по разработке иконок-гамбургеров
Недавние исследования подтверждают, что меню-гамбургер широко узнаваемо: большинство пользователей интерпретируют этот значок как скрытое меню или список категорий. При продуманной реализации он может стать эффективным инструментом навигации.Секретный соус для удобных и понятных гамбургер-меню не изменился. Чтобы максимизировать удобство использования сегодня и в будущем, следуйте этим рекомендациям:
- Используйте стандартный значок из 3 линий: Оригинальный значок гамбургера из 3 линий вызывает сильный отклик у пользователей. Не нужно проявлять креативность: Придерживайтесь привычного шаблона, который ожидают пользователи.
- Поместите его в верхнем левом углу: пользователи постоянно смотрят в верхний левый угол экрана в поисках скрытой навигации. Размещение меню в другом месте увеличивает риск того, что его не заметят или неправильно поймут.
- Избегайте дополнительных стилей или границ: декоративные элементы, такие как контуры или рамки, могут привести к тому, что пользователи ошибочно примут значок за что-то другое (например, значок документа).
- Подпишите меню значка : Подпись особенно полезна для менее опытных пользователей или при знакомстве с шаблоном в незнакомых контекстах.
- Используйте легкую анимацию или переходы: если при нажатии на значок открывается панель навигации, легкие подсказки движения могут усилить взаимодействие и направить ожидания пользователя.
- Избегайте путаницы с другими трехстрочными значками: будьте особенно внимательны при дифференциации других линейных значков (например, списков или фильтров) и избегайте размещения похожих значков в верхнем левом углу экранов и панелей.
- Измените масштаб значка-гамбургера соответствующим образом: значок-гамбургер, рассчитанный на смартфон, может стать практически невидимым на большом экране настольного компьютера.
- Сделайте так, чтобы на него можно было кликнуть: слишком плоский дизайн может затруднить обнаружение и ограничить взаимодействие.
- Добавьте визуальный отступ вокруг значка: расположение значка рядом с заголовками или другими элементами пользовательского интерфейса ухудшает его видимость.
- Обеспечьте достаточную контрастность: значки с низкой контрастностью сливаются с фоном, что особенно актуально для пользователей с нарушениями зрения.
- Предоставьте дополнительные методы навигации: поддержите гамбургер встроенными ссылками, списками связанных ссылок, заметной функцией поиска и ссылками в нижнем колонтитуле.
И помните, что старый принцип все еще верен, несмотря ни на что: если вам не нужно скрывать навигацию, не делайте этого. Несмотря на то, что большинство пользователей теперь узнают гамбургер-меню, скрытая навигация все еще увеличивает стоимость взаимодействия, поскольку пользователям приходится делать дополнительный шаг, чтобы получить доступ к элементам меню. (И помните, возросшая узнаваемость не обязательно означает, что время выполнения задач или показатели успешности для задач гамбургер-меню изменились.)
Заключение: обновленный вердикт
Меню гамбургеров теперь стало привычным и узнаваемым.Но знакомство само по себе не отменяет его фундаментальных компромиссов. Скрытие навигации всегда приводит к затратам на взаимодействие , поскольку пользователи должны предпринять дополнительные шаги для доступа к ключевым опциям, а важный контент остается вне поля зрения.
При разумном использовании — особенно на экранах с ограниченным пространством — меню-гамбургер может быть эффективным. Знакомый дизайн, единообразное размещение и соблюдение передовых практик остаются критически важными.
Вердикт: меню-гамбургеры жизнеспособны, но не универсальны. Используйте их с умом, следуйте лучшим практикам, учитывайте их компромиссы и всегда тестируйте их (и другие значки) с пользователями , чтобы убедиться, что они действительно отвечают их потребностям.
Автор: Кейт Каплан.
Понравилась статья? Жмите лайк или подписывайтесь на рассылку.
А также поделитесь статьей с друзьями в соцсетях.
Популярные статьи
