M-commerce: 11 нюансов навигации в мобильной версии интернет-магазина

KISLOROD продолжает серию статей о мобильном интерфейсе для интернет-магазина. Мы уже рассказали о нюансах реализации поиска и фильтрации для смартфонов.

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

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

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

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

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

Да! Учесть нужно многое. Подробнее о том, как это сделать, расскажем ниже.

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

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

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

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

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

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

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

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

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

Например, на сайте oboi-3d.ru благодаря карте кликов видно, что пользователи активно пользуются «бургером». При этом крестиком для закрытия меню никто не пользуется, значит в нём нет необходимости.

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

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

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

В исследовании Baymard Institute, когда на странице было мало контента или он был однообразным, пользователи в 42% случаев получали неправильное представление об объеме каталога.

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

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

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

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

Исследователи из Nielsen Norman Group считают, что стоит использовать одну ссылку, ведущую на главную категорию, чтобы посетитель мог перейти к обзору полного ассортимента товаров в категории.

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

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

Однозначно можно утверждать, что:

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

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

Несколько вариантов организации многоуровневого меню:

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

Не делайте аккордеоны многоуровневыми и используйте иконку стрелки, направленной вниз (а не только название раздела или знак «+»), чтобы пользователи ожидали открытия контента на той же странице, а не перехода на новую.

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

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

Это дополнительные меню, которые добавляют на страницы для быстрого перехода в соседние разделы, минуя поиск в основном меню.

В десктопной версии они обычно находятся в сайдбаре:

В мобильной или адаптивной версии сайта их располагают над контентом.

Иногда пользователи путают меню разделов с главным меню, поэтому важно убедиться, что они визуально отличаются.

Рекомендации Nielsen Norman Group по выбору варианта реализации многоуровневого меню:

• если подкатегорий меньше 6, остановитесь на аккордеоне или последовательном меню;

• если подкатегорий от 6 до 15, подумайте о меню разделов.

Мы в KISLOROD обычно исходим из структуры:

• если уровней вложенности один или два, лучше реализовать навигацию в виде аккордеона;

• если уровней вложенности три или четыре — комбинированную навигацию.
  

Почему мы считаем последовательное меню неудачным решением:

1. Когда в меню много уровней (3-5), пользователю приходится несколько раз нажимать на кнопку «Назад», чтобы вернуться к главному меню. Особенно это раздражает новых посетителей.
2. Положение пользователя часто не отображается. Если пользователь открывает меню, находясь во второстепенном разделе, то ему показывается первый уровень, а не тот, где он находится. Даже если меню показывает местоположение пользователя, вернуться к главным разделам все равно сложно.
   
3. Не всегда есть возможность перейти в полный раздел и посмотреть товары всего раздела, а не подразделов.
   
4. Нельзя посмотреть разделы без перехода на следующий уровень. Если пользователь не знает, в каком пункте меню находится нужный раздел, ему приходится тыкать в каждое, чтобы посмотреть, из каких пунктов оно состоит.
   

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

Преимущества:

• на слайдере размещается значительное количество контента, при этом слайдер не занимает много места на экране;
• можно размещать одновременно разный контент.
  

К недостаткам относятся:

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

Несколько решений по реализации слайдера на мобильных устройствах от Nielsen Norman Group:

• не используйте больше 3-4 элементов (например, текст, изображение, кнопка, логотип) на слайде;

• более важные слайды показывайте в первую очередь;
  

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

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

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

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

Мобильным пользователям постоянно приходится взаимодействовать пальцами с интерфейсом сайта:

• для перехода по ссылке,
• для перелистывания страницы,
  

• для выделения текста.

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

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

Есть и другие варианты:

• предлагать пользователям подтвердить действие — но только там, где это действительно необходимо (например, добавление или удаление товара);
• внедрить функцию отмены случайного тапа.
  

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

Также важно реализовать кнопку возврата к началу страницы, особенно если она длинная (больше 4 экранов). Расположите кнопку внизу справа — там, где пользователи привыкли ее видеть. И четко обозначьте, что это кнопка возврата. Текст «Вернуться в начало» работает лучше, чем стрелка, направленная вверх. Но при этом позаботьтесь, чтобы элемент не перекрывал другие элементы навигации.

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

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

Если есть вопросы — смело задавайте в комментариях. И не забудьте поставить лайк (+1), если понравился материал.