Как увеличить конверсию сайта, изменив дизайн навигации

Проблема

На большинстве сайтов меню располагается в верхнем левом углу. Это довольно странное решение, учитывая тот факт, что 90% населения мира — правши, то есть навигация находится максимально далеко от большого пальца правой руки.

Тепловые карты Скотта Херфа точно иллюстрируют данную проблему. Они показывают, какой части экрана можно легко коснуться большим пальцем, если смартфон находится в правой руке. Для левшей такое решение навигации также не очень удобно.

Изображение: scotthurff.com

Если держать телефон чуть выше, клиент уже сможет дотянуться до кнопки меню в левом верхнем углу, но это все еще довольно некомфортно.

Изображение: scotthurff.com

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

Решение

Чтобы найти лучшее решение, необходимо исследовать рынок и конкурентов.

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

Скриншот: Mathias Schroder

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

Скриншот: Mathias Schroder

В 2015 году Redbooth отказалась от классического гамбургер-меню (дизайн вкладки навигации, состоящий из трех параллельных линий) в своем приложении для iPhone и заменила его нижней панелью вкладок . Это увеличило количество активных пользователей в день на 65%, а среднюю продолжительность сеанса на 70%. Благодаря этому пользователи открыли для себя больше уже доступных функций и контента.

Скриншот: Mathias Schroder

Заключение

Будущее мобильной электронной коммерции за комфортной навигацией.

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

Скриншот: Mathias Schroder

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

Источник.

Фото на обложке: DenPhotos / Shutterstock