Иконка-гамбургер

Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.

Иконка-гамбургер

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

В последнее время дискуссии об эффективности иконки-гамбургера достигли новых высот. В статьях выдающихся дизайнеров, и на нескольких сайтах, включая The Atlantic, TechCrunch, The Next Web и Nielsen Norman Group приходят к выводу, что это UX-антипаттерн, модная и простая в реализации иконка, которая является регрессом от более простых и более выразительных альтернатив. Но антипаттерн это или нет, использование значка настолько разрослось, что делает его почти непременным атрибутом на большинстве веб-сайтов, особенно на маленьких экранах.

Учитывая мое положение в качестве дизайнера в команде сайта m.booking.com, и использование нами этой иконки для показа выдвигающегося меню, я решил исследовать этот объект. А начал я с изучения происхождения значка, чтобы попытаться понять его путь к позору.

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

Gizmodo

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

Вся эта история сподвигла меня задаться вопросами: «Неужели мы неправы, а все остальные правы? Причиняет ли это неудобства нашим пользователям? Есть ли люди, на самом деле понимающие, что представляют из себя эти три маленькие линии на нашем сайте?»

Постоянные читатели этого блога не будут удивлены, узнав, что нашим следующим шагом было задать эти вопросы в форме A/B теста. Как и все остальное, иконка-гамбургер был подвержен воздействию наших многочисленных клиентов, которые, путем взаимодействия с меню, должны определить, был ли этот значок лучшим решением. К этому времени я прочитал достаточно статей и информационных данных, чтобы быть уверенным, что отсутствие консенсуса или другие результаты не были следствием поведения покупателей, для которых разрабатывался дизайн. Я решил последовать методу, описанному Джеймсом Фостером, на который многие ссылаются, в том числе один из наших лучших мобильных специалистов — Люк Вроблевски.

I then decided to test the hamburger icon against the word MENU


Ранее мы протестировали несколько мест размещения и стилей значка (с рамкой, без рамки, с иконкой, разных цветов и так далее), но никогда не тестировали слово «Меню» — из-за сложностей, связанных с нашим желанием провести испытания на сорок одном языке, поддерживаемом нами. Тем не менее, мы двинулись вперед, найдя переводы с помощью нашей команды экспертов по языкам и запустили тест:

Базовый вариант

Наш исходный значок меню «гамбургер» слева от заголовка и с белой разделительной чертой справа.

Базовый вариант


Альтернативный вариант

Слово «Меню» внутри блока с белой рамкой с закругленными углами, также выравнивается по левому краю.

Альтернативный вариант


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

Так каков конечный результат? Слово победило фастфуд, как это было в эксперименте Джеймса Фостера, или победит булочка с котлетой?


Результаты


В ходе этого эксперимента, замена иконки на слово «Меню» не оказало существенного влияния на поведение наших пользователей. С помощью нашей огромной базы пользователей, мы можем, с очень высокой степенью вероятности, констатировать, что, в частности, для посетителей Booking.com, иконка-гамбургер исполняет свою роль так же, как и версия с текстовым описанием.

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

Несомненно, это урок для всех нас о сущности A/B тестирования. Вы никогда не тестируете элементы UI, модель или функцию в целом. Вы тестируете эти вещи на очень конкретной пользовательской аудитории при определенных и конкретных сценариях. То, что работает для Booking.com, может не работать для вас или ваших пользователей. Это одна из причин, почему мы провели свое A/B тестирование. Выводы других экспертов, данные с других сайтов или гипотезы, придуманные в пабе, поедая гамбургер, все будут недоказанными, пока они не проверены на наших клиентах и на нашей платформе.

Не запутаться бы в нашей собственной метафоре, но это, как рецепт хорошего гамбургера. Даже если вы в точности записали за мной все ингредиенты, в конечном итоге вы получите совершенно другой гамбургер. На это, конечно, повлияет качество доступного на рынке мяса, мука используемая для хлеба и тысячи других факторов. Лично для нас, идея хорошая, если она будет хороша для Booking.com. Если мы может повторить ее на нашем сайте, и, если она будет работать для всех наших клиентов.

