Почему все используют иконку «гамбургер» и откуда она появилась Статьи редакции
Все мы видели иконку-гамбургер. Фактически, многие используют её каждый день. Она стала стандартом в дизайне сайтов и приложений. Прямо сейчас я вижу её в правом-верхнем углу своего 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-дизайнеров встретило её не очень тепло. Кто-то говорит, что она ужасна, её нужно отовсюду убрать и заменить на простое меню или удобные вкладки. Кто-то её ненавидит, кто-то любит.
Другие составляют подборки сайтов, где иконка-гамбургер задействована в чудесном минималистичном дизайне. Так может, смысл не в самой иконке, а в том, где и как она используется?
Гамбургер? Это придумали те люди, с богатой фантазией, которые видят в созвездии не ковш, а медведицу?
Это придумал человек по имени Норм Кокс. Подумайте об этом.
Комментарий удален модератором
Комментарий удален модератором
Норм Кокс :D
Это бигмак)) Там три булки.
http://habrahabr.ru/post/239517/
Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.
Вариант от ЦП мне нравится больше.
Мой перевод — об истории иконки.
А вы ссылаетесь на статью, посвящённую её А/Б-тестированию и размышлениям о том, хорошо она работает или плохо.
Какой нафиг гамбургер??? Это три палочки, всех кого слышал как это произносят говорили только о трех палочках
А кто придумал эту стрелку? Она вообще везде есть и в наружней рекламе и на сайтах, кто ее автор?
Самизнаетекто. Потом он придумал логотип Ярославля.
не поверите, стрелку еще в Древнем Риме придумали, чтобы дорогу к публичному дому отмечать, для безграмотных матросов. Есть мозаики/рельефы по 2000 лет. И да, это стилизованный член.
Комментарий удален модератором
Спасибо за статью. По моему мнению, это одна из самых понятных и красивых иконок, просто некоторые дизайнеры используют ее ошибочно и не всегда уместно.
Вы там ебанулись чтоли? Какой к чёрту гамбургер? Эта иконка называется СПИСОК. СПИСОК и никак иначе!
В англоязычном вебе это hamburger.
Иконка списка?
Это и выпадющий список, и список из буллетов, и куча всего.
Для меня всегда эта иконка означала "ручную сортировку списка с помощью перетаскивания". Может потому что я не пользуюсь мобильными приложениями...
Нас опять обманывают!
Иконка "гамбургер" прекрасна! И удалять ее не нужно. Она с ходу всем понятна и решает много задач. Если она кому-то не нравится, это момент вкусовщины.
Когда дизайн станет уделом художников, мир развалиться!
В интерфейсах главное — решение задачи! Она с этим справляется на 200%, поэтому тут не может быть 2-х мнений.
Кнопка меню. Menu button.
"Иконка-гамбургер стала стандартом в дизайне сайтов и приложений и, похоже, обосновалась здесь надолго."
Все-таки в дизайне приложений, а не сайтов.
вы что, новых сайтов не видели? или хотя бы мобильных версий. да он всюду, этот гамбургер. вот, в Инбоксе, например.
Этими двумя сайтами мир не ограничивается
Так я могу много нарыть. Это действительно сейчас очень популярный элемент. Для мобильных версий и вовсе мастхэв.
м.цп.ком
Норм- норм парень!
А я вот смотрел видео "Designing Intuitive User Experiences" https://developer.apple.com/videos/wwdc/2014/#211
Там дизайнеры из Аппл минут 20 рассказывали какая ужасная идея прятать меню и кнопке тоже досталось
Комментарий удален модератором
Комментарий удален модератором
А Контактик придумал кнопку НАВЕРХ???
Говно это ваша иконка гамбургера, нихрена непонятная и ничего не говорящая для 99% людей, в отличие от изображения с инструментами или шестерёнкой, которое было раньше и которое хотя бы означает что внутри настройки.
Это может у ваших яблочников оно ещё было известно, он в среде Windows и Android - нихрена.
Что хабр, что хром скатились в этот ужас.