или заполните форму
UX/UI
Навигация сайта интернет-магазина: 23 решения для UX и 8 нюансов грамотной SEO-оптимизации
Максим Жуков
Сооснователь ecommerce-агентства KISLOROD
Тема сегодняшней статьи — навигация. Реализация удобной навигации по сайту дает возможность покупателям не потеряться в «дебрях» интернет-магазина и экономить время при подборе нужных товаров. Как сделать навигацию по сайту, чтобы она была максимально понятной и функциональной для посетителей и одновременно шла на пользу SEO-продвижению? Расскажем ниже.
Значение навигации в интернет-магазине с точки зрения UX
Стандартного функционала, присутствующего на сайте, порой бывает недостаточно в процессе поиска товаров. Причины могут быть разные:
- структура поиска не совпадает с представлениями покупателей;
- у пользователей возникают затруднения с правильной формулировкой поискового запроса;
- в некоторых ситуациях ручной набор запроса менее удобен, чем поиск интересующего продукта парой кликов.
Систему навигации сайта можно сравнить с географической картой, на которой размещены различные меню, иконки, ссылки и другие кнопки управления. С их помощью легко перелистывать страницы ресурса, находить полезную информацию о товарах и совершать покупки.
Если функционал поиска для сайта интернет-магазина больше подходит покупателям, способным четко сформулировать запрос, то потребность в удобной системе навигации по сайту есть абсолютно у всех посетителей торговой площадки. Во-первых, становится понятно, что и как можно купить в интернет-маркете, во-вторых — проще выделить ранее просмотренные страницы, а также определить положение на ресурсе в данный момент.
Чем грамотнее выстроена структура навигации, тем быстрее пользователь будет находить нужное и оформлять заказ, соответственно, вырастет конверсия. И наоборот, недоработанная навигация приведет к снижению конверсии.
23 способа сделать навигацию по сайту максимально удобной
Рассмотрим каждый из предложенных способов детально.
1. Поработайте над структурой данных
Базой для построения системы навигации является принцип простоты и удобства. Правильно структурированная иерархия данных — залог того, что нужный предмет найдется быстро и без усилий. Важно понимать, что ваше мышление может не совпадать с покупательским, поэтому необходимо сделать навигацию понятной для всей аудитории.
На скриншоте ниже на сайте отсутствует корзина. Этот факт может завести пользователя в тупик — он не понимает, что увидит на экране, кликнув на кнопку «В корзину».
Неудачное решение с отображением корзины на xl-moda.ru
Будьте внимательны, когда настраиваете элементы навигации на сайте. Они не должны вызывать замешательство у покупателей. Можно привести множество примеров интернет-магазинов, где проблематично разобраться в схеме добавления в корзину нескольких аналогичных товаров.
Отсутствие возможности отправки двух одинаковых товаров в корзину
Реализация решения на ozon.ru:
Как добавить нужное количество товаров в корзину на ozon.ru
Если по каким-то причинам неочевидные большинству пользователей элементы все же принято использовать на сайте, рекомендуем пересмотреть их трактовку. Объясним на примере кнопки «Назад».
Иконка «Назад» на stoolgroup.ru
Когда пользователь видит эту кнопку, у него возникает вопрос — куда он попадет после ее нажатия? В общий каталог товаров или страницу, с который был совершен переход (рекламный блок, пост в соцсетях, статья)? Чтобы убрать двусмысленность, переименуйте кнопку на «Назад в каталог».
2. Разрабатывайте структуру с учетом поискового спроса
Работая над структурой сайта, необходимо ориентироваться не только на логику пользователей, но и учитывать алгоритмы поисковых систем. При соблюдении «золотой середины» вам удастся получить хороший трафик по низкочастотным запросам уже в первые месяцы после запуска интернет-магазина. Что такое поисковый спрос, и как его применять при построении структуры онлайн-маркета, можно почитать здесь.
3. Учитывайте масштабируемость
На определенном этапе развития онлайн-магазина возникает необходимость его масштабирования. Это естественный процесс, который нужно учитывать при планировании структуры сайта. Чтобы система ресурса не проседала от повышенной нагрузки, в ней должна быть предусмотрена возможность добавления новых элементов навигации.
Проектируйте меню так, чтобы в будущем вписать в него дополнительный объем данных. Оставляйте свободное место для новых пунктов, как на скрине ниже.
Запас для других пунктов в меню на stoolgroup.ru
4. Используйте принцип «привычности»
При расстановке на странице элементов навигации сайта не пытайтесь экспериментировать — наоборот, оставляйте их в привычных зонах, где они обычно размещаются в большинстве онлайн-маркетов.
Месторасположение меню делайте стандартным — в шапке страницы или чуть ниже. Оно должно визуально отличаться от общего фона контента, чтобы пользователь сразу обращал на него внимание. То же касается и размещения формы авторизации на сайте.
Корзину желательно располагать справа, а не слева. Покупатели автоматически ищут ее именно там, и не найдя, могут растеряться. Вместо секундного клика им сначала придется искать значок корзины по всему экрану, а уже потом добавлять товар.
Пример корзины с нетипичным расположением на xl-moda.ru
5. Не воспринимайте правило трех кликов как аксиому
Важно понимать, что всем известный принцип трех кликов работает далеко не всегда и не везде. Ошибочно брать его за основу при разработке иерархии — объясним почему. Проведенное исследование, где анализировалось более восьми тысяч кликов, продемонстрировало, что большинство покупок (примерно 80%) совершалось после пятнадцати кликов. При этом опрошенные перелистывали до 20-25 страниц, и порядок действий их не раздражал. Согласно статистике, вероятность того, что покупатель покинет сайт после трех или двенадцати кликов, практически одинакова. То есть положительный исход выполненного задания не прямо пропорционален количеству кликов.
Нет прямой зависимости и между количеством совершенных кликов и степенью удовлетворенности пользователя. Посетитель вряд ли пожалуется, что пришлось слишком долго «шагать» по страницам, если его вопрос решился положительно, и желаемый продукт найден. И даже при наличии жалоб на избыточное количество кликов суть претензии заключалась в том, что по факту задача не была решена.
Мы рекомендуем выдерживать оптимальный баланс — не следовать слепо теории трех кликов, но учитывать ее логику и стремиться к минимальному числу нажатий. Схема поиска товаров должна быть предельно простой, поэтому используйте весь доступный инструментарий, чтобы выдержать основные правила юзабилити.
6. Не переусердствуйте в креативе
Чрезмерная оригинальность в оформлении элементов навигации сайта может сработать в обратную сторону. Непривычный веб-дизайн нередко дезориентирует пользователей, и они попросту покидают страницу, даже не начав выбирать тот или иной товар. Соответственно, уровень конверсии будет снижаться.
7. Правильно оформляйте кнопки
Кнопки призыва к действию должно быть хорошо видно на странице. Делайте их крупными, контрастными по цвету. Текст должен мотивировать к действию («Купить») или разъяснять его («Перейти»).
Если кнопка действия первого порядка будет стилистически идентична с кнопкой меньшего уровня значимости, то для UX это будет неудачным решением.
Неудачный пример стилистики кнопок
Необходимо выстроить логичную цепочку последовательных действий и разработать для каждого уровня индивидуальный стиль. Идеальный вариант — яркий акцент на кнопку первого порядка и более приглушенная колористика для кнопок вторичного уровня. В таком случае покупатель сразу получит зрительную «подсказку» и определит для себя приоритетность действий.
Пример грамотного оформления кнопки «В корзину» на citilink.ru — кнопка выглядит гораздо ярче, объемней и контрастней, чем кнопки сравнения и избранного.
Кнопка «В корзину» на citilink.ru
Используйте разные способы отображения кнопок — по наведению, по клику. Уже нажатая кнопка должна изменить свой внешний вид, показав покупателю, что действие удачно совершено.
Как выглядит кнопка на wildberries.ru до и после нажатия
8. Не делайте слова слишком сложными
При разработке элементов навигации сайта по возможности избегайте слишком длинных фраз и сложных для восприятия формулировок. Обозначения в меню и других инструментах функционала должны легко читаться, кратко и информативно доносить смысл написанного для целевой аудитории.
9. Оформляйте десктоп без скрытой навигации
В версиях для мобильной коммерции меню часто отображается в виде бургера — это нормально. Но если речь идет о десктопном формате, то здесь данный метод применять нежелательно. Посетители не сразу могут найти скрытую навигацию, поэтому используют ее гораздо реже, а если и используют, то не так усердно, как если бы она была видимой. Поиск товаров становится более затруднительным, соответственно, теряется общее положительное впечатление от сайта.
Советуем размещать на десктопе полное меню — как правило, места для всех разделов достаточно. Если магазин имеет узкую специализацию, то нецелесообразно сжимать товарные категории в бургер, когда есть возможность вывести их в основное меню.
Вид основного меню на tomdom.ru
В гипермаркетах такой подход реализовать очень сложно. Здесь можно поступить по-другому — разместить рядом с бургером примечание «Каталог товаров» и выделить кнопку контрастным цветом. Элемент будет визуально заметен для покупателей.
Бургер с примечанием на ozon.ru
10. Дайте понять покупателю в основной навигации, какой ассортимент товаров его ждет на сайте
Старайтесь не ограничиваться стандартными элементами навигации — например, «Товары» или «Каталог», обычно размещаемыми на главной странице сайте. При переходе в магазин по узкому запросу многие посетители могут даже не подозревать, что там продаются и другие товары. Предоставьте им такую возможность, выведя в шапку список популярных товарных категорий.
На сайте ozon.ru сразу понятно, что ассортимент товаров очень широк и разнообразен, начиная от компьютеров и одежды, заканчивая аксессуарами для дома и сада.
Список категорий товаров в шапке на ozon.ru
А вот из шапки на wildberries.ru определить область специализации магазина трудно. Для просмотра доступных категорий требуется открыть меню, оформленное в виде бургера.
Шапка без списка категорий товаров на wildberries.ru
11. Особый подход для гипермаркетов: реализация мега-меню
При наличии очень большого каталога есть смысл внедрять мега-меню. Тогда пользователь может сразу оценить полноту ассортимента и разобраться в общем каталоге. Меню должно отображаться в виде модального окна, чтобы при случайном скроллинге страницы оно исчезало.
Часть мега-меню на ozon.ru
Еще один важный момент — кликабельность товарных категорий. В ряде онлайн-маркетов, использующих мега-меню, предусмотрены ссылки только для подкатегорий товаров. Опираясь на аналитику Baymard Institute, можно сказать, что такой подход не совсем верен. Пользователи часто кликают на категории меню автоматоматически, даже когда видят, что они некликабельны. Когда перехода с категорий на страницы подкатегорий не происходит, они нервничают, так как не могут получить дополнительной информации для определения дальнейшей схемы движения.
12. Задайте пользователю направление движения непосредственно с главной страницы
Согласно анализу Baymard Institute, пользователи хорошо реагируют, когда уже на главной странице сайта им предлагают готовые варианты навигации. Так они могут быстрее оценить существующий ассортимент и найти «тот самый» товар.
При разработке интерфейса для компании Grape мы решили разместить блок «Готовые предложения» и, тем самым, упростить покупателям процесс подбора вина. Сначала были изучены самые популярные запросы посетителей, а затем на их основе сделаны полезные подборки — например, «Лучшие вина до 1500 рублей» или «Предложения для компании друзей».
Готовые предложения для покупателей на grapewines.ru
Еще один способ заинтересовать покупателя — предложить расширенную систему фильтров. Такой подход успешно реализуется в интернет-магазинах матрасов и спальных принадлежностей matras.ru и anatomiyasna.ru.
Фильтры на anatomiyasna.ru
Наше собственное исследование также показало, что многим пользователям удобно знакомиться с ассортиментом сайта с помощью фильтров. Как правильно организовать систему фильтрации товаров, чтобы она была максимально удобной и функциональной для покупателей, можно почитать в этой статье.
13. Будьте внимательны при выводе акций на главную страницу
Привлекать внимание покупателей акционными предложениями — всем известный и действенный маркетинговый ход. Однако реализация перехода к акциям/распродажам прямо с главной страницы имеет свои нюансы. Кликнув на акцию, покупателям нередко кажется, что они попадают непосредственно в категорию. Не найдя там подходящих товаров, они решают, что таковые отсутствуют в продаже вообще, и покидают страницу.
Чтобы такого не случалось, предлагаем использовать один из вариантов:
- Делать отсылку не на отдельную страницу с акционными продуктами, а в тематическую категорию, где по умолчанию включен фильтр «Распродажа». Покупатели могут самостоятельно убрать галочку и открыть полный список предлагаемых товаров в данной категории.
- Размещать на главной только категории, выделяя товары, попадающие под акцию, уже на самих категорийных страницах.
На сайте bonprix.ru можно посмотреть, как реализуется первый вариант. Если кликнуть на окно с новинками, происходит переход на страницу «Женская одежда». По умолчанию на ней активирована сортировка «Новейшие товары», а также указан маркер «Новинки». Пользователю сразу понятно, что отображенные товары — это всего лишь часть текущего ассортимента.
Сортировка на сайте bonprix.ru
14. Не дробите товары на множество категорий и подкатегорий
Достаточно типичная ситуация, когда в интернет-магазинах фильтры заменяют большим количеством схожих по тематике категорий. Аналитика Baymard Institute подтверждает наши выводы — избыточная разбивка затрудняет навигацию по сайту. Наличие большого количества категорий рассеивает внимание, а поиск одного изделия сразу в нескольких категориях системой не предусмотрен. В результате покупка может не состояться — покупатели просто уходят с сайта, так и не удовлетворив свой запрос.
15. Каждую категорию старайтесь разбивать на подкатегории
При таком подходе покупателям легче ориентироваться в каталоге, что ускоряет процесс покупки. Подкатегории желательно сопровождать наглядными иконками — это помогает определиться с направлением поиска и различать подкатегории между собой.
При таком подходе покупателям легче ориентироваться в каталоге, что ускоряет процесс покупки. Подкатегории желательно сопровождать наглядными иконками — это помогает определиться с направлением поиска и различать подкатегории между собой.
Данный способ позволяет также привлечь внимание к определенным типам товара или контенту, который хочется выделить на фоне других предложений — например, к акциям, распродажам, рекомендациям, относящимся к конкретной подкатегории.
Пример разбивки категории «Телевизоры» на подкатегории и дополнительным блоком распродаж на citilink.ru.
Подкатегории важно размещать в формате ссылок. Это будет полезным инструментом как для постоянных покупателей, так и для вновь зарегистрированных пользователей:
- новичкам проще определиться, есть ли смысл в поиске товара в той или иной категории, поскольку некоторые продукты логически можно отнести сразу к ряду категорий;
- «постояльцы» интернет-магазина могут пользоваться ссылками для быстрого перехода к интересующим товарным позициям;
- иконки категорий тоже стоит делать кликабельными — пользователи часто кликают на них при переходе в подкатегорию.
16. Выводите соседствующие категории для возможности корректировки области поиска продуктов
Принимайте во внимание то, что многие пользователи переходят на страницу с товаром по ссылке из соцсетей или через поиск, а не «классическим» способом — через главную страницу. Наличие в листинге смежных (соседствующих) категорий помогает сориентироваться в ассортименте и понять, куда идти дальше.
Допустим, покупателю товар не подходит или не нравится — он тут же кликает на смежную категорию и оказывается на другой странице. Таким образом экономится время, и нет необходимости возвращаться на главную, начиная поиск с нуля. Хорошее решение — выделять разные типы продукта в смежные категории.
На сайте lamoda.ru видно, как эта идея реализована для категории «Аксессуары» — предложены две смежные категории «Обувь» и «Одежда».
Смежные категории в разделе аксессуаров на lamoda.ru
Решение со смежными категориями действенное, но не всегда уместное для конкретного интернет-магазина. Здесь нужно учитывать специфику ресурса и структуру интерфейса. Блок фильтрации должен быть приоритетным, особенно при вертикальном типе расположения и невозможности горизонтального отображения из-за особенностей выбранной товарной ниши.
17. Отображайте часто используемые фильтры на уровне категорий
По статистике Baymard Institute, покупатели часто путаются в понятиях фильтров и категорий, наделяя их разной значимостью. Фильтры в сайдбаре могут ими игнорироваться, а категории, наоборот, восприниматься как единственно правильный выбор.
Чтобы задать пользователю нужное направление действий, выделите часто используемые параметры фильтрации и разместите их на видном месте — над списком товаров, в окне главного меню, на промежуточных страницах категории.
Еще один способ отличить фильтры от категорий — перенаправлять пользователей напрямую на страницы с примененным фильтром. Как правильно настроить фильтрацию, мы рассказывали в этой статье.
Выпадающее меню с блоком популярных фильтров на askona.ru
18. Используйте «хлебные крошки»
«Хлебные крошки» — важный инструмент навигации, благодаря которому покупатель может отследить цепочку своих действий от главной до текущей страницы, например, до страницы о компании. Также пользователю легко возвращаться на один или нужное количество шагов назад, вплоть до начальной категории товара. «Хлебные крошки» принято размещать у левого края верхней части сайта. Чтобы ссылки были заметными и зрительно отличались на фоне основного контента, их выделяют разным шрифтом и цветом.
«Хлебные крошки», выделенные синим цветом на ozon.ru
В крупных гипермаркетах каталоги могут быть многоуровневыми, и, чтобы перемещаться по ним было проще, можно использовать метод выпадающего меню подкатегорий. Перечень подкатегорий разворачивается при наведении курсора на соответствующее звено цепочки «хлебных крошек».
«Хлебные крошки» с выпадающим меню
19. Помогайте покупателям с ориентацией в каталоге
Не секрет, что существенная часть трафика приходится именно на категории каталога, а не на главную страницу. Покупателям бывает недостаточно «хлебных крошек» для ориентации на сайте, особенно если этот элемент навигации выстроен неграмотно.
Чтобы пользователь четко видел свою «геолокацию» на сайте, выделите крупным шрифтом заголовки страниц, а также измените цветовое изображение текущего раздела меню.
Подсказки для пользователя о его местоположении в основной навигации на ozon.ru
20. Отображайте в карточке товара совместимые продукты
Для некоторых групп товаров очень важным является возможность их совместимости с другими товарами. Прежде всего, это касается электроники и компьютерной техники, где какой-то аксессуар может быть совместимым только с определенной моделью планшета или смартфона.
Видя в карточке товара варианты совместимых продуктов, покупатель может сразу понять, насколько подходит ему выбранный товар — соответственно, упрощается и поиск сопутствующих аксессуаров. Для интернет-магазина это означает потенциальное повышение конверсии и сокращение пути по воронке продаж.
В карточке смартфона на сайте citilink.ru сразу выводятся сопутствующие аксессуары:
Карточка товара, дополненная сопутствующими аксессуарами на citilink.ru
Фильтрация по совместимости также хорошо работает при поиске совместимых товаров.
21. Не забывайте про блоки с просмотренными товарами
В процессе изучения товарного ассортимента покупатель может захотеть вернуться к предыдущим предложениям — дайте ему это сделать максимально быстро и удобно. Выделите в отдельный блок ранее просмотренные позиции прямо в карточке товара.
Просмотренные товары в отдельном блоке на lamoda.ru
22. Отображайте в карточке альтернативные товары
Нормальная ситуация, когда пользователь просматривает какой-то товар, понимает, что он ему не подходит и хочет найти альтернативу. Чтобы не «отправлять» потенциального покупателя в общий каталог, предложите ему похожие продукты непосредственно в карточке товара.
Блок с похожими товарами на lamoda.ru
23. Не забудьте про футер
В футере, или так называемом подвале сайта, обычно размещается дополнительная информация: контактные данные, договор оферты, условия доставки, ссылки на соцсети и так далее. В зависимости от специализации интернет-магазина, особенностей интерфейса и контента, список блоков может меняться. Разбейте их на логические столбцы для лучшего зрительного восприятия.
Футер на ozon.ru
Как влияют элементы навигации в интернет-магазине на SEO
Удобство навигации сайта значимо для продвижения:
- чем понятнее сайт, тем лучше поведенческие факторы, а это прямо влияет на ранжирование в поисковой выдаче;
- чем логичнее структура сайта и чем меньше дублей страниц, тем лучше индексация в поисковиках;
- корректная структура позволяет сформировать привлекательный сниппет и повысить кликабельность ссылок на сайт в поисковой выдаче.
8 нюансов SEO-оптимизации навигации сайта
Чтобы получить максимум от продвижения:
1. Подумайте, куда будете направлять пользователя с главной
Страницы одной категории лучше сгруппировать для навигации по принципу: главная — общий список категорий — страница конкретной категории. Структура навигации сайта должна быть понятной для пользователей.
2. Реализуйте грамотную перелинковку
Она должна строиться на текстовых анкорах — в их роли могут выступать ключевые слова, связанные с релевантным контентом.
3. Используйте «хлебные крошки»
Это цепочка внутренних ссылок, которые должны формироваться по определенной структуре. Например, категория — подкатегория — фильтр 1.
4. Запретите индексацию страницы 404
Сделать это можно в файле robots.txt, добавив команду Disallow:/404.html. А для удобства пользователей выводите на странице ссылки на главную, разделы, блоки с популярными товарами — чтобы стимулировать продолжать движение по сайту.
5. Используйте ЧПУ-ссылки
Подбирайте для ссылок понятные человеку названия — так пользователи будут понимать смысл связанных с ними страниц еще до их открытия и будут склоняться кликать по ним. Избегайте слишком длинных URL.
6. Отслеживайте уровень вложенности страниц
Уровень вложенности — количество кликов при переходе от главной до нужной пользователю страницы. Чем ближе страница к главной, тем больше ее ссылочный вес. Важный контент лучше размещать на страницах с высоким ссылочным весом, не далее третьего уровня.
7. Используйте канонические ссылки
Если одна страница или разные страницы с похожим контентом доступны по нескольким ссылкам, важно указать каноническую ссылку. Или настройте редирект на основной URL.
8. Подготовьте файл Sitemap.html
Он показывает поисковикам структуру сайта, ускоряет сканирование, передаёт данные о категориях и ссылках, способствует корректной индексации. Регулярно обновляйте Sitemap, но не увлекайтесь делением контента на тысячи подкатегорий.
Заключение
Система навигации сайта должны быть логически продуманной и слаженной — тогда она станет мощным инструментом для повышения конверсии интернет-маркета. Вы также можете почитать об особенностях мобильной коммерции.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)
Рекомендованные статьи
Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас:
