M-commerce: 11 нюансов навигации в мобильной версии интернет-магазина
KISLOROD продолжает серию статей о мобильном интерфейсе для интернет-магазина. Мы уже рассказали о нюансах реализации поиска и фильтрации для смартфонов.
Чтобы посетители интернет-магазина могли быстро сориентироваться и найти нужные товары на смартфоне, важно учесть особенности мобильной навигации.
Не будем затрагивать общие принципы, о которых рассказали в этой статье — обсудим всё, что касается навигации на мобильных устройствах.
Во время тестирования Baymard Institute, пользователи часто теряли ориентацию на сайте — не понимали где они, как там оказались и как вернуться к нужной странице. Действительно, вернуться назад на мобильном устройстве сложнее, чем на десктопе.
Важно, чтобы навигация и интерфейс были интуитивно понятными и соответствовали ожиданиям пользователя. В связи с этим:
- максимально упростите навигацию;
- следите, чтобы пользователи понимали, где они находятся в иерархии сайта;
- всегда отображайте иконку корзины с количеством добавленных товаров и так далее.
Да! Учесть нужно многое. Подробнее о том, как это сделать, расскажем ниже.
1. Учитывайте проблему ограниченности обзора
Главная страница на десктопе помещается в 2 или 3 экрана, но главная страница в мобильной версии может занимать 5-10 экранов.
Чтобы пользователь получил представление об ассортименте интернет-магазина, ему придется открыть меню мобильной версии сайта и прокрутить его, чтобы увидеть категории. А для отображения подкатегорий понадобится сначала выбрать категорию. При этому он увидит значительно меньше категорий, чем на десктопе.
Из-за проблем с ограниченностью обзора посетители упускают важную информацию, не могут найти нужные товары и покидают сайт. Только из-за трудностей с навигацией 63% испытуемых отказывались изучать контент на мобильных устройствах.
2. Ставьте контент на первое место
Это один из важнейших принципов юзабилити на мобильных устройствах. При этом из-за размера экрана очень сложно реализовать полноценный обзор контента, особенно если в интернет-магазине много категорий. При первом знакомстве с сайтом на мобильном устройстве пользователь в любом случае получит меньше информации, чем с десктопа.
Не усложняйте мобильный интерфейс функционалом, обилием ссылок и интерактивным контентом. Тестирование показало, что самые простые интерфейсы намного удобнее и воспринимаются пользователями лучше. По результатам исследований, 63% пользователей уходят с сайта из-за сложного интерфейса.
3. Привлекайте внимание к скрытой навигации
Меню-бургер в мобильной версии — привычное решение, которое не занимает много места. Чтобы привлечь к нему больше внимания, можно разместить рядом текст. Как, например, на сайте dsklad.ru:
В хедере также размещают функционал «Добавить в избранное», «Сравнить», корзину, личный кабинет и логотип сайта. При нажатии на логотип на других страницах пользователь должен попадать на главную страницу мобильной версии.
Также можно переместить панель навигации вниз — это позволит почти половине посетителей, которые используют большой палец, легче нажимать на иконки меню. Оптимально, если их будет не больше 5. Такое решение называется таб бар и чаще используется в мобильных приложениях, чем в адаптиве.
Для того чтобы обеспечить навигационное меню важным для пользователя функционалом и выбрать правильное расположение тех или иных элементов навигации, опирайтесь на аналитику и наблюдения за поведением посетителей сайта с помощью карты кликов и Яндекс.Вебвизора.
Например, на сайте oboi-3d.ru благодаря карте кликов видно, что пользователи активно пользуются «бургером». При этом крестиком для закрытия меню никто не пользуется, значит в нём нет необходимости.
4. Помогите определить ассортимент сайта на главной странице
Мы уже писали, что на десктопах пользователи пытаются оценить ассортимент сайта по содержимому главной страницы. В мобильной версии они делают так еще чаще. Если на десктопе только 25% пользователей первым делом скроллят главную, то на мобильных устройствах так поступает 70%.
Это происходит по двум причинам. Во-первых, из-за обзора, ограниченного маленьким размером экрана. Во-вторых, из-за скрытой навигации.
Для того чтобы пользователю был понятен ассортимент, важно выводить основные категории непосредственно на главной странице мобильной версии. При этом на других страницах они могут быть скрыты в бургер.
В исследовании Baymard Institute, когда на странице было мало контента или он был однообразным, пользователи в 42% случаев получали неправильное представление об объеме каталога.
Поэтому выводите 30-40% основных категорий на главной странице в мобильной версии. Названия категорий должны быть понятными, с очевидным для пользователя смыслом. А сами категории — отображать разнообразие ассортимента и быть визуально выделены иконками, которые соответствуют той или иной товарной категории.
5. Дайте возможность искать по темам
Некоторые пользователи настроены на «тематические покупки» — например, ищут зимнюю куртку, игру для компании или подарки к 8 марта. Важно обеспечить соответствующую навигацию. В принципе, желание искать товары по темам одинаково проявляется и на десктопе, и на мобильных устройствах. Но исследователи из Baymard Institute обнаружили, что хорошую тематическую навигацию на мобильных поддерживать важнее, потому что возможности пользователей и так ограничены из-за размера экрана.
Подобное представление продуктов не обязательно должно выглядеть как традиционный вывод категорий. Можно разместить руководства и статьи в блоге со ссылками на конкретные товары, реализовать тематический поиск. Исследования показали, что формат предоставления тематической навигации является второстепенным — главное, чтобы пользователи могли легко найти тематический контент.
6. Учтите особенности реализации хлебных крошек
Хлебные крошки помогают пользователям понять, где они находятся — на мобильных устройствах это особенно важно, потому что основная навигация часто скрыта. С реализацией хлебных крошек на мобильных устройствах намного больше сложностей, чем с реализаций на десктопе.
Исследователи из Nielsen Norman Group считают, что стоит использовать одну ссылку, ведущую на главную категорию, чтобы посетитель мог перейти к обзору полного ассортимента товаров в категории.
Исследователи из Baymard Institute предлагают реализовать цепочку хлебных крошек как прокручивающийся элемент. Так пользователи смогут понять предложенное решение и увидеть полный путь к текущему положению на сайте.
Мы рекомендуем исходить из особенностей проекта, оценивать, что важнее для целевой аудитории и, конечно, тестировать. Единственный неприемлемый вариант — не использовать хлебные крошки вовсе.
Однозначно можно утверждать, что:
- на экране мобильных устройств мало места, поэтому нужно использовать хлебные крошки так, чтобы они не занимали больше одной строки;
- на хлебные крошки на мобильных устройствах неудобно нажимать, поэтому они должны быть достаточно крупными, отличаться по стилю и располагаться не слишком близко друг к другу и другим элементам — например, к другим элементам навигации;
- важно, чтобы пользователи понимали, что перед ними хлебные крошки, поэтому их нужно подчеркивать и внедрять привычные разделители «>» или «/» между уровнями иерархии.
7. Обеспечьте удобную навигацию многоуровневого меню
Навигация многоуровневого меню помогает пользователям получать доступ к категориям нижнего уровня в иерархии сайта. Ее важно реализовывать так, чтобы она обеспечивала простой доступ к разделам сайта — с помощью нескольких тапов, небольшого скроллинга и без загрузки страницы, если это возможно.
Несколько вариантов организации многоуровневого меню:
1. Аккордеоны
Аккордеон не должен включать в себя много элементов-подкатегорий (до шести), чтобы не занимать место на экране. Одна из особенностей аккордеонов — при нажатии на соответствующую иконку список раздвигается и появляется вложенный контент. Поэтому для того, чтобы пользователь не нажимал кнопку «Назад» при попытке вернуться к исходному состоянию, важно не забыть добавить функцию сворачивания списка.
Не делайте аккордеоны многоуровневыми и используйте иконку стрелки, направленной вниз (а не только название раздела или знак «+»), чтобы пользователи ожидали открытия контента на той же странице, а не перехода на новую.
2) Последовательное меню
В последовательном меню для мобильной версии сайта сначала отображаются основные категории, а после выбора одной из них список категорий исчезает и выводятся только ее подкатегории. Чтобы вернуться к категориям, нужно нажать кнопку «Назад».
Это популярное решение — оно устраняет проблему вывода большого количества категорий и подкатегорий на маленьком экране. К сожалению, у последовательных меню есть и минусы. Тесты показали, что испытуемые ошибались, используя кнопку «Назад» на телефоне или в браузере, случайно закрывали меню и переходили на другую страницу вместо возврата в меню.
3) Меню соседних разделов
Это дополнительные меню, которые добавляют на страницы для быстрого перехода в соседние разделы, минуя поиск в основном меню.
В десктопной версии они обычно находятся в сайдбаре:
В мобильной или адаптивной версии сайта их располагают над контентом.
Иногда пользователи путают меню разделов с главным меню, поэтому важно убедиться, что они визуально отличаются.
Рекомендации Nielsen Norman Group по выбору варианта реализации многоуровневого меню:
- если подкатегорий меньше 6, остановитесь на аккордеоне или последовательном меню;
если подкатегорий от 6 до 15, подумайте о меню разделов.
Мы в KISLOROD обычно исходим из структуры:
если уровней вложенности один или два, лучше реализовать навигацию в виде аккордеона;
если уровней вложенности три или четыре — комбинированную навигацию.
Почему мы считаем последовательное меню неудачным решением:
- Когда в меню много уровней (3-5), пользователю приходится несколько раз нажимать на кнопку «Назад», чтобы вернуться к главному меню. Особенно это раздражает новых посетителей.
- Положение пользователя часто не отображается. Если пользователь открывает меню, находясь во второстепенном разделе, то ему показывается первый уровень, а не тот, где он находится. Даже если меню показывает местоположение пользователя, вернуться к главным разделам все равно сложно.
- Не всегда есть возможность перейти в полный раздел и посмотреть товары всего раздела, а не подразделов.
- Нельзя посмотреть разделы без перехода на следующий уровень. Если пользователь не знает, в каком пункте меню находится нужный раздел, ему приходится тыкать в каждое, чтобы посмотреть, из каких пунктов оно состоит.
8. Грамотно используйте слайдер
На десктопе слайдер — хорошее решение, хотя его реализация имеет нюансы, о которых мы писали ранее. На мобильных устройствах тоже не все однозначно.
Преимущества:
- на слайдере размещается значительное количество контента, при этом слайдер не занимает много места на экране;
- можно размещать одновременно разный контент.
К недостаткам относятся:
- игнорирование некоторыми пользователями слайдера из-за баннерной слепоты;
- необходимость просмотра всех слайдов, чтобы увидеть весь контент;
- трудности правильной реализации элементов управления слайдером.
Несколько решений по реализации слайдера на мобильных устройствах от Nielsen Norman Group:
не используйте больше 3-4 элементов (например, текст, изображение, кнопка, логотип) на слайде;
более важные слайды показывайте в первую очередь;
- чтобы люди поняли, что перед ними слайдер, используйте контрастные стрелки на слайдах или точки под слайдером;
- поддерживайте свайп для перелистывания слайдера;
- дублируйте контент из слайдера в других местах из-за того, что пользователи могут проигнорировать слайдер.
Baymard Institute рекомендует не использовать автоперелистывание слайдера — одних раздражают двигающиеся элементы, вторые просто не успевают читать, третьи попадают не на те страницы, которые хотели.
9. Применяйте перекрестную навигацию
Перекрестная или кросс-навигация — это когда пользователь перемещается по связанным друг с другом элементам. Исследования Baymard Institute показали, что испытуемые хорошо относятся к предложению дополнительных, совместимых или альтернативных товаров на мобильных устройствах. Они воспринимают их лучше, чем на десктопе. Скорее всего, это связано с тем, что на мобильных устройствах есть сложности с навигацией и поиском товаров.
Поэтому обязательно предлагайте пользователю дополнить комплект или рассмотреть альтернативы, увеличив тем самым средний чек. Особые сложности у пользователей возникают, если нужно найти совместимый с уже имеющимся товар, поэтому вывод списка совместимых товаров в карточке или корзине значительно упрощает пользователю жизнь и, как следствие, положительно влияет на сумму среднего чека.
10. Минимизируйте влияние случайных тапов
Мобильным пользователям постоянно приходится взаимодействовать пальцами с интерфейсом сайта:
- для перехода по ссылке,
- для перелистывания страницы,
для выделения текста.
Из-за этого возникают случайные тапы, которые раздражают пользователей — особенно если из-за ошибочного нажатия они ушли с нужной страницы. К сожалению, не всегда кнопка «Назад» приводит посетителей туда, куда нужно. Конечно, это повышает вероятность того, что пользователи покинут сайт.
В прошлой статье мы предлагали адаптировать размер элементов к анатомическим особенностям пальцев — делать их достаточно крупными. И реализовывать большее расстояние между интерактивными элементами по сравнению с десктопом.
Есть и другие варианты:
- предлагать пользователям подтвердить действие — но только там, где это действительно необходимо (например, добавление или удаление товара);
- внедрить функцию отмены случайного тапа.
11. Дублируйте навигацию в футере
Мы уже писали о важности правильной реализации футера и о том, какие элементы должны там присутствовать — здесь. Напоминаем: 70% пользователей обращают внимание на контент в футере при первом же посещении сайта. На мобильных устройствах к футеру нужно относиться еще серьезнее. Правильная реализация навигации поможет пользователям быстрее получить доступ к нужному контенту.
Также важно реализовать кнопку возврата к началу страницы, особенно если она длинная (больше 4 экранов). Расположите кнопку внизу справа — там, где пользователи привыкли ее видеть. И четко обозначьте, что это кнопка возврата. Текст «Вернуться в начало» работает лучше, чем стрелка, направленная вверх. Но при этом позаботьтесь, чтобы элемент не перекрывал другие элементы навигации.
Заключение
Грамотная реализация навигации в мобильной версии прямо влияет на конверсию, так как упрощает пользователю шопинг. Поэтому не ограничивайтесь чтением статей — внедряйте наши рекомендации.
В ближайшее время вас ждут статьи про мобильные интерфейсы, в которых мы затронем особенности листинга, карточки товаров, чекаута и корзины, поэтому подписывайтесь на этот блог или наш телеграм-канал, чтобы не пропускать контент.
Если есть вопросы — смело задавайте в комментариях. И не забудьте поставить лайк (+1), если понравился материал.
Опять же, я ж не утверждаю, что это верхняя инстанция. Все к этому привыкли. Header, он на то и header, чтоб вверху быть. Вниз ставят вспомогательное меню.
Ну меню сверху сайта в 2021 году это смешно просто. Кстати, одно из самых удобных решений на мой взгляд это раздел каталога на озоне. От бургера я бы вообще предпочел оказаться. Навигация должна быть на виду у пользователя. А мы ее скрываем, это не правильно. В остальном интересные мысли есть.
Альтернативы для мобильных "бургеру" до сих пор не придумали. У него один плюс - все уже привыкли. Равно как и к тому что меню вверху. Сейчас его приклеивают обычно к верху страницы. Иногда, как на Ozon, к низу. Необычно, но неудобно одинаково - на наших гаджетах, размером больше ладони, работать с сайтом одной рукой не получается.
Если для вас все они не показатель, кто тогда показатель?
«Поэтому выводите 30-40% основных категорий на главной странице в мобильной версии.»
Уверены? Нет шанса, что посетитель определит 30-40% категорий за 100% и отвалится, не найдя нужную?