UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Панель ссылок, как альтернатива гамбургер-меню
Редакція
Редакція

Опубліковано • Оновлено

Панель ссылок, как альтернатива гамбургер-меню

#ux

Недавно проведенные AB тесты показали, что на многих мобильных версиях сайтов электронной коммерции можно наблюдать увеличение скорости конверсии, добавив панель навигационных ссылок вверху домашней страницы вместо того, чтобы полагаться исключительно на гамбургер-меню. Мы называем это «Верхняя панель навигационных ссылок» или просто «панель ссылок». Верхняя панель навигационных ссылок Панель ссылок является альтернативой ненавистному «гамбургер-меню», которое скрывает ссылки за знаменитыми тремя полосками (гамбургером). Просто загуглите “hamburger menu” и вы увидите в топ-5 результатов статьи, критикующие гамбургер-меню! В этой статье мы обсудим концепцию панели ссылок на примере двух AB тестов, в которых мы увидели увеличение посещений страниц продуктов и увеличение коэффициента конверсии покупок. Мы также покажем примеры дизайна популярных онлайн-магазинов, которые по-разному реализуют концепцию панели ссылок. Наша гипотеза заключается в том, что панель ссылок позволяет покупателям быстрее загружать страницы продуктов, отобразив ссылки на страницы продуктов и категорий, которые обычно скрыты в гамбургер-меню. Требуется меньше кликов, а ссылки более заметны, поэтому увеличивается вероятность того, что пользователи перейдут по «нисходящей воронке» и посмотрят продукты. Давайте перейдем к нашим тематическим исследованиям.

Примечание: Мы также можем проанализировать ваш опыт работы с мобильным интернет-магазином. Узнайте больше о том, что мы здесь делаем, или присоединитесь к списку рассылки, чтобы получать на email новые статьи, подобные этой.

Панель ссылок в мобильной версии сайта магазина одежды увеличит число заказов на 5%

У нас есть продавец одежды, в онлайн-магазине которого более 1000 товаров, разделённых на 9 категорий (и несколько подкатегорий). Итак, довольно стереотипная компания электронной коммерции. Как выглядела домашняя страница в мобильной версии сайта? Поскольку мы сохраняем анонимность клиентов, давайте используем домашнюю страницу сайта известного бренда, имеющего аналогичный макет: Urban Outfitters. Urban Outfitters Основные характеристики этой домашней страницы (аналогичная ситуация с домашней страницей сайта нашего клиента):

  • Большие изображения без полей, которые изменяются в зависимости от текущей маркетинговой кампании (примерно раз в месяц)
  • Основная навигация скрыта в гамбургер-меню
  • Если вы прокрутите страницу вниз достаточно далеко, в конечном итоге вы увидите ссылки на категории

Вот тестируемые варианты: В этом варианте мы просто добавили панель ссылок, только на главную страницу сайта. Там было 9 категорий. В этом варианте мы просто добавили панель ссылок, только на главную страницу сайта. Там было 9 категорий. Заметьте, что мы не заменили гамбургер-меню, оно все еще существует и по-прежнему является наиболее полным способом навигации по различным категориям продуктов. Но теперь самый простой способ навигации – панель ссылок Панель ссылок можно было прокручивать влево-вправо и у нее были стрелки, указывающие на эту функцию. Мы получили следующие результаты. Во-первых, завершенные заказы. Через 28 дней мы увидели увеличение на 5% со статистической значимостью 93%: Через 28 дней мы увидели увеличение на 5% со статистической значимостью 93% Примечание. Механизм статистики Optimizely использует более строгий «двухсторонний» статистический расчет значимости, который не дает такого значения, но традиционное вычисление p-величины показывает это: Optimizely Разумеется, это не «безусловный победитель». Согласно промышленной конвенции победитель объявляется, если он достигает 95% статистической значимости или больше, когда тест достигает вашего заранее определенного количества посетителей. Но это, в конце концов, лишь «конвенция». С более чем 80 000 посетителей, 2300 событий конверсии для каждого варианта, и проработав ровно 4 недели с вариациями, ведущими в основном на весь тест, мы пришли к выводу, что «это, скорее всего, победитель и, скорее всего, он лучше справится на 2% - 5% в течение более длительных периодов времени». Но это всего лишь один показатель (хотя и важный). Все куда интереснее, если вы посмотрите на дополнительные показатели.

