Иконка гамбургер: Иконки «Hamburger» — скачивайте бесплатно в PNG, SVG, GIF

В идеальном мире все сайты были бы такими же простыми, как сайт агентства — Работа, Услуги, Команда, Блог — но, скорее всего, вам нужно нечто большее.Итак, спросите себя, могу ли я извлечь самое необходимое, а остальное добавить на панель вне холста или во всплывающее меню? Если ваши текущие схемы трафика доказывают, что 80% трафика направляется на страницу с продуктами, зачем размещать страницу компании так же заметно, загромождая ее?

Осторожно: Это общее заявление. Ничто из этого не является черно-белым; все дело в контексте.

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

Яблоки и апельсины, я знаю, но функциональность нативных приложений и адаптивных макетов начинает объединяться. Как правило, в веб-приложении будет небольшой набор взаимодействий, которые пользователь хочет повторять снова и снова. Из-за этого пользовательский интерфейс должен отражать повторение шаблонов использования, поэтому наличие ссылки на часто используемую функцию, скрытую за пределами холста, было бы неприятным.Однако, если у вас есть настройки профиля пользователя или списки, к которым вы хотите получить доступ, например, в Twitter, подвальный этаж — идеальное место для их хранения.

Сайты электронной коммерции уникальны тем, что они добавляют второй уровень взаимодействия, предоставляя пользователю профиль, корзину, список желаний, поиск продуктов и т. Д. Они становятся элементами навигации, поскольку каждому элементу посвящена отдельная страница. Как правило, эти элементы попадают в служебную панель, что может добавить ненужного раздувания к чистому пользовательскому интерфейсу.Добавление их во всплывающее меню — отличный вариант.

Если вы работаете с агентством, используя передовые методы входящего маркетинга, то ответ — да. Без четких призывов к действию и грамотно разработанной стратегии конверсии вам, вероятно, следует избегать навигации за пределами холста. Часто веб-сайт требует, чтобы навигация присутствовала постоянно, потому что контент не основан на конверсиях и обучении, что приводит к мертвым зонам контента, которые полагаются на использование основной навигации для продолжения изучения.Передовые методы входящего маркетинга позволяют свободно оставаться на холсте или рисковать за пределами холста.

Есть ли альтернативы Hamburger Icon?

Один из способов увеличить значок навигации гамбургера — это добавить ярлык. По данным Nielsen Norman Group, пользователи настольных компьютеров открывали скрытое меню в 27% случаев, в отличие от видимой навигации в 48% случаев и комбинированной навигации в 50% случаев. Другими словами, ярлыки могут помочь. Показательный пример: Джеймс Фостер из Exisweb провел эксперимент, чтобы посмотреть, изменит ли что-нибудь изменение значка гамбургерного меню.Результаты, достижения? Пользователи нажимали значки с надписью «Меню» на 20% чаще.

для мобильных приложений также могут включать в себя навигацию с вкладками, вкладки с опцией «дополнительно», постепенно сворачивающееся меню, прокручиваемую навигацию и раскрывающиеся меню.

Почему вам следует избегать навигации по гамбургерам

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

Как мы уже упоминали, определенно есть альтернативы значку гамбургера, так что у вас есть варианты. Но помните…

Все дело в контексте.

«Нет более сомнительной фразы, чем« исследования показали ». Через пять минут исследования покажут нечто иное ».

— Рэнди Коэн, Нью-Йорк Таймс

Погуглите за десять минут, и вы сможете найти многочисленные примеры из практики, показывающие, какое положительное влияние значок гамбургера может оказать на рентабельность инвестиций вашего сайта.Вы также можете покопаться и найти столько же случаев, когда значок используется неправильно и фактически вредит пользовательскому интерфейсу сайта. ConversionXL провел тест на сайте электронной коммерции, который показал увеличение дохода не менее чем на 4% в зависимости от стиля значка гамбургер-меню. Команда ExisWeb провела аналогичный тест, который дал совсем другие результаты (+ 12%), когда значок гамбургера был заменен словом «Меню».

