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

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

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

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

Главная страница

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

По главной странице сайта «Корсаж» не ясно, что в магазине есть мужские товары. Достаточно было бы добавить на фотографии не только женщин, но и мужчин
По главной странице сайта «Корсаж» не ясно, что в магазине есть мужские товары. Достаточно было бы добавить на фотографии не только женщин, но и мужчин

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

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

Список категорий на главной странице сайта «220 Вольт» находится сразу под баннерами
Список категорий на главной странице сайта «220 Вольт» находится сразу под баннерами

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

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

Пример оформления категорий в мобильной версии интернет-магазина «Домаркет». Раздел «хозяйственные товары» так и манит нажать
Пример оформления категорий в мобильной версии интернет-магазина «Домаркет». Раздел «хозяйственные товары» так и манит нажать

Типы навигации

Хедер

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

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

У Zara sticky хедер – его видно на каждой странице сайта. Вместо логотипа название категории. С одной стороны, оригинально. С другой, непривычно для пользователя
У Zara sticky хедер – его видно на каждой странице сайта. Вместо логотипа название категории. С одной стороны, оригинально. С другой, непривычно для пользователя

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

«Зона большого пальца» — наиболее удобная территория для касания одной рукой
«Зона большого пальца» — наиболее удобная территория для касания одной рукой

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

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

У IKEA навигация пропадает при скролле вниз и появляется снова при скролле вверх
У IKEA навигация пропадает при скролле вниз и появляется снова при скролле вверх

Таб бар

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

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

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

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

У Wildberries таб бар закреплён вверху на всех страницах мобильной версии сайта. Как мы уже говорили, пользователям будет трудно дотянуться до навигации
У Wildberries таб бар закреплён вверху на всех страницах мобильной версии сайта. Как мы уже говорили, пользователям будет трудно дотянуться до навигации

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

У Madrobots классический вариант внизу и закреплённый хедер с поиском. Сурово
У Madrobots классический вариант внизу и закреплённый хедер с поиском. Сурово

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

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

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

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

При использовании скрытой навигации уровень нахождения контента ниже
При использовании скрытой навигации уровень нахождения контента ниже

Итого:

Делайте выводы сами
Делайте выводы сами

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

Ozon и DNS вынесли категории на главную страницу и сделали статичный таб бар внизу
Ozon и DNS вынесли категории на главную страницу и сделали статичный таб бар внизу

Поиск по темам

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

«Ситилинк» предлагает выбрать компьютер по типу использования. Пусть UI и страдает
«Ситилинк» предлагает выбрать компьютер по типу использования. Пусть UI и страдает

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

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

Хлебные крошки

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

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

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

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

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

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

Из-за двухярусных хлебных крошек название продукта находится за пределами страницы даже на экране 6,47”. Навигационная цепочка в одну строку освободила бы место для контента
Из-за двухярусных хлебных крошек название продукта находится за пределами страницы даже на экране 6,47”. Навигационная цепочка в одну строку освободила бы место для контента

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

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

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

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

На настольном сайте «Связного» представлена полная навигационная цепочка. <p>Мобильный сайт показывает усечённую цепочку навигации с путём к родительской категории</p>
На настольном сайте «Связного» представлена полная навигационная цепочка. 

Мобильный сайт показывает усечённую цепочку навигации с путём к родительской категории

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

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

Хлебные крошки на сайте HOYZ слишком маленькие и расположены близко к хедеру — мисслики обеспечены
Хлебные крошки на сайте HOYZ слишком маленькие и расположены близко к хедеру — мисслики обеспечены

Поднавигация

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

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

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

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

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

Аккордеоны

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

На сайте Bonprix в категорию «Одежда» входит 27 пунктов. Требуется 2-3 скролла, чтобы добраться до конца аккордеона. Остальные пункты подменю не менее насыщены
На сайте Bonprix в категорию «Одежда» входит 27 пунктов. Требуется 2-3 скролла, чтобы добраться до конца аккордеона. Остальные пункты подменю не менее насыщены

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

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

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

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

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

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

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

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

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

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

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

И что теперь?

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

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

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

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

Мы в Mojo предпочитаем последовательное меню:

— с ним «не скачет» контент;

— оно позволяет делать навигацию глубже одного уровня;

— с ним меньше скроллов;

— оно более логично — кнопка «Назад» решает большинство проблем.

Так что там с каруселями

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

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

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

Найдите карусель. Ладно, это была простая задача. Она была бы еще проще, если вынести индикаторы за пределы изображения и сделать их контрастными фону
Найдите карусель. Ладно, это была простая задача. Она была бы еще проще, если вынести индикаторы за пределы изображения и сделать их контрастными фону

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

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

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

А здесь? Да, здесь тоже карусель
А здесь? Да, здесь тоже карусель

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

Выводы

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

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

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

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

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

5353
29 комментариев

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

Вы amazon, aliexpress видели? 🤢

3
Ответить
Автор

Видели :) Мы ждём новых инсайтов.

Кстати, спасибо, что дочитали до конца.

3
Ответить

тоже дочитал... взахлёб! Thnx!

3
Ответить
Автор

Спасибо, нам важна обратная связь! 

Ответить

Комментарий недоступен

1
Ответить
Автор

Шапка, подвал, нижняя навигационная панель :) Говорите, как вам нравится. 

Нам нравится вот так: хедер, футер, таб бар.

3
Ответить

И подвал, подвал))

Ответить