Наше мнение

Всегда надо тестировать свои идеи и смотреть, что вам говорят полученные данные и, какие вопросы возникают. Мой совет? Откусите и посмотрите, что произойдет.
Поделиться публикацией
Комментарии 71
    +6
    Есть мнение, что Вы зря убрали белую полосу, визуально отделяющую кнопку от логотипа. Особенно выделятся на фоне поиска, у которого осталось отделение от логотипа.
      +12
      Перевод не замечай @ комменты посылай
        +12
        Даже не увидел этой строчки до картинки, привык что обычно везде используется стандартный функционал для обозначения перевода.
          +5
          Здесь используется стандартный функционал «из песочницы», который не совместим со стандартным функционалом «перевод». Так что автор не виноват, это недоработка (или фича?) Хабра.
            +6
            В правилах песочницы указано, что переводы не приветствуются.
            Возможно с этим связано отсутствие стандартного функционала для обозначение перевода.
              +2
              Но, тем не менее, статья здесь.
              0
              Фича — фичей, но проблема-то остается: в итоге не была полноценно прочитана статья, не была проверена ее принадлежность к корпоративному ресурсу :). Так можно слить любую «дезу», (без пользы, конечно, но..). (например: можно написать статью об A/B тестировании наличия на логотипе фейсбука религиозной символики..)
          0
          Статью не читали? Там первой строкой «Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.»
          +5
          Привыкание к этой кнопке очень большое, мне почему-то приятнее лицезреть «гамбургер» вместо «MENU» — своего рода интуитивный алиас, который не нужно заучивать.
            0
            По сути, в результатах теста так и сказано, что замена «трехлинейного друга» на слово «Меню» не дало ощутимых результатов.
            Лично я, тоже привык к трем полоскам.
            +13
            Очень хорошая интуитивная иконка. Особенно хороша там, где она единственная по вертикали и первая/последняя на панели.
            Т.е. когда она явно настаивает: «чувак, мы вооот сюда всё попрятали для красоты и удобства».

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

            С интуитивной силой этой иконки сравнятся только «пупырышки» для перетаскивания, крестик закрытия и пауза ||.
              +7
              Ухты. Прочитал ваш комментарий, взглянул на панельку хабра, и — я был слеп, но теперь вижу! Насколько сильно отличается ассоциативная нагрузка трёх иконок: звоночек, карандашик и… три полоски, которые не только не связаны с предметом реального мира, но и вообще сами по себе с чем-то не связаны.
              Полоски могут ассоциироваться разве что с «всё то, чего нету в окружающих меня иконках» или «то, для чего дизайнер не осилил нарисовать иконку», но тогда её действительно хочется видеть с краю ряда.
              По сути, наверное, пересказал вашу мысль.
                0
                ну, по сути, да
              0
              Я думаю, что показатели теста были бы гораздо объективнее, если бы было представлено время, за которое новый пользователь(имеется в виду первое посещение) нашел бы глазами и нажал на гамбургер и меню соответственно.
                0
                Хм, 0,5 секунды vs 0,55 секунды, разве это было бы показательно?
                  0
                  Думаю, что если результаты будут явно смещены в одну из сторон, то да.
                    0
                    Напомню, что, как понятно из статьи, результаты были без явного смещения в какую то ни было сторону.
                      +2
                      Мне пришлось несколько раз перечитать, чтобы убедиться в отсутствии в статье каких-либо данных касающихся того, как именно был получен результат. Нет ни цифр, ни объективного критерия. Просто фраза
                      не оказало существенного влияния на поведение наших пользователей

                      Всего лишь утверждение о том, что ничего не изменилось.
                +6
                Мне кажется, результаты теста такие потому, что все просто знают, что в левом верхнем углу должна располагаться кнопка открытия меню. Тем более что большинство все равно меню открывают свайпом слева направо
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Не могу опровергнуть ваше утверждение с помощью статистики, но сколько андроид-приложений я ни смотрел, везде этот шаблон управления присутствовал
                      0
                      Есть приложения в которых свайп не работает и приходится жать на кнопку. Например, приложение вконтакта.
                        0
                        У меня работает свайп для меню.
                      • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      Кстати Apple говорит о том, что данный вид навигации — зло и не надо его использовать(WWDC 2014 — Designing Intuitive User Experiences). И очень многи популярные приложения от него уже отказались.
                        0
                        У меня это решение вызвало бы недовольство, тк то, что всегда работало, вдруг работать перестало. Или вы говорите о новых приложениях?
                          0
                          Нет. Обратите внимание на приложения Facebook, Twitter, etc. Все они отказались от «гамбургера» в пользу TabBar. Гамбургер не перестал работать, просто Apple настоятельно не рекомендует его использовать в приложениях.
                      +5
                      Автор как-то непоследовательно излагает мысли. То иконка у него позорная, то при А/B тестировании ничего позорного не произошло — ну вообще никакого результата исследования. А разгадка, я думаю, одна — все пользователи давно привыкли, что слева вверху меню, и нарисуй ты там хоть чайку — эффект будет один.
                        0
                        Как вариант, часто бывает справа.
                        +16
                        На Хабре слева вот иконка с моей аватарой, иконка с колокольчиком и иконка с гамбургером. Все три вызывают меню. При этом меню гамбургера называется «Разделы». И я до сих пор путаюсь, в каких из этих меню какой пункт искать.
                          0
                          true story. Аналогично. А всё потому, что
                            +8
                            А я забываю, в какое из этих меню спрятали поиск…
                              +3
                              Да, расположение поиска я тоже долго не мог запомнить.
                              Но по сути, все, что находится в левой колонке — это меню (не считая значка «Вверх» и рекламной кнопки). И в данной ситуации использование иконки-гамбургера не совсем оправдано.
                                0
                                А я так и не запомнил, по очереди открываю всё подряд, пока не найду.
                              0
                              Более того, все три меню содержат по два подменю, первое уникальное, а второе — ОДИНАКОВОЕ ДЛЯ ВСЕХ ТРОИХ. WTF?!?!?!!?
                              0
                              Только мне противно, когда иконку со списком называют гамбургером?
                              В моём мозге она ассоциируется с иконкой из Microsoft Office (с кружочками левее палочек).
                              Прекрасная иконка, особенно когда находится с краю. И 1 из немногих, которой идёт монотонное представление (ну не могу я после превосходных цветных копировать-вставить из офиса привыкнуть к андроидовскому нечто).
                                0
                                Apple выпендрился и для меню сделал 2 полоски. Просто бутерброд с колбасой, а не гамбургер.
                                  0
                                  А о чем речь? Не соображу что-то.
                                    0
                                    Об иконке меню на сайте Apple.com при просмотре с мобильного. Иконка на кнопке — 2 полоски вместо 3.
                                  +1
                                  Вы тестировали на гарантированно новых посетителях или на всех? Если на всех — то результат предсказуем, постоянные уже знают, что меню там и им совсем не важно какая иконка в том месте.
                                    0
                                    Тоже возникла такая мысль. Правда, переводчик вряд ли ответит на этот вопрос…
                                    0
                                    Странно, раньше никогда не замечал, чтобы «гамбургер» был популярен. Чаще всего я его вижу именно на хабре.
                                      +1
                                      Ах, так это гамбургер…
                                        +1
                                        Зачем выкладывать в конце рабочего дня фото такого сочного гамбургера?
                                          +3
                                          Утешает только осознание того, что в реальности они такими не бывают, а бывают са-а-авсем другими:

                                          image

                                          Хотя кого я обманываю… ни хрена не утешает! Слюнки всё равно текут :)
                                          +1
                                          Ощущение, что текст SEOшник писал
                                            –1
                                            Для тех, кому интересно: нашёл недавно библиотеку с иконками, которая позволяет сделать анимацию гамбургера как на сайте flatornot.klm.com/en_GB/ средствами CSS3 без картинок и это не единственный пример с анимацией этой иконки.

                                            Библиотека: fian.my.id/marka/
                                            +1
                                            Добавлю, что этот символ использовался для меню еще во времена текстовых интерфейсов (Turbo Vision, например) под MS-DOS. Тогда для его вывода использовался знак с кодом 240 из второй половины ASCII-таблицы.
                                              +1
                                              «постоянный спутник нашего интернет-серфинга с первого дня, как вы стали обладателем своего компьютера»

                                              Что-то я не припомню в досе или нортоне такой иконки… И в 95-ом тоже, вроде, не было.
                                                +2
                                                В софте, который писался с использованием Borland Turbo Vision — сколько угодно.
                                                Первый попавшийся скриншот
                                                image
                                                  0
                                                  Я ж не говорил что её не было вообще, сказал лишь что мне не попадалась.

                                                  Но вы меня убедили, возможно где-то и правда была.
                                                0
                                                Без контрольной группы эксперимент не имеет доказательной силы.

                                                Если бы они аналогично проверили какую-нибудь другую нерелевантную иконку, например, с изображением куска пиццы, то, я уверен, получили бы аналогичные результаты.
                                                  +3
                                                  Честно говоря, не понимаю этой дурацкой тенденции упростить иконки до минимума… Тогда идеальной иконкой станет точка!
                                                  Вспоминаю с теплом времена windows 98 c ее иконками, в которых прорисовывались детали… У нас теперь экраны со сверх высоким разрешением, а рисуем прямоугольнички да квадратики…

                                                  Недавно выбесило то, как обозначили журнал звонков в интерфейсе андроида от HTC, просто иконка с часами, с-ка. А может это, блин, будильник, напоминалка позвонить или что вообще?.. Меньше символизма, товарищи,
                                                  все самые прекрасные вещи были тогда, когда создатели добавляли ДЕТАЛИ. Как раньше с домами было — были красивые дома с барельефами, скульптурами, и прочими декоративными элементами, а теперь — стеклянные коробки. Так и с иконками… деградация…
                                                    0
                                                    Тихо, тихо… Мало ли что нас ждет в системе, которую в очередной раз стараются разработать без привязок к привычному — в Windows 10. Сделают кнопку «пуск» в виде точки, а там и веб-сайты переймут моду. Я, кстати, по поводу «трех полосок» так думаю: дизайнеры бы взяли символы, которые в ОС меню обозначают, но на Маке и в Винде, и (во многих) менеджерах окон на Линуксах символы эти не «отвлеченные», а изображающие что-то уникальное для ОС («яблоко», «флаг», лого X-Windows или лого KDE, скажем), и такое на сайте как поставить в роли универсального символа меню?
                                                      –1
                                                      Да-да

                                                      Непонятно, куда дизайн движется.
                                                        0
                                                        Понятно куда, вообще то. К чистоте и простоте.
                                                        0
                                                        Насчет тенденции — это не только в веб-дизайне.
                                                        В искусстве тоже была деградация
                                                        image
                                                        0
                                                        Меня больше прикалывает иконка share В первые я ее увидел на N900 потом она плавно перетекла во все остальные сервисы.
                                                          0
                                                          Мне вот эти три полоски (опа, а это — «гамбергер»! Почему тогда не «тождественность», та, что "≡", она же ≡ и ≡? И этоу уже не упоминая символа &2630;, который, ни много ни мало — "TRIGRAM FOR HEAVEN") никак не понравятся. Вообще не говорящая пиктограмма для понятия «меню».

                                                          И ладно бы, когда человек делает страничку для смартфона, на экран не влезает меню, а человек тупо хочет сделать страницу чисто текстовой, посему выбрал символ «позаковыристее» из UTF-8, и приделал в уголок страницы. Правда, почему не символ «равно», или символ «решетки», или даже «амперсанд» — но это дело личное. Но когда этот подход побежал по миру?

                                                          Booking.com брать, как пример юзабилити — ой, это рисково. Со вкусом у них… не очень, при этом сайт построен так, чтобы миллионный раз напомнить, какие они лучшие на рынке (тогда как по ценам проще пойти к конкурентам), притом UI действительно меняется очень часто, и даже эти дурные таблички («мы ищем для вас номер, запомните, мы самые лучшие» — при том, что задержка на «поиск» создается явно искусственно) через adblock и то можно замучиться выкорчевывать. Это я к тому, что на их сайте и символ «собаки» будет лучше (и аккуратнее) выглядеть, чем уродская кнопочка «меню в прямоугольнике» :)
                                                            0
                                                            Символ выбран, потому что три полоски символизируют три пункта меню, не больше и не меньше.
                                                              0
                                                              Логично. В таком случае "=" означает меню с двумя пунктами, так? :)

                                                              И ладно "&2630;", а вот "&2631;", "&2632;", "&2633;", "&2634;", "&2635;", "&2636;", "&2637;" — это меню, где некоторые пункты — из нескольких слов.

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

                                                              Контрпримеры: iPhone годами обходился без кнопки «открыть меню». Android годами обходится символом «три точки по вертикали» для обозначения кнопки вызова меню.
                                                                0
                                                                Это не вчерашнее изобретение, символ из трех полосок был еще в ASCII. Раньше я уже приводил тут скриншот интерфейса, разработанного на Turbo Vision под DOS, которому больше двадцати лет. Я не пытаюсь защищать этот выбор, но исторические корни он, определенно, имеет, также как и определенное визуальное сходство с предметом, который изображает (даже если вам так не кажется). При этом, от других вариантов, которые вы привели, его выгодно отличает то, что у него нет почти никаких других значений. Непонятное — лучше, чем то, что кажется одним, а является другим.

                                                                И если уж говорить об абсурдных символах, то почему все накинулись на этот, в котором есть определенная логика, если существуют, например, троеточия (Flickr), которые так и говорят: «мы очень долго думали, как назвать этот пункт меню, куда поместили все, что не влезло в другие, но так ничего в голову и не пришло».
                                                            +3
                                                            Когда я первый раз столкнулся с этой иконкой в каком-то приложении (кажется, в гуглокартах, когда убрали локатор), я был в шоке. Сначала я долго искал глазами меню или что-то похожее, в районе нажкранных кнопок и по углам. Заметил в углу выступающие полосочки. Нерешительно тапнул — появилась менюшка. Помню, подумал: «Господи, какой же гений до этого додумался? Наверное тот, который убрал локатор и большую часть настроек».

                                                            Конечно, я нашел бы эту кнопку на экране с m.booking.com. Просто потому что это первая кнопка на экране из двух, причем вторая скорее всего не меню. Хотя кто этих дизайнеров знает…
                                                              0
                                                              Эта иконка, точнее значок предложен еще в 18 веке К.Ф.Гауссом
                                                                0
                                                                Он придумал это как символ модульного сравнения.
                                                                А вот кто первым решил включить и так задействовать этот символ в компьютерах, знает ли кто?
                                                              +1
                                                              Я почему-то ассоциировал данную иконку не с пунктом «меню», а, скорее, с пунктом «Настройки».
                                                                0
                                                                У меня она ассоциируется со «Всё, что не влезло...». Этакая метафора для кучи редко используемого барахла.
                                                                0
                                                                Иконка-гамбургер является классической. Даже если вы не знакомы с этим ее названием, то три черные полосы столь же знакомы, как курсор мыши — постоянный спутник нашего интернет-серфинга с первого дня, как вы стали обладателем своего компьютера.

                                                                Я что-то не припомню подобного убожества в Netscape Navigator.
                                                                  0
                                                                  Курсора мыши не припомните?
                                                                  0
                                                                  Вообще в математике "≡" это символ сравнения по модулю

                                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                  Самое читаемое