Это не предназначено для продажи, это скорее образовательный справочник, дьявольски стремящийся показать вам, насколько мощным может быть базовый шаблон внебиржевого контента.Значок гамбургера — это просто канал, который запускает необходимые рецепторы, чтобы дать вашему мозгу понять, что есть еще что посмотреть. Команда разработчиков, отвечающая за UX вашего сайта, действительно должна объективно взвесить уникальные плюсы и минусы и прийти к обоснованному выводу.

Мы полностью поддерживаем и активно проводим A / B-тестирование наших входящих клиентских проектов, чтобы постоянно оценивать все пути покупателя и повышать конверсию. Поразительно, чему можно научиться за короткий промежуток времени. Эта гигантская навигация, которую вы решили, что ОБЯЗАТЕЛЬНО должны показывать постоянно, просто может работать лучше на холсте.

Итак, возникает вопрос, следует ли мне использовать гамбургер-навигацию на моем следующем сайте?

Вы не узнаете, пока не протестируете.

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

Видите меню Pen Hamburger? Нет, спасибо, я предпочитаю хот-доги. Автор: Шон Демпси (@seanseansean) на CodePen.

Джесси Рэнд — креативный директор и менеджер по дизайну / развитию Опыт Джесси позволил ему работать в индустрии мобильных стартапов Бостона, где он работал дизайнером пользовательского интерфейса и художником-графиком.Затем Джесси перешел в мир веб-дизайна и разработки и создал обширное портфолио интерактивных веб-сайтов. Работая одновременно в качестве дизайнера печати и основного веб-разработчика, Джесси руководит производством всех основных проектов дизайна / разработки в Vital. Джесси имеет степень бакалавра искусств Плимутского государственного университета по специальности графический дизайн. Просмотреть полную биографию

Связанный контент

Устная история значка гамбургера (рассказанная людьми, которые были там)

Когда несколько лет назад UX и дизайнер продукта Джефф Алдей заинтересовался, кто отвечал за гамбургер-меню, он немного покопался.Он нашел на Vimeo видео с конференции 1990 года, на которой демонстрировалась история виджетов. В разделе, посвященном меню, рассказчик описывает, как в строках заголовков окон Xerox Star вы найдете кнопки меню в виде трех маленьких строк, сложенных в квадрат.

Ранние значки гамбургеров на Xerox Star

Меню гамбургеров… в 1981 году: Алдай стал золотым.

Он пошел искать ведущего специалиста по графике на Xerox Star и нашел Норма Кокса. «Вы сделали домашнее задание», — ответил Норм Кокс.«Вы нашли нужного парня».

Гамбургеры распространены повсеместно. А в декабре прошлого года Кокс получил необычный подарок на 67-й день рождения, когда Reddit и McDonald’s объединились, чтобы сделать меню гамбургеров на обоих мобильных сайтах похожими на настоящие гамбургеры (если вы нажмете на него, вы сможете разместить заказ на Биг Мак). Иными словами, интерес к истории этого маленького символа с приятным названием не ослабевает, в основном потому, что ни тот, ни другой не имеют своей популярности.

Все, кто когда-либо пытался создать простой веб-сайт для мобильных устройств в последнее время (т.е. я, буквально делая именно это в тот день, когда меня попросили написать эту статью), вероятно, использовал один. И каждый достойный UX-специалист, вероятно, задавался вопросом, когда крупные игроки, создающие такие большие вещи, как Chrome или Amazon, перестанут их использовать.

Если недоброжелатели видят в этой бессмертной любви чуму плохой информационной архитектуры (низкая вовлеченность, неэффективность), другие говорят, что именно повсеместное распространение символа делает его хорошим. «Из-за чистой силы, использования и дизайнерской лени», — сказал инженер-программист и дизайнер UX Майкл Дж.Ранее в этом месяце Фордхэм писал на Medium, что гамбургер стал хорошим вариантом. Пользователи во всем мире знают, что означают эти три маленькие линии.

Однако многие не знают , как этот крошечный символ является прямым порталом в истоки персональных компьютеров, где все это началось. Я поговорил с тремя людьми, которые были там — Коксом, Дэвидом Кэнфилдом Смитом и Ральфом Кимбаллом, — о том, как появился гамбургер, о бурных днях основания Xerox Star и о том, как лучше всего продумать дизайн (такой, который дает 40%). летние символы все еще сильны) похоже.

Полный Xerox Star, прорыв в интерфейсах для персональных компьютеров.

Норм Кокс, ведущий дизайнер, подразделение разработки систем Xerox. : Когда Джефф Алдей выследил меня и сказал: «О, вся наша отрасль обеспокоена тем, как использовать это маленькое меню, и я понимаю, что вы его разработали». Я посмотрел на него и подумал: «Черт возьми, я, наверное, сделал это в 8:30 вечера во вторник и никогда не думал об этом дважды».

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

(Любопытно? Загрузите образец анимации значка гамбургера для использования в InVision Studio. У вас нет Studio? Начните сегодня)

Cox : Это своего рода абсурд, что революция, которую представляет Звезда, именно этот маленький символ — вероятно, наименее продуманная часть всего — стала такой повсеместной особенностью.

«Черт возьми, я, наверное, сделал это в 8:30 вечера во вторник и никогда не думал об этом дважды».

Норм Кокс

Ральф Кимбалл, главный дизайнер Xerox SDD : Я работал в Xerox с 1972 по 1982 год, сначала научным сотрудником исследовательского центра Xerox в Пало-Альто, или PARC, занимался дизайном пользовательского интерфейса, а затем работал над рабочей станцией Star. Наша работа со Star заключалась в интеграции и согласовании многих творческих графических подходов, которые были разработаны до 1976 года в Xerox PARC, а еще раньше — в SRI и Университете Юты (Dynabook Алана Кея).

Смит : SRI наняла меня прямо из Стэнфорда в 1975 году, и именно там я познакомился с Чарльзом Ирби. Он был ведущим дизайнером в команде UI, работая с Дугом Энглебартом. Через год он ушел работать в PARC и вскользь упомянул, как было бы здорово, если бы я тоже мог приехать. Теперь я прошел стажировку в PARC, где Кей была моим научным руководителем. Там я использовал Alto (первый настоящий персональный компьютер) и Small Talk (недавно разработанный Кей язык программирования), чтобы написать свою диссертацию, Pygmalion.Поэтому, когда Ирби сказал, что я должен поехать с ним в PARC, я ухватился за этот шанс. Xerox PARC не была такой большой, как SRI, но она была гораздо более совершенной: вы не могли попасть в дверь, если у вас не было докторской степени.

Cox : Когда я впервые приехал в PARC, на мне был новый костюм-тройка из полиэстера. Секретарша звонит Чарльзу Ирби, который возглавлял группу по разработке пользовательского интерфейса и функциональности продукта Xerox Star. Он спускается по лестнице в своих обрезанных шортах-карго, сандалиях Birkenstock и футболке с принтом галстука.У него был хвост до талии, взлохмаченная борода; этот тощий, маленький парень. Я чувствовал себя таким неуместным. Я очень быстро понял, что на PARC я не ношу костюм-тройку: это были футболки и шорты, килты … один парень ходил с попугаем на плече. У всех в офисе были мешки с фасолью, неоновые вывески и благовония. Вспомните Калифорнию 1970-х годов.

«Один парень ходил с попугаем на плече».

Норм Кокс, по PARC культуре

Smith: Когда PARC построил Alto (это был инструмент разработки; они сделали всего пару сотен штук) — внезапно появился этот растровый экран, 700 x 1000 точек, каждая точка могла быть индивидуально включена и выключена.Это вызвало взрыв творчества.

Cox : До выхода Star я руководил командой дизайнеров по разработке шрифтов для электронных пишущих машинок, которые Xerox производила в то время. Затем в нашем офисе появился альт — с этой мышью и черно-белым пиксельным дисплеем. Меня всегда восхищало что-то новое: живопись, акварель, столярные изделия, все творческое, любая новая среда. Итак, я начал экспериментировать с этим.

