Иконка-гамбургер / Хабр
Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.
Иконка-гамбургер — она везде. Везде вокруг нас. В веб-приложениях, на мобильных и десктопных сайтах, в программном обеспечении. Этот вездесущий значок из трех линий в настоящее время настолько распространен, что такое впечатление, как будто он однозначно ассоциируется с меню навигации. Но так ли это?
В последнее время дискуссии об эффективности иконки-гамбургера достигли новых высот. В статьях выдающихся дизайнеров, и на нескольких сайтах, включая The Atlantic, TechCrunch, The Next Web и Nielsen Norman Group приходят к выводу, что это UX-антипаттерн, модная и простая в реализации иконка, которая является регрессом от более простых и более выразительных альтернатив. Но антипаттерн это или нет, использование значка настолько разрослось, что делает его почти непременным атрибутом на большинстве веб-сайтов, особенно на маленьких экранах.
Учитывая мое положение в качестве дизайнера в команде сайта m.booking.com, и использование нами этой иконки для показа выдвигающегося меню, я решил исследовать этот объект. А начал я с изучения происхождения значка, чтобы попытаться понять его путь к позору.
Иконка-гамбургер является классической. Даже если вы не знакомы с этим ее названием, то три черные полосы столь же знакомы, как курсор мыши — постоянный спутник нашего интернет-серфинга с первого дня, как вы стали обладателем своего компьютера.Gizmodo
Это звучит многообещающе. Но даже при том, что иконка является классической и была вокруг всегда, веб-дизайнеры были менее последовательны в ее использовании. Значок был использован для списков, перетаскивания и изменения порядка, выравнивания, и многого другого. Возможно, это неправильное использование объясняет его критику, как значка меню. Может быть, из за широкого распространения и разнообразного использования эта иконка потеряла способность передавать единую метафору и, в свою очередь, ставит пользователей в замешательство.
Вся эта история сподвигла меня задаться вопросами: «Неужели мы неправы, а все остальные правы? Причиняет ли это неудобства нашим пользователям? Есть ли люди, на самом деле понимающие, что представляют из себя эти три маленькие линии на нашем сайте?»
Постоянные читатели этого блога не будут удивлены, узнав, что нашим следующим шагом было задать эти вопросы в форме A/B теста. Как и все остальное, иконка-гамбургер был подвержен воздействию наших многочисленных клиентов, которые, путем взаимодействия с меню, должны определить, был ли этот значок лучшим решением. К этому времени я прочитал достаточно статей и информационных данных, чтобы быть уверенным, что отсутствие консенсуса или другие результаты не были следствием поведения покупателей, для которых разрабатывался дизайн. Я решил последовать методу, описанному Джеймсом Фостером, на который многие ссылаются, в том числе один из наших лучших мобильных специалистов — Люк Вроблевски.
Ранее мы протестировали несколько мест размещения и стилей значка (с рамкой, без рамки, с иконкой, разных цветов и так далее), но никогда не тестировали слово «Меню» — из-за сложностей, связанных с нашим желанием провести испытания на сорок одном языке, поддерживаемом нами.
Тем не менее, мы двинулись вперед, найдя переводы с помощью нашей команды экспертов по языкам и запустили тест:
Базовый вариант
Наш исходный значок меню «гамбургер» слева от заголовка и с белой разделительной чертой справа.
Альтернативный вариант
Слово «Меню» внутри блока с белой рамкой с закругленными углами, также выравнивается по левому краю.
Мы запустили эксперимент для всей нашей пользовательской базы. А также, учитывая известность и вездесущесть этого элемента пользовательского интерфейса, надеялись, что не займет много времени подвергнуть тестированию миллионов наших клиентов по всему миру, на каждом из поддерживаемых языков и большом числе устройств.
Так каков конечный результат? Слово победило фастфуд, как это было в эксперименте Джеймса Фостера, или победит булочка с котлетой?
В ходе этого эксперимента, замена иконки на слово «Меню» не оказало существенного влияния на поведение наших пользователей.
Конечно мы не можем эти данные экстраполировать на все. В каких-то странах, на каких-то языках или устройствах, это возможно сработало лучше или хуже. Но в глобальном масштабе мы можем сделать вывод, что слишком сильно высмеивали «гамбургер». В целом, он был столь же узнаваем, как и слово «Меню». В духе управления продвижением дизайна нам, наверное, следует рассмотреть и другие варианты, и, может быть, попробовать к нашей иконке-гамбургеру добавить сыр, ломтик бекона и кортофель фри, но сейчас мы рады сообщить, что наш «трехлинейный друг» прилеплен везде. Его фактическое размещение, форма, размер, положение и цвет — это, конечно, предмет для будущих тестов.
Несомненно, это урок для всех нас о сущности A/B тестирования. Вы никогда не тестируете элементы UI, модель или функцию в целом.
Вы тестируете эти вещи на очень конкретной пользовательской аудитории при определенных и конкретных сценариях. То, что работает для Booking.com, может не работать для вас или ваших пользователей. Это одна из причин, почему мы провели свое A/B тестирование. Выводы других экспертов, данные с других сайтов или гипотезы, придуманные в пабе, поедая гамбургер, все будут недоказанными, пока они не проверены на наших клиентах и на нашей платформе.
Не запутаться бы в нашей собственной метафоре, но это, как рецепт хорошего гамбургера. Даже если вы в точности записали за мной все ингредиенты, в конечном итоге вы получите совершенно другой гамбургер. На это, конечно, повлияет качество доступного на рынке мяса, мука используемая для хлеба и тысячи других факторов. Лично для нас, идея хорошая, если она будет хороша для Booking.com. Если мы может повторить ее на нашем сайте, и, если она будет работать для всех наших клиентов.
Наше мнение
Всегда надо тестировать свои идеи и смотреть, что вам говорят полученные данные и, какие вопросы возникают.
Мой совет? Откусите и посмотрите, что произойдет.
Краткая история иконки-гамбургера
- Дизайн
- 8 мин на чтение
- 7975
Все мы видели иконку-гамбургер. Фактически, большинство использует её каждый день. Она стала стандартом в дизайне сайтов и приложений. Прямо сейчас я вижу её в правом-верхнем углу своего Google Chrome.
В последнее время много спорили, хорошая ли была идея использовать иконку-гамбургер в основном для боковых меню. Но всё больше людей задаются вопросом, откуда она вообще взялась и почему так широко распространилась.
Создатель
Придумал её Норм Кокс для Xerox Star, первого в мире компьютера с графическим пользовательским интерфейсом.
Норм — сооснователь Cox&Hall и консультант по интерактивному дизайну и дизайну пользовательского опыта с 1982 года. Для этого интерфейса он создал ещё иконку документа.
Геофф Элдей, отличный проектировщик программного обеспечения, нашёл создателя и заполучил это видео.
Он связался с Нормом, который был рад поделиться своей историей. Вот что он сказал:
Изображение должно было быть простым как дорожный знак, функционально запоминаться и быть похожим на список, который в результате отображался. Пикселей для работы было мало, но иконка должна была быть простой и чёткой. Для отрисовки изображения у нас было всего 16×16 пикселей или даже 13×13, уже не помню точно.
.
Однако, после Xerox Star иконка-гамбургер на какое-то время исчезла.
Возрождение
Для интерфейса смартфонов, гораздо меньшего по размерам, дизайнерам пришлось искать способы уместить всё на 4-дюймовом экране.
Сейчас сложно найти самое первое приложение, в котором появилась иконка-гамбургер, но первым из запомнившихся пользователям было:
Похоже, это самое первое появление иконки-гамбургера (кроме Xerox) в роли кнопки меню. Приложение появилось 17 июня 2009 года и было доступно на iPhone 3Gs. Нажатие на иконку открывало список записей и опции. Эпл уже позаимствовали мышь и рабочий стол у Xerox, когда создавали Макинтош, маленькая иконка не значила многого.
Tweetie for iPadTweetie было первым приложением для Твиттера. Оно вышло в 2008 году и использовало иконку-гамбургер для списков. Приложение создал Лорен Брихтер, поработавший до этого в Эпл (июнь 2006 — июнь 2007). То, что дизайнер из Эпл использовал эту иконку, не похоже на простое совпадение.
Фейсбук задаёт трендФейсбук очень сильно повлиял на распространение иконки-гамбургера в связке с боковым меню.
В 2008 году они начали с такой сеточной иконки:
Затем в 2009 году они добавили ещё один ряд.
И закончилось всё тем, что в 2010 году сетка превратилась в полоски.
В приложении уже было боковое меню, всё что они сделали, это просто соединили его с сеткой. Пожалуй, это самое значимое из первых появлений иконки-гамбургера.
Выходит, Эпл стала главной причиной возрождения иконки-гамбургера. Они переизобрели смартфон и заставили всех думать над компактным отображением. Вдохновлённые идеями Xerox, они воплощали их в своих интерфейсах. Затем эстафету переняли популярные соцмедиа-приложения, а все остальные последовали за ними.
Сейчас иконка-гамбургер используется на сайтах и в приложениях для вызова бокового меню, а также для отображения списков.
Она есть в таких популярных приложениях как:
Иконка открывает список ваших подписок.
PathPath был одним из первопроходцев, использовавших иконку-гамбургер (и сейчас использующий) для перехода к навигации.
Также вы можете найти её в навигации Twitter Bootstrap и приложении Старбакса.
Она встречается в большом количестве приложений и стала индустриальным стандартом для отображения дополнительных меню.
Не так давно сайты тоже её приняли. Скрытые меню хорошо работают в минималистичном дизайне и потому очень популярны на сайтах дизайнеров.
Будущее
