Лого vc.ru

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

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

Читатель ЦП, директор студии 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-дизайнеров встретило её не очень тепло. Кто-то говорит, что она ужасна, её нужно отовсюду убрать и заменить на простое меню или удобные вкладки. Кто-то её ненавидит, кто-то любит.

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

Теги

"Эпл уже позаимствовали мышь и рабочий стол у Xerox, когда создавали Макинтош, маленькая иконка не значила многого"
расскажите про прямоугольник

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

0

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

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

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

0

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

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

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

0

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

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

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

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

0

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

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

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

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

0

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

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

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

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

0

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

0

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

Ну что за грёбаный цирк... Неужели простого объяснения, что эта иконка символизирует список из горизонтальных жлементов, недостаточно? Срывы покровов, поиски глубинного смысла, выяснение истины... Нехрен делать.

Основная ценность статьи не в объяснениях, что иконка символизирует, а в истории происхождения и применения символа.

0

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

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

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

Прямой эфир
Узнавайте первым
о важных новостях
Мы будем присылать вам только срочные уведомления в браузере
Mail.Ru Group получила полный контроль над «ВКонтакте»
Хочу знать!
Не нужно