Смит : Когда я пришел в SDD в 1976 году, меня посадили в угол подвала.Мы собирались попробовать продать этот компьютер — «Звезду» в офисы. Офисные работники не разбирались в компьютерах, и, кроме того, в то время считалось, что менеджеры не печатают, а секретари. Так что моя идея заключалась в том, чтобы перенести офисные вещи (картотеки, корзины для бумаг, документы, папки) в компьютерный мир, а не дать офисным работникам компьютерный интерфейс с инструкциями для изучения. И иконки, которые я изобрел в PARC для своей диссертации, были идеальным средством.

Kimball : Революционным достижением стало использование графики в Star, а не клавиатурных команд.

Smith : Я помню, как заполнил стены своего кабинета распечатками: я написал на каждом, какие атрибуты значка и что вы могли с ним использовать. У нас был документ, картотечный шкаф, принтер, часы, почтовый ящик, библиотека (в основном это был интерфейс для поиска информации, как и у Google, только у меня не хватило ума изобрести Google)… В принтере использовалась лазерная печать, а в почтовом ящике — Ethernet — оба изобретения PARC. Мы использовали всю эту технологию PARC, чтобы создать интегрированную офисную систему.

Кимбалл : Норм Кокс стал удачной находкой для команды звездных разработчиков, потому что он так эффективно овладел мощью среды. Чарльз Ирби и я брали интервью у некоторых ведущих графических дизайнеров в Сан-Франциско до того, как встретили Норма, и эти дизайнеры не имели ни малейшего представления.

Smith : Я сделал первый набор рисунков значков (рис. 3 ниже). Они были дерьмом. Действительно некрасиво. Слава Богу за Норма Кокса. Однако Чарльз был очень тактичен. Он никогда не говорил: «Дэйв, эти фотографии — отстой.Вместо этого он однажды пришел ко мне в офис и сказал: «Мы думаем, было бы неплохо устроить небольшой конкурс дизайнеров для иконок».

Cox : Билл Боуман писал программы. Он написал несколько очень грубых графических программ, которые позволяли создавать графику на дисплеях. Уоллес Джадд разбирался в человеческих факторах, проводил юзабилити-тестирование. Дэйв написал диссертацию по этим идеям, но он не был визуальным человеком. Так что меня пригласили принять участие в этом. Каждый из нас разработал набор, а затем все сидели и спорили о том, кто лучше.

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

Cox : Знаете, это было началом дизайнерского мышления. Мы узнали, что что-то, что хорошо выглядит, также должно работать. Тестирование на удобство использования открыло нам глаза на многое. И после этого Боуман, Дэйв и Уоллес сказали: «Хорошо, Норм, сделай это». Так я стал официальным дизайнером. Но это были очень командные усилия.

«Это было начало дизайнерского мышления»

Norm Cox

Smith : Я не понимаю восхищения символом гамбургерного меню, потому что это даже не значок, это просто символ. Иконки имели как визуальную, так и машинную семантику, тогда как эта кнопка меню имела только первую. Вы ничего не делаете с меню. Он просто сидит на экране. Вы нажимаете на него, и появляется меню, вы перемещаете курсор, и меню исчезает. Вот и все.Значок — это объект в метафорическом мире, с которым вы можете делать что-то в реальном мире, в мире, который моделируется.

Cox : На дисплее Star можно было работать только с 72 точками на дюйм, и с этим вы должны были обмениваться идеями. Мы черпали вдохновение в существующей символике принтеров и копировальных аппаратов Xerox, а также в дорожных знаках…

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

Cox : В вашем гараже всегда найдется ведро для разного. У вас есть болты, гайки, шурупы и гвозди, а затем прочее, прочее. Вот такая была кнопка меню гамбургера. Как не бывает идеальных систем, нет идеальных интерфейсов. Иногда вы сталкиваетесь с вещами, которые, как сказал Дэйв, не подходят.

Smith : Типичная команда, в которую мы вставили, была «paginate.«Что касается окна документа, то компьютер, который у нас был, не был достаточно быстрым, чтобы справляться с разбивкой на страницы (выравнивание абзацев, текст, обтекающий изображение и т. Д.)« На лету »в реальном времени. Итак, после того, как вы закончите вводить информацию, которую хотите в свой документ, вы нажмете разбиение на страницы, и он разместит весь ваш документ. Но знаете, это была глупая команда; это произошло только потому, что компьютер был недостаточно мощным, чтобы не отставать от него. Никому из нас это не понравилось, поэтому мы поместили его в меню, которое не было в дороге, чтобы люди не видели его все время.То, что мы хотели видеть перед людьми, было важными командами.

