Навигация для сайта интернет-магазина

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

Элементами навигации по каталогу интернет-магазина выступают:

1. Поиск по сайту;
2. «Хлебные крошки»;
3. Адреса страниц сайта (ЧПУ);
4. Фильтры (подбор товаров) по ключевым характеристикам;
5. Сортировка товаров по заданным параметрам;
6. Представление карточки товара в разделе;
7. Всплывающее окно быстрого просмотра товара;
8. Блок недавно просмотренных товаров;
9. Блоки сопутствующих и аналогичных товаров;
10. Блоки «Новинки», «Скидки», «Бестселлеры».

Разберем подробно каждый элемент навигации, который упрощает покупку на сайте и ведет к росту процента конверсии вашего интернет-магазина.

1. Поиск по сайту

Поиск по сайту просто необходим крупным интернет-магазинам, количество товаров которых стартует от 300 единиц, так как 25-30% пользователей ищут товары в интернет-магазинах не через каталог, а при помощи встроенного поиска товаров. Поиск по товарам не только укорачивает путь покупателя от каталога до корзины, но еще и позволяет собирать статистические данные, которые пользователи вбивают в строку поиска на сайте. А это очень ценная информация, которая позволяет дать ответ на вопрос: чего хотят пользователи?

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

Для этого можно использовать выпадающие подсказки.

Выпадающие подсказки в строке поиска

Настройка аналитики поисковых данных

Аналитику поиска позволяет настраивать Google Analytics. Для этого необходимо зайти в раздел «Администратор» - «Настройки представления», включить отслеживание и указать параметр запроса. Программа позволяет ввести до 5 разных параметров запросов.

Поиск по сайту: поисковые параметры и запросы

Очень важно верно указать параметр запроса, чтобы система корректно отслеживала количество и структуру поисковых данных по сайту. Например, в интернет-магазине продуктов с доставкой «Евроопт» параметром запроса является: searchtext=. После = следует запрос пользователя – товар, который он ищет.

Использование статистики поиска по сайту

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

Статистика использования поиска по сайту

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

Причины отказов могут быть разные:

1. Искомого товара нет в каталоге. Возможно, это станет сигналом для расширения каталога товаров.
2. Искомого товара не оказалось в наличии. Значит, вам стоит пополнить складские запасы.
3. Искомый товар в каталоге назван по-другому и не выводится при поиске. В этом случае вы можете поисковый запрос прописать в мета-теге title и в описании товара, после чего он будет находиться по разным запросам.
4. Искомый товар выводится не первым в поисковой выдаче. Этот вопрос можно решить с разработчиками сайта.
5. Вместо искомого товара вообще выводятся товары другой категории. Это повод лучше разобраться в настройках поиска или поручить специалисту разобраться с проблемой.

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

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

2. Хлебные крошки

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

«Хлебные крошки» интернет-магазина обоев

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

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

3. Адреса страниц сайта (ЧПУ)

Адреса страниц сайта должны быть понятны обычному человеку и так же, как и «хлебные крошки», отражать место страницы в иерархии каталога. Такие адреса называются «человекопонятными URL» или ЧПУ.

Человекопонятный URL раздела интернет-магазина обоев

ЧПУ формируется по некоторым правилам:

1. Транслитерация названий товаров и разделов происходит автоматически. Практически все системы управления сайтами позволяют транслитерировать названия разделов и товаров.
2. ЧПУ формируется из пути от главной страницы до карточки товара с упоминанием разделов, в которые товар вложен.
3. Пользователь должен попадать в более высокий раздел иерархии каталога при удалении из строки адреса названия товара или раздела до слеша.
4. ЧПУ карточки товара должен формироваться именно из каталога, а не из поиска или сортировки товаров интернет-магазина.

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

4. Фильтры товаров по ключевым характеристикам

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

Пример фильтра светильников по бренду, типу и назначению

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

Как выделить основные параметры для фильтров?

Критерием выделения параметров для фильтра может быть:

