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

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

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

0
29 комментариев
Написать комментарий...
mr.The

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

Ответить
Развернуть ветку
МакРадар

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

Ответить
Развернуть ветку
mr.The
Ответить
Развернуть ветку

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

Развернуть ветку

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

Развернуть ветку
Ярослав Приказчиков

Норм Кокс :D

Ответить
Развернуть ветку
Metoff
Ответить
Развернуть ветку
Виктор Маскин

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

Ответить
Развернуть ветку
Ilya Gusev

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

Ответить
Развернуть ветку
Владислав Козуля

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

Ответить
Развернуть ветку
Антон Григорьев

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

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

Ответить
Развернуть ветку
Anton Ermolov

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

Ответить
Развернуть ветку
Nikolay Kachev

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

Ответить
Развернуть ветку
Иван Писклюков

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

Ответить
Развернуть ветку
Stas Soldatov

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

Ответить
Развернуть ветку

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

Развернуть ветку
Павел Князев

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

Ответить
Развернуть ветку
Николай Серафимов
гамбургер

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

Ответить
Развернуть ветку
Юрий Молодцов

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

Ответить
Развернуть ветку
GM2mars

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

Ответить
Развернуть ветку
Kirill Antoshin

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

Ответить
Развернуть ветку
Игорь Семиохин

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

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

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

Ответить
Развернуть ветку
Stepan Ipatyev

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

Ответить
Развернуть ветку
Олег Допельгерц

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

Ответить
Развернуть ветку
Eugene Matvienko

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

Ответить
Развернуть ветку
Олег Допельгерц

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

Ответить
Развернуть ветку
Eugene Matvienko

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

Ответить
Развернуть ветку
Eugene Matvienko

м.цп.ком

Ответить
Развернуть ветку
Артем Боровков

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

Ответить
Развернуть ветку
Игорь Алексеев

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

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

Ответить
Развернуть ветку

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

Развернуть ветку

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

Развернуть ветку
Константин Лолуа

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

Ответить
Развернуть ветку
Del Ins Up

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

Ответить
Развернуть ветку
Читать все 29 комментариев
null