Почему все используют иконку «гамбургер» и откуда она появилась Материал редакции

Читатель ЦП, директор студии Samplar Антон Григорьев перевел для ЦП заметку дизайнера Карлы Урбина о том, как появилась популярная иконка, обозначающая меню в современных мобильных приложениях и сайтах.

Все мы видели иконку-гамбургер. Фактически, многие используют её каждый день. Она стала стандартом в дизайне сайтов и приложений. Прямо сейчас я вижу её в правом-верхнем углу своего Google Chrome.

Google Chrome

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

Создатель

Создатель иконки

Придумал её Норм Кокс для Xerox Star, первого в мире компьютера с графическим пользовательским интерфейсом. Норм — сооснователь Cox&Hall и консультант по интерактивному дизайну и дизайну пользовательского интерфейса с 1982 года. Для этого интерфейса он создал ещё иконку документа.

Геофф Элдей, проектировщик программного обеспечения, нашёл создателя и заполучил это видео:

Он связался с Нормом, который был рад поделиться своей историей. Вот что он сказал:

Изображение должно было быть простым как дорожный знак, функционально запоминаться и быть похожим на список, который в результате отображался. Пикселей для работы было мало, но иконка должна была быть простой и чёткой. Для отрисовки изображения у нас было всего 16×16 пикселей или даже 13×13, уже не помню точно.

Однако, после Xerox Star иконка-гамбургер на какое-то время исчезла.

Возрождение

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

Голосовые заметки в iOS

Похоже, это самое первое появление иконки-гамбургера (кроме Xerox) в роли кнопки меню. Приложение появилось 17 июня 2009 года и было доступно на iPhone 3Gs. Нажатие на иконку открывало список записей и опции. Эпл уже позаимствовали мышь и рабочий стол у Xerox, когда создавали Макинтош, маленькая иконка не значила многого.

Голосовые заметки в iOS

Tweetie for iPad

Tweetie было первым приложением для Twitter. Оно вышло в 2008 году и использовало иконку-гамбургер для списков. Приложение создал Лорен Брихтер, поработавший до этого в Apple (июнь 2006 — июнь 2007). То, что дизайнер из Купертино использовал эту иконку, не похоже на простое совпадение.

Facebook задаёт тренд

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

Приложение Facebook с сеточной иконкой

Затем в 2009 году они добавили ещё один ряд.

И закончилось всё тем, что в 2010 году сетка превратилась в полоски.

Приложение Фейсбук с иконкой-гамбургером

В приложении уже было боковое меню, всё что они сделали, это просто соединили его с сеткой. Пожалуй, это самое значимое из первых появлений иконки-гамбургера.

Выходит, Apple стала главной причиной возрождения иконки-гамбургера. Они переизобрели смартфон и заставили всех думать над компактным отображением. Вдохновлённые идеями Xerox, они воплощали их в своих интерфейсах. Затем эстафету переняли популярные соцмедиа-приложения, а все остальные последовали за ними.

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

Reeder

Иконка открывает список ваших подписок.

Reeder

Path

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

Path

Также вы можете найти её в навигации Twitter Bootstrap и «Старбакса».

Twitter Bootstrap и «Старбакс»

Она встречается в большом количестве приложений и стала индустриальным стандартом для отображения дополнительных меню.

Foursquare

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

Сайт дизайнера

Строительная компания

Будущее

Иконка-гамбургер стала стандартом в дизайне сайтов и приложений и, похоже, обосновалась здесь надолго. Сообщество UX/UI-дизайнеров встретило её не очень тепло. Кто-то говорит, что она ужасна, её нужно отовсюду убрать и заменить на простое меню или удобные вкладки. Кто-то её ненавидит, кто-то любит.

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

{ "author_name": "Филипп Концаренко", "author_type": "editor", "tags": ["\u043c\u0435\u043d\u044e","\u043a\u0430\u043a_\u0441\u043e\u0437\u0434\u0430\u0442\u044c_\u0443\u0434\u043e\u0431\u043d\u043e\u0435_\u043c\u0435\u043d\u044e","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0438\u043a\u043e\u043d\u043a\u0430","\u0437\u043e\u043b\u043e\u0442\u043e\u0439\u0444\u043e\u043d\u0434","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 29, "likes": 39, "favorites": 3, "is_advertisement": false, "subsite_label": "flood", "id": 5737, "is_wide": true, "is_ugc": false, "date": "Mon, 17 Nov 2014 17:01:09 +0300", "is_special": false }
Право
Товарные знаки для тех, кто ведёт бизнес в интернете: защищаем домен, управляем отзывами и контролируем конкурентов
Казалось бы, регистрация брендов в Роспатенте — это история про заводы и предприятия: вот наша одежда, еда или…
Объявление на vc.ru
0
29 комментариев
Популярные
По порядку
Написать комментарий...
33

Гамбургер? Это придумали те люди, с богатой фантазией, которые видят в созвездии не ковш, а медведицу?

Ответить
11

Это придумал человек по имени Норм Кокс. Подумайте об этом.

Ответить

Комментарий удален

Комментарий удален

6

Норм Кокс :D

Ответить
4
Ответить
3

Это бигмак)) Там три булки.

Ответить
1

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

Ответить
0

Вариант от ЦП мне нравится больше.

Ответить
0

Мой перевод — об истории иконки.

А вы ссылаетесь на статью, посвящённую её А/Б-тестированию и размышлениям о том, хорошо она работает или плохо.

Ответить
2

Какой нафиг гамбургер??? Это три палочки, всех кого слышал как это произносят говорили только о трех палочках

Ответить
1

А кто придумал эту стрелку? Она вообще везде есть и в наружней рекламе и на сайтах, кто ее автор?

Ответить
2

Самизнаетекто. Потом он придумал логотип Ярославля.

Ответить
0

не поверите, стрелку еще в Древнем Риме придумали, чтобы дорогу к публичному дому отмечать, для безграмотных матросов. Есть мозаики/рельефы по 2000 лет. И да, это стилизованный член.

Ответить

Комментарий удален

1

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

Ответить
1

гамбургер

Вы там ебанулись чтоли? Какой к чёрту гамбургер? Эта иконка называется СПИСОК. СПИСОК и никак иначе!

Ответить
0

В англоязычном вебе это hamburger.
Иконка списка?
Это и выпадющий список, и список из буллетов, и куча всего.

Ответить
1

Для меня всегда эта иконка означала "ручную сортировку списка с помощью перетаскивания". Может потому что я не пользуюсь мобильными приложениями...

Ответить
1

Нас опять обманывают!

Ответить
0

Иконка "гамбургер" прекрасна! И удалять ее не нужно. Она с ходу всем понятна и решает много задач. Если она кому-то не нравится, это момент вкусовщины.

Когда дизайн станет уделом художников, мир развалиться!

В интерфейсах главное — решение задачи! Она с этим справляется на 200%, поэтому тут не может быть 2-х мнений.

Ответить
0

Кнопка меню. Menu button.

Ответить
–1

"Иконка-гамбургер стала стандартом в дизайне сайтов и приложений и, похоже, обосновалась здесь надолго."
Все-таки в дизайне приложений, а не сайтов.

Ответить
0

вы что, новых сайтов не видели? или хотя бы мобильных версий. да он всюду, этот гамбургер. вот, в Инбоксе, например.

Ответить
0

Этими двумя сайтами мир не ограничивается

Ответить
0

Так я могу много нарыть. Это действительно сейчас очень популярный элемент. Для мобильных версий и вовсе мастхэв.

Ответить
0

м.цп.ком

Ответить
0

Норм- норм парень!

Ответить
0

А я вот смотрел видео "Designing Intuitive User Experiences" https://developer.apple.com/videos/wwdc/2014/#211

Там дизайнеры из Аппл минут 20 рассказывали какая ужасная идея прятать меню и кнопке тоже досталось

Ответить

Комментарий удален

Комментарий удален

0

А Контактик придумал кнопку НАВЕРХ???

Ответить
–3

Говно это ваша иконка гамбургера, нихрена непонятная и ничего не говорящая для 99% людей, в отличие от изображения с инструментами или шестерёнкой, которое было раньше и которое хотя бы означает что внутри настройки.
Это может у ваших яблочников оно ещё было известно, он в среде Windows и Android - нихрена.
Что хабр, что хром скатились в этот ужас.

Ответить

Прямой эфир