Мобильная версия интернет-магазина: как довести пользователя до покупки, часть вторая

«Зашёл в магазин и пропал без вести», — самый короткий драматический рассказ о ecommerce. Мы в Mojo не соревнуемся с Хэмингуэем, так что предлагаем прочитать целую статью о мобильной навигации.

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

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

При первом посещении люди не сразу определяют тип сайта. В исследовании Baymard 70% испытуемых сначала прокручивали почти всю домашнюю страницу интернет-магазина, чтобы просмотреть содержание. Первое сканирование ничего не говорило людям об ассортименте товаров — на главной было слишком мало информации.

Проблему можно решить, если 30-40% главных разделов представить через контент:

1) Сделать список категории на видном месте главной страницы,

2) В качестве альтернативы можно отобразить подборку миниатюр,

3) Использовать шаблон навигации из приложений.

Итак, какие варианты:

Хедер

Полоса в верхней части экрана с основными ссылками. Наследство «мобилки» от десктопа. Почти как хрусталь в вашем шкафу, только ещё старше.

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

Верхняя часть дисплея — труднодоступная цель. Особенно сейчас, когда 7” — не предел для экрана.

У Apple есть функция reachability, которая позволяет опускать экран, остальным придётся поработать над растяжкой.

У большинства сайтов нет закреплённой навигации. Неоднократно упомянутый принцип юзабилити «мобилки» завещал всё место контенту.

Таб бар

Понятное решение для приложений, но с сайтами всё не так просто.

Таб бар — статичный элемент интерфейса и занимает место в ущерб контенту.

Есть мнение, что так и надо. Nielsen Norman Group пишут: «Если на сайте 4–5 основных параметров навигации, имеет смысл сделать их видимыми на экране в любое время». Это наш с вами случай.

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

Instagram, Tik-Tok, Facebook и прочие популярные приложения, в том числе mCommerce, давно перешли на нижние панели вкладок.

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

Скрытая навигация

Бургер-меню — навигация, скрытая в одном кликабельном элементе. В свернутом состоянии занимает минимум места — в этом одновременно её преимущество и недостаток. Скрытую навигацию труднее заметить, чем обычное меню.

Итого:

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

34% мобильных сайтов в eCommerce не предлагают тематическую навигацию. Такой вариант поиска не обязательно должен происходить традиционно по категориям. Это могут быть справочники продуктов или выбор по критериям. Например, поиск подарков, где пользователи указывают получателя или тип использования, а не конкретные признаки товара.

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

Хлебные крошки — навигационная цепочка, которая сообщает пользователям, в какой части сайта они находятся. Крошки особенно полезны, если пользователи приходят в категорию по внешней ссылке, а не с домашней страницы.

Проблемы всё те же: длинные хлебные крошки занимают слишком много места на экране и их неудобно нажимать.

Вот несколько рекомендаций по оформлению:

Не используйте хлебные крошки в несколько строк

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

Не пытайтесь впихнуть невпихуемое

Не надо делать ссылки меньше или ближе друг к другу. Это решение не работает с сенсорными экранами: точки касания должны быть не менее 1 см на 1 см. Как это применить в дизайне, мы уже говорили в прошлой статье.

Сократите навигационную цепочку

В «мобилке» достаточно одной «крошки», указывающей на родительскую категорию. Если пользователь попадает в карточку товара через поиск в Google, он сможет быстро просмотреть другие продукты в том же разделе для сравнения.

Если совсем никак

По-человечески понимаем желание уместить все «крошки» на экране. Можно использовать карусель и надеяться, что пользователи её распознают. Mojo не одобряет, но такое решение существует.

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

Поднавигация должна:

• Обеспечивать доступ к любому разделу сайта в несколько нажатий: через небольшую прокрутку и «нулевую» загрузку страницы, если это возможно;
• Поддерживать стандартный путь: предугадывать поведение пользователей и упрощать им переход между разделами;
• Быть заметной и не сливаться с основной навигацией.

Типы поднавигации:

Аккордеоны

Этот дизайн выглядит как «подменю» внутри основной части навигации. Хорошо работает, если включает в себя до 6 подкатегорий. В противном случае, подменю занимает слишком много места на экране. Пользователь не будет скроллить страницу до скончания времён и уйдёт к конкурентам.

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

Минусы аккордеонов

Дезориентация. Когда пользователи разворачивают аккордеон, список сдвигается в верхнюю часть экрана, чтобы освободить пространство для контента.

Некоторые могут решить, что они перешли на новую страницу и нажать «Назад». В итоге вместо списка пользователи откроют предыдущую вкладку. Проблему можно решить, если добавить функцию «Свернуть».

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

Последовательные меню

При выборе пункта в главном меню его подкатегории отображаются вместо исходного содержимого. Пользователь может перемещаться вниз по иерархии информации с помощью кнопки «Назад».

Исследования в сфере человеко-компьютерного взаимодействия (Human-computer interaction, HCI) расходятся во мнениях об эффективности этого типа поднавигации. В одних опытах люди не испытывали проблем с последовательным меню при решении простых задач. В случаях с многоуровневой навигацией пользователи справлялись не столь успешно.

Мы считаем, что последовательное меню нужно обозначать стрелкой вбок. Ждём исследования от Nielsen Norman Group.

У всех типов поднавигации общие минусы.

• С «мобилкой» проще отвлечься на внешние события, поэтому риск потеряться в категориях у пользователей выше;
• Посетители сайта будут испытывать соблазн нажать физическую кнопку «Назад» и случайно закрыть меню или перейти на другую страницу;
• На дисплей телефона не вместить много пунктов, а закон Миллера утверждает, что наша кратковременная память может хранить 7± 2 элемента.

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

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

Плюсы: карусели вмещают большой объём контента на маленькой площади.

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

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

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

Выход — просигнализировать посетителю, с чем он имеет дело.

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

Большинство людей останавливаются после просмотра 3-4 страниц в карусели. Если у вас много пунктов, используйте список. Постарайтесь расставить приоритеты для элементов навигации и показывать первыми наиболее интересные.

Приходите в дизайн интерфейсов, у нас весело: аккордеоны, карусели и хлебные крошки.

Для тех, кто пролистал в самый низ:

• Не нужно недооценивать силу текста: навигация – это не только интерфейс;
• Вынесите часть каталога на видное место главной страницы — так продукт станет понятнее пользователям;
• Рассмотрите внедрение таб баров — они побеждают;
• В «мобилке» достаточно одной «хлебной крошки», указывающей на родительскую категорию. Оставьте место для контента;
• Есть два стула: аккордеоны и последовательное меню. Мы плотно сидим на втором;
• Для кого-то карусель – это радость, но не для пользователя.

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

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