Только страницы с включенным листингом показывали увеличение просмотров страниц

Просмотры страниц категорий товаров показали явное увеличение на 10% - 12% (с долей вероятности 99% +), подтвердив одну из наших критических гипотез о том, что панель ссылок отправит больше пользователей «вниз по воронке». Например, вот ссылка на первую категорию, которую мы добавили слева от быстрой панели ссылок (например, ссылка «TOPS» в макете «B» выше):  вот ссылка на первую категорию, которую мы добавили слева от быстрой панели ссылок Две другие страницы категорий показали аналогичный результат. Но увеличение просмотров страниц было заметно только для тех ссылок на категории, что лежали «на поверхности»: Но увеличение просмотров страниц было заметно только для тех ссылок на категории, что лежали «на поверхности Как насчет ссылок, которые были «скрыты за прокруткой», другими словами, когда нужно было использовать либо стрелку, либо прокрутить вправо, чтобы открыть их? Для этих ссылок не было изменений в количестве просмотров страниц: отображение ссылок на страницы продуктов и категорий увеличивает количество клиентов, перешедших по ним. И так было со всеми ссылками на страницы категорий, скрытыми за прокруткой. Это подтверждает первоначальную гипотезу этого теста:

Отображение ссылок на страницы продуктов и категорий увеличивает количество клиентов, перешедших по ним.

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

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

Пример 2: Бренд здорового питания получает увеличение конверсии на 29% при помощи навигационной панели ссылок на главной странице

Затем мы протестировали бренд электронной коммерции, работающий в области здорового питания, и имеющий 3 продукта (3 разных вкуса одного товара). Опять же, на главной странице был текст, изображения и ссылки, но вам приходилось прокручивать страницу вниз, чтобы найти ссылки на 3 продукта. Поэтому мы добавили панель ссылок для навигации так же, как и в первом примере: В этом случае мы разместили прямые ссылки на 3 разных вкуса. В этом случае мы разместили прямые ссылки на 3 разных вкуса. Через 14 дней мы увидели 29-процентное увеличение заказов с 98-процентной статистической значимостью. Однако трафик на этот сайт был ниже, поэтому в тесте только 139 против 107 конверсий на вариацию. Этого мало. Разница составляет всего около 30 заказов, поэтому нам нужно установить квалификатор, чтобы вариация «скорее всего» выполнялась лучше. Однако не было никаких указаний на то, что он будет работать хуже, чем без ссылок.

Панель ссылок может помочь пользователям находить новые продукты

В этом случае из 3-х вкусов второй и третий показали значительное увеличение просмотров страниц (шоколад и клубника в макете выше): + 25% посещений и 77% с 99,9% статистической значимостью и более 600 конверсий. Но самый популярный вкус не показал большого увеличения. Почему? Сайт был известен своим самым популярным вкусом. Исторически сложилось так, что на момент запуска бренда, это был единственный вкус. Реферальные ссылки непропорционально вели на эту страницу, ссылки в блогах непропорционально связаны с этим вкусом, а изображения на главной странице и текст в основном говорили о нем. Таким образом, в этом случае панель ссылок помогала большинству клиентов открыть для себя остальные предложения компании. Это приятное дополнительное преимущество панели ссылок. Обратите внимание, что эти альтернативные вкусы также находились в гамбургер-меню, но, как мы видели в первом примере, размещение прямых ссылок на них (через панель ссылок) показало увеличение числа посетителей для этих страниц.

Выводы и способы применения этого к вашему собственному мобильному сайту электронной коммерции

