23 решения для удобной навигации в интернет-магазине

Я Максим Жуков из Kislorod. Специализируемся на разработке и развитии ecommerce-проектов.

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

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

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

Чтобы быстро находить нужные товары, пользователям недостаточно только функционала поиска по сайту:

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

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

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

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

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

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

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

Хорошее решение предлагает ozon.ru:

Если неочевидные элементы все-таки реализуются на сайте, добавьте к ним пояснения. Один из таких элементов — кнопка «Назад».

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

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

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

Например, спроектируйте меню таким образом, чтобы в нем были предусмотрено место для нескольких пунктов, которые могут появиться в будущем:

Ключевые элементы навигации сайта должны оставаться на тех же местах на всех страницах.

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

Пользователи привыкли видеть корзину справа, а не слева. Расположение справа — непривычное, непредсказуемое и поэтому неудобное:

Известное правило трех кликов не всегда актуально — не все задачи можно решить так просто и быстро. В исследовании проанализировали более 8 тысяч кликов. Восемьдесят процентов заданий выполнялись после 15 кликов. Некоторые испытуемые посещали до 25 страниц. Практически никто не сдавался после трех кликов. Исследования показали, что вероятность ухода пользователя после трех кликов не выше, чем после двенадцати. Успех в выполнении заданий не зависит от количества кликов.

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

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

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

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

Для UX плохо, когда кнопка основного действия оформлена в одном стиле с кнопкой второго по значимости действия.

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

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

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

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

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

На десктопе лучше реализовать полное основное меню — места для этого достаточно.

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

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

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

Попав на ozon.ru, пользователь сразу поймет, что здесь можно купить книги, электронику, одежду и даже билеты.

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

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

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

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

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

Чтобы помочь покупателю с выбором вина, проектируя интерфейс для виноторговой компании Grape, мы реализовали блок «Готовые предложения». Подборки разработаны на основании распространенных запросов посетителей. Например, «Лучшие вина до 1500 рублей», «Подборка красных вин на вечер», «Большое предложение для большой компании друзей».

На сайтах гипермаркетов матрасов matras.ru и anatomiyasna.ru на первом экране реализован фильтр.

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

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

На сайте bonprix.ru используют первый вариант: кликнув на баннер с новинками пользователь попадает на страницу категории «Женская одежда». На ней включена сортировка «Новейшие товары», а над выдачей написано «Новинки». Так пользователь поймет, что видит не все предложения категории «Женская одежда».

Иногда вместо фильтров пользователям предлагают множество близких по смыслу категорий, которые можно было бы объединить. Исследование Baymard Institute показало, что чрезмерное дробление усложняет навигацию и поиск товара. Переизбыток категорий пугает пользователей, а одновременный поиск товара в двух категориях невозможен. В итоге посетитель может не найти нужный товар и покинуть сайт.

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

А еще таким образом можно привлекать внимание к товару или контенту, который вам важно предложить — например, к актуальным для этой подкатегории акциям и рекомендациям.

Размещайте на таких страницах ссылки на подкатегории. Это полезно и для новичков, и для постоянных покупателей:

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

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

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

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

Исследования Baymard Institute показывают, что пользователи часто воспринимают категории как неизбежный выбор, а фильтры в сайдбаре как то, что можно проигнорировать.

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

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

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

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

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

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

На сайте citilink.ru в карточке телефона можно сразу увидеть подходящие аксессуары:

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

22. Показывайте похожие товары в карточке

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

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

Качественно проработанная система навигации сайта — эффективный инструмент для повышения конверсии интернет-магазина.

О других важных элементах электронного мерчендайзинга можно почитать в статьях:

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

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

Ставьте лайк (+1), если было полезно.

#интернетмагазин