www.rookee.ru

Навигационное меню сайта: как простое изменение увеличило конверсию магазина на 60%

Рубрика: Практика

Бывший финансовый аналитик, переквалифицировавшийся в eCom-специалиста, Матиас Шредер, опубликовал у себя в блоге кейс о том, как простое изменение навигационного меню повысило конверсию его интернет-магазина на 60%.

Навигационное меню сайта: как простое изменение увеличило конверсию магазина на 60%

А спонсором блога в этом месяце выступает сервис Rookee. Когда требуется комплексное поисковое продвижение, контекстная реклама на автопилоте или формирование репутации в сети – на помощь приходят Rookee!

Навигация – очень важная часть сайта, о которой мало кто задумывается всерьёз. И хотя меню вашего интернет-магазина, скорее всего, не совсем отстойное, в нём таится скрытый потенциал для роста.

Проблема навигационного меню в левом верхнем углу

Подумайте сейчас вот над каким вопросом. 90% населения нашей планеты – правши. Так почему же тогда подавляющее число разработчиков размещает навигационное меню в мобильной версии сайтов или приложений в верхнем левом углу? То есть, как можно дальше от доминирующего большого пальца правой руки.

В качестве примера, посмотрите на эти тепловые карты Thumb Zone от Скотта Херфа:

Тепловые карты пользователей Айфона

Несмотря на то, что они были сделаны довольно давно, актуальности своей не потеряли. Эти тепловые карты наглядно демонстрируют, до какой части экрана своего смартфона обычный человек сможет легко дотянуться, а до какой – нет. При условии, что телефон держится в правом нижнем углу (той же рукой).

Получается, что для правшей навигационное меню, расположенное в левом верхнем углу, недоступно. Попробуйте визуально отразить изображение по горизонтали, представляя аналогичную ситуацию с точки зрения левшей. Меню всё так же недоступно для взаимодействия.

Примерно то же самое наблюдается и в том случае, когда пользователь меняет хват с нижнего правого угла на середину. Попробуйте сами так сделать. Да, если постараться, то так уже легче добраться до раскрывающегося меню в левом верхнем углу. Но ощущение неудобства остаётся.

Как пользователь смартфона взаимодействует с вашим сайтом

И здесь вам в голову может прийти мысль: «Возможно, большинство людей используют свой смартфон двумя руками?» Нет. Согласно данным Стивена Хубера, 75% пользователей касаются экрана только одним большим пальцем.

Следовательно, 75% всех мобильных посетителей должны неестественно растягивать пальцы или менять хват каждый раз, когда они хотят получить доступ к навигационному меню вашего интернет-магазина. Не кажется ли вам, что это влияет на поведение пользователей?

Решение проблемы с меню навигации

Хорошо, проблема понятна. А что делать-то? К счастью, мы с вами не первые, кто задумался над этим.

В 2013 году Facebook перешёл с верхнего левого гамбургер-меню в нижнюю панель вкладок, аналогичную тому, что вы видите сейчас в их приложении. Согласно данным TechCrunch, это увеличило вовлечённость, удовлетворённость, доход, скорость и восприятие скорости.

Навигационное меню Фейсбука

В 2013 году Beamly (бывший Zeebox) решил сделать всё наоборот. Сервис заменил панель вкладок в верхней части своего приложения на меню-гамбургер в левой верхней части экрана. Подобно тому, что мы с вами обычно наблюдаем на классических eCommerce-сайтах.

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

Верхнее меню навигации Zeebox

В 2015 году Redbooth отказались от классического меню-гамбургера и заменили его нижней панелью вкладок в своём приложении для iPhone. Это повысило ежедневную активность пользователей на 65%, а среднюю продолжительность сеанса – на 70%.

При последующем анализе данных Redbooth выяснили, что переработка навигационного меню позволила клиентам открыть для себя дополнительные функции, которые ранее были скрыты меню-гамбургером в левой верхней части экрана.

Раскрывающееся навигационное меню Redbooth

Выводы

Какой из этого всего можно сделать вывод? Будущее мобильной электронной коммерции за удобством для пользователей.

Перенесите навигационное меню своего интернет-магазина (или любого другого сайта) в нижнюю часть экрана мобильных устройств. Чтобы человек мог без особого труда дотянуться до него большим пальцем правой руки.

Снабдите меню иконкой поиска и двумя-тремя иконками популярных товаров или категорий. Если проанализировать рынок, то именно так сейчас делают разработчики таких гигантов, как Facebook, Twitter или Snapchat.

Матиас Шредер сам недавно реализовал такое меню в двух своих интернет-магазинах. Только с меньшим количеством вкладок и большим вниманием к кнопке оформления заказа. Ниже вы видите скриншот одного из них:

Пример реализации меню навигации интернет-магазина

Слева – скриншот страницы магазина без товаров в корзине. В навигации снизу вы можете видеть ссылку на новую коллекцию одежды и иконку раскрывающегося меню. Справа – скрин магазина после того, как в корзину добавлен товар. Слева направо:

  • корзина;
  • перейти к оплате;
  • раскрывающееся меню.

После изменений владелец наблюдает рост уровня конверсий в обоих магазинах.

В качестве контраргумента можно привести навигационное меню сайта Amazon. Классический «гамбургер» в левом верхнем углу. Но если вы его откроете, то заметите, что в нём основное внимание уделяется элементам учётной записи пользователя.

Навигационное меню-гамбургер Амазона

Категории продуктов расположены под панелью поиска вверху страницы, как и панель меню с вкладками. В отличие от большинства DTC-брендов, Amazon вынужден сосредотачиваться на строке поиска из-за своего огромного каталога продуктов.

В любом случае, настоятельно рекомендую протестировать разные варианты реализации меню навигации, чтобы понять, действительно ли иконки в нижней части экрана мобильного устройства увеличивают уровень конверсии.

А после тестов делитесь результатами в комментариях!

Источник информации: mathiasschroder.substack.com.

ПОНРАВИЛСЯ ПОСТ? ПОДЕЛИСЬ ССЫЛКОЙ С ДРУЗЬЯМИ!

Получать новые публикации по электронной почте:

СТАТЬИ ИЗ РУБРИКИ: