№1 по увеличению конверсии в России

Меню и конверсия:
Как с помощью меню на сайте увеличить конверсию на 18,5%

В основе хорошо продуманной навигации лежит меню разделов веб-сайта. Меню бывает горизонтальным и/или вертикальным, основным и локальным. На примере ниже, в горизонтальном меню расположены основные разделы сайта (Электроника, Зоотовары, Одежда и обувь и др.). После выбора основного раздела "Зоотовары", слева появляется вертикальное локальное меню с подразделами 1-го уровня (Товары для кошек, Товары для собак, Товары для рыб и др.). Далее эти подразделы 1-го уровня включают в себя подразделы 2-го уровня (Сухие корма, Витамины и добавки) и так далее до карточки товара. Это позволяет удобно и лаконично скомпоновать разделы и подразделы.

Ну и самое главное, меню способно повлиять на конверсию. PrintGlobe увеличили конверсию сайта на 18,5% за счет улучшения меню сайта. Как это сделать подробнее ниже.
Меню конверсия
2 типа меню в Яндекс.Маркете
Menu conversion
Схематично - это выглядит так. Из книги Стива Круга - "Не заставляйте меня думать".

Мега меню

Если подразделов очень много, то стоит воспользоваться мега меню - это раскрывающееся многоуровневое меню, которое позволяет разместить множество разделов и подразделов сайта в одном экране.
Мега-меню, Mega menu
Мега меню на сайте IKEA
Мега меню позволяет пользователям быстро найти нужный подраздел, без скроллинга, без кликов, без ожидания загрузки новых страниц. Кажется, что это идеальное решение, ведь даже Amazon использовал мега меню. Но ключевое слово "использовал", а потом перестал, потому что не всё так безоблачно. Джаред Спул (Jared Spool) сооснователь школы дизайна UIE, отмечает, что на некоторых сайтах коэффициент конверсии падает на 15-20% после внедрения мега-меню. Поэтому, всегда стоит проводить тесты и замерять результаты.

Подразделы меню

Вопросы:
1. Подраздел "Йогуртницы" относится к разделу "Посуда" или "Мелкая бытовая техника"?
2. А подраздел "Фитнес-браслеты" относится к разделу "Аксессуары" или "Спортивные товары" или вовсе "Часы"?

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

Карточная сортировка

Как правильно распределить подразделы меню? Для этого используется простой и недорогой метод карточной сортировки. На карточках записываются названия всех подразделов, которые необходимо включить в разделы и перетасовываются. Затем участников (из списка целевой аудитории) просят собрать их в группы, которые по их мнению максимально подходят для того или иного раздела. Это можно делать и в электронном виде, но я до сих пор встречаю опросы на бумаге, потому что в этот момент видно как ведет себя участник, где возникают сложности и задержки во времени.
Карточная сортировка, конверсия
Карточная сортировка. Желтые стикеры - основные разделы меню. Белые - подразделы. Фото: Humix

Текущий раздел меню

Выделение текущего раздела позволяет быстро сориентироваться в каком разделе сейчас находится пользователь. Аналогично метке "Вы здесь" в торговом центре или городском парке. Примере на изображении ниже.
Текущий раздел меню
Текущий раздел "Зоотовары" выделен цветом и полосой. Яндекс.Маркет

Статичное меню

На длинных сайтах (3-4 экрана и больше), основное меню желательно делать статичным (т.е. всегда закрепленным сверху экрана). Это помогает ориентироваться на сайте в любой его части и делает изучение информации на 22% быстрее. Smashing Magazine провели исследование в котором сравнили работу сайтов со статичным меню и без. Исследование показало, что участники смогли найти то, что искали на сайте быстрее (за 36 секунд, вместо 5 минут), потому, что им не приходилось каждый раз возвращаться в начало страницы к меню. Это особенно актуально для сайтов с каталогами и "бесконечным" скроллингом с автоматической подгрузкой нового контента.
Статичное меню
Smashing Magazine
В данной статье рассмотрены лишь 5 точек роста конверсии. Если вы хотите увеличить конверсию вашего сайта по 524 параметрам, узнайте подробности в разделе Аудит сайта
Автор Эдуард Файзуллин. Опубликовано 8 февраля 2017 года.
Подробнее про рост конверсии в книге: "Конверсия на стероидах"
    Конверсия на стероидах, Эдуард Файзуллин
    • Навигация на сайте;
    • Главная страница сайта;
    • Сервисные функции;
    • Каталог товаров;
    • Страница товара;
    • Корзина;
    • Оформление заказа;
    • Цена и оплата;
    • Технические параметры.
    200 точек роста, 130 страниц, детально рассмотрены:
      Скачать книгу бесплатно
      Пожалуйста, оставьте свой e-mail и мы пришлём вам ссылку для скачивания книги
      + 1 раз в неделю мы рассылаем свежие статьи про увеличение конверсии сайтов
      Отписаться можно в любое время, в 1 клик
      Оставляя свой e-mail, вы принимаете условия обработки персональных данных
      Другие статьи по теме
      Больше статей о повышении конверсии в разделе Статьи