Оффтоп Philipp Kontsarenko
30 291

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

Читатель ЦП, директор студии 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": "Philipp Kontsarenko", "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": 1, "is_advertisement": false, "subsite_label": "flood", "id": 5737, "is_wide": true, "is_ugc": false, "date": "Mon, 17 Nov 2014 17:01:09 +0300" }
{ "id": 5737, "author_id": 4, "diff_limit": 1000, "urls": {"diff":"\/comments\/5737\/get","add":"\/comments\/5737\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/5737"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

29 комментариев 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 - нихрена.
Что хабр, что хром скатились в этот ужас.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }