Иконка-гамбургер / Хабр
Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.Иконка-гамбургер — она везде. Везде вокруг нас. В веб-приложениях, на мобильных и десктопных сайтах, в программном обеспечении. Этот вездесущий значок из трех линий в настоящее время настолько распространен, что такое впечатление, как будто он однозначно ассоциируется с меню навигации. Но так ли это?
В последнее время дискуссии об эффективности иконки-гамбургера достигли новых высот. В статьях выдающихся дизайнеров, и на нескольких сайтах, включая
The Atlantic,
TechCrunch,
The Next Webи
Nielsen Norman Group приходят к выводу, что это UX-антипаттерн, модная и простая в реализации иконка, которая является регрессом от более простых и более выразительных альтернатив. Но антипаттерн это или нет, использование значка настолько разрослось, что делает его почти непременным атрибутом на большинстве веб-сайтов, особенно на маленьких экранах.
Учитывая мое положение в качестве дизайнера в команде сайта m.booking.com, и использование нами этой иконки для показа выдвигающегося меню, я решил исследовать этот объект. А начал я с изучения происхождения значка, чтобы попытаться понять его путь к позору.
Иконка-гамбургер является классической. Даже если вы не знакомы с этим ее названием, то три черные полосы столь же знакомы, как курсор мыши — постоянный спутник нашего интернет-серфинга с первого дня, как вы стали обладателем своего компьютера.Gizmodo
Это звучит многообещающе. Но даже при том, что иконка является классической и была вокруг всегда, веб-дизайнеры были менее последовательны в ее использовании. Значок был использован для списков, перетаскивания и изменения порядка, выравнивания, и многого другого. Возможно, это неправильное использование объясняет его критику, как значка меню. Может быть, из за широкого распространения и разнообразного использования эта иконка потеряла способность передавать единую метафору и, в свою очередь, ставит пользователей в замешательство.
Вся эта история сподвигла меня задаться вопросами: «Неужели мы неправы, а все остальные правы? Причиняет ли это неудобства нашим пользователям? Есть ли люди, на самом деле понимающие, что представляют из себя эти три маленькие линии на нашем сайте?»
Постоянные читатели этого блога не будут удивлены, узнав, что нашим следующим шагом было задать эти вопросы в форме A/B теста. Как и все остальное, иконка-гамбургер был подвержен воздействию наших многочисленных клиентов, которые, путем взаимодействия с меню, должны определить, был ли этот значок лучшим решением. К этому времени я прочитал достаточно статей и информационных данных, чтобы быть уверенным, что отсутствие консенсуса или другие результаты не были следствием поведения покупателей, для которых разрабатывался дизайн. Я решил последовать методу, описанному Джеймсом Фостером, на который многие ссылаются, в том числе один из наших лучших мобильных специалистов — Люк Вроблевски.
Ранее мы протестировали несколько мест размещения и стилей значка (с рамкой, без рамки, с иконкой, разных цветов и так далее), но никогда не тестировали слово «Меню» — из-за сложностей, связанных с нашим желанием провести испытания на сорок одном языке, поддерживаемом нами.
Тем не менее, мы двинулись вперед, найдя переводы с помощью нашей команды экспертов по языкам и запустили тест:
Базовый вариант
Наш исходный значок меню «гамбургер» слева от заголовка и с белой разделительной чертой справа.
Альтернативный вариант
Слово «Меню» внутри блока с белой рамкой с закругленными углами, также выравнивается по левому краю.
Мы запустили эксперимент для всей нашей пользовательской базы. А также, учитывая известность и вездесущесть этого элемента пользовательского интерфейса, надеялись, что не займет много времени подвергнуть тестированию миллионов наших клиентов по всему миру, на каждом из поддерживаемых языков и большом числе устройств.
Так каков конечный результат? Слово победило фастфуд, как это было в эксперименте Джеймса Фостера, или победит булочка с котлетой?
Результаты
В ходе этого эксперимента, замена иконки на слово «Меню» не оказало существенного влияния на поведение наших пользователей. С помощью нашей огромной базы пользователей, мы можем, с очень высокой степенью вероятности, констатировать, что, в частности, для посетителей Booking.
Конечно мы не можем эти данные экстраполировать на все. В каких-то странах, на каких-то языках или устройствах, это возможно сработало лучше или хуже. Но в глобальном масштабе мы можем сделать вывод, что слишком сильно высмеивали «гамбургер». В целом, он был столь же узнаваем, как и слово «Меню». В духе управления продвижением дизайна нам, наверное, следует рассмотреть и другие варианты, и, может быть, попробовать к нашей иконке-гамбургеру добавить сыр, ломтик бекона и кортофель фри, но сейчас мы рады сообщить, что наш «трехлинейный друг» прилеплен везде. Его фактическое размещение, форма, размер, положение и цвет — это, конечно, предмет для будущих тестов.
Несомненно, это урок для всех нас о сущности A/B тестирования. Вы никогда не тестируете элементы UI, модель или функцию в целом. Вы тестируете эти вещи на очень конкретной пользовательской аудитории при определенных и конкретных сценариях.
То, что работает для Booking.com, может не работать для вас или ваших пользователей. Это одна из причин, почему мы провели свое A/B тестирование. Выводы других экспертов, данные с других сайтов или гипотезы, придуманные в пабе, поедая гамбургер, все будут недоказанными, пока они не проверены на наших клиентах и на нашей платформе.
Не запутаться бы в нашей собственной метафоре, но это, как рецепт хорошего гамбургера. Даже если вы в точности записали за мной все ингредиенты, в конечном итоге вы получите совершенно другой гамбургер. На это, конечно, повлияет качество доступного на рынке мяса, мука используемая для хлеба и тысячи других факторов. Лично для нас, идея хорошая, если она будет хороша для Booking.com. Если мы может повторить ее на нашем сайте, и, если она будет работать для всех наших клиентов.
Наше мнение
Всегда надо тестировать свои идеи и смотреть, что вам говорят полученные данные и, какие вопросы возникают. Мой совет? Откусите и посмотрите, что произойдет.
«гамбургер» — не лучшее решение?
Оригинальные исследования здесь и здесь.
Одна из моднейший горячих тенденций в веб-дизайне последнего времени — это меню, спрятанное в иконку, напоминающую гамбургер. Вот в такую вот:
Веяние корнями своими уходит не так далеко — в мобильные интерфейсы. Можете поискать у себя в смартфоне такую иконку, наверняка быстро справитесь. Однако в своем стремлении к философии «большое фоновое фото, внимание типографике, минималистичное меню» даже десктопный веб-дизайн тоже пришел к тому, что взялся прятать меню в такую иконку — тем более, так удобнее делать адаптивные сайты. Насколько решение оправдано и, самое главное, удобно для пользователя? Читаем сборную статью на основе исследований ребят из exis web.
Итак, действительность в том, что мы не знаем, как пользователи взаимодействуют с сайтами, которые мы создаем. Небольшая оговорочка: до тех пор, пока не проведем наблюдение и измерение.
Стартуем А/Б тест с целью определить, насколько привлекательной является та или иная вариация кнопки меню. Эксперимент проводился на всех мобильных браузерах и задействовал все страницы сайта. Общее число вовлеченных пользователей — около 20 000.
Исходный макет:
Как видите, только иконка, без текста и обводки
Вариация 1
Тот же самый значок, но с надписью «меню» под ним.
Вариация 2
Тот же контрол, но со скругленной обводкой. Результаты
Отличия незначительные, чуть больше людей нажали на иконку с обводкой, чем просто на иконку.
Что удивительно, так это низкое число кликов — только 2% пользователей открыли меню. Это вызвано тем, что сам типа сайта (блог) не располагал к такому действию. Например, если бы это была социальная сеть, предусматривающая высокое вовлечение, результат был бы совсем другим.
Начинаем второй тест. Также на всех мобильных браузерах и всех страницах. Продолжительность теста — около 5 дней, общее число вовлеченных пользователей — около 50 000. Возрастная группа находится в пределах 25-34 лет.
Исходный макет
Такой же, как и в прошлом эксперименте.
Вариация 1 (Слово «меню» с обводкой)
Вариация 2 (Слово «меню» с обводкой и иконкой)
Автор говорит о том, что никогда бы не стал делать такой вариант, но ему было интересно проверить предположения.
Результаты
Итак, симуляция кнопки путем скругленной обводки дала самые хорошие результаты в обоих случаях.
«Исследование не стоит толковать так: пользователи не понимают значения иконки гамбургера.
Это не так. Они понимают. Исследование просто дает нам знание того, что текст и обводка привлекают к себе больше внимания. Опять же, исследование относилось к адаптивным сайтам, а не к приложениям.»
Это не так. Они понимают. Исследование просто дает нам знание того, что текст и обводка привлекают к себе больше внимания. Опять же, исследование относилось к адаптивным сайтам, а не к приложениям.»
Спасибо автору эксперимента, можете почитывать его блог и использовать уже полученные знания в работе.
Кстати, о гамбургерах. Про олимпиаду Hot Code II (сайт не актуален) все помнят? Никто не упустил событие из виду (в прошлый раз были сожалеющие). Давайте, мы верим, что вы можете! До конца еще есть время.
P.S. Но уже не так много ;)
Когда лучше использовать Меню Гамбургер?
Меню гамбургер – это иконка с тремя горизонтальными линиями (две булочки и котлета в середине), которая используется для обозначения меню. Клик/нажатие на иконку открывает навигацию.
Огромное количество постов было написано про гамбургер меню, в основном дизайнерами, которые выступают против него.
Если вы всё пропустили, то почитайте статью Hidden Navigation Hurt UX Metrics, написанную NNGroup. В целом, она не о самой иконке, а о скрытии навигации за иконкой.
Однако, в некоторых случаях гамбургер меню может стать хорошим решением.
Гамбургер в роли Второстепенной навигации
Так как главным недостатком такого меню является его незаметность, оно не рекомендуется к использованию в качестве основного. Однако, при разработке второстепенной навигации эта модель может стать подходящим решением. Если основная навигация представляет собой Call to Action кнопки на экране (или нечто подобное), то гамбургер меню может стать неплохим местом для второстепенной навигации.
Посмотрите на главный экран Uber’а в качестве примера:
Карта и поиск — самые главные элементы навигации на экране, поэтому они всегда видны.
Так как всё на главном экране предназначено для вызова такси, такие второстепенные опции как “История” и “Настройки” могут быть скрыты за “гамбургером” (эти функции вряд ли будут регулярно использоваться пользователем приложения).
Иконка гамбургер не отвлекает пользователей от основной задачи и все равно предоставляет доступ к дополнительным функциям.
В этом случае:
Меньше навигационных элементов означает меньшее количество отвлекающих факторов, когда пользователи взаимодействуют с приложением. Минимизация навигации фокусирует внимание пользователя на выполнении задачи.
В общем, если вы решаете, использовать гамбургер или нет, то вспомните “правило 80%”. Функции, которые вы собираетесь поместить за иконку гамбургера, используются реже чем в 80% обычного использования? Если ответ положительный, то добавлять их в меню вполне нормально.
Заключение
В то время как скрытая навигация очень часто вредит пользователю, любое дизайнерское решение должно быть рассмотрено в контексте целей приложения. Иными словами, не существует “хороших” или “плохих” решений. Важнее всего контекст.
Перевод статьи When To Use a Hamburger Menu
Автор оригинального текста Nick Babich
Меню — ☰
Символ меню гамбургера, значок навигации, значок раскрытия / свертывания, контекстное меню и символ из трех точек.
Нажмите на значок, чтобы скопировать в буфер обмена ▼
☰≡Ξ㊂≣⁝⋮︙⦙⁞⋯…∷▲▼▶△▽▷⌃⌄︿﹀︽︾⌵𓏬𓃑𓏧⸬
※ Все символы являются символами Юникода, а не изображением или комбинированными символами. Но вы также можете комбинировать их самостоятельно. ※
| символ текста | смысл | Копировать / Вставить |
|---|---|---|
| ☰ | значок гамбургер | Копировать |
| ≡ | значок меню гамбургер | Копировать |
| Ξ | оригинальная функция Римана Си. | Копировать |
| ≣ | строго эквивалентный символ. четыре линии символа | Копировать |
| ⁝ | три вертикальные черные точки | Копировать |
| ⋮ | вертикальный символ многоточия | Копировать |
| ⦙ | четыре вертикальных черных круга | Копировать |
| ⁞ | четыре вертикальных черных квадрата | Копировать |
| ⋯ | срединный горизонтальный символ многоточия | Копировать |
| … | горизонтальный символ многоточия | Копировать |
| ∷ | символ пропорции. четыре точки в квадрате. | Копировать |
| ▲ | черный треугольник | Копировать |
| ▼ | черный треугольник, направленный вниз | Копировать |
| ▶ | черный правый треугольник | Копировать |
| △ | белый треугольник | Копировать |
| ▽ | белый треугольник, направленный вниз | Копировать |
| ▷ | белый правый треугольник | Копировать |
| ⌃ | символ стрелки вверх | Копировать |
| ⌄ | символ стрелки вниз | Копировать |
| ︿ | символ шеврона указывает вверх | Копировать |
| ﹀ | символ шеврона указывает вниз | Копировать |
| ︽ | удвоить угол наведения | Копировать |
| ︾ | двойной угол наклона вниз | Копировать |
| 𓏬 | три вертикальных белых кружка | Копировать |
| 𓃑 | девять точек | Копировать |
Проблема использования значка — гамбургера в веб дизайне
Значок — гамбургер — это три не больших полоски, которые сейчас активно используют дизайнеры для обозначения меню на сайте, однако это один из самых спорных методов обозначения навигации в настоящее время.
Многие знаменитые дизайнеры говорят, что ненавидят его, а так же множество клиентов того же мнения, но тогда почему же данных значок часто встречается в дизайне?
Значок — гамбургер легко масштабируемый, и он красиво и чётко прорисовывается в пиксельной сетке. Также подобный значок правильно подходит по смыслу обозначения меню, так как навигация состоит из списка.
В общем в чём же проблема данного гамбургера? Давайте попробуем подробно разобраться в этом вопросе. И вообще стоит ли использовать данную иконку в обозначении меню на сайте.
Проблема значка
Есть множество дизайнеров, которые сомневаются в ценности и донесении смысла пользователю самой иконки — гамбургера. Подобный значок начали использовать так как он в стиле IOS, хотя он был в бесплатном доступе до того как его начала использовать Apple.
Существует множество противоречий по поводу того, что значок — гамбургер это правильное решение в обозначении меню на сайте. Дизайнеры утверждают, что иконка легко узнаётся младшим поколением аудитории, другие полагают, что и старшее поколение его легко воспринимает если оно грамотное в плане веб технологий.
Единственный вывод, который мы можем сделать из этих данных, это то, что все тесты по использованию значка аудиторией оказались безрезультатными, плюс было и множество противоречивых результатов.
Значок Гамбургер — больше проблем
Помимо конструкции самого значка, в его использовании присутствует ряд проблем.
Первая, и, наверное, самая важная проблема в том, что Значок Гамбургер добавляет Вашей навигации дополнительное действие. Чтобы добраться до нужного пункта меню, пользователю нужно сделать ещё один лишний щелчок. Правило для всех дизайнеров это ход к целевой страницы пользователя не более чем в 3 клика. А вот Гамбургер этому правилу противоречит. Вы можете использовать слово «Меню» вместо значка, но вот проблема останется и никуда не денется.
Техника Гамбургера также скрывает всё содержимое навигации. И, всё же, значок закрывает часть Вашего сайта, который изначально не видео, если только не нажать на иконку. Ну а пользователь может и не всегда воспользоваться значком, а иногда просто и не увидит его, хотя последнее очень сильно зависит от мастерства дизайнера.
Что хорошего в значке — гамбургере?
Учитывая то, что данную иконку ненавидят и она приносит много проблем дизайнеру, почему же её используют очень часто в дизайне?
В настоящее время данный значок хорош тем, что он легко узнаваем, пользователи всё же «продвинутые», он часто где используется, мобильные девайсы не исключение, по этому пользователь уже интуитивно знает за что гамбургер отвечает.
На самом деле иконка ссылка более узнаваема и кликабельна чем слово «Меню» хотя казалось бы на оборот.
Самое главное значок делает то, что он должен делать: а именно он экономит массу места, таким образом появляется больше возможностей для дизайнера. Не стоит думать, что значёк решает все проблемы с навигацией в дизайне, он просто решает эту проблему так же хорошо как и другие решения.
Корень проблемы
Те дизайнеры, которые не любят использовать данный значок используют как правило слово «Меню», но при этом всё же уместнее смотрится иконка чем слово, особенно на маленьких разрешениях.
Так же дизайнеры очень часто не понимают самой сути проблемы, это скрытие части контента от глаз аудитории, что, конечно же, не есть хорошим тоном.
Лучшее решение
Если Вы не знаете использовать иконку — гамбургер или нет, знайте, что в лучшем случае она будет исполнять свою задачу на мобильных устройствах, так как всё меню тяжело вместить на малые разрешения.
Отличным примером является приложение от Facebook, самый лучший пример использование гамбургера, к тому же интуитивно понятное. Так же Facebook недавно сделали ещё одно отличное приложение — Messenger. Сразу возникает вопрос, почему не объединить эти два приложения? Это решение было принято из за удаления иконки гамбургера, а так же упрощения навигации в основном приложении. Мне кажется, что это очень удачное и правильное решение.
И всё же, мне хочется сказать, что если Вы сомневаетесь в использовании данной иконки в дизайне, не используйте её. Данный значок будет уместен на маленьких экранах телефона, там где навигация просто не помещается, но и есть конечно же исключения, которые Вы можете посмотреть выше.
Огромное спасибо http://www.webdesignerdepot.com
«Не путайте пользователя»: 14 элементов и 10 правил для эффективной навигации по сайту
Идеальная навигация держится на трех китах. Это:
Дизайн необходимо продумать с учетом общепринятых элементов навигации. Даже если вы выбираете смелые решения, стоит использовать знакомые формы и обозначения иконок. Минимализм сегодня гораздо лучше воспринимается пользователями — навигационные элементы должны выделяться, но в то же время не диссонировать с общим визуальным решением.
Навигация должна быть интуитивно понятной. Перенасыщение меню ведет к дезориентации, рассеянному вниманию и уводит пользователя от основной повестки. На каждой странице должна быть своя навигация, позволяющая пользователю легко вернуться к предыдущему материалу или перейти на новый без потери логической связи.
Структура составляется так, чтобы пользователь смог оказаться в нужном разделе максимум за несколько кликов.
Не следует перенасыщать сайт несколькими навигационными слоями — расположение разделов должно быть предсказуемым.
Основные элементы навигации сайта
1. Главное меню
Это ключевой пункт при разработке навигации. Лучше всего создать горизонтальное меню в шапке сайта — такой вариант привычнее для пользователя. Оптимальное число разделов в нем — не более 7. Для дополнительной информации можно использовать раскрывающееся меню с подразделами. Привлечь внимание к конкретным разделам и выделить активный раздел можно шрифтом или цветом.
Для обозначения меню можно использовать значок «гамбургер» — три горизонтальные черты. При нажатии на него пользователь видит пункты меню, которые до этого были скрыты.
Главное меню горизонтального вида отлично выделяется благодаря правильно подобранной цветовой гамме и структуре
2. Боковое меню
В него помещают подразделы, рубрики и дополнительную навигационную информацию.
Как правило, оно размещается в левой части страницы и не дублируется во всех разделах сайта. Не стоит перенасыщать боковое меню, оптимальное количество разделов в нем — не более 10.
Пример неперенасыщенного меню с подразрелами слева
3. Иконки
Для визуальной привлекательности вместо текстовых ссылок можно использовать иконки: значок корзины для списка покупок, значок сердца для избранных товаров и т.д. Крайне важно здесь избегать иконок, непривычных для пользователя и выбранной категории.
Работа студии. Удобное меню слева представлено иконками и при наведении дублируется текстом
4. Карта сайта
На главную страницу можно добавить карту сайта — она содержит гиперссылки на все разделы и помогает пользователю мгновенно переходить на нужную ему страницу.
Карта сайта на главной странице. Отличный пример удобного размещения разделов
5.
ПоискДля некоторых ресурсов будет актуален поиск по ключевым словам. Его лучше разместить в главном меню и сделать постоянным навигационным спутником пользователя.
Светлый поиск является продолжением главного меню
6. Фильтрация и сортировка
Для более удобного поиска используйте фильтры — они помогают пользователю отметить нужные характеристики и быстро найти подходящий товар, не путешествуя по ненужным ему страницам и разделам.
Расширенная сортировка и фильтрация облегчают пользователям поиск
7. Раздел «О компании»
Данный раздел необходим для повышения доверия пользователей к вашей компании, его можно разместить в главном меню или футере.
Работа студии. Раздел «О компании» размещен в футере
8. Текстовые ссылки
Такие ссылки используют для пояснения информации и удержания внимания пользователя на сайте.
Они могут как вести на другие разделы, так и открывать всплывающие окна.
Работа студии. Текстовые ссылки органично смотрятся в тексте и не перегружают его
9. «Хлебные крошки»
Такое интересное название пришло к нам из известной сказки про Гензель и Гретель, в которой хлебные крошки указывали им путь. Это вспомогательные навигационные элементы в верхней части страницы — слева от того раздела, где сейчас находится пользователь. Они кликабельны и позволяют вернуться на один или несколько шагов обратно.
Ozon активно использует «хлебные крошки»
10. Призывы к действию
Для призыва к целевому действию можно использовать отдельную кнопку, ведущую в соответствующий раздел. Главное здесь — придерживаться логических взаимосвязей.
Работа студии. На сайте кнопки «Оставить заявку» расположены под каждым предложением компании
11.
Кнопка возвратаНа площадках с большим объемом информации (например, в интернет-магазинах) в шапке страницы можно разместить кнопку в виде стрелки, направленной вверх. Она поможет пользователям быстро вернуться на предыдущую страницу, не прокручивая большие массивы данных.
Кнопка возврата крупно показана справа
12. URL-адрес страницы
Очень важно вынести в адресную строку названия разделов, чтобы пользователь мог понять, в какой части сайта находится сейчас. URL должен отражать суть конкретной страницы.
13. Визуальные эффекты
Не забывайте о важности визуальных эффектов. На кликабельных кнопках значок мышки должен визуально изменяться. Если мы используем лендинг, дизайнер может заложить визуальную навигацию при переходе от одного блока к другому — стрелку или перечисление блоков. Важно выделять разделы, где находится пользователь, другими цветами или подчеркиванием.
Кнопки с дополнительной анимацией привлекают внимание и увеличивают кликабельность.
Работа студии. Кнопка «Записаться» меняет цвет при наведении курсора. На сайте реализованы различные анимационные эффекты
14. Футер
В этой области сайта дублируются разделы главного меню, располагаются контакты, документы, политика конфиденциальности и другая информация, диктуемая контекстом. Часто футер делают контрастным остальному сайту, но это отнюдь не обязательный прием. Здесь открывается большой простор для фантазии дизайнера.
Работа студии. Футер включает все необходимые разделы
Важные правила удобной навигации
1. Не утруждайте пользователя новыми вкладками
Страницы не должны открываться в новых окнах. Это неудобно для пользователя, так как увеличивает количество вкладок в браузере и усложняет ориентацию на сайте.
Удобно сделана странца параметров.
Не нужно переходить в новые разделы — достаточно навести курсор на часть объекта
2. Располагайте контакты на видном месте
Не размещайте контактную информацию далеко от пользователя, привычное расположение — в шапке сайта или футере. А адрес лучше расположить в футере или на отдельной странице.
Работа студии. Удобное расположение контактной информации. Пользователь видит номер и может связаться сам или «Заказать звонок»
3. Не прячьте меню
Меню должно располагаться на видном месте, не стоит прятать его в «бургер». Желательно закрепить меню и сделать его неизменным при переходе на другие страницы, чтобы ничего не путало пользователя.
Яркая, чистая посадочная страница, но нет закрепленного меню. Оно вынесено в нетрадиционный бургер, что может вызвать затруднения у пользователя
4. Используйте подсказки
В случаях, когда структура меню сложная и перенасыщенная, можно использовать систему информационных подсказок, которые обычно закрепляются в главном меню справа.
Они открываются во всплывающем окне и преследуют пользователя при переходе на любую страницу.
Подсказки закреплены в главном меню
5. Добавляйте стимулирующие разделы
Для увеличения времени, проведенного на сайте, часто вводят дополнительные навигационные категории — рекомендованные товары, недавно просмотренные страницы, полезные статьи и другие потенциально интересные пользователю разделы.
Работа студии. Возможность прочитать о компании в СМИ
6. Помните про информационные ссылки
Самое удачное место для размещения информационных ссылок — футер. В него обычно помещают то, что не поместилось в главном меню. Это могут быть документы, адреса, вакансии, доставка и другие второстепенные разделы.
Работа студии. Информативные ссылки для больших объемов информации
7.
Не забывайте про правило логотипаВаш логотип должен вести на главную страницу — это не только удобство, но и привычка среднестатистического пользователя.
Работа студии. Пользователь всегда окажется на главной странице, нажав на логотип
8. Группируйте страницы
Чем правильнее сгруппирована информация, тем лаконичнее и понятнее будет навигация. Не дробите разделы, которые можно поместить в один. Если у вас группа компаний, не перечисляйте каждую в отдельном разделе — разместите всю информацию на одной странице «О группе компаний».
Работа студии. При такой группировке в один блок помещается больший объем информации
9. Расставляйте приоритеты
Продумайте первичные и вторичные элементы. Например, первичным будет главное меню, вторичным — боковое и «хлебные крошки». Не путайте пользователя и выносите в главное меню только основные разделы.
Работа студии. Правильно расставленные акценты на главной странице
10. Используйте дизайн
Не забывайте выделять анимацией, цветом или шрифтом разделы и элементы сайта. Например, ссылки лучше подчеркивать, а «хлебные крошки» — делать большим размером шрифта, нежели основной текст. Пробелы между блоками лендинга не стоит делать слишком большими, чтобы не утомить пользователя долгой прокруткой.
Курсор мыши и кнопки также должны участвовать в дизайн-концепции и подталкивать пользователя к целевому действию.
Работа студии
Правильная навигация сайта содержит в себе гораздо больше нюансов, чем можно описать в одной статье. Главное — помнить, что определяющим фактором при ее разработке является логика и пользовательский опыт.
Попробуйте поставить себя на место пользователя и определить, как ему будет удобнее передвигаться по вашему ресурсу.
Креативные дизайн-эксперименты — это замечательно, но перед их применением стоит учитывать привычные приемы, используемые пользователем в данном сегменте. Составьте список сайтов, на которых вы чувствовали себя наиболее комфортно, и используйте их опыт для вашего собственного ресурса.
Как достичь максимума
- Возьмите за основу краткость: не путайте пользователя и избегайте лишнего в навигационной панели.
- Помните, что пользователь обращает больше внимания на первый и последний пункты панели навигации и просматривает меню слева направо. Значит, в центральной части меню можно располагать наименее значимые ссылки.
- Продумайте «план отступления» — дайте пользователю возможность вернуться к предыдущему разделу несколькими способами, а не только путем нажатия кнопки «Назад» в браузере.
- Обязательно проверьте адаптацию навигации под мобильные устройства: располагаются ли все кнопки на месте, не выходят ли за рамки экрана, удобно ли на них нажимать.
- Обращайте внимание на то, как долго люди задерживаются на вашем сайте. Если пользователь может быстро найти у вас то, что ему нужно, с большой вероятностью он станет вашим клиентом.
Фото на обложке: Shutterstock / William Potter
ᐉ Что такое гамбургер-меню • Рассказываем простыми словами ✓
Время прочтения: ~2 мин
Гамбургер-меню (от англ. «hamburger menu») — это значок (иконка) меню, который используется дизайне сайтов, программного обеспечения и заменяет кнопку со словом «Меню» или «Файл».
Иногда эту иконку называют просто «Гамбургер» или «Меню Хот-Дог», либо «Трёхстрочное меню», потому что у значка три горизонтальные линий.
Он так называется, потому что очень уж схож с классическим гамбургером: верхняя и нижняя полосы имитируют булку, а средняя — котлету. При нажатии на иконку открывается выпадающее меню.
Многих пользователей интересует, можно ли открыть такое меню с помощью горячей кнопки.
Пока быстрой клавиши для доступа к этому меню нет, но некоторые программы позволяют открыть гамбургер нажатием клавиши Alt на клавиатуре.
Изначально иконка символизировала список, но позже устоялось название «гамбургер». Стандартом для изображения кнопки меню эта иконка стала с 2010 года и теперь постоянно используется в графическом интерфейсе.
Автор иконки — дизайнер Норм Кокс. Он хотел создать простое, лаконичное и понятное изображение, похожее на список и придумал эту идею давно, в 1981 году для Xerox Star. Но использоваться иконка начала с 2000-х годов в мобильных интерфейсах, а обрела свою популярность после того, как появилась в в мобильном приложении Фейсбука для Айфонов в 2010 году.
Сегодня такое меню можно встретить в подавляющем большинстве приложений, она стала стандартом для графического дизайна, хотя многие дизайнеры критикуют её и предлагают найти замену, потому что считают, что не всем пользователям понятно, что означает эта иконка. Были даже проведены A/B-тесты, показавшие, что если поменять значок гамбургера на слово «Меню», то это облегчает пользователям навигацию.
Однако другие специалисты утверждают, что к гамбургеру уже все привыкли и он стал неотъемлемой частью визуального оформления, а эксперимент с A/B-тестами и заменой иконки на слово «Меню» показал несущественное влияние на поведение пользователей.
***
Вернуться на главную Энциклопедия eCommerce
Настроить интеграцию без программистов ApiX-Drive
Статьи о маркетинге, автоматизации и интеграциях в нашем Блоге
10 плюсов и минусов гамбургер-меню (с примерами)
Гамбургер-меню — это элемент навигации, который вы можете найти на веб-сайтах, в приложениях и программах.
Его восхитительное название произошло от его дизайна: он состоит из трех горизонтальных линий, напоминающих гамбургер. Как и его реальный аналог, гамбургер-меню — это механизм экономии места.
Но это значок, который вызвал споры о и .
Для некоторых это важная часть набора инструментов дизайнера.Для других это сбивающий с толку побочный продукт плохой информационной архитектуры.
Салат-латук. Теперь погрузитесь в гамбургер-меню и познакомьте с кетчупом мясистой историей, окружающей эту булочку.
Извините, ничего не могу с собой поделать. Я на рулоне .
(ладно, я остановлюсь).
Что такое гамбургер-меню?
Меню гамбургера или значок гамбургера — это кнопка на веб-сайтах и в приложениях, которая обычно открывается в боковое меню или панель навигации.
Он был создан дизайнером взаимодействия Нормом Коксом для персональной рабочей станции Xerox Star в 1981 году как простой способ сообщить пользователям, что кнопка содержит список элементов.
Хотя сегодня мы используем гамбургер-меню, чтобы упростить навигацию, цель первоначального гамбургер-меню была иной.
«Я разработал этот символ много лет назад как контейнер для выбора контекстного меню», — сказал Кокс в интервью 2014 года. «Это в некоторой степени эквивалентно контекстному меню, которое мы используем сегодня, когда щелкаем по объектам правой кнопкой мыши».
Но после Xerox Star в гамбургер-меню было тихо. И только когда UX-дизайнерам пришлось найти способ разместить множество кнопок на крошечных экранах наших телефонов, меню начало появляться повсюду.
С тех пор гамбургер-меню стало популярным значком для приложений и веб-сайтов, которые можно использовать в своих навигационных кнопках.
Теперь гамбургер-меню стало иконой, которую дизайнеры любят ненавидеть. В конце концов, действительно ли люди переходят по гамбургер-меню? И даже если они это сделают, если пункты меню были настолько важны, не должны ли они отображаться все время?
Во время выступления на Всемирной конференции разработчиков в 2014 году дизайнер и евангелист Apple UX Майк Стерн выступил против гамбургер-меню, сказав:
«Помните, [две] ключевые особенности интуитивной навигационной системы — это то, что они говорят вам, где вы находитесь, и показывают, куда еще вы можете пойти.
”
«Меню гамбургеров ужасны в обоих случаях, потому что меню не отображается на экране. Не видно. Есть только кнопка для отображения меню ».
Но означает ли это, что вам следует избавиться от печально известного трехстрочного значка или пора перестать беспокоиться и научиться любить гамбургер-меню?
3 плюса гамбургер-меню
Pro # 1: узнаваемый
Гамбургер-меню повсеместно — от приложений до веб-сайтов, программного обеспечения и видеоигр.
Это даже каким-то образом нашло путь к print .
Привет, @Tesco, кажется, меню на твоей листовке не работает.
Добро пожаловать 👍🏼👍🏼🤓 pic.twitter.com/7X7l6WRLND— Мартин Рединг (@martynreding) 16 февраля 2019 г.
Это значок, который десятилетиями внедрялся в общественное сознание как кнопка, с помощью которой пользователи могут получить доступ к панели навигации. Люди знают это и могут полагаться на него в этой цели, например, как пользователи узнают, что значок корзины — это то место, где вы можете удалять файлы, или значок дома, где вы можете перейти в главное меню.
Как написал дизайнер Оливер Макгоу на Usabilla: «Я не вижу причин ненавидеть то, что выполняет свою задачу. Которая настолько широко известна, что имеет собственный стандарт. Зачем убивать вездесущий значок, который знают и понимают наши пользователи, и заменять его новой итерацией, чтобы они могли учиться заново? »
Pro # 2: Очистить
Что может быть хуже грязной веб-страницы? Например,
А в местах, где визуальная недвижимость в большом почете, например в мобильных приложениях и веб-сайтах, гамбургер-меню может принести невероятную пользу.
В конце концов, вы никогда не захотите перегружать своих пользователей слишком большим количеством вариантов. Когда людям предоставляется множество вариантов выбора, они, скорее всего, расстроятся и вообще не сделают выбор.
Одно исследование, проведенное экспертом по принятию решений Шиной Айенгар, показало, что люди в 10 раз чаще совершают покупки, когда им предоставляется меньше вариантов покупки.
Вот почему гамбургер-меню может быть отличным способом убрать грязную страницу.
Это простое решение.Непритязательный. И это не мешает работе пользователей. Итак, если вы ищете способ включить легкий доступ к своему навигационному меню, не отвлекая пользователей, гамбургер-меню — хороший ответ.
Pro # 3: вторичный доступ
Гамбургер-меню может быть отличным местом для кнопок навигации, которые напрямую не обслуживают цель вашей веб-страницы.
Uber использует для этого кнопку гамбургера. У приложения одна цель: заказать машину. Таким образом, главный экран ориентирован исключительно на бронирование автомобиля.
Для таких вещей, как записи о ваших прошлых поездках, квитанциях и настройках платежей, вам нужно будет нажать на гамбургер-меню, поскольку они не так важны для основной цели.
Хотя эти кнопки важны для определенных задач, они не должны занимать все место на главном экране. Это делает гамбургер-меню для них идеальным местом.
3 минуса гамбургер-меню
А теперь мы выясним, почему именно гамбургер-меню — одна из самых ненавистных иконок в мире дизайна.
Con # 1: Делает страницы менее важными
Одна из самых больших претензий дизайнеров к гамбургер-меню заключается в том, что оно сразу же делает все, что в меню, менее важным.
Думайте о своем веб-сайте как о музыкальном фестивале. Гамбургер-меню — это малая сцена. Вы бы не хотели помещать туда своих лучших артистов и хедлайнеров. Вместо этого вы хотите, чтобы они находились на самой большой сцене, где их могли видеть все (то есть на главной странице).
То же самое и с любым цифровым интерфейсом, который вы создаете.Когда вы переносите навигационные кнопки и страницы в гамбургер-меню, вы сообщаете, что эти вещи не так важны, и тем самым снижаете вероятность того, что они туда попадут.
Это подводит нас к следующему минусу:
.Con # 2: низкая вовлеченность
Гамбургер-меню имеет значительно более низкую частоту кликов (и вовлеченность), чем другие кнопки, что может быть объяснено рядом причин.
Во-первых, до них трудно добраться. Поскольку с каждым поколением телефоны становятся все больше, становится все труднее добраться до мест, где обычно находится кнопка гамбургера (верхний левый или правый угол).
Во-вторых, когда пользователи не видят свои параметры навигации, они с меньшей вероятностью будут ими пользоваться. Подумайте: чтобы использовать гамбургер-меню, пользователям необходимо:
- Осознавать, что предпочитаемый пункт меню не отображается
- См. Меню
- Знайте, что такое гамбургер-меню и что на нем можно щелкнуть
- Нажмите
- Сканировать список дополнительных пунктов меню
- Найдите того, кого они ищут
- Нажмите
Это большая когнитивная нагрузка для такой простой задачи.Например, когда приложение Zeebox удалило строку, содержащую их кнопки навигации, в пользу гамбургер-меню, они увидели, что их количество взаимодействий уменьшилось вдвое.
Одно исследование, проведенное Nielsen Norman Group, показало, что при использовании гамбургер-меню открываемость «сокращается почти вдвое, поскольку основная навигация по веб-сайту скрывается». Кроме того, время выполнения задачи увеличивается, а воспринимаемая сложность задачи возрастает ».
Они пришли к выводу, что пользователям хуже, когда кнопки навигации скрыты, как в мобильных, так и в настольных интерфейсах.
Даже крупные игроки, такие как YouTube, осознали влияние гамбургер-меню на их показатели вовлеченности и отошли от него.
Con # 3: Неэффективный
Любой хороший дизайнер знает, что заставлять пользователей делать дополнительные шаги для достижения своей конечной цели — это большой запрет.
Гамбургер-меню делает именно это.
Представьте, что вы ищете, чтобы записаться на тренера по фитнесу, и зашли на их сайт, чтобы узнать больше. Вы бы предпочли, чтобы ссылка / кнопка на страницу контактов была:
- A) Прямо на главной странице
- B) За гамбургер-меню
Конечно, вы бы предпочли, чтобы он был представлен вам сразу.Это важная информация для тех, кто ищет фитнес-тренера! Вам не нужно искать то, что вы ищете.
8 примеров гамбургер-меню
Мы составили список из восьми примеров гамбургер-меню в действии. Они представляют собой сочетание приложений, веб-сайтов для настольных компьютеров и веб-сайтов для мобильных устройств, но каждый из них хорошо использует гамбургер-меню.
🍔 1. Коачелла
Продюсеры Coachella знают, что люди, заходящие на их веб-сайт, ищут информацию о том, как получить билеты и присоединиться к списку ожидания для пропусков (особенно до того, как они объявят состав), поэтому дизайнеры не собираются увязать с главной страницей. с панелью поиска и информацией о разных поставщиках.Вместо этого они сразу же дают людям то, что они хотят.
🍔 2. Frame.io
Разработчики программного обеспечения для видео, Frame, посвятили свою главную страницу одной цели: сбору потенциальных клиентов.
Плюс, обратите внимание на эту классную иконку гамбургера.
🍔 3. Google Диск
Google предлагает пользователю именно то, что он хочет сразу же (то есть их документы и файлы), и использует гамбургер-меню для менее важных элементов (например, настроек, справки). Когда кнопки навигации скрыты в гамбургер-меню, внимание пользователя будет больше сосредоточено на основной задаче.
🍔 4. Народные ботаники
Народные ботаники
Для мероприятия Dscout People Nerds компания, занимающаяся дизайном и разработкой программного обеспечения, решила пойти путем шуток и добавить настоящие гамбургерные эмодзи в гамбургер-меню. Dscout знает, что их целевой аудиторией будут люди, хорошо знакомые с миром дизайна, поэтому они могут поиграть с такими вещами, как превращение иконки гамбургера в эмодзи.
🍔 5. Codrops
Очень забавный дизайн гамбургерного меню от ребят из Codrops, блога о дизайне, предлагающего бесплатные обучающие материалы и демонстрации различных дизайнов сайтов.Обратите внимание на более тонкие элементы, например, как гамбургер-меню превращается в X =.
🍔 6. Португальские дымоходы
Гамбургер-меню для веб-сайта, посвященного архитектурным красотам португальских дымоходов. Шутки в сторону.
🍔 7. My Fitness Pal
Это гамбургер-меню для отслеживания ваших гамбургеров — и если вы думаете, что мы включили его в этот список только для того, чтобы пошутить, вы будете правы.
Однако это также отличный пример того, как гамбургер-меню можно использовать для хранения менее важных кнопок навигации.Когда пользователь попадает в приложение, он, скорее всего, просто хочет записать количество калорий за день и двигаться дальше. Эта страница позволяет легко это сделать в правом нижнем углу.
🍔 8. Memrise
Знаете ли вы, что гамбургерное меню по-испански — это menú de hamburguesas? С приложением Memrise вы могли бы узнать об этом и многом другом.
Гамбургер-менюMemrise работает хорошо, потому что ваше основное действие — следовать вашему курсу, а второстепенным действием может быть переключение курса.
_
Готовы использовать иконку гамбургера в своем собственном дизайне? Попробуйте создать дизайн со значком гамбургера с помощью Velocity — наш набор пользовательского интерфейса, доступный в InVision Studio, Photoshop и Sketch.
51 CSS Hamburger Menu Icons
Free HTML and CSS hamburger menu icons . Обновление коллекции за март 2019 года. 13 новинок.
- Значки и наборы значков CSS
- Значки пунктирного меню CSS
- CSS Иконки социальных сетей
- Иконки погоды CSS
О коде
Анимированное меню
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Взаимодействие с SVG (стрелка влево)
Меню для взаимодействия со стрелкой влево с использованием анимации SVG и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Микаэль Айналем
О коде
Гамбургерное меню
Простое гамбургерное меню.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Билал.Ризваан
О коде
Преобразование гамбургерного меню
Переход значка меню «Гамбургер» с использованием CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Флорин Поп
О коде
Анимация движущегося гамбургера
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Адам Кун
О коде
Несносный бургер
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Микаэль Айналем
О коде
Гамбургер
Гамбургер-меню, римейк дриббля Аарона Икера, который выстрелил, — римейк Леонида Арестова.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Гималаи Сингх
О коде
Гамбургер Анимация
Анимация гамбургера и тройной цвет фона с использованием CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Гималаи Сингх
О коде
Кнопка меню
Кнопка меню и анимация преобразования горизонтального многоточия.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Минимальная анимированная иконка меню на чистом CSS
Минимальный анимированный значок меню с чистым CSS, также может использоваться с JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Аарон Икер
О коде
Гамбургер 3D анимация переключателя CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Сделано из
- HTML (мопс) / CSS (Sass) / JS
О коде
Гамбургер Меню v2
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: jquery.js
Автор
- Микаэль Айналем
О коде
Сочные бургеры Flippin ‘
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Гималаи Сингх
О коде
Взаимодействие с кнопкой меню гамбургера
Взаимодействие кнопок меню гамбургера в чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Аарон Икер
О коде
Гамбургер Анимация
Переход значка «Гамбургер» / «Закрыть».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Рис Мэтью П
Сделано из
- HTML / CSS (SCSS) / JavaScript
О коде
Щелкните маркер на кнопке меню Использование: после
Используя : после псевдоэлемента на кнопке меню, мы можем добиться эффекта подсветки щелчка.Подобно тому, как в Материальном дизайне Google.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Елица Димитрова
О коде
Гамбургерное меню
Простой значок меню гамбургер с небольшим jQuery.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: jquery.js
Автор
- Сил ван Дипен
О коде
Гамбургер Меню
Меню только эффекты CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: svd-full.css
Автор
- Микаэль Айналем
О коде
Переворачивая бургеры
Набор анимаций открытия / закрытия гамбургер-меню в SVG, HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- rosalieelphick
О коде
CSS Гамбургер-меню
Анимации меню гамбургеров, все с чистым CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Тамино Мартиниус
О коде
Анимация меню гамбургеров
Четыре различных анимации меню для переключения кнопки меню между гамбургером, крестиком и значком «Назад».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Кнопка навигации
Анимированная навигационная кнопка (отдельный элемент со стилем рисования) с использованием CSS и JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Значок меню с вращением
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Иконка-гамбургер с флажками
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Гамбургерное меню
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Ахмад Эмран
О коде
Гамбургер Иконки Анимации
CSS-иконок-гамбургеров с отличными состояниями наведения и анимацией.
Автор
- Райан Маллиган
Сделано из
- HTML / Мопс
- CSS / SCSS
- JavaScript
О коде
Перелистывание переключателя меню
Что это за флип? Не идеально для производства, но вот забавный эксперимент с переключением меню с анимацией CSS.
Автор
- Kriszta
Сделано из
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
О коде
Холодный гамбургер с тумблером
Эффект переключения креативного гамбургера.
Автор
- Родриго Соуза
Сделано из
- HTML
- CSS
- JavaScript (jquery.js)
О коде
Кнопка для гамбургера
Сексуальная кнопка для гамбургера.
Сделано из
- HTML
- CSS
- JavaScript (jquery.js)
О коде
Гамбургер Open Animation
Открытая анимация гамбургера HTML, CSS и JS.
О коде
Анимация меню SVG
Анимация гамбургерного меню с элементом svg.
Сделано из
- HTML
- CSS
- JavaScript (jquery.js)
О коде
Анимация значка гамбургера
Простая CSS-анимация значков гамбургера с небольшим количеством jQuery.
Автор
- Валерий Аликин
Сделано из
- HTML
- CSS / Менее
- JavaScript (jquery.js)
О коде
Анимация меню
Анимация меню гамбургера.
О коде
Кнопка меню гамбургера
Кнопка гамбургер-меню HTML, CSS и JavaScript.
Сделано из
- HTML / Haml
- CSS / SCSS
- JavaScript (jquery.js)
О коде
3D Гамбургер Transformicon
Преобразование гамбургера в 3D с помощью HTML, CSS и JS.
Демо-изображение: Click Me! Гамбургерное менюClick Me! Гамбургер Меню
Оригинальный снимок https://dribbble.com/shots/3323188-Experimental-Hamburger-Menue
Изготовил Александр Изуменко
2 марта 2017 г.
Автор
- Курт Петрек
О коде
Помощник по приготовлению гамбургеров на полсекунды
Витрина гамбургер-меню.
Демонстрационное изображение: Анимация значка гамбургераАнимация значка гамбургера
12 анимаций значков гамбургера.
Сделано Rosa
6 ноября 2016 г.
Atomic Hamburger Menu CSS
Атомарное гамбургер-меню HTML и CSS.
Сделано Alex Coven
10 октября 2016 г.
Анимация значка гамбургера
Анимация значков гамбургера в HTML, CSS и JavaScript.
Сделано Карлосом
13 августа 2016
Анимированный бургер / значок меню
HTML, CSS и JavaScript анимированный значок бургера / меню.
Сделано Николасом Смитом
31 июля 2016 г.
Эластичное меню для гамбургеров
Эластичное меню гамбургера с HTML, CSS и JavaScript.
Сделано Давиде Кантелли
6 июля 2016 г.
20 кнопок меню для гамбургера
Кнопка меню для гамбургера.Стилизовано и анимировано с помощью чистого CSS.
Сделано Иньси Чен
5 июня 2016 г.
Анимированный значок меню
Анимированный значок меню, переключающийся между гамбургером для открытия и X для выхода.
Сделано Эриком Гручей
27 мая 2016 г.
Простое переключение панели навигации на X (Vanilla JS)
Простое решение CSS и JS для превращения стандартного «гамбургера» Navbar в X при нажатии, а затем обратно в гамбургер при нажатии.Не требует зависимостей, написан на ванильном JS.
Сделано Джозефом Дженгареллой
3 апреля 2016 г.
Анимация значка меню
Анимация значков меню с помощью HTML, CSS и JavaScript.
Сделано Мариусом Балаем
23 марта 2016 г.
CSS (SASS) Анимация гамбургерного меню
Небольшая анимация при наведении курсора на значок меню гамбургера.
Сделано Дереком Морашем
11 января 2016 г.
Значок меню SVG
Значок меню SVG Codrops с всплывающим сообщением.
Сделано в Popmotion
12 ноября 2015 г.
Расширяющийся значок навигации по гамбургеру
Расширяющееся меню гамбургера, которое отображает назначение кнопки более четко, чем типичный значок меню гамбургера.
Сделано Райаном Кэнфилдом
11 мая 2015 г.
Анимация гамбургерного меню
Еще одна анимация гамбургер-меню.
Сделано Себастьяном Поппом
2 апреля 2015 г.
Переход для рисованного гамбургера
Больше удовольствия с переходами значков гамбургера.
Сделано Джесси Коуч
4 сентября 2014 г.
Полное руководство по гамбургер-меню и его альтернативам | от Apptimize
Apptimize помогает командам разрабатывать более качественные цифровые продукты с помощью простых в развертывании SDK и централизованной панели управления для всех каналов.
Гамбургер-меню за прошедшие годы получило много критики, некоторые по уважительным причинам, а некоторые нет. Одна из причин его разногласий просто в том, что он чертовски популярен во всех видах приложений. Подавляющее большинство сообщений, которые мы видели в Интернете, кажутся лишь односторонним критикой популярного элемента пользовательского интерфейса, хотя на самом деле они представляют собой очень полезный инструмент для включения в ваше приложение.Есть причина, по которой многие ведущие приложения все еще используют их в той или иной форме.
Вот что мы сделаем вместо этого. Мы собираемся изложить все плюсы и минусы гамбургер-меню, вооружить вас правильными вопросами и критериями оценки, чтобы найти правильное решение, и предложим вам 7 лучших альтернатив гамбургеру. Давайте начнем.
Источник изображенияМеню гамбургеров не демонстрируют возможности хорошо
Одним из самых больших недостатков использования гамбургерного меню является то, что оно не очень хорошо демонстрирует функции приложения.25% приложений удаляются после первого использования, что говорит о том, что многие приложения не работают достаточно быстро, чтобы продемонстрировать ценность, которую они приносят в жизни пользователей.
Вот почему адаптация так важна. «Если вы не добьетесь адаптации, возможно, ваши разработчики пили пиво вместо того, чтобы создавать те функции, которые никто не видел». — оценил генеральный директор Нэнси Хуа. Когда пользователи впервые заходят в приложение, они ищут очевидные подсказки относительно того, какие функции и ценности им доступны. Скрытие этих функций в панели навигации, такой как гамбургер, затрудняет их обнаружение и заставляет пользователей искать их.
Помещение функций в панель навигации означает, что они менее важны.
Помещение важных функций в панель навигации похоже на включение звездных игроков в команду B. Ящики для навигации, как и физические ящики, — это то место, где мы храним вещи, которые нам в данный момент не нужны. В результате, если он скрывается из виду, он также теряется из виду. Если это было недостаточно важно для отображения на главном экране, оно не должно быть таким важным.
Низкая частота кликов для меню гамбургеров в верхнем левом углу
Верхний левый угол экрана телефона обычно зарезервирован для метаинформации (название устройства, индикатор Wi-Fi, кнопка навигации назад, приложения, работающие в фоновом режиме, время автономной работы, поиск , так далее.). Это не центральная часть экрана, например центр (куда, естественно, падают глаза) или нижняя часть (куда легче всего дотянуться пальцами). Естественно, подразумевается, что на вещи в верхней части экрана нужно смотреть, а не нажимать.
Навигационные кнопки в верхней части экрана трудно дотянуться рукоятка.Это довольно сложно, если у вас нет очень больших рук. Даже на смартфонах меньшего размера наши пальцы обычно могут дотянуться до нижней ⅔ экрана без регулировки, но для доступа к верхней требуется отрегулировать захват. Размеры экрана только увеличиваются, и даже функция удобочитаемости iPhone не делает это намного проще. Пользователи идут по пути наименьшего сопротивления, и зачастую это означает, что они избегают нажимать на гамбургер.
Он конфликтует с навигационными кнопками в iOS
Расположение гамбургер-меню на экране точно такое же, как и для кнопки «Назад» по умолчанию: в верхнем левом углу.Когда нужны оба значка, вам придется либо зажать их рядом друг с другом, либо пожертвовать удобством использования, удалив один.
Ничего страшного! Есть веские причины, по которым так много приложений используют гамбургер-меню. Стиль меню разнообразен не зря.
Это делает интерфейс и навигацию намного чище
Что вообще здесь происходит ?!
Одна из худших вещей, которую вы можете сделать при разработке приложения, — это перегружать пользователей выбором, вызывая утомление от принятия решений.В гамбургер-меню все удобно расположить. Это не дает пользователям отвлекаться от основных функций, которые вы хотите, чтобы ваши пользователи видели. Проблема возникает только в том случае, если вы хотите, чтобы пользователи действительно использовали функции гамбургер-меню.
Значок гамбургера в целом хорошо узнаваем
«Зачем убивать вездесущий значок, который знают и понимают наши пользователи, и заменять его новой итерацией, чтобы они могли учиться заново». — Оливер Макгоф
Очень сложно добиться широкого распространения значка пользовательского интерфейса.Помимо кнопки «Домой», указателя мыши, логотипа для печати и кнопок питания, сколько вы знаете? Даже такие, казалось бы, безобидные значки, как значок звезды или сердца, могут иметь самые разные интерпретации. Для некоторых приложений они могут означать закладку страницы или публикации для последующего использования, в то время как в других они могут просто обозначать лайк, который пользователям может быть трудно найти позже. В результате эти и многие другие значки может быть трудно интерпретировать точно при использовании новых приложений.
Гамбургер обеспечивает прямой навигационный доступ
Гамбургер обеспечивает прямой доступ, что означает, что позволяет пользователю получить доступ к предпочтительному элементу «» вместо того, чтобы заставлять пользователей просматривать ваш контент в последовательном порядке. »- Nielsen Norman Group. Это означает, что пользователи могут щелкать непосредственно по нужным им страницам, вместо того, чтобы иметь предустановленный порядок, который они должны обработать, прежде чем перейти к желаемому экрану.
Большие преимущества этого — удобство использования и скорость. Благодаря прямому доступу пользователи могут быстро получить доступ к экранам и функциям, к которым они хотят получить доступ, всего несколькими щелчками мыши. Напротив, при наличии последовательного доступа пользователи вынуждены просматривать заранее заданный список, что требует от них прокрутки нерелевантных экранов перед прибытием в желаемый пункт назначения.На мобильных устройствах пользователи больше ощущают срочность, ожидая скорости и быстрого доступа к функциям даже больше, чем в Интернете. Последовательный доступ не всегда помогает.
Мы знаем, что гамбургер — не оптимальное решение, и его можно улучшить. Тем не менее, важно спросить себя и свою команду, каковы ваши цели и стоит ли это изменение потраченных усилий. Самый важный вопрос из всех:
Важно ли привлекать пользователей к функциям гамбургер-меню?
Если ваш ответ отрицательный, ваше приложение, вероятно, в порядке.Когда пользователям нужна расширенная функциональность, они, скорее всего, обратятся к гамбургер-меню, чтобы изменить настройки или выяснить весь потенциал приложения.
Если да, то вам повезло, потому что у нас есть 7 альтернатив. Однако сначала нам нужно поговорить о критериях, которые вы должны использовать для оценки каждого из них, и определить оптимальное решение для вашего приложения.
Мы должны помнить, что один дизайн не подходит для каждого приложения. Каждый из приоритетов и ограничений будет отличаться, поэтому выберите одно или несколько решений, которые, по вашему мнению, работают лучше всего и удовлетворяют вашим критериям.Ниже приведены вопросы, которые вы должны задать себе, рассматривая альтернативу гамбургер-меню.
- Что является более приоритетным? Площадь экрана или функции, доступные для немедленного просмотра?
- Видны ли основные функции на целевой странице / главном экране?
- Демонстрирует ли эта навигация пользовательского интерфейса основные функции, которые я хочу, чтобы пользователи видели?
- Указывает ли пользовательский интерфейс навигации, на какой странице находится пользователь?
- Легко ли дотянуться до кнопок навигации большим пальцем правой руки, не меняя руки?
- Значки интуитивно понятны и понятны?
- Позволяет ли эта навигация прямой, а не последовательный доступ?
1.Плавающее / заметное меню гамбургеров
Плюсы:
- Значит важность
- Может сэкономить пространство на экране
- Интуитивно понятный и простой в использовании
- Легко достать большим пальцем правой руки (в зависимости от того, где вы его разместите)
- Обеспечивает прямой доступ
Минусы
- Функции, которые не сразу видны
- Может занимать большой блок экрана
Если вам все еще нравится использовать навигационные панели, есть лучший способ побудить пользователей к их использованию: плавающий гамбургер меню.
Плавающий гамбургер — это ящик приложения, который занимает более заметное место на экранах пользователей. Это имеет несколько значительных эффектов: теперь пользователи видят нажатие этой кнопки как основную функцию приложения, что повышает их важность. Это также позволяет командам продемонстрировать больше, чем несколько функций, а также иметь легко доступную панель навигации, которая может переносить их в любое место в приложении.
Мой личный фаворит? Это красота.
Мы фактически протестировали вариант плавающего значка гамбургера с Vevo и обнаружили, что использование их логотипа для значка, а не типичного гамбургера, на самом деле значительно увеличило конверсию.
2. Меню с вкладкамиПлюсы:
- Возможность увидеть больше основных функций и функций на главном экране
- Может сразу увидеть, на какой странице вы находитесь
- Легкодоступные кнопки
- Это сигнализирует о важности,
- Позволяет получить прямой доступ
Минусы:
- Ограничено только ~ 4–5 пунктами меню (в зависимости от размера)
- Необходимо четко различать, что делают вкладки, что может потребоваться создание дополнительных значков
Это стало альтернативой для команд, которые хотели отказаться от гамбургер-меню.Не зря он был принят Facebook, Flipagram, Buffer и многими другими. Меню с вкладками внизу позволяет пользователям сразу видеть основные функции и возможности на главном экране, а также быстро сообщает пользователям, на какой странице они находятся. Прямой доступ здесь является ключевым, поскольку пользователи могут быстро переключаться на различные функции одним щелчком мыши и без необходимости возвращаться на главный экран.
3. Меню с верхними вкладкамиПлюсы:
- Возможность видеть больше основных функций и функций на главном экране
- Может сразу увидеть, на какой странице вы находитесь
- Это говорит о важности и побуждает пользователей к откройте для себя функции
- Позволяет получить прямой доступ
Минусы
- Ограничено только ~ 4–5 пунктами меню (в зависимости от размера)
- Необходимо четко различать, что делают вкладки
- Добраться до кнопок непросто
Подобно меню с вкладками в нижней части экрана, вкладки в верхней части экрана являются хорошей альтернативой.Они позволяют пользователям иметь прямой доступ к различным функциям, а также получать визуальные подсказки о том, где они находятся в приложении. Они также могут быть более интуитивно понятными, поскольку работают аналогично вкладкам в браузере. Однако, поскольку они расположены вверху ⅓ экрана, они не так доступны, как вкладки на нижнем экране. Я еще не видел, чтобы они использовались отдельно, поскольку большинство приложений предпочитают добавлять их в качестве дополнительной навигации в сочетании с другой системой.
4. Перелистывайте страницы
Плюсы
- Очень чистый пользовательский интерфейс
- Хорошо подходит для разделения различных тем и связанных с ними функций в приложении
- Визуально приятный
Минусы
- Пользователи должны неявно знать навигацию
- Пользователи часто сначала будут сбиты с толку, если не будут правильно подключены.
- Не могу сказать, на какой странице вы находитесь.
- . Приходится искать функции. , но может быть решено точками
Многие приложения, такие как Tinder, позволяют пользователям смартфонов проводить пальцем влево и вправо.Вместо того, чтобы использовать ценное пространство экрана для определенных кнопок навигации, они решили использовать пролистывание для доступа к различным функциям приложения (кроме главной страницы, где вы проводите пальцем вправо или влево, чтобы поставить отметку «Нравится» или отклонить совпадение).
Это действительно хорошо работает в приложении Tinder, позволяя пользователям продолжать пользоваться функцией смахивания влево и вправо и помогать разделять группы функций. Tinder также использует панель в верхней части экрана со значками, указывающими, что делает каждая страница, чтобы пользователи не заблудились.
Недостатком этого метода является то, что пользователи имеют последовательный, а не прямой доступ, что замедляет процесс навигации. Это также может мешать работе пользовательского интерфейса главного экрана, например, когда пользователи нажимают на элементы, когда они собираются провести пальцем, или наоборот.
5. Маркированная кнопка менюПлюсы:
- Быстрое и легкое внесение изменений без переделки последовательности операций или меню
- Хотя пользователи могут не понимать значок гамбургера, они наверняка поймут слово «меню».
Минусы:
- Все минусы гамбургер-меню, за исключением того, что в нем повышено распознавание значков
Джеймс Фостер из Exisweb провел несколько очень интересных A / B-тестов, чтобы увидеть, может ли простая настройка значка гамбургерного меню значительно повысить удобство использования и уменьшить путаницу. Он обнаружил, что значки со словом «Меню» значительно увеличивают количество кликов по сравнению с обычным гамбургер-меню на целых 20%.
Если вы не хотите кардинально изменить свое приложение, но хотите повысить удобство использования, это будет хорошей альтернативой.Группа Nielsen Norman также рекомендует маркировать гамбургер-меню для увеличения конверсии.
6. Выдвижные вкладки навигацииПлюсы:
- Позволяет пользователям максимально увеличить площадь экрана.
- Панель навигации легко просматривается, не перемещая руку
- Обеспечивает прямой доступ к различным экранам приложения
Минусы:
- Может мешать ленту или навигации по экрану — если я пытаюсь провести пальцем вправо, я могу случайно нажать лайк или запустить видео, или
- Не позволяет пользователям пролистывать вправо для других функций.
- Придется привлечь пользователей или заставить их открыть для себя это самостоятельно.
У Бенджамина Бергера есть умная идея выдвигать вкладки навигации. Используя управление жестами, пользователи могут просто провести пальцем вправо, чтобы открыть панель навигации. Это позволяет пользователям максимально увеличивать площадь экрана, а также легко просматривать ящик, не требуя от пользователя менять захват. Большим недостатком этого, вероятно, будет вмешательство в пользовательский интерфейс страницы.
7. Комбинация нескольких версийВозможно, лучшим вариантом является включение нескольких элементов пользовательского интерфейса, которые используют как чистоту панели навигации, так и удобство использования других альтернатив.Часто в приложениях по-прежнему есть набор функций, которые иногда нужны пользователям, но недостаточно часто, чтобы их можно было отобразить на рабочем столе. Панель приложений в сочетании с другими элементами навигации дает пользователям лучшее из обоих миров.
Facebook — наиболее часто упоминаемый пример этого. На своих вкладках навигации они включают гамбургер-меню в качестве вкладки для доступа ко всем остальным функциям.
В приложении Vevo есть множество различных категорий, которые можно сортировать по: музыкальным жанрам, _____ спискам лучших и функциональным возможностям.В результате он сочетает в себе плавающее гамбургер-меню, карусельное меню в верхней части приложения и значок стиля гамбургер-меню с пометкой «все жанры», чтобы помочь пользователям сортировать контент.
Какой бы вариант вы ни выбрали, убедитесь, что он подходит для вашего приложения. Навигация в приложении еще более важна для мобильных устройств, где пользователи ожидают скорости и эффективности. Убедитесь, что вы тестируете эти методы как с пользовательским, так и с A / B-тестированием, чтобы убедиться, что любые ваши предположения о новых изменениях дизайна действительно влияют на поведение и восприятие пользователей так, как вы хотите.
Дебаты о значках меню «Гамбургер» — The Atlantic
Большинство мобильных сайтов имеют трехстрочный символ, щелкнув по которому, читатели могут просмотреть дополнительную информацию. Имеет ли смысл этот выбор дизайна?
Инсайдеры называют это «гамбургером»: три составные линии, обычно в верхнем левом или правом углу веб-сайта, которые люди могут щелкнуть, чтобы увидеть меню страниц на сайте. Когда-то эта иконка считалась отраслевым стандартом, но в последнее время привлекает к себе много внимания — и не только положительного.Здесь, в The Atlantic , кажется, что кто-то почти каждый день рассылает по электронной почте статью о плюсах и минусах гамбургеров.
Среди последних фаворитов — исчерпывающее объяснение Луиса Абреу того, почему следует избегать гамбургеров, взгляды Рикардо Билтона на издателей, скрывающих навигацию по сайту, и призыв Джоша Константина убить гамбургер.
У нашей команды непростые отношения с гамбургером. В то время как The Atlantic имеет специальный мобильный сайт, мы находимся на переходном этапе с нашим сайтом для настольных компьютеров.Мы постепенно переделываем страницы и разделы, чтобы они стали адаптивными, включая функции и видео. На этих страницах есть значок гамбургера для навигации, хотя мы добавили слово «меню» для поощрения кликов. В целом, наша команда выступает против разделов сайта, связанных с социальными сетями, поиском и подписками.
Опять же, гамбургер — это не волшебная кнопка, которая заставляет людей нажимать на все, что есть на нашем сайте.
Atlantic Веб-разработчик Карл Джонсон говорит, что дебаты о гамбургерах — это действительно более широкая дискуссия о целях.«Гамбургер может сбить с толку команды дизайнеров, позволяя им избежать трудного выбора приоритетов», — сказал он. «Что важнее: отображение навигации по каналам или мета-страниц? Что ж, давайте просто запихнем их все в гамбургер-меню, потому что все они имеют высший приоритет!»
Другие сайты предпочли выделить свои приоритеты в вечно ценной области навигационной панели, которая появляется в верхней части большинства мобильных приложений. « Time имеет кнопку« Подписаться », — отметил веб-разработчик Atlantic Джейсон Голдштейн.NPR помещает раскрывающийся список ‘обновления новостей’ на своей панели навигации, что действительно приятно. Если вы используете почтовое приложение, основным действием является отправка электронного письма. Если вы новостной сайт, основное действие находит что-то новое для чтения «.
Честно говоря, когда это ваш собственный веб-сайт, только вы заботитесь о том, что скрыто в вашем меню. Независимо от того, украшен ли ваш гамбургер категориями, разделами, тегами или солеными огурцами, читатели, вероятно, находят истории не через панель навигации.
«Я согласен с тем, что скрытие меню делает контент менее доступным для обнаружения», — сказал технический руководитель Atlantic Джош Уэст.«Для такого веб-сайта, как наш, я думаю, что ссылки на статьи по теме или на самые популярные статьи более эффективны для увеличения глубины, чем все, что мы делаем с меню».
Значит, действительно проблема в значке гамбургера, или это указывает на более широкую проблему с традиционной навигацией? Возможно, мы проецируем все проблемы с трафиком на один маленький рисунок.
«Большинство отрицательных аргументов против гамбургера сосредоточено на его неиспользовании и / или непонимании пользователями при тестировании», — сказал Ким Лау, вице-президент Atlantic Digital.«Я бы сказал, что использование навигации всегда довольно мало, и что обычно, когда вы помещаете вещи на второй экран, вы неявно указываете, что информация, стоящая за ним, вторична по отношению к основной цели страницы. характер, использование меню невелико, или должно быть. »
По мере того, как сайты уделяют больше внимания мобильным устройствам, идеи, лежащие в основе традиционной настольной навигации, неизбежно должны измениться. Бетси Эберсол (Betsy Ebersole), старший директор по продукции The Atlantic , выступила за то, чтобы в ходе этого процесса провести небольшую самооценку.«Критика гамбургера — это больше критика чрезмерно сложной информационной архитектуры. Сайтам необходимо внимательно взглянуть на свою информационную систему, особенно когда зрители переходят на меньшие экраны».
Одним из решений может быть знакомство с людьми там, где они уже есть: чтение статей. Это может потребовать, например, переосмысления размещения ссылок и наиболее популярных блоков. Но в целом дизайнеры должны проявлять больше творчества, направляя читателей к интересным статьям, не прерывая поток того, что они уже читают.Это становится еще более трудным, поскольку экраны сжимаются и все больше людей читают на своих телефонах.
Но это не значит, что гамбургер мертв — или должен быть. По крайней мере, мы могли бы последовать совету Джоша по улучшению иконки: «Чизбургерное меню. Потому что с сыром все лучше».
Что такое гамбургер-меню? 5 примеров веб-сайтов
Иллюстрация Avirup Basu
При просмотре веб-сайтов вы, вероятно, заметили значок с тройной полосой, расположенный в верхнем левом или правом углу веб-страницы.Этот значок известен как значок гамбургера и используется для хранения параметров навигации. Несмотря на относительную простоту (создание гамбургер-меню в инструментах прототипирования занимает всего несколько минут), это один из самых противоречивых элементов дизайна. Некоторым дизайнерам это нравится, другим не нравится.
В этой статье мы рассмотрим концепцию гамбургер-меню, ее плюсы и минусы, а также поделимся отличной коллекцией веб-сайтов, которые используют гамбургер-меню.
Что такое гамбургер-меню?
Гамбургер-меню — это значок, используемый на веб-сайте и в приложениях, который при нажатии или касании открывает боковое меню или панель навигации.Его называют «гамбургер-меню», потому что оно представляет собой знаменитый бутерброд. Этот значок был создан дизайнером Нормом Коксом для графического пользовательского интерфейса рабочей станции Xerox Star в 1981 году. Целью Кокса было создать значок, который сообщал бы пользователям, что за ним скрыт список элементов.
Норм Кокс обсуждает концепцию гамбургер-меню в своем интервью 2014 года. Видео предоставлено Vimeo.
После Xerox Star гамбургер-меню стало непопулярным шаблоном навигации и оставалось таким в течение почти трех десятилетий.Но ситуация изменилась в 2009 году, когда смартфоны начали набирать обороты. Экранное пространство было ценным товаром на мобильных устройствах, и дизайнерам нужно было размещать множество информации на портативных экранах. Гамбургер-меню казалось хорошим решением этой проблемы, и значок начал появляться во многих популярных мобильных приложениях, таких как Facebook.
Вскоре после этого он начал распространяться в Интернете, и многие веб-сайты и мобильные приложения переняли этот шаблон. Сегодня многие популярные наборы пользовательского интерфейса (UI), которые служат справочником для создателей продуктов, имеют гамбургер-меню.
Facebook была одной из первых компаний, которая представила гамбургер-меню в своем мобильном приложении. Изображение предоставлено TheNextWebПлюсы и минусы дизайна гамбургерного меню
Когда дело доходит до пользовательского опыта (UX), гамбургерное меню — очень спорная концепция, поскольку у нее есть свои уникальные преимущества и недостатки. Прежде чем принимать решение об использовании этого шаблона, важно рассмотреть и то, и другое. Начнем с преимуществ гамбургер-меню:
- Он оптимизирует макет экрана. Беспорядок — злейший враг хорошего юзабилити.Дизайнеры знают, что внимание пользователя — ценный ресурс, и его важно не отвлекать. Гамбургер-меню — это механизм экономии места, поскольку все параметры навигации становятся видимыми только после щелчка или касания. Сдвигая опцию навигации с экрана, вы сосредотачиваете внимание пользователя на содержании.
- Это хорошо известно. Человеческий мозг декодирует визуальные эффекты быстрее, чем слова, и самое замечательное в значке с тремя полосами заключается в том, что это один из общепринятых значков.Хотя многие пользователи могут не знать, что это называется «гамбургер-меню», они могут легко понять, что оно делает.
Теперь поговорим о недостатках гамбургер-меню:
- Его не так легко обнаружить. Как гласит старая пословица: «То, что не видно, не имеет значения». Меню гамбургеров скрывают параметры навигации, и чтобы их увидеть, пользователи должны сначала щелкнуть или коснуться значка. Но когда пользователи вообще не видят свои варианты навигации, они с меньшей вероятностью будут ими пользоваться.
- Невозможно сканировать. В состоянии по умолчанию параметры навигации в гамбургер-меню остаются скрытыми. Это мешает пользователям понять, какие инструменты навигации доступны, когда они впервые попадают на страницу.
- Требуются дополнительные усилия пользователя. Для перехода на другую страницу пользователю требуется не менее двух щелчков мышью или касания. Пользователи должны сначала щелкнуть значок гамбургера, чтобы увидеть варианты, затем им нужно найти вариант, который они ищут, и щелкнуть по нему.
Должен ли значок меню гамбургера располагаться на левой или правой стороне экрана?
Хотя не существует единственного правильного или неправильного ответа, важно поделиться некоторыми общими рекомендациями для дизайнеров, рассматривающих гамбургер-меню. Если вы работаете над дизайном веб-сайта, рекомендуется размещать значки гамбургеров в верхнем левом углу страницы. В западном мире пользователи начинают сканировать страницу слева направо, и первое, что они замечают, будет гамбургер-меню.
Если вы разрабатываете приложение для Android, вы должны следовать рекомендациям по материальному дизайну.Для языков с письмом слева направо гамбургер-меню следует размещать в верхнем левом углу экрана. Это означает, что панель навигации или боковое меню также будет открываться с левой стороны экрана.
Какой идеальный дизайн для мобильного гамбургер-меню?
Гамбургер-меню — популярный шаблон навигации во многих мобильных приложениях и на веб-сайтах. Поскольку мобильные экраны имеют относительно небольшую площадь, полезно использовать этот шаблон, чтобы оставить больше места для контента. В то же время, значки гамбургеров могут быть труднодоступными для пользователей на мобильных устройствах.Поскольку мобильные экраны становятся больше, пользователям становится все труднее дотянуться до значка гамбургера, расположенного в верхнем углу экрана.
Если вы решили использовать гамбургер-меню для своего мобильного веб-сайта или приложения, эти простые правила помогут вам создать идеальный дизайн мобильного гамбургер-меню:
- Назначьте приоритеты направлениям и иерархии навигации. Используйте гамбургер-меню, если у вашего продукта более пяти мест назначения верхнего уровня или два или более уровней иерархии навигации.Если у вас есть пять или меньше одинаково важных параметров навигации, предпочтительнее использовать видимую навигацию (например, панель вкладок).
- Поместите параметры навигации в один столбец. Упорядочивайте пункты назначения в соответствии с важностью пользователя, то есть более важные параметры должны идти вверх, а менее важные параметры — вниз. Отображая эти параметры навигации в вертикальном списке, вы упрощаете пользователям их сканирование.
- Никогда не смешивайте шаблоны навигации для основной навигации. Не следует смешивать гамбургер-меню с другими шаблонами навигации, такими как панели вкладок, поскольку это запутает ваших пользователей. Для каждого приложения или веб-сайта должен быть только один основной шаблон навигации.
- Попробуйте использовать гамбургер-меню для дополнительных опций. Гамбургер-меню отлично подходят для хранения дополнительных параметров навигации или параметров, которые напрямую не служат вашим основным целям навигации.
Какие хорошие примеры веб-сайтов с гамбургер-меню?
Теперь, когда вы знаете, что это за хорошо известный шаблон навигации, пора рассказать о некоторых популярных веб-сайтах с гамбургер-меню:
1. Карты Google
Карты Google — это веб-сайт, ориентированный на содержание. Он предлагает пользователю именно то, что он от него ожидает. Основная область экрана предназначена для карты с несколькими основными элементами управления пользовательского интерфейса (UI), включая инструменты увеличения и уменьшения масштаба. Все вторичные кнопки навигации скрыты в гамбургер-меню.
Google Maps использует гамбургер-меню для менее важных вещей, таких как различные типы представлений и контекстных операций (например, печать, совместное использование и т. Д.). Изображение предоставлено Google.2. Adidas
Дизайн веб-сайта Adidas размещает гамбургер-меню в верхнем левом углу страницы. Adidas следует этому примеру с шаблоном Priority +, поскольку гамбургер-меню становится видимым только тогда, когда область просмотра пользователя становится относительно маленькой.
Adidas использует гамбургер-меню для основных параметров навигации, но этот значок становится видимым только в небольших окнах просмотра.Изображение предоставлено Adidas.3. Awwwards
Awwwards — это коллекция творческих и инновационных веб-сайтов. Дизайн этого веб-сайта выдержан в минималистичном подходе. Пытаясь сосредоточить внимание пользователя на содержании, они удаляют весь лишний шум. Неудивительно, что для достижения этой цели они решили использовать гамбургер-меню. Одна из замечательных особенностей Awwwards заключается в том, что они дополняют значок меню надписью «Меню». Таким образом они сводят к минимуму вероятность того, что пользователи не заметят значок гамбургер-меню.
Awwwards придерживается минимализма и использует гамбургер-меню для основных параметров навигации. Изображение предоставлено Awwwards.4. Bootstrap
Bootstrap — это самый популярный в мире набор интерфейсных инструментов с открытым исходным кодом. Он позволяет веб-дизайнерам быстро создавать адаптивные макеты. Точки останова — это строительные блоки адаптивного дизайна. Дизайнеры используют их для управления тем, как их макеты могут быть адаптированы для определенных видовых экранов. Bootstrap использует гамбургер-меню для небольших точек останова (т.е. менее 576 пикселей).
Bootstrap использует гамбургер-меню для небольших точек останова. Изображение предоставлено Bootstrap.5. Evernote
Evernote — это продукт, предназначенный для создания заметок и организации различной информации. Дизайн главной страницы веб-сайта Evernote представляет собой гамбургер-меню в правом верхнем углу страницы. Обратите внимание, сколько пробелов есть в каждом блоке контента, в том числе между названием и значком Evernote, заголовком страницы и кнопкой с призывом к действию.
Evernote использует значок гамбургера, чтобы сделать пользовательский интерфейс менее загруженным.Изображение предоставлено Evernote.Узнайте, подходит ли гамбургер-меню для вашего веб-сайта или приложения.
Когда вы думаете о том, подходит ли гамбургер-меню для вашего веб-сайта, важно подумать, как оно будет работать для ваших пользователей. Упростит ли навигацию гамбургер-меню? В случае сомнений вы всегда можете протестировать свой дизайн на реальных пользователях. Запустите A / B-тестирование с двумя примерами дизайна, в том числе с гамбургер-меню и с видимой навигацией, такой как панель навигации верхнего уровня.Измерьте время выполнения задачи и посмотрите, какие варианты лучше всего подходят вашим пользователям.
Классные значки меню гамбургеров на CSS и их анимация
Дизайнеры веб-сайтов всегда хотят модернизировать, минимизировать и делать свои веб-сайты более привлекательными. Одним из элементов дизайна, который вошел в большинство макетов веб-сайтов, является гамбургер-меню CSS.
Гамбургер-меню — это значок, состоящий из трех горизонтальных линий , расположенных одна над другой. Оно называется гамбургер-меню, потому что выглядит как две булочки с мясным котлетом посередине.
Когда пользователь щелкает значок гамбургера, появляется меню. Иногда меню представляет собой всплывающее окно, иногда меню открывается слайдом, а иногда заполняет весь экран.
Значки меню «Гамбургер» — отличная концепция дизайна, которая экономит место .
Это очень распространенный элемент для разработки мобильного сайта . Это потому, что оно предоставляет полезную и необходимую функцию меню, но не занимает много места на экране мобильного телефона.
Это также отличный элемент дизайна для современных веб-сайтов и веб-сайтов с минималистичным дизайном.Хотя это всего три строки, дизайнеры могут добавлять различные анимации и создавать различные варианты .
Если вы хотите внедрить на своем веб-сайте гамбургер-меню CSS, обратите внимание на следующие варианты. Они предлагают уникальные гамбургер-меню, которые обязательно понравятся посетителям.
Автор: Filippo
В этом значке меню в виде гамбургера используются HTML, CSS и JavaScript. Он имеет анимированный эффект, чтобы повернул три строки в X и обратно в три строки.
Анимация, созданная с использованием velocity.js, гладкая и чистая.
Кнопка # 3
Автор: Amli
Амли также создал кнопку меню HTML, CSS и JavaScript. У него две строки вместо трех, которые исчезают и появляется X.
Автор: Тамино Мартиниус
Кодовое перо здесь предлагает четыре различных анимации гамбургер-меню.
Два превращают кнопку в крестик. Два других превращают их в стрелки.
Открыть Закрыть
Автор: Vineeth.TR
Этот автор предоставляет два анимированных варианта гамбургер-меню на чистом CSS.
Гамбургер Икона
Автор: Пранджал Саксена
Это перо с кодом предлагает отзывчивый значок гамбургера и меню с анимированным отскоком .
Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода
WoW ваших клиентов, создавая инновационные и стимулирующие веб-сайты
быстро, без опыта программирования.Slider Revolution позволяет
привлечь к вам клиентов за модным дизайном веб-сайтов.
Автор: rosalieelphick
Вот четыре меню на чистом HTML и CSS, которые крутятся, крутятся и переключаются.
Бургеры Flippin ’
Автор: Микаэль Айналем
Эти варианты меню для гамбургеров выглядят так, будто кто-то переворачивает бургеры на гриле .
Автор: Джесси Коуч
Jesse Couch предлагает четыре значка гамбургер-меню с этим кодовым пером.
Автор: Youri Pailloux
Это гамбургер-меню превращается в в меню строки заголовка. Он имеет цвет фона наполовину белый и наполовину синий.
Автор: Джек Томсон
Jack Thomson придает этой кнопочке гамбургера немного особого изящества. Он прыгает в воздух и попадает в положение X.
CSS Challenge — День 2
Автор: Елица Димитрова
При использовании JS, HTML и CSS эта кнопка имеет забавную анимацию и приятный цвет фона.
Автор: Рис Мэтью П
Вот простая кнопка меню гамбургера. Он использует псевдоэлемент: after, который создает эффект выделения .
Автор: Джошуа Уорд
Это идеально подходит для тех, кто ищет простой и достойный значок кнопки гамбургера.
Автор: Зои Гилленуотер
Это кодовое перо предлагает кнопку с изображением гамбургера и меню. Он использует flexbox для изменения размера содержимого , чтобы поле меню не мешало просмотру страницы содержимого.
Гамбургер анимация
Автор: Аарон Икер
Аарон Икер по-новому взглянул на кнопку меню гамбургера. Трехстрочный значок вращается, образуя круг, содержащий X.
Автор: Джош Фабин
Вот еще один простой вариант значка меню гамбургера.
Автор: Брендан Палмер
Это значок вращающегося гамбургер-меню на чистом CSS с меню, заполняющим всю страницу.
Автор: Himalaya Singh
Когда пользователи взаимодействуют с этой кнопкой, слово «меню» происходит от традиционного значка гамбургера.
Автор: Мэтью Блод
Эта ручка с кодом включает в себя тринадцать гамбургерных меню, и все они отличаются друг от друга.
Автор: Лейф Риксхайм
Это перо с чистым кодом CSS помещает значок меню гамбургера в правый верхний угол с боковой панелью скользящего меню .
Автор: Yacine
Вот гамбургер-меню с мини-анимацией. Это код HTML и CSS, но его можно использовать с JavaScript.
Кнопка меню и анимация преобразования горизонтального многоточия
Автор: Himalaya Singh
Это кодовое перо превращает три строки значка меню гамбургера в три точки .
Автор: Каталин Рошу
Catalin Rosu представляет собой гибкое раскрывающееся меню с этой кодовой ручкой.
Автор: Лукас Беббер
Это перо с кодом отображает круглый значок меню гамбургера. Одним щелчком мыши он расширяется в , несколько кружков с параметрами меню.
Гамбургерное меню — CSS и jQuery
Автор: rv7
Представленная здесь кнопка гамбургера включает всплывающее меню. Он находится в левом верхнем углу веб-сайта.
Звездные войны Toggle Icon Animation
Автор: Риза Сельчук Сайдам
Вот кнопка для гамбургера в стиле «Звездных войн», состоящая из световых мечей .
Автор: jun xu
Это традиционная кнопка меню гамбургера с обводкой круга и ярко-красным крестиком. Она использует HTML, CSS и JavaScript, чтобы она работала плавно.
Гамбургер Анимированные Иконки
Автор: Стивен Фабр
Вот еще один простой значок меню гамбургера с анимацией, которая переключает его с трехстрочного на X.
Автор: Грэм Уилсдон
Значок гамбургера Frosty nav, представленный здесь, был специально создан для мобильных устройств. Когда пользователи нажимают на значок, меню замораживает над страницей.
Анимация гамбургера и тройной цвет фона с использованием CSS
Автор: Himalaya Singh
Когда пользователи нажимают на эту кнопку гамбургера, она превращается в X. Это также меняет цвет фона всего интерфейса.
Автор: Тамино Мартиниус
Эта анимированная кнопка гамбургера с использованием HTML, CSS и JS довольно забавна.
Автор: Evren
В то время как другие стили кнопок гамбургера имеют анимацию только при нажатии, у этого она есть при наведении на .
Нарисованный переход гамбургера
Автор: Джесси Коуч
Это гамбургер-меню с медленным и плавным переходом и элегантными цветами лучше всего подходит для стильных веб-сайтов.
Автор: Елена Йованович
Вот значок гамбургер-меню на чистом CSS с левым скользящим меню вне холста. Такой дизайн позволяет разработчикам добавлять содержимое подменю.
Автор: Арьян Джассал
Традиционный трехстрочный значок меню «купается» на белом фоне. Дизайн отображает его в правом нижнем углу заголовка веб-сайта.
Гамбургер
Автор: Микаэль Айналем
Без JavaScript, это вращающаяся кнопка гамбургер-меню на чистом HTML и CSS.
Автор: Алекс Ковен
У этой кнопки атомарного гамбургера есть две анимации.
При наведении три линии превращаются в атомную частицу . Если пользователь нажимает и удерживает, он превращается в X.
Автор: Ахмед Хамед
В правом углу находится значок меню гамбургера. Когда пользователь нажимает на нее, цвет фона страницы становится черным.
Автор: Bilal.Rizwaan
Эта кнопка-гамбургер использует CSS для преобразования трех строк в X при наведении курсора.
гамбургер (версия 1)
Автор: Тамино Мартинус
Это еще одна кнопка гамбургера, которая превращается в X при наведении курсора.
Автор: Майкл Леонард
Это выглядит просто, но в этом дизайне используется много слоев анимации и переходов. Он использует HTML, CSS и JavaScript для бесперебойной работы.
Значок меню гамбургера отображается в левом углу экрана. При наведении курсора появляется меню.
Полноэкранная навигация
Автор: Маркус Бизал
Используя эффекты наложения , эта кнопка-гамбургер превращает весь интерфейс в красочное меню.
Автор: Чарльз
Это последняя кнопка меню гамбургера. Вместо использования линий, имитирующих гамбургер, это настоящее изображение гамбургера .
При нажатии превращается в картофель фри.
Автор: Микаэль Айналем
Это простая кнопка-гамбургер с чистым CSS.
Автор: Imgonzalves
Вот классическая кнопка меню гамбургера, которая отлично смотрится на мобильных устройствах .Он имеет плавные переходы, мягкие цветовые тона и значки SVG.
При нажатии кнопка превращается в кнопку выхода, так как она также открывает меню.
CSS анимированный значок гамбургера
Автор: Elijah Manor
Elijah Manor представляет собой простую и классическую черно-белую кнопку меню гамбургера. Он использует HTML, CSS и JavaScript.
Автор: Серджио Андраде
Это перо с кодом содержит значок меню гамбургера в правом верхнем углу экрана.Когда пользователь нажимает на нее, она превращается в пузырьковое меню .
Автор: Сил ван Дипен
Вот четыре кнопки меню на чистом CSS с разной анимацией.
CSS анимированный значок гамбургера
Автор: Брайан
Для небольшого поворота к классической иконке гамбургера. На нем изображен настоящий гамбургер, составленный из ингредиентов.
Автор: Майкл Смарт
Если вы согласны с Майклом Смартом и не думаете, что три линии точно представляют гамбургер, используйте вместо этого эту кнопку меню.
Автор: Vikram
При использовании анимации CSS и SVG эти кнопки меню по-разному реагируют на взаимодействие.
Анимация значков гамбургеров
Автор: Rosa
Если вы еще не видели достаточно разнообразия, ознакомьтесь с этими двенадцатью CSS-анимациями гамбургер-меню.
Если вам понравилось читать эту статью о гамбургер-меню CSS, вам следует ознакомиться с этой статьей о CSS и формах входа для регистрации.
Мы также писали о нескольких связанных предметах, таких как карточки CSS, текстовая анимация CSS, меню HTML и CSS, вкладки HTML и CSS, примеры флажков CSS, конструкции полей поиска CSS, шаблоны форм входа в систему Bootstrap, эффекты наведения курсора CSS и формы HTML и CSS.
Что такое значок меню гамбургера? Полное руководство, примеры, плюсы и минусы
Альтернативы гамбургер-меню
И снова гамбургер-меню — не оптимальное решение, и иногда его лучше избегать. Если функции, доступные для немедленного просмотра, имеют больший приоритет, чем площадь экрана, или у вас недостаточно функций, чтобы спрятаться за кнопкой гамбургера, не используйте ее. Если кнопка будет мешать встроенной навигации или вы не уверены, что пользователи легко понимают значок, выберите другое решение.К счастью, есть много альтернатив на выбор:
Гамбургер-меню может быть более узнаваемым и прозрачным, если на нем есть слово «Меню». Он стирает путаницу с тем, что находится за кнопкой, что значительно увеличивает количество нажатий по сравнению с обычной трехстрочной кнопкой. Это хорошая альтернатива, если вы не хотите значительных изменений, но хотите увеличить количество конверсий.
Этот тип навигации был принят такими гигантами индустрии, как Facebook, Buffer и Flipagram, и по уважительным причинам.Во-первых, нижняя навигация позволяет пользователям сразу видеть основные функции и возможности на главном экране. Кроме того, он сообщает пользователям, какую страницу они просматривают. И, наконец, он обеспечивает прямой доступ ко всем функциям, позволяя пользователям быстро переключаться между страницами одним щелчком мыши, не возвращаясь на главный экран.
Плавающее гамбургер-меню мгновенно выделяется и действует как легко доступная и узнаваемая панель навигации. Это позволяет пользователям открывать меню, когда они находятся на странице.Его видное расположение означает важность и побуждает пользователей к его использованию. Хотя плавающее гамбургер-меню экономит место на экране, оно может скрывать контент при использовании на мобильных устройствах, не реагируя на это.
Если вы используете как мобильную, так и настольную версии веб-сайта, отзывчивое меню навигации является ценным активом. Вкратце, это меню, которое реагирует в зависимости от размера экрана зрителя, позволяя пользователям пользоваться платформой независимо от устройства.
Тем не менее, есть некоторые подводные камни, которые следует учитывать. Если на рабочем столе меньше четырех навигационных ссылок, не прячьте их за гамбургером на мобильном телефоне. Ссылки немногочисленны, поэтому вы можете легко отобразить их на экране. Это устранит путаницу среди пользователей и устранит любые значительные расхождения между версиями, сигнализируя о том, что они попали в нужное место.
Еще одна достойная альтернатива — параллакс-скроллинг. Это создает плавный и деликатный пользовательский интерфейс, делая навигацию по платформе простой и интуитивно понятной.