Оба этих теста двух очень разных магазинов электронной коммерции (1000 товаров против 3 товаров), демонстрируют аналогичный вывод: Сделайте для мобильных покупателей доступ к вашим продуктам максимально простым. Если у вас сотни или тысячи товаров, поместите ссылки на самые популярные категории как можно ближе к краю экрана. В первом примере, рассмотренном выше, естественная итерация теста (который еще не был протестирован) состояла в том, чтобы уложить ссылки в стек вместо того, чтобы они были в одной прокручиваемой строке.  уложить ссылки в стек вместо того, чтобы они были в одной прокручиваемой строке Это даст покупателям еще лучший обзор предложений магазина. Это должно послать еще больше посетителей «вниз по воронке». Если у вас есть лишь несколько продуктов, создайте верхние ссылки навигации на страницах подробных сведений о продукте. Вы должны проверить это самостоятельно. Не предполагайте, что эти результаты будут применимы к вашему магазину. Оба вышеописанных AB теста показали, что число посещений страниц категорий или продуктов значительно выросло. Но с увеличением скорости заказа не было «безоговорочных» победителей, которые мы определяем, как статистическое значение 99% + с сотнями или тысячами событий конверсии на каждый вариант. Как мы уже писали ранее, не все магазины электронной коммерции обладают роскошью таких данных. Это не значит, что вам надо опустить руки и ничего не тестировать. И не стоит использовать старомодный метод «устройте дебаты в комнате, кто будет кричать громче всех, тот и победил».

Кроме того: когда-то наш клиент, дизайнер интерьера, спросил, можно ли реализовать гамбургер-меню в декстопной версии сайта, потому что оно «выглядело гламурным». (Фейспалм)

Вот почему тестирование важно, даже если вы не получите идеальных показателей коэффициента конверсии (статистическое значение 99% и тысячи конверсий в течение многих недель).

Как насчет декстопных версий сайтов? Почему это касается только мобильных?

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

Примеры главных страниц мобильных сайтов электронной коммерции

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

Gap.com

На сайте Gap множество продуктов и категорий. На главной странице их мобильного сайта вверху есть ссылки на главные категории товаров: Gap.com Использование фотографий – это эстетически красиво и, возможно, увеличит взаимодействие пользователей со ссылками. Обратите внимание, что ссылки не привязаны к прокрутке, тогда как ссылки на Gap Incs другие бренды в верхней части страницы. Интересно.

Abercrombie

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

Lowe’s

Lowes.com – это отличный пример поиска и использования рекомендаций, чтобы продвигать ссылки на некоторые категории. Раньше мы не заходили на сайт Lowes.com с этого смартфона, поэтому в рекомендациях, скорее всего, были просто категории, которые они хотели рекламировать (вместо персонализированного списка, основанного на прошлых посещениях сайта). Lowes.com Наконец, вот более смелая концепция домашней страницы от Cos Clothing, которая не использует тонкую полоску предлагаемых категорий, а просто посвящает основную часть главной страницы отправке покупателей в нужные категории. Cos Clothing (Примечание. К моменту публикации оригинала этой статьи, главная страница сайта Cosclothing была изменена, чтобы добавить рекламу вверху страницы, вместо фотографий, служащих переходом на женский и мужской разделы). У них полноразмерные изображения разделов для мужчин и женщин, за которыми следуют четкие ссылки. Мы хотели бы попробовать какое-нибудь смелое дизайнерское решение с одним из наших клиентов.

Заключение

Домашняя страница часто является священной коровой для организаций электронной коммерции. Люди сражаются за экранное пространство главной страницы. Таким образом, даже мы, как стороннее агентство по оптимизации, часто имеем серьезные ограничения на тестирование домашней страницы, а тем более на ее радикальный редизайн. Большое спасибо двум нашим клиентам, позволившим нам провести тесты, представленные выше. Хотите работать с нами для повышения коэффициента конверсии вашего мобильного сайта? Узнайте больше о сотрудничестве с нами здесь, или подпишитесь на рассылку, чтобы узнавать о выходе новых статей. http://ux.pub/panel-vkladok-eto-novoe-gamburger-menyu/ http://ux.pub/udachnye-alternativy-gamburger-menyu-v-mobilnyx-prilozheniyax/ http://ux.pub/alternativa-gamburger-menyu/


Перевод статьи Devesh Khanal

Топ коментарі (0)