Актуально ли применение меню‑гамбургера на сайтах?
Аудио перевод статьи
Часто на самых инновационных дизайн решениях мы можем увидеть использование меню-гамбургер.
Он позволяет спрятать элементы навигации для того, чтобы в освободившемся месте дизайнер мог осуществить свои творческие идеи. Но насколько уместно и востребовано для пользователя его использование?
Скорость работы с сайтом
Исследование 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 лет и старше. Для данной возрастной аудитории меню-гамбургер является непонятным элементом и в большинстве случаев полностью игнорируется.
Если количество разделов меню настолько велико, что не помещается в размеры экрана, то лучший вариант — когда часть разделов открыта, остальная скрыта в меню-гамбургер. По опыту рекомендуем вам использовать этот вариант как самый оптимальный.
Панель ссылок, как альтернатива гамбургер-меню
Недавно проведенные AB тесты показали, что на многих мобильных версиях сайтов электронной коммерции можно наблюдать увеличение скорости конверсии, добавив панель навигационных ссылок вверху домашней страницы вместо того, чтобы полагаться исключительно на гамбургер-меню. Мы называем это «Верхняя панель навигационных ссылок» или просто «панель ссылок». Панель ссылок является альтернативой ненавистному «гамбургер-меню», которое скрывает ссылки за знаменитыми тремя полосками (гамбургером). Просто загуглите “hamburger menu” и вы увидите в топ-5 результатов статьи, критикующие гамбургер-меню! В этой статье мы обсудим концепцию панели ссылок на примере двух AB тестов, в которых мы увидели увеличение посещений страниц продуктов и увеличение коэффициента конверсии покупок.
Мы также покажем примеры дизайна популярных онлайн-магазинов, которые по-разному реализуют концепцию панели ссылок. Наша гипотеза заключается в том, что панель ссылок позволяет покупателям быстрее загружать страницы продуктов, отобразив ссылки на страницы продуктов и категорий, которые обычно скрыты в гамбургер-меню. Требуется меньше кликов, а ссылки более заметны, поэтому увеличивается вероятность того, что пользователи перейдут по «нисходящей воронке» и посмотрят продукты. Давайте перейдем к нашим тематическим исследованиям.
Панель ссылок в мобильной версии сайта магазина одежды увеличит число заказов на 5%Примечание: Мы также можем проанализировать ваш опыт работы с мобильным интернет-магазином. Узнайте больше о том, что мы здесь делаем, или присоединитесь к списку рассылки, чтобы получать на email новые статьи, подобные этой.
У нас есть продавец одежды, в онлайн-магазине которого более 1000 товаров, разделённых на 9 категорий (и несколько подкатегорий).
Итак, довольно стереотипная компания электронной коммерции. Как выглядела домашняя страница в мобильной версии сайта? Поскольку мы сохраняем анонимность клиентов, давайте используем домашнюю страницу сайта известного бренда, имеющего аналогичный макет: Urban Outfitters. Основные характеристики этой домашней страницы (аналогичная ситуация с домашней страницей сайта нашего клиента):
- Большие изображения без полей, которые изменяются в зависимости от текущей маркетинговой кампании (примерно раз в месяц)
- Основная навигация скрыта в гамбургер-меню
- Если вы прокрутите страницу вниз достаточно далеко, в конечном итоге вы увидите ссылки на категории
Вот тестируемые варианты: В этом варианте мы просто добавили панель ссылок, только на главную страницу сайта. Там было 9 категорий. Заметьте, что мы не заменили гамбургер-меню, оно все еще существует и по-прежнему является наиболее полным способом навигации по различным категориям продуктов. Но теперь самый простой способ навигации – панель ссылок Панель ссылок можно было прокручивать влево-вправо и у нее были стрелки, указывающие на эту функцию.
Просмотры страниц категорий товаров показали явное увеличение на 10% — 12% (с долей вероятности 99% +), подтвердив одну из наших критических гипотез о том, что панель ссылок отправит больше пользователей «вниз по воронке». Например, вот ссылка на первую категорию, которую мы добавили слева от быстрой панели ссылок (например, ссылка «TOPS» в макете «B» выше): Две другие страницы категорий показали аналогичный результат. Но увеличение просмотров страниц было заметно только для тех ссылок на категории, что лежали «на поверхности»: Как насчет ссылок, которые были «скрыты за прокруткой», другими словами, когда нужно было использовать либо стрелку, либо прокрутить вправо, чтобы открыть их? Для этих ссылок не было изменений в количестве просмотров страниц: И так было со всеми ссылками на страницы категорий, скрытыми за прокруткой. Это подтверждает первоначальную гипотезу этого теста:
Отображение ссылок на страницы продуктов и категорий увеличивает количество клиентов, перешедших по ним.
Скрытие всех ссылок за гамбургер-меню делает сайт не благоприятным с точки зрения нахождения покупателями товаров. Выводы для вашего мобильного сайта:
- Пробуйте размещать ссылки на наиболее популярные категории товаров в верхней части главной страницы вашего мобильного сайта.
- Попробуйте сделать панель прокручиваемой и посмотреть, можете ли вы повторить результат нашего теста в своем магазине.
- Видите ли, вы признаки увеличения количества выполненных заказов, как в нашем тесте? Возможно, ваш магазин покажет более точное увеличение коэффициента конверсии, чем небольшое увеличение, которое мы видели выше.
Затем мы протестировали бренд электронной коммерции, работающий в области здорового питания, и имеющий 3 продукта (3 разных вкуса одного товара).
В этом случае из 3-х вкусов второй и третий показали значительное увеличение просмотров страниц (шоколад и клубника в макете выше): + 25% посещений и 77% с 99,9% статистической значимостью и более 600 конверсий.
Но самый популярный вкус не показал большого увеличения. Почему? Сайт был известен своим самым популярным вкусом. Исторически сложилось так, что на момент запуска бренда, это был единственный вкус. Реферальные ссылки непропорционально вели на эту страницу, ссылки в блогах непропорционально связаны с этим вкусом, а изображения на главной странице и текст в основном говорили о нем. Таким образом, в этом случае панель ссылок помогала большинству клиентов открыть для себя остальные предложения компании. Это приятное дополнительное преимущество панели ссылок. Обратите внимание, что эти альтернативные вкусы также находились в гамбургер-меню, но, как мы видели в первом примере, размещение прямых ссылок на них (через панель ссылок) показало увеличение числа посетителей для этих страниц.
Оба этих теста двух очень разных магазинов электронной коммерции (1000 товаров против 3 товаров), демонстрируют аналогичный вывод: Сделайте для мобильных покупателей доступ к вашим продуктам максимально простым.
Если у вас сотни или тысячи товаров, поместите ссылки на самые популярные категории как можно ближе к краю экрана. В первом примере, рассмотренном выше, естественная итерация теста (который еще не был протестирован) состояла в том, чтобы уложить ссылки в стек вместо того, чтобы они были в одной прокручиваемой строке. Это даст покупателям еще лучший обзор предложений магазина. Это должно послать еще больше посетителей «вниз по воронке». Если у вас есть лишь несколько продуктов, создайте верхние ссылки навигации на страницах подробных сведений о продукте. 
Это не значит, что вам надо опустить руки и ничего не тестировать. И не стоит использовать старомодный метод «устройте дебаты в комнате, кто будет кричать громче всех, тот и победил».
Кроме того: когда-то наш клиент, дизайнер интерьера, спросил, можно ли реализовать гамбургер-меню в декстопной версии сайта, потому что оно «выглядело гламурным». (Фейспалм)
Вот почему тестирование важно, даже если вы не получите идеальных показателей коэффициента конверсии (статистическое значение 99% и тысячи конверсий в течение многих недель).
Как насчет декстопных версий сайтов? Почему это касается только мобильных?Причина, по которой это не актуально для десктопных версий сайтов, состоит в том, что почти у всех сайтов электронной торговли доступны ссылки на все категории (и часто выпадающие списки подкатегорий, ака «мега-меню»). Так что это по определению почти всегда уже реализовано в десктопной версии сайта. Просто в гамбургер-меню мобильных устройств имеются пространственные ограничения.
Надеемся, что эта статья и данные, которыми мы поделились, помогут вам отойти от шаблона гамбургер-меню и начать открывать другие возможности. Предложенные нами варианты – не единственный способ реализации панели ссылок. Вот еще несколько примеров альтернативы гамбургер-меню разных мобильных сайтов электронной коммерции.
Вот несколько брендов, имеющих четкие ссылки в верхней части главной страницы мобильной версии сайта. Это позволило им не зависеть от гамбургер-меню:
Gap.comНа сайте Gap множество продуктов и категорий. На главной странице их мобильного сайта вверху есть ссылки на главные категории товаров: Использование фотографий – это эстетически красиво и, возможно, увеличит взаимодействие пользователей со ссылками. Обратите внимание, что ссылки не привязаны к прокрутке, тогда как ссылки на Gap Incs другие бренды в верхней части страницы.
Интересно.
Abercrombie выбирает простое разделение одежды на мужскую и женскую. Стоит попробовать сравнить этот вариант с более глубокой категоризацией, как на сайте Gaps выше:
Lowe’sLowes.com – это отличный пример поиска и использования рекомендаций, чтобы продвигать ссылки на некоторые категории. Раньше мы не заходили на сайт Lowes.com с этого смартфона, поэтому в рекомендациях, скорее всего, были просто категории, которые они хотели рекламировать (вместо персонализированного списка, основанного на прошлых посещениях сайта). Наконец, вот более смелая концепция домашней страницы от Cos Clothing, которая не использует тонкую полоску предлагаемых категорий, а просто посвящает основную часть главной страницы отправке покупателей в нужные категории. (Примечание. К моменту публикации оригинала этой статьи, главная страница сайта Cosclothing была изменена, чтобы добавить рекламу вверху страницы, вместо фотографий, служащих переходом на женский и мужской разделы).
