В моей последней статье « Очевидное всегда побеждает» , я подробно обсуждал, насколько произвольным и относительным является понятие «очевидное», и затем оставил вам понимание. То, что крупные компании считают своими услугами хорошими для (всех) пользователей, не всегда верно.
Мы видели, что это особенно верно для недавнего часто используемого шаблона для меню навигации, «значок гамбургера». Этот простой трехблочный значок стал условным обозначением меню (в некоторых случаях списков), которое многие компании, такие как Disney, Starbucks, Facebook и Google, использовали в мобильной версии своих веб-сайтов или в своих мобильных приложениях.
В UX кругах было много дискуссий, которые поднимали неинтуитивную природу значка гамбургера. Некоторые альтернативы уже приняты, и этот значок, вероятно, вскоре будет заменен новым и более интуитивным.
В этой статье мы обсудим эволюцию этого шаблона, то, как была реализована иконка, какие компании решили использовать ее в своих проектах, и почему теперь, кажется, все изменилось.
Самое начало распространенной тенденции
В начале этой тенденции, почти три года назад, были некоторые разработчики, которые изучили этот шаблон и обнаружили, что значок гамбургера был необходим для поддержания высокого коэффициента конверсии и удобства пользователей.
По их мнению, значок не отвлекает пользователей от выполнения своей задачи (в данном случае — заполнения формы), предоставляя им свободу навигации по другим страницам. Фактически, они заметили, что ссылки, которые были слишком заметными, привлекли внимание пользователей, в то время как когда они скрывались за значком гамбургера, пользователи использовали ссылки только тогда, когда это было необходимо.
Впоследствии, в своей интересной статье « Не делайте эти ошибки в мобильном меню» , Линда Бустос исследовала потенциал этой новой модели. Она не опровергла предыдущее использование значка гамбургера в качестве меню, но настаивала на правде, которую следует всегда учитывать, важно то, как вы применяете ее к своему дизайну.
В подтверждение своей диссертации она сравнила несколько вариантов дизайна, сделанных в некоторых мобильных приложениях, и составила список того, что делать и чего не следует делать при реализации этого шаблона.
ДОС
- Сообщите посетителю, с чего начать, предоставляя визуальные подсказки, помогающие пользователям контролировать навигацию.
- Сгруппируйте значок категории с другими элементами навигации и следуйте соглашениям при определении порядка значков. Например, поместите значок гамбургера в верхнем левом углу вашей страницы и поле поиска в правом верхнем углу).
- Пометьте свои значки, чтобы уточнить, что они делают.
Donts
- Запутайте значок меню (или другие значки) с вашим логотипом: его нельзя рассматривать как элемент, на который можно нажимать
- Дайте ему слишком много места для дыхания (т.е. не оставляйте слишком много места между значком вашего меню и другими элементами вашей страницы).
Тем временем крупные компании, такие как Disney, Starbucks, Facebook и Google, начали использовать его на своих веб-сайтах или в мобильных приложениях.
Несколько месяцев назад в одной из своих статей Мортен Ранд-Хендриксен не использовал приятные слова для этой иконы. Он идентифицирует значок гамбургера как символ, известный как «тройной бар», используемый в логике и математике, чтобы означать абсолютную эквивалентность или идентичность. По его словам, он стал основным элементом дизайна без пользовательского интерфейса, и его эффективность выше, если использовать его как значок списка, а не как индикатор меню.
По моему скромному мнению, он понимает, что значок гамбургера не похож на значок меню, если только пользователи уже не знают, что он должен показывать пункты меню. Люди, разрабатывающие мобильные приложения, по опыту знают, что значок гамбургера обозначает меню, и они ошибочно полагают, что оно интуитивно понятно. Ключевым моментом является то, что все это будет зависеть от базы пользователей и от того, насколько они уязвимы для ее использования в качестве кнопки меню.
Мортен попадает в точку, когда говорит, что эта иконка является анти-паттерном и не может быть связана с меню, она выглядит только как тройная полоса, потому что это так.
Как и в случае с предложениями Линды Бустон, я предлагаю советы Мортена Рэнд-Хендриксена, направленные на то, чтобы обуздать желание использовать значок гамбургера в качестве значка для меню:
- Попробуйте вместо этого использовать слово «Меню».
- Попробуйте использовать стрелку вниз или другую активную иконку (то есть иконку, которая вызывает действия, такие как плюс, минус и т. Д.).
- Пересмотрите положение и функцию меню.
- Используйте меню вне холста и используйте вкладку со стрелкой, чтобы указать активное взаимодействие.
Хотя обозначено как соглашение, значок гамбургера не работает в каждом случае.
Новые исследования
Одно из последних исследований, которое было проведено, цитируется Люком Вроблевским в его твите:
Затем я решил проверить значок гамбургера со словом «МЕНЮ» http://exisweb.net/mobile-menu-abtest
Выводы из этого исследования были следующие:
1. Люди старше 35 лет, кажется, не понимают значок гамбургера.
2. На результаты влияют демографические значения.
3. В исследовании рекомендуется добавить слово «меню» к значку гамбургера.
Еще один важный урок, который мы можем извлечь из этой истории, заключается в том, что не существует решений, подходящих для каждого проекта, что подтверждается этим сообщением от Джеффри Зельдмана:
Проектные соображения побеждают шаблоны проектирования. Тестируйте и решайте, а не просто копируйте такие вещи, как значок гамбургера. @lukew #aeaatl #mobile #RWD
Выводы
В заключение, тестирование является ключевым . Пользовательское тестирование и A / B или многомерное тестирование могут действительно сказать вам, работает ли ваш дизайн или нет для вашего конкретного случая.
Как я уже говорил ранее, часто широкое принятие данного соглашения обусловлено цепью копирования и вставки, а не хорошо продуманной причиной, поэтому это может оказаться не тем решением, которое вам нужно. Сосредоточьтесь на своих потребностях и не подражайте другим слепо.