#SL_Business M-COMMERCE: НЮАНСЫ НАВИГАЦИИ В МОБИЛЬНОЙ ВЕРСИИ ИНТЕРНЕТ-МАГАЗИНА

Чтобы посетители интернет-магазина могли быстро сориентироваться и найти нужные товары на смартфоне, важно учесть особенности мобильной навигации.

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

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

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

· максимально упростите навигацию;

· следите, чтобы пользователи понимали, где они находятся в иерархии сайта;

· всегда отображайте иконку корзины с количеством добавленных товаров и так далее.

1. Учитывайте проблему ограниченности обзора

Главная страница на десктопе помещается в 2 или 3 экрана, но главная страница в мобильной версии может занимать 5-10 экранов.

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

Из-за проблем с ограниченностью обзора посетители упускают важную информацию, не могут найти нужные товары и покидают сайт. Только из-за трудностей с навигацией 63% испытуемых отказывались изучать контент на мобильных устройствах.

2. Ставьте контент на первое место

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

3. Привлекайте внимание к скрытой навигации

Меню-бургер в мобильной версии — привычное решение, которое не занимает много места. Чтобы привлечь к нему больше внимания, можно разместить рядом текст.

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

4. Помогите определить ассортимент сайта на главной странице

Мы уже писали, что на десктопах пользователи пытаются оценить ассортимент сайта по содержимому главной страницы. В мобильной версии они делают так еще чаще. Если на десктопе только 25% пользователей первым делом скроллят главную, то на мобильных устройствах так поступает 70%.

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

Поэтому выводите 30-40% основных категорий на главной странице в мобильной версии. Названия категорий должны быть понятными, с очевидным для пользователя смыслом. А сами категории — отображать разнообразие ассортимента и быть визуально выделены иконками, которые соответствуют той или иной товарной категории.

5. Дайте возможность искать по темам

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

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

реализовать тематический поиск. Исследования показали, что формат предоставления тематической навигации является второстепенным — главное, чтобы пользователи могли легко найти тематический контент.

Грамотная реализация навигации в мобильной версии прямо влияет на конверсию, так как упрощает пользователю шопинг. Поэтому не ограничивайтесь чтением статей — внедряйте наши рекомендации.

Источники:

https://vc.ru/design/219560-m-commerce-11-nyuansov-navigacii-v-mobilnoy-versii-internet-magazina