Cox : Мы рассмотрели несколько других символов для этой кнопки — знак плюса, многоточие, стрелку раскрывающегося списка. Вы пытаетесь понять, какой символ означает «разное», «другое» или «дополнительное»: вы пытаетесь найти вещи, которые либо интуитивно понятны, либо легко объяснимы и запоминаются.

Smith : Три линии были абстрактным изображением того, что появилось бы, если бы вы щелкнули по кнопке — всплывающее меню.

Cox : Другой символ, который вы видите часто используемым сегодня, — вертикальное многоточие — это что-то вроде сокращенной версии того же самого.

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

Cox : Мы начали выяснять, что существует иерархия распознавания: когда кто-то смотрел на экран, они сканировали его на предмет определенной формы, а затем оттачивали детали этой формы — так же, как раньше видели дорожный знак в форме ромба. вы видите внутри него символ.Мы хотели убедиться, что у вас есть ограниченное количество объектов для поиска. Каждый пиксель имел значение. Никакой посторонней информации, никаких украшений, у всего была цель. И эти ограничения означали, что нам нужно было разработать что-то столь же элегантное, сколь и простое: неподвластный времени стиль дизайна.

Smith : Нам не нужен беспорядок. Мы хотели, чтобы он был визуально привлекательным: мы чувствовали, что люди будут проводить с ним больше времени, если им понравится.

Cox : Если вы проследите, как дизайн иконок эволюционировал с тех звездных дней через Apple и Microsoft, он перешел от простых линий к фотореализму с тенями, бликами и всем остальным и снова вернулся к очень простым линиям и формам.И на то есть причина. Это просто; он хорошо общается. Людям надоедает слишком много украшений, им просто нужны факты.

«[Дизайн иконок] прошел путь от простых линий до фотореализма с тенями, бликами и другими вещами, и снова вернулся к очень простым линиям и формам. И для этого есть причина ».

Норм Кокс

Smith : Сегодня Mac повсюду использует меню. В Star у нас было выпадающее меню, но пункты меню были отдельными командами.Дело не в том, что у нас не было функций: у нас были мультимедийные документы с текстом, шрифтами, макетом, изображениями, встроенным звуком — с огромным содержанием. Тем не менее, у нас не было необходимости в меню. Вам не кажется, что это довольно изумительно? Мы сделали это не путем исключения команд, а путем их обобщения: понятие универсальных команд, это я придумал. Люди в Apple использовали вырезать, копировать, вставить, отменить и некоторые другие. До этого Star использовала перемещение, копирование, удаление, отмену, отображение свойств, копирование свойств и некоторые другие.

Кимбалл : Мы пытались решить, создать ли пользовательский интерфейс, который был бы сверхпростым без дополнительных команд, которые могли бы «сбить с толку» пользователя, или разрешить специальные экраны, обеспечивающие более высокую продуктивность для опытных пользователей. При разработке Star нам приходилось выбирать очень конкретные ответы на многие из этих вопросов.

Смит : Мы хотели, чтобы люди могли делать полезные вещи с помощью Star, но мы не хотели, чтобы это казалось сложным. Нелегко упрощать сложные вещи.Чем проще мы делали интерфейс, тем тяжелее нам приходилось работать над этим.

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

[Примечание: наш разговор с Ральфом Кимбаллом происходил по электронной почте]

Убить кнопку гамбургера — TechCrunch

Эта маленькая трехстрочная пуговица — дьявол.Независимо от того, называете ли вы это боковым меню, навигационным ящиком или гамбургером, скрытие ваших функций за экраном за невзрачным значком в углу обычно является плохим выбором для мобильного дизайна. Теория взаимодействия, A / B-тесты и эволюция некоторых ведущих приложений в мире подтверждают один и тот же тезис: кнопка гамбургера плохо влияет на взаимодействие, и вам, вероятно, следует заменить ее панелью вкладок или другой схемой навигации.

Даже если вы не дизайнер, я настоятельно рекомендую прочитать блестящее глубокое погружение Луиса Абреу в формате GIF: Почему и как избегать гамбургерных меню.Вот краткое изложение его анализа, а также несколько других исследований и некоторый контекст о том, как это происходит в самых популярных приложениях. Есть споры о веб-гамбургерах, но я сосредоточусь на мобильных устройствах с iOS в качестве примеров, и многое из этого применимо к Android.

По сути, то, что не видно, не имеет значения . Любые варианты навигации, которые вы скрываете за гамбургером, будут забыты или, по крайней мере, использованы намного реже. Не помогает то, что кнопку часто размещают в верхнем левом углу — это место, куда труднее всего дотянуться, когда вы держите телефон правой рукой.

Кнопки гамбургера менее эффективны , так как вам нужно нажать один раз, прежде чем вы даже сможете увидеть нужный вариант. Они противоречат шаблонам навигации многих мобильных приложений, заставляя вас пролистывать или «возвращаться» через несколько экранов, чтобы добраться до кнопки гамбургера. Кроме того, они менее заметны, так как вы не можете видеть уведомления об определенных областях приложения, таких как уведомления, сообщения или новый контент, без предварительного открытия боковое меню.

Тем не менее, несмотря на эти недостатки, многие приложения по-прежнему используют гамбургер, потому что это простой способ втиснуть в приложение тонну функциональности.Они особенно соблазнительны, если вы пытаетесь перевести полнофункциональное веб-приложение в мобильное. Но, в конце концов, они скрывают, что особенного в вашем продукте.

Одно решение: панель вкладок.

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

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

Вы жертвуете небольшим размером экрана, но оно того стоит. A / B-тест мобильного приложения zeebox, представленный The Next Web, показывает, насколько сильно эти недостатки могут повлиять на уровень взаимодействия с приложением. Шесть месяцев назад zeebox попытался переключиться с панели вкладок на гамбургер, и его показатели упали. Недавно он провел одновременный A / B-тест для двух схем навигации и обнаружил, что панель вкладок обеспечивает среднюю частоту использования в неделю на 55% и среднюю дневную частоту на 8,7% выше.

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

Почему пора развиваться

Похоже, что пользователям нужны одноцелевые мобильные приложения, которые быстро подходят к конкретному варианту использования. Вот почему мы находимся в разгаре «Великого разукрупнения 2014 года». Большие, раздутые приложения пытаются уменьшить и ускорить, добавляя некоторые функции в автономные или сопутствующие приложения. Messenger от Facebook и Swarm от Foursquare — два ярких примера.

Но если цель состоит в том, чтобы убрать основные функции, чтобы они были более заметными и легкодоступными, отказ от кнопки гамбургера — это разумный шаг.Когда Facebook запустил Messenger, он все еще использовал кнопку гамбургера. К счастью, с переходом на iOS 7 Facebook переключился на панель вкладок после того, как тонна тестирования показала, что это правильный путь.

Слева: старая кнопка навигации Facebook. Справа: новый стиль панели вкладок

Facebook имеет больше функций, чем может поместиться на пяти кнопках внизу, поэтому он по-прежнему использует пространство последней панели вкладок для размещения гамбургера «Еще», показывающего ваш профиль, события, группы и многое другое. Но это гораздо лучший компромисс.Другой вариант — панель вкладок с горизонтальной прокруткой и большим количеством вкладок, чем помещается на экране.

Другие популярные приложения с панелями вкладок на iOS включают Twitter, Instagram, Pinterest, Uber, Skype, WordPress, Quora и App Store. Многие из них раньше оседлали гамбургеры, но пришли в себя. Gmail, Google Maps, Pocket, собственное приложение TechCrunch и многие другие до сих пор используют устрашающий значок, который Норм Кокс изобрел для Xerox примерно в 1981 году.

Иногда, если приложение уже в значительной степени является одноцелевым, скрытие действительно посторонних функций на боковой панели может иметь смысл.Возьмем, к примеру, Lyft, где в основном вы просто бронируете машину и очень редко нужно посещать свой профиль, информацию об оплате или отправлять приглашения. Но Spotify стреляет себе в ногу, пряча за гамбургером важные функции «Обзор», «Обнаружение», «Радио», «Плейлисты» и «Входящие».

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

[Изображение предоставлено: Caliwood Design Lab, Луис Абреу, Брент Джексон]

Что такое кнопка гамбургера и как она работает?

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

Теперь уже знакомая функция на веб-сайтах по всему миру, продолжаются споры о преимуществах и потенциальных недостатках этой кнопки, похожей на бургер, в дизайне веб-сайтов.

Итак, в этом руководстве мы углубимся в детали и поместим кнопку гамбургера под решетку: что такое кнопка для гамбургера? Для чего его использовать? Зачем возиться с этим стилем кнопки и как сделать его с помощью CSS? Давайте копаться.

Что такое кнопка гамбургера?

Кнопка гамбургера, названная так из-за внешнего сходства с продуктом питания, представляет собой тип кнопки, распространенный на веб-сайтах и ​​в приложениях, особенно в мобильных средах.Это значок, состоящий из трех параллельных горизонтальных линий, часто закругленных на концах.

Кнопки гамбургера обычно размещаются в верхнем углу пользовательского интерфейса. При нажатии на кнопку открывается ранее скрытое меню (также называемое «гамбургер-меню»). Это меню может «выпадать» из положения кнопки, отображаться как модальное окно или выдвигаться сверху, сбоку или снизу экрана.

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

История кнопки гамбургера

Кнопка для бургеров появилась в 1981 году, когда дизайнер Норм Кокс поработал над персональной рабочей станцией Xerox. Он пробовал и другие варианты, в том числе стрелку, указывающую вниз, звездочку и символ плюса, но ни одна из них не предлагала такой же простоты использования, как этот простой помощник по гамбургеру.

Пользователи быстро поняли концепцию: нажмите кнопку, чтобы открыть раскрывающееся меню с навигационными ссылками или ссылками на функции.Однако, помимо первоначального запуска в Xerox, дизайнеры особо не беспокоились о гамбургере — до тех пор, пока Twitter не начал использовать его в 2008 году. Год спустя он появился в iOS, и сегодня это основной продукт веб-дизайна, часто появляющийся в топе. в левом или верхнем правом углу веб-страниц и предоставляет удобное место для хранения больших меню.

Булочки для гамбургеров и недостатки

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

• Отсутствие универсальности — Несмотря на широкую известность, не каждый пользователь знает, что такое кнопка гамбургера и что она делает, поэтому маловероятно, что они нажмут, чтобы увидеть другие варианты веб-сайта.
• Низкое взаимодействие — Панели навигации с четкими значками меню легко увидеть, распознать и использовать. Кнопки-гамбургеры не выделяются и не привлекают пользователей одинакового уровня.
• Отсутствие важности — Гамбургеры говорят о том, что все, что стоит за гамбургером, не так важно, как все остальное на вашем сайте, иначе это нашло бы место на первой странице.

Но есть и преимущества развертывания меню на основе булочек на вашем сайте, в том числе:

• Чистый вид — Кнопка бургера почти не занимает места, поэтому ее легко разместить в любом месте страницы, не отвлекаясь от других ключевых элементов.Пользователи знают, как это выглядит, а это значит, что вы можете потратить больше времени и усилий на другие элементы дизайна.
• Последовательная функция — Это трехстрочное меню действительно хорошо справляется с одним и тем же. Это делает его отличным дополнением к единообразию в дизайне веб-сайтов — хотя он может и не показаться кричащим, он предлагает солидную функциональность.
• Четкая цель — Не все должно быть на главной странице вашего сайта. В гамбургер-меню предусмотрено заранее определенное место для элементов навигации, которые не являются приоритетными, но их все же стоит держать под рукой.

Примеры кнопок для гамбургеров

Кнопки для гамбургеров повсюду в сети — вот несколько примеров, чтобы продемонстрировать, как они могут выглядеть.

Кнопка гамбургера в приложении для Android

