Актуально ли применение меню‑гамбургера на сайтах?
Аудио перевод статьи
Часто на самых инновационных дизайн решениях мы можем увидеть использование меню-гамбургер.
Он позволяет спрятать элементы навигации для того, чтобы в освободившемся месте дизайнер мог осуществить свои творческие идеи. Но насколько уместно и востребовано для пользователя его использование?
Скорость работы с сайтом
Исследование NNGroup направлено на проверку гипотезы: замедляет ли меню-гамбургер работу с сайтом?
В удаленном юзабилити-тестировании приняло участие 179 человек. Испытуемым нужно было найти определенную информацию на мобильных и десктопных версиях сайта с разными типами навигации.
На сайтах с гамбургер-меню, просматриваемых через компьютер, информацию находили в 54% случаев, а на мобильных версиях — в 64% случаев.
В то время, как на десктопных версиях сайтов с классическим или смешанным меню, информацию находили гораздо чаще: 77% и 80% соответственно.
Самые лучшие результаты поиска показали мобильные версии сайтов со смешанной навигацией — 85%.
NNGroup: “Меню-гамбургер негативно влияет на скорость работы с сайтом и поиск компонентов меню”, 2016 год
В этом же исследовании выяснилось, что пользователи тратят гораздо больше времени на поиск нужной информации на сайтах с гамбургер-меню, нежели с видимой навигацией. На десктопных версиях сайтов гамбургер замедлил поиск информации на 39%, а на мобильных версиях — на 15%.
Более того, люди тратят больше времени, чтобы воспользоваться гамбургер-меню, по сравнению с видимой навигацией: на десктопной версии сайта — на 5-7 секунд больше, а на мобильных версиях или в приложениях — на 3-5 секунд больше.
NNGroup: “Меню-гамбургер негативно влияет на скорость работы с сайтом и поиск компонентов меню”, 2016 год
Гамбургер замедляет и усложняет процесс поиска нужной информации на сайте. К тому же, в отличии от видимой навигации, людям требуется больше времени, чтобы воспользоваться “гамбургером” как на десктопных, так и на мобильных версиях сайта.
Как взрослая аудитория относится к гамбургер-меню?
Исследование Люка Вроблески направлено на изучение того, сложно ли пользователям более возрастной группы распознавать иконки меню-гамбургера.
В исследовании приняло участие 15 человек. Пока участники занимались поиском конкретной информации на сайте, в это же время отслеживалось, догадаются ли они, что три горизонтальные полоски подразумевают под собой меню или будут использовать другие методы поиска.
В результате, 3 человека из 15 искали информацию на сайте при помощи меню-гамбургера, а остальные 12 человек игнорировали иконку и пытались выполнить задание с помощью прокрутки и других способов. Более того, оказалось, что 9 из 10 пользователей в возрасте 30-50 лет не знают, что такое меню-гамбургер, как он выглядит и для чего используется.
Люк Вроблески: “Взрослая аудитория испытывает сложности при взаимодействии с меню-гамбургером”, 2014 год
В исследованиях Нильсен Норман Групп за 2019 год представлена следующая статистика: способность аудитории 25-60 лет использовать веб-сайты ежегодно снижается на 0,8% из-за скрытой и интуитивно не понятной навигации.
Взрослая аудитория не может найти нужную информацию на сайте, поскольку не понимает, что означает иконка гамбургер-меню.
Исследования Нильсен Норман Групп, 2019
До сих пор не все пользователи знают что такое меню гамбургер, особенно люди старше 30-50 лет. Поэтому они вынуждены искать информацию при помощи прокрутки или других способов, которые значительно увеличивают время поиска.
Стоит учесть, что с каждым годом всё больше и больше пользователей отказываются от взаимодействия с сайтом из-за скрытой или непонятной навигации.
Резюме
Меню гамбургер создает дополнительный шаг, таким образом замедляя и усложняя процесс поиска навигации на сайте. В условиях высокой конкуренции, это является весомой причиной, чтобы отказаться от его использования в коммерческих проектах. Особенно в проектах, рассчитанных на пользователей возрастной категории от 35 лет и старше. Для данной возрастной аудитории меню-гамбургер является непонятным элементом и в большинстве случаев полностью игнорируется.
Если количество разделов меню настолько велико, что не помещается в размеры экрана, то лучший вариант — когда часть разделов открыта, остальная скрыта в меню-гамбургер. По опыту рекомендуем вам использовать этот вариант как самый оптимальный.
Иконки Hamburger — скачивайте бесплатно в PNG и SVG
Иконки
Иконки
Иллюстрации
Фото
Музыка
Все стили
Все типы
Все типы
Анимированные
Статичные
Все дизайнеры
Все дизайнеры
Icons8
Сторонние
Перекрасить
Чизбургер
Бургер из говядины
Бургер из говядины
Бургер из говядины
Beef Burger
Бургер из говядины
Чизбургер
Чизбургер
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Меню
Не хватает иконки? Мы ее нарисуем
Опишите, какая иконка вам нужна, и мы нарисуем её бесплатно в любом из наших стилей.
Что такое гамбургер-меню?
Что, если я скажу вам, что на веб-сайтах и смартфонах есть гамбургеры? Вы, наверное, думаете, что я полностью потерял его после того, как отказался от лекарств. Но это абсолютно верно, я не шучу.
Сегодня, когда вы открываете приложение на своем смартфоне или некоторые веб-сайты, вы можете видеть гамбургер — то есть значок меню гамбургера.
Что такое меню гамбургеров?
Меню гамбургеров (которое не поставляется с дополнительным заказом картофеля фри) представляет собой три горизонтальные линии, которые вы видите сейчас в верхней части многих экранов, либо в крайнем левом, либо в крайнем правом углу.
На самом деле это значок.
Коснувшись, коснувшись или нажав на значок, он открывает боковое меню с выбором параметров или дополнительных страниц.
Некоторым разработчикам нравится трехстрочный значок меню в виде гамбургера, потому что он позволяет им включать больше функций в свои приложения или навигацию.
Крошечная иконка занимает минимум места на экране. Это придает приложению или сайту чистый минималистский вид.
Пользователю приложения или посетителю веб-сайта достаточно просто нажать кнопку, чтобы открыть и закрыть меню.
По крайней мере, вы так думаете.
Тем не менее, другие разработчики и некоторые пользователи совершенно ненавидят значок меню-гамбургер или просто озадачены им. Почему? Потому что не для всех пользователей очевидно, что три строки на самом деле являются значком меню, и они не сообщают пользователям, что там находится.
Кто «изобрел» значок меню гамбургера?
Изобретателем значка меню гамбургера является человек по имени Норм Кокс. Он сделал значок бургера для Xerox Star, первого в мире графического пользовательского интерфейса. Это было более трех десятков лет назад.
После этого значок исчез.
Иконка трехстрочного меню начала появляться сравнительно недавно, с появлением мобильных устройств.
Например, в 2008 году он появился в приложении Twitter, Tweetie.
Затем в 2009 году он появился в приложении Voice Memos для iPhone 3GS.
«Я смеюсь над тем вниманием, которое в последнее время привлекает этот маленький символ «гамбургер», — сказал Кокс в интервью Small Business Trends.
«Примерно девять месяцев назад я не думал о «капли в моем ведре дизайнерской карьеры» более 30 лет!»
«Учитывались только несколько символов», — добавил Кокс. «Один символ представлял собой направленную вниз стрелку в форме треугольника, указывающую направление, в котором должно появиться результирующее меню. Мы решили, что этот символ слишком часто интерпретируется как указатель. Мы думали об использовании звездочки (*) или плюса (+), но они казались слишком абстрактными».
Кокс сказал, что изображение гамбургера с тремя линиями оказалось в самый раз. «Этот символ был визуально простым, легко объяснимым и функционально запоминающимся. Три строки — идеальное число», — добавил Кокс.
Какие веб-сайты или приложения используют этот печально известный значок меню гамбургера?
Некоторые из известных имен, которые используют значок гамбургера в своих приложениях, включают Gmail, Facebook, Reeder, Twitter и Starbucks.
И теперь веб-сайты и браузеры также используют значок трехстрочного меню. Примером этого являются браузеры Chrome и Firefox, использующие меню в правом верхнем углу. Меню-гамбургер скрывает все параметры, настройки и расширения. А значок светится оранжевым, когда что-то в браузере нужно исправить или обновить.
Time.com — это пример крупного веб-сайта, на котором используется гамбургер-меню — в данном случае в верхнем левом углу. Когда вы нажимаете на значок трехстрочного меню, появляется слайд со ссылками на дополнительный контент.
Некоторые эксперты отмечают, что функции гамбургер-меню почти не используются.
Прежде всего, многим еще предстоит выяснить, что 3 горизонтальные линии на самом деле являются иконкой меню, а не просто изображением.
Во-вторых, значок гамбургера делает информацию в скрытом меню «с глаз долой, из памяти». Если они на самом деле не нажмут или не коснутся значка трехстрочного меню, они не увидят там вариантов.
Действительно, в случае с Time.
com слово «меню» пришлось добавить под значком, чтобы было более понятно, что это за символ.
Меньшая зависимость от меню гамбургера
Различные разработчики выразили свое недовольство значком гамбургера и его недостатками.
Некоторые отказываются от использования значка, несмотря на его модность.
Но самой известной компанией, внесшей изменения, является Facebook. Чтобы быть абсолютно ясным, Facebook никогда публично не заявлял, что хочет полностью избавиться от него. Но Facebook раскрывает некоторые мобильные функции, которые ранее были скрыты за значком гамбургера.
Теперь они отображаются на горизонтальной панели в нижней части экрана, называемой панелью вкладок.
Нижняя панель вкладок занимает немного больше места на экране, но делает некоторые функции более очевидными.
Мы поговорили с Мриналом Десаи, генеральным директором и соучредителем Addappt. Он также стоял за Crossloop, краудсорсинговым приложением для удаленных технологий, которое в конечном итоге было продано AVG Anti-Virus.
«Меню гамбургеров на самом деле не для настроек», — сказал Десаи в интервью Small Business Trends. «Это почти как «больше», или можно даже думать об этом как об альтернативе «панели вкладок». Редко можно увидеть и то, и другое, но мы в Addappt изучили это с помощью прототипа, но в конечном итоге решили пойти по пути «панели вкладок».
«Эти решения часто зависят от цели приложения. Значок гамбургера имеет тенденцию отодвигать функции на второй план, тогда как панель вкладок делает их более очевидными», — добавил Десаи.
Создатель значка гамбургера получает последнее слово
Итак, стоит ли использовать значок меню гамбургера на собственном веб-сайте, в мобильной теме или в приложении?
Мы думаем, что последнее слово должно быть за первоначальным разработчиком иконки.
«Долговечность символа (с 1980-х годов) является свидетельством его простоты, полезности, обучаемости и запоминаемости», — сказал Кокс, когда его спросили о призывах убить значок гамбургера.
«Стремиться «убить» или «упразднить» инструмент пользовательского интерфейса или виджет на основе плохого использования или реализации — это немного недальновидно и чрезмерно реактивно».
Гамбургер, красный значок Фото через Shutterstock
Здесь
173 публичных репозитория
соответствует этой теме… Добавьте описание, изображение и ссылки на
гамбургер-меню
страницу темы, чтобы разработчикам было легче узнать о ней. негоми
/
реагировать-бургер-меню
Звезда
4,8к гокулкриш
/
демо-прогрессивное веб-приложение
Спонсор
Звезда
877 mbj36
/
vue-burger-меню
Звезда
729 луукдв
/
гамбургер-реакция
киок46
/
ReactNative-Анимация-Вызовы
Звезда
363 Джонатантрибухаре
/
JTHamburgerButton
Звезда
356 Звезда
299
веб-падаван
/
ванильный гамбургер
Звезда
115 ашазар
/
TabDrawer
ДьедоннеАва
/
отзывчивая навигационная панель
Звезда
72 привидение
/
стройные гамбургеры
Звезда
56 VitorLuizC
/
vue-burger-кнопка
Звезда
42 азимхасни
/
реагировать родной анимированный гамбургер
Звезда
26 ловкость
/
АнимированныйToggleMenu
нацар
/
Semantic-UI-гамбургер-меню
Звезда
24 Дамианваджер
/
мл-стек-навигация
Звезда
20 рейнджер163
/
РаздвижноеМенюНавигация
Звезда
16 катавала
/
экспо-гамбургер-меню-шаблон
Звезда
19 кодбакс27
/
reactjs-гамбургер-меню
Тиллман32
/
XFMenu
Звезда
11 Улучшить эту страницу
