Презентация
серверов от Acer
До начала осталось:
Смотреть
Дизайн
KISLOROD E-COMMERCE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример меню на десктопе и смартфоне на ostin.ru

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

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

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

Реализация каталога на dsklad.ru

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

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

Пример таб бара на ozon.ru

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

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

Анализ поведения посетителей с помощью карты кликов на oboi-3d.ru

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

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

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

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

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

Вывод категорий на главной на audiomania.ru

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

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

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

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

6. Учтите особенности реализации хлебных крошек

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

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

Пример хлебных крошек со ссылкой «Назад» на ozon.ru

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

Горизонтальная прокрутка на yankeecandle.com

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

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

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

7. Обеспечьте удобную навигацию многоуровневого меню

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

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

1. Аккордеоны

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

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

Раскрывающиеся списки внутри главного меню на lamoda.ru

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

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

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

Реализация последовательного меню на letoflowers.ru

3) Меню соседних разделов

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

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

Меню соседних разделов на naos.ru на десктопе и смартфоне

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

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

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

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

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

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

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

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

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

8. Грамотно используйте слайдер

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

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

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

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

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

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

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

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

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

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

9. Применяйте перекрестную навигацию

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

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

Реализация блока с сопутствующими товарами в карточке товара на eldorado.ru

10. Минимизируйте влияние случайных тапов

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

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

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

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

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

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

11. Дублируйте навигацию в футере

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

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

Заключение

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

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

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

{ "author_name": "KISLOROD E-COMMERCE", "author_type": "self", "tags": [], "comments": 12, "likes": 15, "favorites": 128, "is_advertisement": false, "subsite_label": "design", "id": 219560, "is_wide": false, "is_ugc": true, "date": "Fri, 12 Mar 2021 12:50:33 +0300", "is_special": false }
0
12 комментариев
Популярные
По порядку
Написать комментарий...
0

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

Ответить
1

Альтернативы для мобильных "бургеру" до сих пор не придумали. У него один плюс - все уже привыкли. Равно как и к тому что меню вверху. Сейчас его приклеивают обычно к верху страницы. Иногда, как на Ozon, к низу. Необычно, но неудобно одинаково - на наших гаджетах, размером больше ладони, работать с сайтом одной рукой не получается. 

Ответить
0

Ну, кстати, не все пользователи знают что бургер это меню. Альтернатива это слайдер.

Ответить
0

Пользователи, они странные)) многим и боковой скролл меню не зайдёт.

Ответить
0

Посмотрите средний размер телефона в руках у людей. О какой одной руке вообще может быть речь? Вы до сих пор с пятым айфоном ходите? 😉 У всех от 6" начинается, при этом ни один из костылей однорукого режима в оболочка так и не прижился.
Нижняя "Панель" с кнопками корзины, избранного и т.п. вещами постепенно становится стандартом. Сайты в все больше сливаются в одну структуру оформления с приложениями.

Ответить
0

Вячеслав, смотрим на скриншот. И думаем, прежде чем написать что то.
У fb тоже шапка вверху, если что. Вы умнее чем эти ребята?))
Ой вей, шо то я сомневаюсь. Прежде чем отвечать на чей то коммент, который вас не касается, задумайтесь о смысле написанного. А лучше прочтите ещё раз и вникните в смысл. Стандартом нижняя панель навигации (не добавочная, а основная) станет тогда, когда она будет у лидеров рынка. А пока... 

Ответить
0

Fb ни разу не показатель адекватности интерфейса. Ок. Просто прямо сейчас посмотрите вниз экрана, если вы в телефоне.

Ответить
0

На Android панель основных вкладок зачастую размещают сверху, чтобы пользователи случайно не нажали на навигационные кнопки ОС. На iOS этой проблемы нет по причине того, что внизу всего одна аппаратная кнопка) Хотя на Android нижнее меню тоже работает без проблем при достаточно крупных tap-областях элементов меню.

Ответить
0

Если для вас все они не показатель, кто тогда показатель? 

Ответить
0

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

Ответить
0

«Поэтому выводите 30-40% основных категорий на главной странице в мобильной версии.»

Уверены? Нет шанса, что посетитель определит 30-40% категорий за 100% и отвалится, не найдя нужную?

Ответить

Комментарии

null