Начнем со стандартного примера гамбургер-меню в приложении. Главный экран приложения Gmail выглядит так — обратите внимание на кнопку гамбургера в левом верхнем углу.

Источник изображения

При нажатии на значок меню появляется слева.

Источник изображения

Кнопка гамбургера на сайте

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

Источник изображения

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

Источник изображения

Креативная кнопка для гамбургера

Существует также множество творческих вариаций кнопок гамбургера, которые вы можете найти в Интернете, если хотите добавить щепотку дополнительных деталей. Вот один отличный анимированный значок кнопки от пользователя CodePen Данило — попробуйте щелкнуть значок в приведенном ниже примере и посмотреть, что произойдет.

См. Меню Pen Animated от Danilo (@ Danilo06) на CodePen.

Как сделать кнопку гамбургера с помощью CSS

К счастью, создать кнопку гамбургера в CSS не так уж сложно.Если вы предпочитаете создавать код CSS в автономном редакторе, попробуйте такие варианты, как RapidCSS или Stylizer. RapidCSS быстрый, легкий и хорошо подходит для пользователей, имеющих некоторый опыт работы с CSS. Stylizer предлагает больший формат графического интерфейса пользователя и поставляется с параметрами немедленного предварительного просмотра, чтобы гарантировать, что код, который вы пишете, дает желаемые результаты.

Если вы предпочитаете кодировать внутри платформы, одним из самых простых вариантов является WordPress. Сначала войдите в свою учетную запись, найдите «Внешний вид» на левой боковой панели и нажмите «Настроить».

Источник изображения

Перейдите в нижнюю часть нового меню слева и выберите «Дополнительные CSS».

Источник изображения

Наконец, вы увидите страницу редактора CSS, которая позволяет вам ввести и протестировать код CSS, прежде чем отправлять его на свой сайт.

Источник изображения

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

Этот код является основой для кнопки гамбургера.

Затем добавьте свой CSS:

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

Приготовление динамической иконки кнопки гамбургера с помощью CSS

Если вы хотите попробовать свои силы в чем-то более сложном, подумайте об анимированной кнопке меню, которая при нажатии превращается в значок «Отмена». Вот как это начинается:

Щелкните, чтобы открыть меню, и оно превратится в следующее:

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

Чтобы создать этот динамический вариант, начните с вашего HTML:

Теперь добавьте свой CSS:

Наконец, добавьте немного JavaScript:

Создание кнопки бургера без кода

Конечно, не все хотят тратить время и силы на создание кнопки-гамбургера, на которую пользователи могут или не могут нажимать. Некоторым владельцам веб-сайтов просто не нравится кодирование CSS и HTML, в то время как другие предпочитают отдавать приоритет созданию контента или макету главной страницы.

Если вы предпочитаете, рассмотрите инструменты для создания веб-сайтов, которые предлагают встроенные опции для гамбургеров.

1. Концентратор CMS

С помощью CMS Hub вы можете создать отличный веб-сайт, соответствующий вашим потребностям и охватывающий ваш целевой рынок. Убедитесь, что все работает, как задумано, с помощью мониторинга трафика и интеграции маркетинговых кампаний. Кнопки для гамбургеров входят в стандартную комплектацию.

2. Squarespace

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

3. Webnode

40 миллионов пользователей создали сайты с помощью Webnode — добавляйте или изменяйте контент всего несколькими щелчками мыши и быстро настраивайте размещение и раскрывающиеся параметры любого гамбургер-меню.

4. Зона 123

Simple — это название игры для этого конструктора веб-сайтов. Site123 не является чем-то необычным — он бесплатный и позволяет легко интегрировать гамбургер-меню в ваш веб-дизайн.

Hamming It Up

Не всем нравится кнопка гамбургера.

В этом есть смысл; меню может вызвать путаницу или сделать важные параметры навигации недоступными. Но есть и преимущества бургера: создание собственной кнопки или использование инструмента для создания веб-сайтов позволяет вам решать, где это меню оказывает наибольшее влияние, и дает вам полный контроль над навигацией по вашему сайту.

Примечание редактора: этот пост был первоначально опубликован в мае 2020 года и был обновлен для полноты.