1. Спрос в поисковых системах. Например, для телевизоров ключевым свойством для фильтрации может быть диагональ и тип экрана, а уж потом наличие дополнительных функций. Самые востребованные параметры должны идти в начале фильтра.
2. Параметры фильтра конкурентов. Если ваши конкуренты из топ-10 используют фильтрацию одежды по цвету, размеру, сезону, материалу и производителю, вам тоже стоит разработать у себя на сайте фильтр с данными параметрами.
3. Ваш взгляд на параметры фильтра. Если вы считаете, что фильтрация подгузников по возрасту ребенка более релевантна, чем по его весу, проведите А/Б тест и выясните это.

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

Таблица с параметрами для фильтра

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

Создание посадочных страниц из результатов фильтра

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

Пример динамической страницы фильтра

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

Оптимальным решением для подобных страниц будет создание статических страниц под востребованные параметры выбора товаров: например, «черное платье 42 размера».

10 параметров фильтра в разделе с женскими платьями

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

Пример невостребованного сочетания параметров фильтра

Например, никто не ищет в Яндексе «салатовое шерстяное платье» и еще миллионы сочетаний базовых параметров фильтра. А какие платья все-таки ищут, вы поймете, заглянув в семантическое ядро сайта.

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

Опираясь на самые частотные запросы, стоит создать список страниц-тегов и внести их в техническое задание разработчику. Не забудьте также прописать возможность оптимизации страниц фильтров:

1. Прописывать заголовки;
2. Размещать текст на странице;
3. Заполнять мета-теги;
4. Указывать ЧПУ.

5. Сортировка товаров в разделе по заданным параметрам

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

Сортируются товары по:

1. Цене – это самый популярный вид сортировки, который позволяет расположить товары в списке от самых дешевых до самых дорогих и наоборот.
2. Скидке – этот вид сортировки помогает увидеть, на какие товары распространяется максимальная и минимальная скидка.
3. Обновлению – этот вид сортировки помогает отсортировать товары по дате попадания их в каталог.
4. Популярности – этот вид сортировки располагает товары в списке в зависимости от количества продаж.
5. Рейтингу – этот вид сортировки помогает найти товары с самыми позитивными и самыми негативными оценками и отзывами.

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

6. Представление карточки товара в разделе

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

Это может быть:

1. Название товара;
2. Название бренда;
3. Фото товара;
4. Цена и скидка;
5. Ключевые характеристики (цвет, состав, размер);
6. Рейтинг товара и количество отзывов на товар;
7. Статус товара (товар дня, бестселлер, новинка, акция)
8. Кнопка с призывом к действию (купить, заказать, добавить в корзину, добавить к сравнению, добавить в список желаний);
9. Функция быстрого просмотра страницы.

Пример представления товара в разделе

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

7. Всплывающее окно быстрого просмотра товара

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

Пример всплывающего окна быстрого просмотра товара

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

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

1. Навигации покупателя по каталогу;
2. Повышения доверия к сайту;
3. Продления времени нахождения пользователя на странице;
4. Улучшения поведенческих характеристик сайта;
5. Повышения процента конверсии сайта.

8. Блок недавно просмотренных товаров

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

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

Блок недавно просмотренных товаров

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

9. Блоки сопутствующих и аналогичных товаров

В любой карточке товара также должны быть расположены блоки:

1. Сопутствующих или дополнительных товаров (cross-sell).
2. Аналогичных товаров (up-sell и down-sell).

Блок сопутствующих товаров помогает продать объектив с фотоаппаратом, станок с лезвиями, шапку с шарфиком и лак с помадой. Он может называться по-всякому: «С этим покупают», «Завершить образ», «Дополните комплект» и т.д.

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

Пример блока сопутствующих товаров

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

1. Продажа техники: принтер и картридж, плеер и наушники;
2. Продажа мебели: стол и стул, кровать и матрас;
3. Продажа растений: цветок и кашпо; грабли и лейка...

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

Блок аналогичных товаров призван помочь принять решение о покупке при сравнении с более дешевыми и более дорогими товарами. Если покупателя не устроит цена товара, он может купить товар подешевле, но с более скромным набором функций (down-sell). Если же покупателя не устроит скудный набор функций, он в этом блоке сразу увидит товары с полным функционалом и более высокой цене (up-sell). Блок аналогичных товаров призван превратить пользователя в покупателя любой ценой.

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

10. Блоки «Новинки», «Скидки», «Бестселлеры»

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

Пример блоков с новинками, бестселлерами, акциями и скидками

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

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

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