Альтернатива гамбургер-меню
Вы наверняка уже устали читать статьи и постоянно слушать разные дискуссии о трех коротких линиях гамбургер-меню. Это плохой прием в дизайне интерфейсов? Или неплохой? Этот пост не такой – он не будет судить, хорошее или плохое это меню. Суть в том, что я считаю его не самым лучшим дизайн-решением, так или иначе. Но и у гамбургер-меню есть свои сильные стороны, особенно при использовании в мобильном дизайне, в условиях ограниченного пространства. Так что мы можем сделать? Просто принять гамбургер-меню таким, какое оно есть, несмотря на все недостатки, и жить дальше? Много сайтов и приложений, кажется, смирились с этим. А я считаю, что способен на лучшее.
Перед тем, как мы углубимся, я хочу поделиться, что меня вдохновило на такое мнение. Несколько месяцев назад я не имел ничего против гамбургер-меню. Я даже считал его неким прогрессом в интерфейсе мобильной навигации. Это вполне могло бы стать стандартом. Гамбургер-меню реализовано в массе передовых сайтов и приложений, и если оно достаточно хорошо для этих продуктов, оно достаточно хорошо и для меня.
А затем случились две вещи, которые заставили меня передумать. Во-первых, я наткнулся на отличную статью. Это статья, которая действительно помогает понять последствия использования гамбургер-меню. В частности, сайты с таким меню терпят серьезное уменьшение вовлеченности пользователей. Обзор такой статистики как раз и начал менять мое мнение.
Следующий инцидент случился, когда я наблюдал за коллегой, пытающимся использовать новое веб-приложение, в котором как раз было такое меню. Это был разработчик, который очень хорошо знаком с интерфейсом гамбургер-меню, но когда дело дошло до использования приложения для своих нужд, он громко вслух спросил: “Как мне туда попасть?”. Учтите, это один из умнейших людей, которых я знаю, и он даже не подумал о том, чтобы коснуться значка гамбургер-меню. Если у кого-то настолько умного возникают проблемы с навигацией, что это говорит о типичном пользователе? Мое мнение окончательно приобрело твердое обоснование.
Поиск решения
Все, хватит о причинах моего неверия в силу гамбургер-меню – настало время поговорить о решении. Для начала я изучил особые преимущества использования гамбургер-меню:
- Масштабируемость: это, наверное, главный плюс и главная причина, почему так много сайтов и приложений выбирают его. Вы можете поместить очень много элементов навигации за маленькой иконкой.
И если уж создавать альтернативу гамбургер-меню, она должна как-то решать связанные с ним проблемы:
- Понятность: должна быть возможность легко находить элементы навигации, особенно теми, кто использует продукт впервые.
- Вовлеченность: интерфейс должен давать подсказки и фидбек, поясняющие, что пользователь может делать с продуктом, и когда уместно использовать те или иные возможности.
Сложная часть: мобильная
Я решил начать с самой сложной проблемы и проверить, подойдет ли мое решение для мобильных дизайнов. После обдумывания массы идей я пришел к выводу, что меню панели вкладок iOS является одним из лучших решений для мобильных интерфейсов. Масса людей пытались сделать панель вкладок прокручиваемой (чтобы вмещалось более пяти опций) или добавить “more” в навигацию – что-то вроде Плюшкина, у которого есть дополнительная комната, которая быстро заполнится хламом. Также, обе эти опции все еще не выполняют главного требования – понятность, видимость всех возможностей отсутствует. Так что же можно сотворить с меню вкладок, чтобы это исправить?
Мое решение заключается в комбинации гамбургера и панели вкладок в единый подход. В результате получается панель вкладок, которая открывает набор опций для каждого элемента меню.
Я создал тестовое приложение по оценке продуктивности команды, чтобы проиллюстрировать свой подход в деле. Используя этот способ, пользователь может четко видеть основные функции и способы использования продукта. И вместо засыпания полным списком элементов меню, скрытого за иконкой гамбургера, пользователю показывается несколько опций, которые относятся ко вкладке, на которую он кликнул. Так навигацию проще понять и переварить, все нужное всегда под рукой, позволяет пользователю видеть иерархию приложения.
Еще один плюс такого дизайна – возможность использовать контекстные уведомления. В случае с гамбургер-меню у вас есть всего одно место для показа таких уведомлений. Если придерживаться макета с панелью вкладок, вы можете выдавать подсказки для пользователя в любом из выбранных пунктов меню.
Конечно, самая большая победа такого подхода – Масштабируемость. Да, вы по-прежнему ограничены пятью категориями, но это и хорошо. Честно, думаю, что любой сайт может вместить свои опции в пять категорий, если дизайнер с умом продумает навигацию. Ведь в каждой из этих категорий может быть еще по пять или шесть подпунктов.
Итого получается 30 возможных опций навигации без ощущения перегруза для пользователя и без оккупации всего пространства экрана.
Применение к планшетам
Интеграция такой панели вкладок в планшеты, как она есть, выглядела странной. Планшеты гораздо шире, и использование того же UI, что и для мобильных устройств, выглядело также нелепо, как подросток в одежде, из которой он давно вырос. Так что я пошел другим путем. Вместо размещения панели вкладок внизу, я разместил ее сбоку. Так оказалось удобнее в плане использования пространства экрана и выглядело очень естественно. Вдобавок многие пользователи держат планшет за бок, так что это как раз целевая область для касания пальцами.
А как на счет десктопа?
Приготовьтесь… выдвижное меню. Все верно – примерьте этот подход к десктопному интерфейсу и вы столкнетесь с неоспоримой реальностью: этот вариант совсем не нов. Выдвижное меню использовалось годами, и практически любой пользователь (даже ваша мама) знает, как оно работает. В этом и есть прелесть такого подхода – ничего нового.
Полное раскрытие
Я не знаю, как назвать эту штуку. Вкладочный выдвижник? Или TABurger (TAB “вкладка” + бургер)? Более того, я не знаю, создавал ли кто-либо подобное решение раньше. Учитывая простоту такого меню, я не могу допустить мысль, что я был первым. Знаю, что несколько приложений используют выдвижные меню на некоторых кнопках вкладок (например, Tweetbot), но обычно они реализованы как быстрый доступ к функциям для продвинутых пользователей, а не с целью наращивания иерархии навигации. Если у вас есть такой пример, дайте знать в комментариях.
ОБНОВЛЕНИЯ
Коллин Эбергардт отметил в ТВиттере, что такой же UI реализован в Windows Phone. Я сам пользователь Windows Phone, и он прав. Хотя такой тип взаимодействий используется в Windows Phone только для опции “more” в панели вкладок.
Джеймс Перих привел еще один пример в Твиттере. Посмотрите на AHTabBarController, созданный Артуром Хеммером.
Почему стоит навсегда отказаться от гамбургер-меню?
Изначально гамбургер-меню использовалось в качества средства, позволяющего скрыть второстепенные элементы навигации и сохранить дизайн сайта или приложения более чистым и сфокусированным.
Одним из первых адептов данного дизайнерского решения стала компания Google, которая не только реализовала его в операционной системе Android, но и посчитала настолько важным, что подыскала гамбургерному меню место даже в знаменитом руководстве по материальному дизайну. С тех пор этот элемент стал незаменимым компонентом большинства мобильных приложений как на Android, так и на iOS. Более того — гамбургерное меню широко используется и в десктопных версиях сайтов.
К сожалению, далеко не всегда дизайнерам удается с успехом интегрировать этот элемент. Некоторые используют его по прямому назначению, то есть для того, чтобы не допустить переполнения меню навигации; другие останавливают свой выбор на гамбургер-меню исключительно из эстетических соображений — его привлекательного внешнего вида, нередко даже в ущерб пользовательскому опыту. Как итог: данный элемент стал незаменимым компонентом современных приложений и веб-страниц.
И раз уж речь зашла о десктопных приложениях, гамбургер-меню здесь в принципе неуместно. Уже довольно редко можно было встретить дизайн, страдающий от недостатка свободного пространства, где было бы невозможно разместить все необходимые пункты меню навигации. Изначально Google стремилась при помощи этого элемента обеспечить согласованность между своими продуктами и между настольными и мобильными устройствами. На деле же эта практика оказалась бесполезной, причиняющей дополнительные неудобства пользователям, особенно если в дизайне, помимо гамбургер-меню, присутствовали основные элементы навигации.
Та же логика применима и к традиционным веб-сайтам, таким как сайт-портфолио, посадочные страницы и корпоративные сайты. В десктопных сайтах совершенно нет смысла в том, чтобы скрывать главные или второстепенные элементы навигации. На этапе проектирования дизайна у разработчиков в распоряжении имеется довольно много пространства, с которым они могут вдоволь поэкспериментировать (речь идет не только о настольных ПК, но и ноутбуках и планшетных компьютерах). Даже самые сложные и громоздкие меню навигации можно показать полностью. При этом дизайнеры не скованы набором принципов, аналогичных тем, которые необходимо учитывать при разработке дизайна мобильных приложений, и могут проявить креативность в размещении и отображении таких удобных решений, как раскрывающиеся и многоуровневые меню.
Гамбургер-меню продолжает использоваться дизайнерами, главным образом, из-за эстетических соображений или в силу привычки, между тем этот элемент остается непригодным для многих устройств. Он затрудняет переключение между страницами и совершенно сбивает с толку даже самых опытных юзеров.
По мере уменьшения размера диагонали наличие гамбургер-меню становится более оправданным. Он обеспечивает быстрое и простое решение проблемы отсутствия экранного пространства, будь это мобильное приложение на Android или мобильная версия сайта. iOS по существу предлагает то же самое решение, но при помощи иконки «More». Этот элемент располагается в нижней части экрана, в пределах досягаемости большого пальца руки, поэтому он более удобен.
Сегодня, когда дизайнеры разрабатывают и ищут альтернативы самым ключевым компонентам дизайна, действительно ли гамбургер-меню все еще остается оптимальным решением?
С точки зрения пользовательского опыта этот элемент неудобен из-за необходимости открывать его каждый раз, когда вам понадобится доступ к меню, размещенному внутри. Каждый раз, когда пользователь захочет перейти на другой экран, ему придется совершить по два тапа. Разумеется, совершенно резонно разместить в гамбургер-меню те элементы, которые можно классифицировать как второстепенные, менее важные, к которым обращаются гораздо реже. Но бывает, что даже в гамбургер-меню приложений от Google оказываются сосредоточены элементы, отвечающие за основные действия в системе. От напоминаний в Google Keep до «Посмотреть позже» на Youtube гамбургер-меню часто преграждает путь к ключевым пунктам навигации. Как компонент дизайна, это компромисс. Если бы для каждого приложения разрабатывалась своя навигационная структура, основанная на особенностях продукта, потребностях пользователей и макете, было бы предложено более оптимальное решение. Но в таких экосистемах, как iOS или Android, согласованность и постоянство очень важны для предоставления разработчикам простых и понятных решений и для обеспечения пользователей возможностью быстро разобраться с функционалом любого приложения, независимо от того, кем оно было разработано.
Если гамбургерное меню исчезнет, появится новое, гораздо более удобное и совершенное решение, которое можно будет интегрировать в любое приложение экосистемы с возможностью оптимизировать его под самые разнообразные задачи.
Первое такое потенциальное решение — выровнять заголовок приложения по левому краю, освободив пространство для размещения как минимум четырех элементов управления. Большинство разработчиков прибегают к помощи гамбургер-меню, когда им не удается найти место на экране для 2-4 элементов, так что данный подход избавит их от необходимости использовать это далеко не самое удобное для пользователей решение. Для случаев с большим количеством элементов навигации может быть использована иконка «многоточие».
Еще один вариант — осуществить редизайн самой панели навигации. Дело в том, что в своем руководстве по материальному дизайну Google настаивает, чтобы вкладки меню имели текстовые обозначения. Однако никто не запрещает вам использовать вместо текста иконки. Так вы сможете освободить достаточно места, чтобы избавиться от всех второстепенных меню и уменьшить число основных экранов приложения.
Разумеется, куда проще засунуть все элементы в скрытое меню, навредив при этом опыту конечного пользователя, но это не выход. Лучше сгруппировать элементы навигации в более структурированные и понятные вкладки.
Со временем, конечно же, разработчикам удастся придумать более удобные варианты размещения элементов навигации, оставив гамбургер-меню в прошлом. Именно в этот момент мы увидим простые в использовании мобильные продукты с более доступным управлением.
Высоких вам конверсий!
По материалам: webdesignerdepot.com
12-02-2018
Иконка «гамбургер» для навигации меню сайта – хорошо или плохо
Иконка «гамбургер» — конструкция, состоящая из трех горизонтальных черточек. Широко применяется в веб мастерами для обозначения скрытого меню. Наибольшую популярность получила в адаптивном дизайне. Но сегодня этот элемент навигации нередко можно встретить и на десктоп версии сайта.
Вокруг иконки «гамбургер» точится множество противоречивых разговоров. Одни веб мастера говорят о ее недостатка, другие только лишь о ее достоинствах. Сегодня я хотел бы поговорить об этом широко распространенном элементе навигации по сайту.
Иконка скрытого меню «гамбургер» имеет некоторые недостатки, если рассматривать с точки зрения юзабилити, а именно:
- Первое и самое главное это – иконка противоречит главному принципу юзабилити (посетитель не должен совершать лишних движений для достижения конечной цели), а иконка «гамбургер» именно это и делает.
- Второй недостаток выходит из первого, иконка «гамбургер» прячет в себе главные категории на сайте, посетитель не имеет возможности сразу увидеть навигацию по сайту, что может сыграть злую шутку с вами, когда человек не найдя нужную ему информацию – просто уйдет.
- Ну и последний недостаток, это то, что иконка «гамбургер» не имеет возможности показа посетителю сайта, где он сейчас находится.
Хочется отметить тот момент, что согласно статистике: молодое поколение пользователей интернета (14-35 лет) понимают, что следует ожидать от символа с тремя горизонтальными полосками, когда старшее поколение очень часто просто не замечают этот элемент навигации, особенно когда иконка «гамбургер» имеет необычный и непривычный вид.
К основному достоинству и собственно популярности иконки «гамбургер» можно отнести то, что она позволяет существенно экономить пространство на экране. Ведь бывают проекты которые загружены большим количеством категорий. И в таком случае «гамбургер» является очень действенным элементом дизайна.
Ну и не стоит забывать, что именно в мобильных версиях сайта. Иконка «гамбургер» является самым удачным элементом навигации ввиду ограниченного пространства. Тенденции использования мобильных устройств говорят о том, что во время создания и проектирования сайта внимание на его простоту использования уделяется именно мобильной версии. И на сегодня тяжело найти удачней элемент, чем скрытое меню «гамбургер».
Какими бывают иконки «гамбургер».
Если вы уже решились использовать навигационную иконку «гамбургер» — не ограничивайте свое воображение только лишь стандартными тремя полосками. Иконку можно и нужно делать стилистической. Изменение иконки «гамбургер» может существенно повлиять на конверсию, пользовательский опыт, как в лучшую сторону так и в худшую – все нужно тестировать (для каждой тематики свои методы).
- Так, например, один владелец сайта, большее число посетителей которого приходилось именно на пользователей мобильных устройств, проводил тестирование с наличием разного вида иконок меню (смотри фото ниже).
Все кнопки «гамбургеры» показали существенный прирост посетителей, увеличили конверсию.
Но самой эффективной оказалась кнопка с надписью (MENU) – эта иконка увеличила продажи на 5% по сравнению с другими кнопками.
- Как пример хочу привести вам эксперимент известной компании Booking.com. они использовали в своей мобильной версии два варианта кнопок «гамбургер», простые три полоски и иконка с надписью (MENU) взятой в рамку.
Результаты тестирования показали, что особых различий, прироста конверсии не наблюдалось. Было принято решение оставить классический вид кнопки в виде трех горизонтальных черточек.
Вывод: кнопки «гамбургер» стоит использовать в мобильных версиях адаптивного дизайна сайта, со временем все большее количество людей будет точно понимать что этот символ означает, кнопки «гамбургер» существенно помогают упростить навигацию по сайту, но не стоит злоупотреблять ими в десктоп версиях.
Правда о гамбургер-меню — Affde Marketing
С появлением современных смартфонов веб-сайты столкнулись с проблемой: все замечательные функции, которые они кропотливо создавали, теперь должны были уместиться на гораздо меньших экранах с сенсорными интерфейсами.
Одна из распространенных стратегий, которая возникла для освобождения места на экране, заключалась в создании небольшого значка меню без надписи, в котором можно было бы скрыть некоторые из более продвинутых функций. Значок, состоящий из трех составных полос, известен как гамбургер-меню.
Гамбургер-меню было в центре бесчисленных жарких споров. Знают ли пользователи, что это значит? И если они его узнают, действительно ли они его используют?
По данным Moovweb, до сих пор есть пользователи, которые понятия не имеют, что такое гамбургер-меню. Просто обозначив его словом «меню», можно увеличить количество взаимодействий на 61% . Тем не менее, в сети сайтов Moovweb гамбургер-меню нажимают в 20% случаев, и это одно из самых популярных мобильных взаимодействий, которые мы измеряем.
Оказывается, кнопка гамбургера популярна среди многих пользователей и сбивает с толку многих других.
Рождение иконы
Гамбургер-меню, также известное как боковой ящик или боковое меню, имеет богатую историю, восходящую к одному из самых ранних графических пользовательских интерфейсов: Xerox «Star» 1981 года. Его создатель Норм Кокс хотел, чтобы гамбургер-меню было «простым дорожным знаком». Его три составные строки имитировали внешний вид списка меню.
Однако после его дебюта в Xerox Star гамбургер-меню больше не видели в течение нескольких лет. И только после появления смартфонов и сопутствующих им приложений значок снова был замечен. Первым явлением, похоже, было приложение «Диктофон» для iOS. Быстрое нажатие на значок гамбургера вызывает удобный список заметок и вариантов обмена.
В 2009 году значок гамбургера также использовался в Tweetie, первом мобильном приложении Twitter. Считается, что Tweetie оказал значительное влияние на культуру дизайна приложений Apple.
Однако самым известным приложением, использующим гамбургер-меню, был Facebook. Facebook постепенно продвигался к дизайну, начиная с двухрядного значка сетки в 2008 году, эволюционировав до трехстрочной сетки в 2009 году и, наконец, до трех полосок — классического гамбургер-меню — в 2010 году.
После этого гамбургер-меню быстро завоевало популярность как в приложениях, так и в мобильной сети. В течение нескольких коротких лет многие крупные компании, от Google до Starbucks и Disney, использовали гамбургер-меню в своих приложениях и мобильных сайтах.
Гамбургерное меню, оскорбленное
Однако в 2014 году волна дизайнеров и журналистов начала подвергать сомнению использование гамбургер-меню в публикациях, начиная от сайтов технических новостей и заканчивая блогами по дизайну и журналами с комментариями о культуре.
«По сути, то, что находится вне поля зрения, не имеет значения», — объяснил Джош Константин из TechCrunch. Он объявил гамбургер-меню «дьяволом», заявив, что оно сильно ограничивает или перекрывает трафик для любых содержащихся в нем функций. «Любые варианты навигации, которые вы скрываете за гамбургером, будут забыты или, по крайней мере, использованы намного реже».
Некоторые дизайнеры отметили, что гамбургер-меню также сделало пользовательский интерфейс более сложным. Они утверждали, что это увеличило количество нажатий, необходимых для доступа к этим функциям, и увеличило когнитивную нагрузку пользователя. Как описал Луис Абреу: «Даже если люди знают [о] и ценят функцию [внутри гамбургер-меню], этот шаблон вызывает затруднения при навигации».
В последнюю очередь были критики, заявившие, что даже графический дизайн иконки был несовершенным. От Innovation Digital:
«[Это] на самом деле не похоже на меню, если вы еще не знаете, что оно представляет. Дизайнер веб-сайта знает, что это меню, как и разработчики, и более широкие заинтересованные стороны, но многие пользователи этого не знают ».
Но что говорят данные?
Moovweb обеспечивает сотни мобильных приложений, предоставляемых 60 миллионам мобильных пользователей каждый месяц. По нашим данным, некоторые пользователи мобильного Интернета действительно пользуются гамбургер-меню. Но мы также обнаружили доказательства того, что многие до сих пор не знают, что такое гамбургер-меню.
Давайте углубимся в наше исследование. Мы проанализировали 50 мобильных сайтов с высоким трафиком на нашей платформе по ряду вертикалей и изучили взаимодействие пользователей с гамбургер-меню. В среднем около 20% посетителей мобильных сайтов нажимали на кнопку гамбургера, и это одна из пяти самых популярных кнопок на мобильных сайтах.
В целом кнопка гамбургера очень популярна среди пользователей и почти так же популярна, как поиск на мобильных сайтах.
Затем мы задались вопросом: есть ли у пользователей всех типов мобильных сайтов схожий шаблон взаимодействия с гамбургер-меню? Или использование гамбургер-меню посетителями мобильных сайтов зависит от отрасли?
Мы обнаружили, что на содержательных сайтах гамбургер-меню никто не использует. В этом есть смысл. Пользователь здесь, чтобы прочитать конкретную статью или просто просмотреть заголовки на первой странице.
Более того, на сайтах, где пользователи, как правило, мало просматривают страницы, кроме главной, активность гамбургер-меню относительно низка. Например, на сайтах Auto & Construction, где доминирующим поведением пользователей является поиск, доступность меню составляет лишь от того, что есть на сайтах, ориентированных на просмотр сайтов, таких как Home & Garden.
На другом конце спектра использования гамбургер-меню были мобильные сайты, на которых просмотр страниц является доминирующим поведением пользователей. Например, у сайтов одежды и аксессуаров в среднем самый высокий уровень вовлеченности в гамбургер-меню (26%). И в рамках этой категории на определенные сайты приходилось до 59% посетителей мобильных сайтов, взаимодействующих с гамбургер-меню.
Как повысить интерес к меню
Затем мы спросили себя: есть ли что-нибудь, что можно сделать для увеличения вовлеченности с помощью гамбургер-меню? Да, на самом деле, простое обозначение трех составных полос словом «меню» увеличивает вовлеченность более чем на 50% .
Мы решили провести тест с 300 000 пользователей мобильного сайта. Примерно половина увидела гамбургер-меню без надписи. И половина увидела тот же значок, но с четко обозначенным словом «Меню».
Результаты теста были шокирующими. Простое добавление ярлыка «меню» увеличило количество посетителей, которые попробовали гамбургер-меню , на впечатляющие 61% .
Использование этикетки значительно упрощает назначение гамбургер-меню . Для сайтов, которые используют гамбургер, добавление метки «меню» может обеспечить быстрый выигрыш с точки зрения значительного увеличения взаимодействия с пользователем, особенно для сайтов с более старым возрастом.
В гамбургер или не в гамбургер
В конце концов, животрепещущий вопрос заключается в следующем: есть ли еще роль гамбургер-меню в современном мобильном мире?
Возможно, его роль по-прежнему остается центральной. Поскольку люди все больше полагаются на свои мобильные устройства и ожидают полной функциональности настольных компьютеров на мобильных устройствах, потребность в предоставлении расширенных функциональных возможностей, упакованных в небольшой значок, становится как никогда острой.
Несмотря на свои недостатки, многие пользователи продолжают использовать гамбургер-меню, особенно в мобильных приложениях, где преобладающим поведением является просмотр веб-страниц. На сайтах, созданных на базе Moovweb, гамбургер-меню нажимают в 20% случаев, и это одно из самых популярных мобильных взаимодействий. И до тех пор, пока не появится новая функция, которая изменит правила игры, которая решит проблему ограниченного пространства на экране (носимые устройства, голограммы, матрица и т. Д.), Гамбургер-меню может существовать.
Так что не стоит пока списывать со счетов гамбургер-меню. Возможно, это не идеальное решение, но оно все же играет важную роль в облегчении просмотра на маленьком экране. Но если вы собираетесь использовать гамбургер-меню, вы можете значительно повысить уровень вовлеченности, просто обозначив его словом «меню».
Сообщение Гамбургер-меню: удобный инструмент или бесполезная иконка? впервые появился в блоге Moovweb.
Когда стоит убрать гамбургер-меню из вашего продукта
Многие любят хороший гамбургер, одно из самых популярных блюд в мире. Таким же популярным оказалось и гамбургер-меню в мире дизайна, и сегодня я хочу обсудить с вами именно его.
История гамбургер-меню
Гамбургер-меню спроектировал Норм Кокс для Xerox Star, первого в мире графического интерфейса. Норм является сооснователем Cox & Hall и работает консультантом по дизайну пользовательского опыта и взаимодействия с 1982 года. Для того же интерфейса он создал иконку с документом. Правда, после Xerox Star иконка на какое-то время исчезла.
Зато гамбургер-меню восстало из мертвых, когда дизайнерам пришлось придумывать способ вместить все нужное в 4-дюймовый экран смартфона. Хотя сейчас невозможно определить, какое приложение начало использовать эту иконку первым, но точно гамбургер-меню уже используется достаточно много лет. Многие приложения используют эту навигацию, хотя вокруг гамбургер-меню ведется много споров. Даже Apple выступает против его использования.
Я смотрел выступление от одного из UX-евангелистов Apple по имени Майк Стерн на WWDC 2014, который рассказывал, почему не стоит использовать гамбургер в приложениях. Я хочу выделить несколько его аргументов:
“Гамбургер-меню ужасны, потому что меню нет на экране. Видна только кнопка меню. И мой опыт показывает, что разработчики сами это понимают”.
“Помните, что интуитивные системы навигации говорят вам, где вы находитесь, и показывают вам, куда ещё вы можете пойти”.
Это было хорошее выступление с множеством хороших аргументов, которые не поместятся в этой статье.
Почему гамбургер-меню не работает
Я знаю, это хорошее решение для того, чтобы собрать всю навигацию в одном месте. И оно по-прежнему популярно в мобильном вебе и в приложениях, хотя дискуссии о разумности этого подхода ведутся с 2014 года.
Но знаете ли вы, что гамбургер-меню отнимает у вашего пользователя много времени? В Spotify обнаружили, что с исчезновением кнопки навигации количество кликов по элементам навигации выросло на 30%. YouTube и Facebook сделали то же самое и перешли к меню на основе вкладок, что улучшило удобство их приложений для пользователя.
Гамбургер-меню конфликтует с моделью навигации платформы
Представьте, что вы создали приложение. Вы хотите, чтобы пользователи его исследовали, но прячете всю навигацию внутри гамбургер-меню. Как тогда будет выглядеть кнопка “Назад” при переходе на конкретную страницу?
Вы хотите, чтобы пользователи смогли перемещаться по приложению без проблем, поэтому резервируете часть интерфейса под гамбургер-меню. Но пользователю нужна возможность возврата на предыдущий экран. В таком случае дизайнер может совершить ошибку и перегрузить панель навигации, не оставив места под название экрана. Эта проблема чаще встречается на iOS, где на предыдущий экран можно перейти только при нажатии кнопки или свайпе.
Гамбургер-меню неэффективно
Гамбургер-меню чаще всего встречается в верхнем левом углу приложения или мобильного сайта. Исследование показало, что экраны смартфонов становятся больше с каждым годом, и левый верхний угол становится самым малодоступным местом для пользователей-правшей.
При этом пользователи не могут видеть доступные опции: им придется дотянуться до этого угла два раза, чтобы открыть меню, а затем выбрать нужный вариант. Если нужного варианта в меню не окажется, пользователям нужно будет возвращаться через несколько экранов, чтобы продолжить навигацию через сайт.
Непонятная архитектура информации
Когда вы создаете архитектуру сайта или приложения, то можете забыть, что пользователи ничего о ней не знают. Такой диалог вполне может состояться между дизайнерами:
— Что если пользователь захочет найти свой аккаунт?
— Все просто: нужно нажать на меню, потом на профиль, и там будет вся информация о профиле!
Да, звучит логично. Но дизайнер предполагает, что пользователь знает, что находится в меню до того, когда открывает приложение в первый раз. Но пользователи размышляют не так. Не нужно делать предположений.
Многие люди ориентируются при помощи “информационного чутья”. Когда они видят набор вариантов, они выберут опцию, которая будет ближе всего к тому, то им нужно. например, если пользователи ищут свой аккаунт на сайте, они будут искать слова “профиль”, “аккаунты”, “имя” и так далее. Если они ничего не найдут, они перейдут к плану B и начнут искать слова “зарегистрироваться”, “войти” и подобные. Они продолжат расширять круг понятий, пока не найдут что-то похожее или откажутся от поиска.
Гамбургер-меню совсем не похоже на то, что хотят пользователи. Это маленькая иконка в углу приложения. В ней нет никакой информации, и она не привлечет пользователей, даже если у них кончились варианты. Они могут не догадаться, что ответ спрятан за этими тремя полосками.
Что тогда делать?
Да, мобильная навигация сложна, потому что должна не только подходить под маленький экран, но и быть достаточно крупной для управления пальцами, а также учитывать разные точки назначения. Но это не значит, что ничего нельзя сделать.
Пересмотрите свою архитектуру информации
Люди используют гамбургер-меню, когда не могут добавить больше предметов без последствий. Это работает, только если ваши пользователи действительно используют меню и не путаются в интерфейсе.
Со временем ваше приложение начнет расти и приобретать больше функций, а информационная архитектура будет становиться все сложнее. Проведите исследование пользователей при помощи метода сортировки карточек. Позвольте пользователям разделить информацию на категории согласно интуиции и “информационному чутью”, чтобы узнать, как люди хотят использовать ваше приложение. После этого вы сможете создать новую архитектуру приложения. Сотрудники Mozilla использовали этот метод, когда создавали новый дизайн настроек.
Используйте вкладки
Вкладки кажутся мне лучшим решением для мобильного приложения. Вы можете поместить их в верхней или нижней части экрана: всё зависит от вас, но если вы создаете дизайн для респонсивного веба, лучше будет поместить вкладки в верхнюю часть. С новой архитектурой информации вы сможете выделить 4–5 иконок и текстовых кнопок для главных пунктов навигации. Этот подход применяет Facebook в структуре своих приложений:
Главное преимущество использования иконки и текста — это позволяет вам вместить весь нужный текст, сохранив кнопку достаточно большой. И такое меню доступно, когда пользователь находится глубоко в приложении.
Но мне нужно больше!
Не беспокоитесь, навигацию со вкладками можно расширить. Если вам нужно больше пяти вкладок, вы можете использовать последнюю вкладку для остальных опций. Если у ваших приложений для десктопа есть более надежное меню, возьмите из него главные элементы и превратите их во вкладки. Другие элементы могут быть доступны через вкладку “больше” или “другое”.
Интересную навигационную систему создали в Product Hunt. Они используют текстовую навигацию в мобильной версии и назвали эту вкладку “Навигация”.
А вот что с навигацией сделали в Medium:
Новую навигацию создать вполне можно. Да, это непросто, но UX-дизайнер должен быть готов к сложностям.
Используйте гамбургер-меню для особых случаев
Все вышесказанное не означает, что от гамбургер-меню нужно совсем отказаться. В некоторых случаях оно может быть идеальным выбором. Например, Uber использует кнопку с призывом к действию в качестве основной навигации, а гамбургер-меню — в качестве вторичной. Так они выделяют кнопку “Куда?” в качестве главного элемента.
Они создали заметную иконку меню, которая сообщает пользователю о вариантах навигации за этими линиями.
Заключение
Гамбургер-меню могут быть как хорошим, так и плохим вариантом для навигации. Их можно использовать так же хорошо, как и Uber, но можно и создать с их помощью непонятный и плохой интерфейс. Все зависит от того, как будут выглядеть ваши приложения и сайты и как пользователь будет ориентироваться в вашем продукте. В конечном счете все зависит от контекста.
Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].
Подходит ли навигация по гамбургерам для вашего веб-сайта или приложения?
Вы это видели. Может быть, в вашем приложении Facebook или на сайте рецептов палео-веганских смузи из капусты, который вы посещаете каждое утро — вы не можете точно указать где, но вы это видели.
Название довольно простое: оно, очевидно, относится к форме, которая выглядит как две булочки и пирожок. Значок гамбургера обычно находится в верхнем или нижнем углу веб-сайтов и приложений и указывает пользователям, что помимо этих трех строк есть еще кое-что, что нужно исследовать.
Хотя гамбургерная навигация и добилась немалого успеха, она также вызывает споры. Значок гамбургера подвергся критике в сообществе пользовательского интерфейса (UI) / взаимодействия с пользователем (UX) из-за его использования в дизайне рабочего стола. Они говорят, что это вкусно, но вредно для вас. Публичный имидж гамбургера изменился от говядины Кобе, откормленной травой, до слизистого Биг-Мака, скрывающегося за глянцевой фанерой. Но есть ли случаи, когда имеет смысл использовать гамбургерную навигацию?
Эта статья даст вам краткое представление о том, что представляет собой этот значок навигации в виде гамбургера, когда его имеет смысл использовать, а также о спорах вокруг него.
Краткий урок истории: эволюция размера экрана
Значок гамбургера, созданный бывшим дизайнером продуктов Xerox Нормом Коксом еще в 1981 году, изначально был предназначен для обозначения списка в системе Xerox «Star».
В течение многих лет значок гамбургера бездействовал, беспорядочно появляясь в различных интерфейсах.
Потом появился смартфон. Сохранение площади экрана стало приоритетом, и всплывающие меню, запускаемые значком навигации гамбургера, стали la mode du jour .Сначала появилась навигация с вкладками из собственных приложений iOS: обычно четыре-пять значков, прикрепленных к нижней части экрана, представляли основные пункты меню.
Затем, в 2010 году, появился г-н Итан Маркотт, который перевернул индустрию с ног на голову благодаря адаптивному дизайну. Посетителям сайта больше не нужно было дважды нажимать на контент; вместо этого контент был иерархически структурирован в одном столбце полной ширины. Это изменение также потребовало от дизайнеров и разработчиков учета 15-позиционной горизонтальной навигации на рабочем столе.Войдите в гамбургерную навигацию, которая отправила навигацию в какое-то невидимое забвение, только чтобы быть обнаруженной, когда пользователь активно ее искал.
В 2012 году гамбургер-меню, которое теперь прочно вошло в адаптивный дизайн как средство консолидации навигации, начало проникать в макеты рабочего стола. Эти макеты были великолепны, и дизайнеры увидели, насколько чистыми и простыми могут быть их сайты без беспорядка трехуровневой навигации, заполненной раскрывающимися списками, социальными значками, панелями поиска и служебными ссылками.
Какое-то время эта тенденция была воспринята с радостью, но потом кое-что произошло. Когда-то считавшийся элегантным и функциональным дизайнерским решением, значок гамбургера, казалось, пересек рубикон и нарушил какую-то заповедь Дитера Рамса.
Функция быстрого питания
Скрытие навигации на рабочем столе вызвало немало споров в UX-сообществе.
Неправильное использование гамбургера (как и любого элемента пользовательского интерфейса на вашем сайте) может нанести вред вашему UX, так же как Биг Мак может отправить вас прямо в отравленную пищевую кому.Проблема возникает, когда дизайнеру предоставляется слишком сложная панель навигации и служебных программ; Чтобы сайт выглядел чистым, они без особой предусмотрительности размещают значок гамбургера. Отсюда термин «подвал», когда дизайнеры UX говорят о навигации вне холста: он находится под страницей и заполнен дерьмом. Итак, зачем скрывать элементы навигации? Это правильный вопрос, который необходимо изучить и протестировать на этапе создания прототипа сайта.
Мощность в шаблоне
Некоторые вещи кажутся правильными, и любой, кто открыл навигацию вне холста, может сказать вам, что это просто работает.Тактильное ощущение, когда контент скользит в сторону и перефокусирует ваше внимание, не заставляя вас терять свое текущее место на сайте, является вознаграждением. Это также позволяет сосредоточить ваше внимание на фактическом содержании страницы, не препятствуя постороннему беспорядку, вызванному навигацией.
Как люди, мы любим открывать новые вещи; это в нашей природе. Из-за этого нами движет любопытство, которое почти заставляет нас исследовать и исследовать все, что мы можем счесть «скрытым» или «загадочным». Конечно, это не означает, что ваша навигация должна быть скрыта.Прелесть гамбургера в том, что он указывает на то, что находится прямо за пределами вашего поля зрения. Итак, что происходит, когда вы видите навигацию на своем рабочем столе, но в углу все еще есть гамбургер? Истинная сила гамбургера в том, что у него нет границ. Это может выходить далеко за рамки простого раскрытия вашей навигации. В вашем распоряжении вся область просмотра. Хотите перейти на полную страницу, заполнить ее продуктами, призывами к действию, окном поиска, слайдером избранных сообщений в блогах или ресурсов? Какого черта нет.
Гамбургер, который узнаваем, присутствует всегда и указывает на то, что в непосредственной близости есть важные предметы, которые могут улучшить ваш текущий опыт просмотра. Это ключевой момент — определить, действительно ли гамбургер улучшает ваш пользовательский опыт.
Подходит ли значок гамбургера для вашего веб-сайта?
В те решающие первые месяцы планирования, исследования, составления карты сайта и прототипирования вашей творческой команде необходимо будет разбить переменные, которые представляет ваш проект, чтобы принять это всегда важное решение.Нужен ли мне значок веб-сайта гамбургерного меню на рабочем столе или в мобильном приложении? Как максимально эффективно использовать экранную площадь? По данным Localytics, 21% пользователей избавляются от приложений всего за один раз, поэтому важно вовлекать людей с самого начала. Итак, может ли гамбургерная навигация помочь — или будет больно?
Давайте рассмотрим некоторые из самых важных вопросов, которые помогают направлять процесс принятия решений.
Сколько у вас пунктов меню?В идеальном мире все сайты были бы такими же простыми, как сайт агентства — Работа, Услуги, Команда, Блог — но, скорее всего, вам нужно нечто большее.Итак, спросите себя, могу ли я извлечь самое необходимое, а остальное добавить на панель вне холста или во всплывающее меню? Если ваши текущие шаблоны трафика доказывают, что 80% трафика направляется на страницу ваших продуктов, зачем так же выделять страницу вашей компании, загромождая ее?
Осторожно: Это общее заявление. Ничто из этого не является черно-белым; все дело в контексте.
НавигацияHamburger, также называемая боковое меню или панель навигации, обеспечивает прямой доступ, что означает, что пользователи могут быстро и эффективно найти то, что они ищут, всего за несколько щелчков мышью.Вы также не хотите, чтобы главный экран был загроможден и переполнен людьми. Но помните: навигация по гамбургерам скрывает ваш контент.
Вы создаете веб-приложение или простой адаптивный веб-сайт?Яблоки и апельсины, я знаю, но функции нативных приложений и адаптивных макетов начинают объединяться. Как правило, в веб-приложении будет небольшой набор взаимодействий, которые пользователь хочет повторять снова и снова. Из-за этого пользовательский интерфейс должен отражать повторение шаблонов использования, поэтому наличие ссылки на часто используемую функцию, скрытую за пределами холста, было бы неприятным.Однако, если у вас есть настройки профиля пользователя или списки, к которым вы хотите получить доступ, например, в Twitter, подвальный этаж — идеальное место для их хранения.
Какие функции должны быть постоянными?Сайты электронной коммерции уникальны тем, что они добавляют второй уровень взаимодействия, предоставляя пользователю профиль, корзину, список желаний, поиск продуктов и т. Д. Они становятся элементами навигации, поскольку каждому элементу посвящена отдельная страница. Как правило, эти элементы попадают в служебную панель, что может добавить ненужного раздувания к чистому пользовательскому интерфейсу.Добавление их во всплывающее меню — отличный вариант.
Я структурировал свой контент с помощью надежной стратегии конверсии?Если вы работаете с агентством, используя передовые методы входящего маркетинга, то ответ — да. Без четких призывов к действию и грамотно разработанной стратегии конверсии вам, вероятно, следует избегать навигации за пределами холста. Часто веб-сайт требует, чтобы навигация присутствовала постоянно, потому что контент не основан на конверсиях и обучении, что приводит к мертвым зонам контента, которые полагаются на использование основной навигации для продолжения изучения.Передовые методы входящего маркетинга позволяют свободно оставаться на холсте или рисковать за пределами холста.
Есть ли альтернативы Hamburger Icon?
Один из способов увеличить значок навигации по гамбургеру — это добавить ярлык. По данным Nielsen Norman Group, пользователи настольных компьютеров открывали скрытое меню в 27% случаев, в отличие от видимой навигации в 48% случаев и комбинированной навигации в 50% случаев. Другими словами, ярлыки могут помочь. Показательный пример: Джеймс Фостер из Exisweb провел эксперимент, чтобы посмотреть, изменит ли что-нибудь изменение значка гамбургерного меню.Результаты, достижения? Пользователи нажимали значки с надписью «Меню» на 20% чаще.
Альтернативные варианты мобильного приложениямогут также включать в себя навигацию с вкладками, вкладки с опцией «дополнительно», постепенно сворачивающееся меню, прокручиваемую навигацию и раскрывающиеся меню.
Почему вам следует избегать навигации по гамбургерам
Прямой доступ важен, но означает ли это, что гамбургерная навигация вам подходит? Это может быть менее интуитивно понятным, а иногда значок нелегко увидеть, что может означать низкие показатели взаимодействия и разочарование пользователей, которые не могут сразу найти то, что ищут.
Как мы уже упоминали, определенно есть альтернативы значку гамбургера, так что у вас есть варианты. Но помните…
Все дело в контексте.
«Нет более сомнительной фразы, чем« исследования показали ». Через пять минут исследования покажут нечто иное ».
— Рэнди Коэн, Нью-Йорк Таймс
Погуглите за десять минут, и вы сможете найти многочисленные примеры из практики, показывающие, какое положительное влияние значок гамбургера может оказать на рентабельность инвестиций вашего сайта.Вы также можете покопаться и найти столько же случаев, когда значок используется неправильно и фактически вредит пользовательскому интерфейсу сайта. ConversionXL провел тест на сайте электронной коммерции, который показал увеличение дохода не менее чем на 4% в зависимости от стиля значка гамбургер-меню. Команда ExisWeb провела аналогичный тест, который дал совсем другие результаты (+ 12%), когда значок гамбургера был заменен словом «Меню».
Этот документ не предназначен для продажи, а скорее как образовательный справочник, дьявольски стремящийся показать вам, насколько мощным может быть базовый шаблон внебиржевого контента.Значок гамбургера — это просто канал, который запускает необходимые рецепторы, чтобы дать вашему мозгу понять, что есть еще что посмотреть. Команда разработчиков, отвечающая за UX вашего сайта, действительно должна объективно взвесить уникальные плюсы и минусы и прийти к обоснованному выводу.
Мы полностью поддерживаем и активно проводим A / B-тестирование наших входящих клиентских проектов, чтобы постоянно оценивать все пути покупателя и повышать конверсию. Удивительно, чему можно научиться за короткий промежуток времени. Эта гигантская навигация, которую вы решили, что ОБЯЗАТЕЛЬНО должны показывать постоянно, просто может работать лучше на холсте.
Итак, возникает вопрос, следует ли мне использовать гамбургер-навигацию на моем следующем сайте?
Вы не узнаете, пока не протестируете.
В заключение, пожалуйста, насладитесь этой галереей потрясающих функций, запускаемых с помощью значков гамбургера / всплывающего меню.
Видите меню Pen Hamburger? Нет, спасибо, я предпочитаю хот-доги. Автор: Шон Демпси (@seanseansean) на CodePen.
Джесси Рэнд — креативный директор и менеджер по дизайну / развитию Опыт Джесси позволил ему работать в индустрии мобильных стартапов Бостона, где он работал дизайнером пользовательского интерфейса и художником-графиком.Затем Джесси перешел в мир веб-дизайна и разработки и создал обширное портфолио интерактивных веб-сайтов. Работая одновременно в качестве дизайнера печати и основного веб-разработчика, Джесси руководит производством всех основных проектов дизайна / разработки в Vital. Джесси имеет степень бакалавра искусств Плимутского государственного университета по специальности графический дизайн. Просмотреть полную биографию
Связанный контент
10 вопросов о дизайне вашего веб-сайта Получите ресурсДелаем футляр для настольного гамбургерного меню
Большая часть работы UX-дизайнера — это знать, как и когда правильно использовать веб-элементы.Предложение ярлыков и оптимизация взаимодействия с пользователем могут быть невероятно удовлетворительными, особенно когда они также упрощают общий вид веб-страницы.
За пять лет, прошедших с тех пор, как трехстрочный значок меню, или « гамбургер-меню », как его с любовью стали называть, был широко использован приложением Facebook, он получил почти всемирное признание. Обратите внимание на фразу «повсеместное употребление» — точное происхождение гамбургер-меню само по себе является предметом горячих споров.Независимо от вашего личного мнения о самом дизайне, эти 3 маленькие линии, кажется, выиграли битву с иконками меню. Другими словами, гамбургер-меню стало синонимом меню со скрытым ящиком.
Теперь, когда пользователи обучены понимать, что означает гамбургер, UX и веб-дизайнеры начинают тестировать воды, чтобы увидеть, может ли значок гамбургера существовать за пределами границ мобильного веб-дизайна , и (ах!) успешно работают на десктопных сайтах .
У самой перспективы есть множество экспертов по UX. В конце концов, иконка родилась из чувства компромисса для мобильных устройств. Мы бы предпочли отображать полную навигацию , но это было просто непрактично делать на таком маленьком экране. Так зачем нам вообще понадобиться или захотеть использовать значок на настольном сайте, где много места на экране?
Почему UX-специалисты ненавидят гамбургер-меню
Общие удобство использования Принципы гласят, что заставлять пользователей делать любые дополнительные шаги, чтобы добраться туда, куда они идут, — смертный грех.И не зря. Каждый раз, когда мы создаем какие-либо препятствия для контента, мы усложняем жизнь нашим пользователям. Кажется совершенно нелогичным для нашей работы, не так ли?
Скрытие меню не только создает дополнительный щелчок, но и создает его снова и снова. Каждый раз, когда кто-то хочет перейти на другую страницу, он должен повторить повторяющееся действие, щелкнув значок только для того, чтобы увидеть меню.
В дополнение к созданию барьера, когда вы скрываете Navigation , это ограничивает способность людей самостоятельно обнаруживать неожиданный контент.Это не всегда такая проблема, но давайте рассмотрим следующий пример: на веб-сайте, который связывает семьи с нянями, есть страница, полная ярких отзывов. Если на эту страницу ведет ссылка из заголовка панели навигации , очень вероятно, что ее обнаружат матери и отцы, ищущие няню. Эти отзывы могут быть достаточно убедительными, чтобы преувеличить конверсию. Однако, если такая же ссылка находится в меню скрытого ящика, она может никогда не быть найдена. Какая упущенная возможность!
И что еще хуже, примите во внимание эту статистику: только 52% пользователей старше 45 даже знают, что означает значок гамбургера.Таким образом, для почти половины этого населения эти 3 маленькие строчки не имеют абсолютно никакого значения. Маловероятно, что они вообще нажмут, если только не из чистого любопытства.
Но даже зная все это, все же есть веские доводы в пользу этого аутсайдера иконы.
Немного неотъемлемых преимуществ
веб-дизайнеров и UX-дизайнеров одинаково любят все упрощать. Это включает в себя чистый и иногда минималистичный дизайн. Используя скрытое меню и значок гамбургера, мы можем убрать утилитарную навигационную панель и заменить ее чем-то чистым и ненавязчивым.Даже при том, что это может происходить за счет функциональной простоты , легко понять, почему чистая визуальная простота , которую она привносит, является привлекательной.
Бесчисленные исследования показали, что при слишком большом количестве вариантов большинство людей, скорее всего, вообще ничего не выберут. Одно конкретное исследование показало, что пользователи на самом деле в десять раз реже действуют. Таким образом, убирая навигацию или даже только то, что вы определили как вторичные элементы навигации , вы, по сути, устраняете «усталость от принятия решений» из уравнения и направляете своих пользователей на путь, который вы предварительно установили. их.
«Какой путь?» — спросите вы? К настоящему времени мы все знаем, что у каждой веб-страницы должна быть цель. Будь то захват адресов электронной почты, создание репостов в социальных сетях или фактическая продажа, у вас должен быть четкий, смелый призыв к действию (CTA), направляющий вашу аудиторию именно туда, куда им нужно. После того, как вы определили эту цель, часто имеет смысл направить ваших пользователей в одном направлении, в сторону CTA. Думайте об этом как о дороге из желтого кирпича, которая ведет к Изумрудному городу. Все остальные маршруты — просто объездные пути.
Сохраняя простоту навигации , устраняя лишние параметры и предоставляя четкую цель, вы указываете своим пользователям правильное направление для совершения конверсии.
Лучшие методы реализации гамбургерного меню
Поскольку гамбургер-меню действительно может быть полезным при определенных обстоятельствах, важно помнить о некоторых передовых методах, чтобы извлечь из него максимальную пользу и устранить любую возможную путаницу, которая может возникнуть.
- Убедитесь, что на него явно нажимают: .Некоторые сайты терпят неудачу в дизайне значка гамбургер-меню таким образом, чтобы он выглядел как чистое украшение. Поместив его в рамку или, еще лучше, стилизовав его как кнопку, люди поймут, что это элемент навигации.
- Соедините его с сильным CTA: . Единственный способ скрыть свое меню — это указать четкий путь в другом месте. Это может быть либо область заголовка, либо кнопка в контексте, либо ссылка в теле страницы, либо и то, и другое.
- Соедините его с этикеткой: . Это не является обязательным требованием, но может облегчить жизнь пожилым пользователям, которые не знакомы со значением самого значка.
- Не скрывать основные ссылки навигации : В некоторых случаях имеет смысл оставить несколько очень релевантных ссылок навигации открытыми, а остальные поместить в скрытое меню. Таким образом, наиболее важные ссылки видны, и при этом пользователи не перегружаются из-за слишком большого количества опций.
Когда это работает
Учитывая множество плюсов и минусов, мы можем понять, почему значок гамбургер-меню на рабочем столе вызывает столько споров. Хотя это, конечно, не во всех обстоятельствах, я думаю, что это может быть полезно для конверсии, если ваш сайт:
- Имеет одиночный чистый CTA
- Использует целевые страницы, которые содержат достаточно убедительной информации, чтобы пользователи переходили по контекстному призыву к действию.
Другими словами, это может сработать, если ваши целевые страницы не зависят от частых переходов со страницы на страницу, чтобы убедить людей совершить конверсию.Каждая страница может ссылаться на один и тот же CTA, или, может быть, вы хотите направлять людей через несколько (но не слишком много) страниц с помощью тщательно продуманных контекстных ссылок. Чтобы добиться этого, вам нужно действительно понимать искусство целевой страницы и хорошего убедительного текста.
Если вы это сделаете, часто имеет смысл провести аудиторию через путешествие, а не заставлять их бесцельно блуждать в одиночестве.
См. Приведенную выше домашнюю страницу для The Deep End Design. Обратите внимание на использование значка гамбургера вместе с ярко окрашенной кнопкой CTA.Этот макет увеличил количество переходов по ссылкам на их главную целевую страницу.
Последние мысли
Использование значка меню в виде гамбургера на сайтах для ПК может быть рискованным. Если вы решите использовать его, просто убедитесь, что это правильно и сделано с использованием передовых методов. При правильном использовании, с четкими призывами к действию и правильным контентом на странице вы можете быть удивлены, увидев, что он может предложить вашему веб-сайту явное преимущество.
Как вы думаете? Вы видели, как значок меню гамбургера используется с большим эффектом? Или вы категорически не согласны? Продолжайте разговор и расскажите нам, что вы думаете, в комментариях ниже!
Хотите узнать больше?Если вас интересует пересечение UX и UI-дизайна, подумайте о том, чтобы пройти онлайн-курс UI Design Patterns for Successful Software или в качестве альтернативы Design Thinking: The Beginner’s Guide.Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, вы можете пройти онлайн-курс по пользовательскому опыту (или другой теме дизайна). Удачи в вашем познавательном путешествии!
Демистифицируя меню гамбургеров: 20 примеров, подобранных вручную
Меню гамбургеров приобрели некоторую популярность за последние несколько месяцев и в настоящее время используются как для веб-сайтов, так и для мобильных приложений. Их роль — помогать вам перемещаться по всему миру простым и удобным для мобильных устройств способом. Иконки гамбургеров стали хорошо известными и легко узнаваемыми кнопками действий в пользовательском интерфейсе.Несмотря на то, что они имеют знакомый трехстворчатый дизайн, их внешний вид может варьироваться от проекта к другому, в зависимости от выбранного стиля.
Обычно они занимают мало места в пользовательском интерфейсе и срабатывают при нажатии. Это когда отображается полная навигация по меню. Кроме того, они могут включать в себя различные анимации, которые только улучшают их общий дизайн.
В этой статье вы найдете 20 красивых дизайнов гамбургер-меню, а также несколько важных советов и приемов, которые помогут вам успешно ими управлять.Например, при создании такого типа навигации вы должны учитывать ее совместимость с различными браузерами, чтобы убедиться, что она будет отображаться идеально. Об этих элементах можно многое узнать, нужно затронуть разные темы, чтобы полностью понять, о чем они все.
Взгляните на эту великолепную коллекцию значков гамбургер-меню, подобранную вручную, и используйте их в своих будущих цифровых проектах.
Это аккуратная выдвижная навигация по гамбургерам с красивым дизайном и очаровательной анимацией.Это замечательный элемент, который активируется прикосновением и включает встроенную прокрутку.
Drawer — отличный плагин jQuery, который использует CSS3 для простой, но очень эффективной анимации перехода.
Чистый ящик с выдающимися эффектами перехода, которые обязательно привлекут ваше внимание. Некоторые из них включают: скольжение сверху, раскрытие, скольжение, падение, переворачивание, масштабирование и т. Д.
Shiffter — еще один замечательный значок меню гамбургера, который включает в себя различные анимации.Вы можете использовать его как для веб-сайтов, так и для мобильных приложений.
Sidr — отличное гамбургер-меню, которое автоматически подстраивает свое содержимое под любой размер экрана.
МенюHamburger можно использовать для любого вида навигации, например, для значков социальных сетей. Они скрыты от пользовательского интерфейса и появляются только при нажатии на значок меню.
Эта прекрасная навигация по меню использует эффект наведения для каждого пункта меню.Откройте для себя все его функции и посмотрите, соответствует ли этот дизайн меню вашим требованиям.
Вот удивительный дизайн гамбургерного меню с уникальной и очень креативной анимацией. Это будет потрясающе смотреться в любом из ваших проектов, будь то веб-сайты или приложения.
Это отличное гамбургер-меню, при нажатии на которое оно красиво отображает содержимое вашего меню в полноэкранном режиме.
Этот дизайн гамбургер-меню имеет полностью адаптивный макет, который автоматически адаптирует его содержимое к любому размеру экрана.
Хотя обычно используемая навигация по гамбургерам содержит три полосы, вы также можете использовать различные конструкции. Посмотри!
Это креативный значок меню гамбургера с красивым дизайном и плавной анимацией при наведении курсора. Этот элемент был создан Адамом Дорлингом.
Вот еще один необычный значок меню гамбургера, который при нажатии превращается в «X».
Это выдающийся дизайн гамбургер-меню, который будет потрясающе смотреться в мобильных приложениях.У этого элемента есть модальное всплывающее окно, которое активируется при нажатии.
Это очень креативное гамбургер-меню вне холста с красивым 3D-эффектом. Такой дизайн обязательно привлечет внимание вашего пользователя.
Вот еще один замечательный дизайн гамбургерного меню с прекрасным эффектом переключения со скользящей навигацией.
Этот удивительный дизайн меню был создан с использованием SS3. Этот значок навигации гамбургера имеет красивую анимацию при нажатии.
Это простой, но эффективный дизайн гамбургер-меню, который превращается в знак «Х». Дизайнер создал аккуратный переход между тремя полосами меню на букву «X».
Это адаптивное мегаменю содержит расширяемые разделы, которые отлично отображаются на экране любого размера. Вы даже можете добавлять изображения в меню навигации.
Это еще один дизайн гамбургерной навигации, который превращает полное меню в полноэкранный вид.Этот дизайн имеет эффект плавного перехода, который вам понравится.
лучших примеров навигации по сайту | Синий компас
Дизайн домашней страницы вашего веб-сайта может серьезно повлиять на то, как пользователи взаимодействуют с вашим веб-сайтом, и решат ли они перейти на новую страницу, чтобы продолжить изучение вашего бизнеса. Ваш веб-сайт использует популярную тенденцию навигации, которая может снизить его производительность? Наши эксперты по веб-дизайну разбирают навигацию по гамбургер-меню и объясняют, почему этот вариант может не соответствовать лучшим практикам навигации по веб-дизайну.
Что такое навигация по гамбургерам?
Навигация по гамбургерам — это те три строки, которые, скорее всего, находятся в правом верхнем углу сайта, которые символизируют строки в меню, которые похожи на бургер. Эта скрытая навигация указывает на то, что щелчок или касание откроют меню веб-сайта.
Эта скрытая навигация по меню получила широкое распространение несколько лет назад, главным образом потому, что в мобильных версиях веб-сайтов не было достаточно места для размещения всей основной навигации сайта, поэтому этот вариант меню навигации в виде гамбургера просто экономил место и делал вещи менее загроможденными .
В то время как гамбургер-меню начало использоваться как лучшая навигация по веб-сайтам на мобильных версиях веб-сайтов, вскоре оно стало популярным и в полных настольных версиях веб-сайтов, потому что веб-дизайнерам понравился простой и понятный вид.
Плохо ли гамбургер-меню для вашего сайта?
Согласно результатам нашего тестирования пользовательского опыта, гамбургерная навигация не является хорошим решением для настольной версии вашего веб-сайта. Вы должны использовать скрытую навигацию только тогда, когда это абсолютно необходимо, например, в мобильных меню или если на вашем веб-сайте слишком много страниц для отображения в основной навигации.
Например, несколько лет назад на предыдущем веб-сайте Blue Compass мы вкратце протестировали гамбургерное меню навигации, когда оно впервые стало известно как лучшая практика навигации в веб-дизайне. Это упростило внешний вид нашей домашней страницы, привлекая больше внимания к информации на странице. Используя методы исследования пользовательского опыта, мы провели A / B-тест на главной странице в течение трех месяцев — половине пользователей, перешедших на домашнюю страницу Blue Compass, была показана навигация по гамбургеру, а половине — полный пример навигации по веб-сайту.Мы собрали данные тысяч посетителей и проанализировали, как они взаимодействуют с лучшей навигацией по сайту, и увидели некоторые интересные результаты:
- 15,5% пользователей, которые использовали гамбургер-меню в качестве основной панели навигации, перешли на другую страницу.
- 27% пользователей, испытавших традиционную основную навигацию, перешли на другую страницу.
Это на 74% увеличение процента навигационных кликов на главной странице при использовании четкой прямой навигации!
Наша команда провела множество тестов взаимодействия с пользователем на веб-сайтах наших клиентов и каждый раз получала аналогичные результаты.Мы определили, что основная проблема со скрытыми меню — это принцип «вне поля зрения, из головы». Если посетители вашего сайта не могут легко видеть разделы вашего сайта, они с меньшей вероятностью будут посещать несколько страниц, а вы хотите, чтобы посетители тратили как можно больше времени на как можно большем количестве страниц.
Кроме того, гамбургерная навигация заставляет ваших посетителей выполнять дополнительный щелчок, чтобы попасть туда, куда они хотят. Если вы поставите себя на место своей аудитории — вы, вероятно, предпочтете иметь свободный доступ к тому месту, куда вы хотите пойти, вместо того, чтобы нажимать, чтобы увидеть параметры навигации.
Меню-гамбургеры выглядят красиво, но в конечном итоге вашей аудитории будет сложнее найти ваш контент. По этой причине мы считаем, что они больше не рекомендуются как лучшая навигация по веб-сайту. Таким образом, мы направим веб-сайты многих наших клиентов на отображение полной видимой навигации на рабочем столе. затем постепенно уменьшайте эти параметры по мере того, как устройство становится меньше, пока на мобильном устройстве не появится скрытое меню, в котором важна экономия места.
Не используйте скрытые меню и следуйте другим передовым методам навигации по веб-дизайну — по крайней мере, в настольной версии вашего веб-сайта.Позвольте вашим посетителям видеть несколько четких параметров навигации в любое время, где бы они ни находились на вашем сайте. Ваша аудитория оценит это, и ваши страницы, посещаемые за сеанс, должны улучшиться.
4 креативных примера навигации по веб-сайту, которые предлагают альтернативу навигации по гамбургерному меню
Гамбургер-меню было распространенным и лучшим выбором для навигации по веб-сайтам для адаптивного веб-дизайна за последние несколько лет, но есть еще несколько примеров навигации по веб-сайтам, которые соответствуют лучшим практикам навигации по веб-дизайну и проливают новый свет на меню веб-сайтов.Ниже мы продемонстрируем четыре сайта, которые отлично справляются со своей задачей, используя альтернативы навигации по гамбургер-меню.
1. Нижняя навигация
Как мы все знаем, чаще всего панель навигации располагается вверху страницы. Некоторые веб-сайты, такие как nstudio, потрясают своей нижней навигацией, и нам это нравится. Размещение навигации в нижней части веб-сайта позволяет пользователям сосредоточиться на основных элементах дизайна и функциональности. Мы все просматривали веб-сайт, на котором есть панель навигации, занимающая четверть экрана.Такие панели навигации не позволяют аудитории в первую очередь переходить к самому важному контенту.
Нижняя панель навигации по-прежнему предлагает чистый вид и прямой доступ к панели навигации, но она занимает меньше места в верхней части экрана. Кроме того, пользователи по-прежнему могут перемещаться по веб-сайту одним простым щелчком мыши. Никакого поиска меню, открытия и закрытия или заблудиться!
2. Четыре угла навигации
Подход с четырьмя углами очень уникален, но он действительно помогает сфокусировать взгляд на центре страницы.Эта альтернатива гамбургер-меню имеет простой, но неортодоксальный подход, который выделяет ее. Это лучший вариант навигации по веб-сайту для централизованно ориентированных макетов, как этот веб-сайт Proud & Punch. Это упрощенный подход к более стандартной навигации, который помогает пользователям выполнять поиск во всех «углах» вашего веб-сайта.
Крах такого дизайна? Это может сбивать с толку пользователей, которые не привыкли к такому типу навигации по сайту. Если вы рассматриваете подход с четырьмя углами, убедитесь, что страница простая, чтобы элементы навигации не терялись.Кроме того, наша команда веб-дизайна и разработчиков согласна с тем, что вам необходимо убедиться, что элементы достаточно велики, чтобы пользователи могли их быстро идентифицировать. Меньше всего вам хочется, чтобы кто-то запутался и покинул ваш сайт.
3. Вертикально-скользящая навигация
Вертикальная скользящая навигация появляется быстро, и мы не заметим, чтобы она в ближайшее время замедлилась. Что такое вертикальная скользящая навигация? Именно так это звучит! На изображенном выше веб-сайте District Mobility просто проведите пальцем по левой боковой панели, и появится вертикальная навигация.Этот тип дизайна занимает меньше места в верхней части страницы, что является огромным преимуществом для вертикальной интеграции.
Оставляет незагроможденный холст, что позволяет сосредоточиться на остальной части дизайна. Навигацию легко сканировать, если между элементами есть достаточный интервал. Нам нравится этот вид, потому что он оставляет в целом чистую эстетику.
4. Полноэкранная навигация
На этом примере навигации по сайту для Cotonificio Olcese меню — это дизайн.Такой дизайн, который покрывает весь экран, оставляет много места для пунктов меню без ущерба для стиля. Это дает четкую и прямую дорожную карту для навигации по веб-сайту. Простота — это глоток свежего воздуха, который побуждает вас взаимодействовать с сайтом.
Попробуйте один из этих примеров навигации по веб-сайту для вашего следующего веб-дизайна
Эти нетрадиционные стили навигации могут добавить немного веселья вашему сайту. Нашим экспертам по веб-дизайну из Айовы нравятся все эти варианты, потому что они уделяют основное внимание дизайну и функциональности, не жертвуя при этом важностью навигации.В следующий раз, когда вы будете работать над новым адаптивным дизайном, рассмотрите эти альтернативы. Какую бы альтернативу гамбургер-меню вы ни выбрали, мы рекомендуем вам запускать тепловые карты, тестирование UX и анализировать свою аналитику, чтобы увидеть, что является эффективным, а затем продолжать отслеживать и оптимизировать свой веб-дизайн.
Нужна небольшая помощь от Blue Compass для обновления вашего веб-сайта? Как отзывчивая компания, занимающаяся веб-разработкой и дизайном, мы можем помочь! Заполните нашу форму ниже, чтобы узнать, как мы можем вывести ваш веб-сайт на новый уровень.
Мак и сырMac and Cheese входит в команду Digital Bark-eting в Blue Compass. Он любит приветствовать членов своей команды, когда они приезжают в течение дня, поощрять веселые перерывы в течение рабочего дня и вздремнуть в разных местах по всему офису. Ему также нравится здороваться с клиентами и другими посетителями, особенно с почтальонами, которые привозят угощения! Mac — важная часть нашей команды цифровых экспертов в Blue Compass, где мы помогаем брендам добиваться успеха в Интернете с помощью стратегий веб-дизайна, разработки и цифрового маркетинга.
Свяжитесь с нами
Дополнительные комментарии и вопросы:
Предыдущий СледующийАнализ эффективности меню для гамбургеров
Скорее всего, вы видели «гамбургер-меню» в верхнем углу многих современных мобильных веб-сайтов.Это три линии, сложенные вместе и образующие примерно форму гамбургера. Он был создан как особенность дизайна веб-сайта, чтобы включить меню сайта, не занимая слишком много места.
Хотя гамбургер-меню служит своей цели уплотнения информации, достижения минималистской эстетики и сохранения незагроможденного сайта, оно может иметь существенные недостатки.
Назовете ли вы это боковое меню, панель навигации или гамбургер-меню, возможно, пришло время заменить его чем-то более удобным для взаимодействия с пользователем.Многие люди спорят о преимуществах использования гамбургер-меню в веб-дизайне, используя поговорку «вне поля зрения, из виду», чтобы утверждать, что сокрытие функций вашего сайта снижает вовлеченность пользователей в ваш сайт и не сулит ничего хорошего для коэффициента конверсии.
Идея меню, которое позволяет сохранить драгоценное пространство интерфейса, распространилась со скоростью лесного пожара по всему веб-дизайну и была быстро принята почти на всех веб-сайтах и в приложениях по всем направлениям. Возможно, сейчас уже слишком поздно вносить изменения, но все же стоит упомянуть о минусах гамбургер-меню, поскольку пользователи начинают искать изменения.
Набор инструментов для дизайна UX
Неограниченные загрузки: каркасы и шаблоны UX, наборы пользовательского интерфейса для Интернета и мобильных устройств, шаблоны HTML и многое другое!
Гамбургер-меню неэффективно
Одна из основных ловушек гамбургер-меню — это его заметное расположение в мобильных приложениях — в верхнем левом углу. Это самое труднодоступное место на мобильном устройстве для пользователя-правши, и оно не способствует вовлечению пользователя.
Пользователь также должен один раз коснуться меню, прежде чем увидеть, какие у него есть варианты, а затем нажать еще раз, когда он найдет нужный вариант.Они также должны пролистывать или «возвращаться» через несколько экранов, чтобы вернуться в гамбургер-меню, прежде чем продолжить навигацию по сайту.
Может показаться, что это немного, но это удваивает время, необходимое пользователю для доступа к нужной странице. Пользователи все больше осознают этот факт и жалуются на эффективность вездесущего гамбургер-меню.
На сегодняшнем сверхконкурентном рынке то, что отличает ваш сайт от других, должно быть в центре внимания, чтобы привлечь пользователей сразу же по прибытии.Когда ваш сайт запихивает весь свой контент в гамбургер-меню, вы рискуете, что ваши пользователи никогда не увидят, что делает ваш бренд особенным. Это снижает общую узнаваемость бренда и коэффициент конверсии и никак не способствует продвижению вашего продукта.
Источник изображения: Гамбургер-меню Кристины Бирд.
Люди могут предпочесть хот-доги
В то время как веб-дизайнеры быстро восприняли гамбургер-меню как революционный способ минимизировать дизайн сайта свежим, эстетичным способом, потребности пользователей были полностью проигнорированы.Многие пользователи не знают, что может предложить гамбургер-меню, и не утруждают себя щелчком по нему. Вместо этого они бродят по вашему сайту, бесплодно ища нужную информацию.
Между тем, сайты, которые придерживаются другого дизайна функционального меню, предоставляют своим пользователям легкий доступ ко всей информации на своем сайте с первого взгляда. Пользователям не нужно искать скрытые опции, и нет риска полностью пропустить информацию. Многие компании выбрали менее модный путь и вернулись к предыдущим типам меню, таким как меню, расположенные в верхней части страницы по горизонтали, и добились лучших результатов для пользователей.
МенюHamburger в конечном итоге делают контент менее доступным для обнаружения, и в эпоху, когда среднестатистические пользователи решают, останутся они или уйдут в первые 10 секунд просмотра страницы, быстрое обнаружение имеет решающее значение. Хотя дизайн гамбургера может выглядеть более привлекательно, его фактический уровень привлекательности для пользователей недостаточен.
Пользователям часто сложно понять гамбургер-меню, в то время как традиционные меню не могут не быть понятными сразу. Когда было слышно ворчание по поводу меню гамбургера, веб-сайты пытались облегчить недовольство пользователей, изменив меню, включив в него кнопку «Назад» или другие параметры, например поместив слово «Меню» поверх значка гамбургера, чтобы сделать его более удобным для пользователя.
Источник изображения: Дизайн меню боковой панели Энди Стоун.
Однако эти изменения только увеличили путаницу пользователей вокруг меню. Сейчас существует множество типов гамбургер-меню, и пользователи должны выяснить, какой гамбургер используется на вашем сайте, прежде чем они смогут правильно перемещаться по нему. Вместо того, чтобы предполагать, что гамбургер-меню является конечной точкой навигации по веб-сайту, вам следует рассмотреть другие варианты.
Как сломать форму
Во многих ситуациях вы можете оптимизировать гамбургер-меню для большего удобства использования или заменить его другим вариантом навигации.Иногда достаточно просто переместить гамбургер-меню в правую часть экрана, чтобы сделать ваш сайт уникальным и повысить вовлеченность пользователей, поскольку правши пользователям легче нажимать на правую часть.
В вашем гамбургер-меню вы также можете оптимизировать расположение опций после нажатия на них. В верхнем меню пользователи сосредотачивают свое внимание на первом и последнем элементах — именно здесь должна располагаться самая важная информация. Если ваше меню разворачивается в боковую панель, вам нужно расположить элементы от наиболее важных до наименее важных, поскольку пользователь просматривает параметры по вертикали.
Вы также можете вернуться к дням, предшествующим гамбургеру, с помощью удобных верхних меню или создать свой собственный вариант классического, например, в этом примере:
Источник изображения: Гамбургерное меню не работает.
GameStop использует анимированные значки для повышения удобства использования, при этом полностью избегая гамбургер-меню. Они определили приоритеты того, что их пользователи больше всего требуют от своего приложения, и включили их только в свое главное меню. Сайт по-прежнему выглядит чистым, свежим, без необходимости скрывать информацию в боковом ящике.
Этот значок и структура текста позволяют сжать текст, сохраняя при этом кнопку достаточно большой, чтобы ее можно было нажимать, несмотря на большие пальцы. Однако, если вы не можете сузить навигацию по сайту до нескольких опций, вы можете рассмотреть вариант текстового меню или создать свой сайт так, чтобы меню не требовалось. В любом случае подходите к своей технике навигации с учетом пользователя.
Ваше меню должно быть наглядным для пользователей, которые хотят свести к минимуму потерянное время, и при этом быть понятным.Это может быть трудным компромиссом, но это необходимая комбинация, если вы хотите максимального вовлечения пользователей. Если у вас возникли проблемы с расстановкой приоритетов для пунктов меню, подумайте с точки зрения пользователей. Например, вы можете гордиться своим блогом, но если пользователи посещают ваш сайт в первую очередь для просмотра ваших продуктов, блог не должен быть главным приоритетом.
Следуй своей интуиции
Если вам понравился гамбургер-меню или его разновидность, не пытайтесь изменить его со стороны тех, кто ищет новый вариант меню.Все еще есть пользователи, которые ручаются за удобство использования и привлекательность гамбургер-меню, особенно когда речь идет о разработке веб-сайта для мобильного использования, где пространство ограничено.
Несмотря на то, что гамбургер-меню находится в центре текущих споров, если по вашему сайту лучше всего перемещаться через гамбургер-меню, оставьте это так — просто убедитесь, что компоненты в вашем меню находятся на должном уровне и предназначены для оптимального взаимодействия с пользователем. Однако, если вы выбрали гамбургер-меню из-за лени, возможно, вы захотите пересмотреть свой выбор.
Начните думать о своем меню как о чем-то большем, чем о чем-то, что нужно убрать из поля зрения, а как о чем-то, что может повысить коэффициент конверсии — если выполняется правильно. Пользователи полагаются на ваше меню для навигации по сайту, и если их потребности не будут удовлетворены, они откажутся. Выбираете ли вы гамбургер или другой вариант меню, помните, что конечная цель одна и та же — повышение удобства для пользователя.
Спорный дизайн: плюсы и минусы гамбургерного меню
Любому веб-сайту, имеющему более одной страницы, необходимо меню.Это стандартный элемент веб-сайта и одна из немногих общих черт почти всех веб-сайтов.
Меню часто является одной из первых вещей, которые посетители ищут на вашем веб-сайте, поскольку это самый простой способ узнать, что содержит сайт, и как найти те части, которые им интересны.
Это все, чтобы сказать: ваше меню важно.
Это может иметь какое-то отношение к тому, почему отклонение от нормы в дизайне меню может быть спорной темой. Гамбургер-меню существует уже некоторое время, но с самого начала это был неоднозначный выбор дизайна.Еще в 2014 году TechCrunch прямо назвал это дьяволом. Но по мере роста использования смартфонов использование гамбургер-меню стало обычным дизайнерским выбором.
Что это за крошечный значок, который так раздражает людей?
Гамбургер-меню — это общий термин, используемый для описания маленького трехстрочного значка, который используется на многих веб-сайтах и в приложениях для представления большего меню. Чаще всего он отображается в верхнем левом углу (но не только), и при нажатии на него открывается полное меню.
Меню гамбургеров особенно популярно на мобильных веб-сайтах и в приложениях, где пространство ограничено, а найти меню с несколькими подходящими опциями сложно.Но вы также часто можете увидеть это на настольной версии веб-сайтов.
В меню гамбургеров есть своя доля ненавистников, но они служат определенной цели. У них была стойкость перед критиками по нескольким основным причинам.
Это причина, по которой гамбургер-меню существуют изначально, и почему большинство веб-сайтов, которые их развертывают, предпочитают это делать. При создании веб-сайта вы должны понять, как упаковать всю важную информацию, которая может понадобиться вашим посетителям, на небольшом пространстве. Меню гамбургера — эффективный способ получить больше возможностей навигации в меньшем пакете.
2. Они позволяют сделать веб-страницу более чистой.
Многие посетители (и дизайнеры) предпочитают эстетику минимализма — более чистые веб-сайты, включающие только элементы дизайна, необходимые для базового взаимодействия и функциональности. Когда на веб-сайте слишком много изображений и информации, упакованных на маленький экран, он может выглядеть неаккуратно и сбивать с толку. Использование гамбургер-меню сокращает объем работы посетителей при просмотре вашей веб-страницы.
Если у вас простой веб-сайт с пятью или менее страницами, включение их всех в главное меню на рабочем столе может не быть визуальной проблемой.Но для веб-сайтов с множеством разных страниц и категорий выяснить, как передать все это своим посетителям, не перегружая страницу, является сложной задачей. А слишком сложное меню может отвлекать посетителей от основной части страницы, на которую вы хотите привлечь их внимание.
Например, на веб-сайте электронной коммерции вы хотите, чтобы они сосредоточили внимание на ваших продуктах и информации, которая повышает вероятность их покупки. Но если в вашем магазине электронной коммерции есть товары, которые попадают в дюжину или более категорий, вы также хотите, чтобы посетители могли легко находить те, которые им интересны.Гамбургер-меню дает вам возможность убедиться, что посетители могут найти полный список категорий, при этом создавая каждую страницу так, чтобы привлечь внимание к продукту, на котором вы хотите, чтобы они сосредоточились.
4. К настоящему времени они знакомы большинству людей.
Любой элемент дизайна, содержащий функциональные возможности, должен быть интуитивно понятным для посетителей, иначе он не будет иметь смысла. Использование гамбургер-меню для экономии места на вашей веб-странице приведет к неприятным последствиям, если ваши посетители не поймут, что нужно щелкнуть по нему, чтобы увидеть параметры своего меню.Несколько лет назад это было серьезной проблемой, но к настоящему времени большинство посетителей знают, что означает гамбургер-меню, когда они его видят. Вы можете разумно предположить, что они не оставят ваш сайт в недоумении относительно того, как найти меню.
Но акцент на и на здесь сделан намеренно. Меню гамбургеров интуитивно понятно для всех, кто регулярно пользуется смартфоном, или для тех, кто проводит достаточно времени в Интернете, чтобы привыкнуть к обычным элементам веб-дизайна. Если ваша целевая аудитория включает людей, которые, скорее всего, не проводят много времени за мобильными устройствами или просматривают веб-страницы, есть вероятность, что они все еще недоумевают от вашего гамбургер-меню.Как и во всем веб-дизайне, сначала подумайте, кто ваша аудитория и что для нее имеет смысл.
5. Вы можете использовать их для устранения отвлекающих факторов без потери функциональности.
Меню гамбургеров часто используются вместо главного меню веб-сайта, но это не единственное возможное их использование. Некоторые веб-сайты используют их вместе со своим главным меню, чтобы предоставить дополнительные параметры или дополнительную информацию, которая не помещается на главной странице.
Убрав со страницы визуальные отвлекающие факторы, вы сможете более эффективно удерживать внимание посетителей на основной части информации, которую вы хотите, чтобы они заметили.Гамбургер-меню может помочь вам в этом, не удаляя при этом другие варианты, которые посетители могут захотеть полностью использовать.
Мы рассмотрели причины, по которым он нравится, так почему же он до сих пор имеет плохую репутацию? Критики гамбургер-меню отмечают несколько основных проблем с ним.
1. Это делает ваши параметры навигации менее заметными.
Когда ваше главное меню отображается на странице все время, каждый посетитель может быстро увидеть основные категории и параметры страницы, не выполняя никаких дополнительных действий.Когда вы помещаете всю эту информацию за значком гамбургера, внезапно только часть посетителей — те, которые выбирают щелчок — будет иметь эту информацию.
Это может сделать поиск того, что они ищут, немного сложнее и неинтуитивно для посетителей. И это может означать, что некоторые посетители не будут искать страницы, которые им были бы интересны, если бы они знали, что это вариант, потому что они никогда не видят ссылки на них.
Дополнительный щелчок не звучит нравится такая большая работа. Но с точки зрения того, как мы пользуемся Интернетом, добавление любого дополнительного шага к процессу — каким бы простым оно ни было — становится барьером, который многие пользователи просто не преодолеют.Простота использования имеет первостепенное значение для веб-дизайна. Вы хотите, чтобы посетители могли видеть и делать на вашем сайте все, что вы хотите.
Заметить, что на веб-сайте есть гамбургер-меню, щелкнуть по нему, а затем просмотреть параметры навигации — это еще больше работы для ваших посетителей. Многие вообще не будут возражать, но некоторые не станут беспокоиться. И для этих людей вы теряете шанс увидеть важную навигационную информацию.
3. Люди могут это не заметить.
Значок «гамбургер» отчасти привлекателен тем, что он маленький и необычный, но это также может быть его недостатком.Вот почему так легко полностью упустить из виду. Многие из ваших посетителей, особенно те, которые проводят много времени за мобильными устройствами, инстинктивно узнают, что нужно искать его при поиске пунктов меню.
Но ваша аудитория вполне может включать людей, которые не ищут автоматически значок гамбургера. Для них скрытие вашего меню за значком может означать, что они никогда не замечают ваши пункты меню и не утруждают себя изучением вашего веб-сайта так, как могли бы в противном случае.
Многие веб-сайты не только используют категории для организации своих страниц или продуктов, но также имеют ряд подкатегорий.В зоомагазине могут быть типы животных в качестве основного уровня категорий (собаки, кошки, кролики и т. Д.), А затем подкатегории для каждого типа продуктов, которые они продают для каждого животного.
Когда главное меню расположено в верхней части экрана, эти подкатегории легко добавить в раскрывающееся меню. С гамбургер-меню можно добавлять подкатегории под каждым пунктом главного меню в вашем списке, но структура дизайна не так естественна для многоуровневого меню этого типа.Если структура вашего веб-сайта включает множество подкатегорий, гамбургер-меню может не иметь для вас особого смысла.
5. Это может снизить вовлеченность.
Исследование, проведенное Nielsen Norman Group в 2016 году, изучило, насколько вероятно, что посетители на самом деле будут использовать скрытые параметры навигации, такие как те, что находятся за гамбургер-меню. Они обнаружили, что пользователи настольных компьютеров делали это только в 27% случаев и что они использовали более заметные меню почти в два раза чаще. На мобильных устройствах скрытые параметры навигации оказались лучше, но по-прежнему уступали веб-сайтам, которые использовали комбинацию скрытых и видимых параметров навигации.
Это говорит о том, что многие из ваших посетителей просто не будут беспокоиться о том, чтобы делать дополнительный шаг по поиску и переходу по ссылкам, которые вы размещаете за гамбургер-меню, что может привести к снижению уровня вовлеченности на вашем веб-сайте.
Знание общих плюсов и минусов полезно для оценки вашего выбора, но в конечном итоге это зависит от того, что имеет смысл для вашей аудитории. А если вы не уверены, лучший вариант — протестировать.
В то время как Nielsen Norman Group нашла явные доказательства того, что следует избегать скрытых меню, более свежий тест, опубликованный в CXL, показал, что использование гамбургер-меню фактически увеличивает доход для бизнеса электронной коммерции.В данном конкретном случае посетители веб-сайта преимущественно использовали его с мобильных устройств. И они обнаружили, что размещение значка на розовом фоне и добавление слова «Меню» дали еще лучшие результаты.
Означает ли это, что вам нужно прямо сейчас добавить розовое гамбургер-меню на свой сайт? Неа!
Они решили, какие варианты меню попробовать, основываясь на дизайне своего текущего веб-сайта и данных о том, как люди его просматривали. Чтобы понять, что имеет смысл для вашего веб-сайта, выполните следующие 3 шага:
- Посмотрите, что ваша текущая аналитика говорит вам о ваших посетителях: кто они, какие устройства используют для посещения вашего веб-сайта и как они взаимодействуют с сайтом. Теперь.
- Основываясь на ваших текущих данных, разработайте гипотезу о том, какие пункты меню, по вашему мнению, могут работать лучше, чем те, которые у вас есть сейчас (если таковые имеются).
- Настройте A / B-тесты, чтобы убедиться, что ваша гипотеза верна.
Вы никогда не захотите добавлять элемент дизайна на свой веб-сайт, потому что слышали, что он модный, или чувствуете, что должны это делать. Всегда учитывайте, что имеет смысл для вашего конкретного сайта и, что еще более важно, для ваших посетителей.
Если вы взвесили все «за» и «против», проанализировали свою аналитику, рассмотрели свою аудиторию и решили, что гамбургер-меню — правильный выбор для вашего веб-сайта, теперь вам нужно знать, как это сделать.
Если у вас есть сайт WordPress, у вас есть два основных метода добавления меню:
- Выберите тему с гамбургер-меню
- Используйте плагин
Первый вариант, вероятно, имеет наибольший смысл, если вы создание нового веб-сайта или рассмотрение полного редизайна. В этом случае, просматривая параметры вашей темы, обратите внимание на ту, в которой уже есть гамбургер-меню. Здесь вы можете найти список популярных блюд, в которых уже есть гамбургер-меню.
Если вы хотите добавить гамбургер-меню на свой существующий веб-сайт, не выполняя полную переделку сайта, у вас есть несколько различных вариантов плагина на выбор. Два самых популярных варианта — это плагин Responsive Menu и плагин Slick Menu. Оба позволят вам настроить внешний вид вашего меню и убедиться, что вы можете настроить его без необходимости кодирования.
Гамбургер или нет? На ваше усмотрение
Каждый веб-сайт индивидуален, и решение о том, что подойдет вам, зависит от вас.Меню гамбургеров — еще один элемент дизайна, который расширяет возможности вашего сайта. Они могут помочь вам делать больше с меньшими затратами на имеющемся у вас пространстве или вы можете решить, что они, скорее всего, запутают ваших посетителей больше, чем они того стоят.
Какой бы выбор вы ни сделали, держите своих посетителей в курсе событий и убедитесь, что вы создаете веб-сайт, который будет работать на них.
Кристен Хикс — внештатный писатель из Остина, постоянный ученик и постоянно стремится узнавать что-то новое.Она использует это любопытство в сочетании с ее опытом работы в качестве внештатного владельца бизнеса, чтобы писать о предметах, ценных для владельцев малого бизнеса, в блоге HostGator. Вы можете найти ее в Твиттере по адресу @atxcopywriter.
СвязанныеСекреты высокой вовлеченности в гамбургер-меню
Многие дизайнеры используют гамбургер-меню в своей навигации и задаются вопросом, почему пользователи не открывают его. Прежде чем использовать гамбургер-меню, важно понять, как пользователи ориентируются.Не только это, но также важно отличать меню от значка и обращаться к ним с собственными именами.
Соглашение о правильном именовании
Большинство идентифицируют значок с тремя полосами на панели навигации как «гамбургер-меню». Однако этот термин является неправильным с технической точки зрения. Значок и меню — это два отдельных компонента. Значок выглядит как гамбургер, а в меню — нет. Соглашения об именах компонентов должны отражать их функциональность знакомым и запоминающимся образом.
Например, компоненты «аккордеон» и «карусель» работают как их реальные объекты.Настоящий аккордеон может расширяться и сжиматься, а настоящая карусель может вращаться в двух направлениях. Однако гамбургер-меню выдвигается со стороны экрана, как выдвижной ящик. Таким образом, его следует называть меню ящика, а не гамбургер-меню. Однако этот значок можно назвать значком гамбургера. Эта статья будет относиться к компонентам в этих терминах.
Проблема с меню выдвижного ящика
Меню выдвижного ящика не всегда были задействованы. Многие исследования показали, что пользователи не нажимают на значок гамбургера во время навигации.Основная причина этого — отсутствие предсказуемости. Это абстрактный значок, не имеющий информационной подсказки, указывающей, какой контент скрывается за ним. Следовательно, нет стимула нажимать на нее. Если пользователи не могут предсказать результат нажатия кнопки, они не будут использовать ее. Этот сценарий происходит с большинством приложений, использующих меню выдвижных ящиков.
Некоторые дизайнеры предложили в качестве решения поставить метку «меню» рядом со значком гамбургера. Вы можете получить еще несколько кликов, но этот подход в конечном итоге не срабатывает, потому что он по-прежнему не соответствует тому, о чем думают пользователи во время навигации.
Пользователи думают о той информации, которую они хотят, и ищут соответствующий ярлык элемента, а не слово «меню». Когда они видят соответствующий ярлык предмета, это информационный сигнал, который им нужен, чтобы заинтересовать их. Это явление известно как распознавание образов.
Сопоставьте метку предмета с ментальным объектом
Для распознавания образов пользователям необходимо сопоставить информацию, которую они видят на интерфейсе, с информацией, уже сохраненной в их сознании.Когда есть точное мысленное совпадение между названием элемента в уме и тем, что они видят на экране, навигация происходит быстрее всего. Когда есть примерное совпадение, навигация замедляется до умеренной скорости, но все равно остается удовлетворительной. В случае несоответствия навигация будет самой медленной, а взаимодействие с пользователем — самым низким.
В идеале вы должны разместить метки элементов, которые соответствуют мысленному объекту пользователя, на панели навигации, чтобы дать пользователям точное совпадение. Однако невозможно перечислить все элементы на панели, когда их так много, а пространство на экране ограничено.
В этом случае вы должны стремиться к приблизительному совпадению, сгруппировав свои предметы в категории более высокого уровня. Затем поместите ссылку на эту категорию на панели навигации, чтобы вызвать меню ящика. Когда пользователь щелкает по нему, он открывает этот конкретный раздел меню ящика.
Например, если меню содержит следующие элементы, название категории более высокого уровня будет «Продукты». Вы должны создать раздел под названием «Продукты» в меню вашего ящика. На панели навигации вы разместите ссылку «Продукты».Щелчок по этой ссылке открывает в ящике раздел продуктов.
В результате меню выдвижного ящика станет более активным, потому что панель навигации отображает узнаваемую метку элемента, которая соответствует их мысленному объекту. Ярлык «Меню» не соответствует мыслительному объекту пользователя и не вызовет такого интереса. Ярлык «Продукты» может не точно совпадать с товаром пользователя, но это приблизительное совпадение, которое позволяет им ассоциировать его как продукт.
Вы можете освободить место на панели навигации и добавить другие категории более высокого уровня, которые открывают различные разделы меню ящика.Все, что вам нужно сделать, это придумать правильные ярлыки категорий, которые охватывают элементы.
Несколько исследований подтверждают, что размещение меток элементов на панели навигации приводит к более активному взаимодействию, что приводит к большему количеству просмотров страниц и транзакций. Они также демонстрируют, что пользователи с большей вероятностью будут нажимать на текстовые ссылки, соответствующие их мысленному объекту, над значком гамбургера.
Для мобильных устройств
Этот подход легко применить к панели навигации рабочего стола, но на мобильной панели это сложнее, потому что на ней еще меньше места на экране.Типичная мобильная панель содержит логотип, служебные значки и поле поиска, в котором не так много места для ярлыков элементов.
