Поиск по каталогу: какими должны быть фильтры и сортировка каталога товаров

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

Такой поиск позволяет:

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

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

Расположение

Наиболее привычный вариант – боковое меню слева от списка товаров. Пользователи привыкли воспринимать информацию слева-направо и сначала выбирают критерии, а затем уже смотрят на сформированный список товаров.

Также не стоит «прятать» фильтры, так как пользователи могут их просто не заметить:

Основные элементы

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

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

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

   

   Хороший пример того, как после выбора категории компактно показать ссылки на другие товары

   

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

   Не самое удачное название фильтра, лучше заменить на «Товары со скидкой»

   

   Удачно, что выделили не только новинки и скидки, но и товары с подарками

   

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

   Антипример фильтрации по наличию, так как два пункта означают одно и то же

   

   Хороший пример фильтрации товаров по расположению склада

   

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

   Можно использовать готовые варианты диапазонов, но лучше позволить пользователю самому задать значения

   

   Хороший пример выбора диапазона цены

   

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

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

   

   Самый удобный вариант – расположить список выбранных фильтров и кнопку сброса до списка товаров

   

Рекомендации по организации

Перечислим основные ошибки, которые следует избегать:

1. Пустые категории. Рекомендуем не отображать категорию, если для нее по каким-то причинам нет подходящих товаров, чтобы не нагружать блок фильтров.

   Такие категории только мешают поиску товара:

   

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

   Выбранные фильтры нужно выделить в боковом меню, а также можно продублировать перед списком товаров:

   

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

   Пример компактного отображения фильтров:

   

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

   

4. Непонятные категории. Смотрите на фильтры глазами клиентов. Рекомендуем изучить статистику запросов, например, в Яндекс.Метрике или Google Analytics. Помните о новичках, которым нужны пояснения для профессиональных терминов или характеристик товара.

   Хороший пример списка категорий товаров на основе проблем клиента:

   

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

   Пример похожих параметров, которые только дезориентируют пользователя:

   

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

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

Сортировка товаров

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

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

1. По цене. Самый популярный способ – наверняка вы и сами часто им пользуетесь. Нужен обязательно!
2. По популярности. Помогает тем, кто гонится за трендами или не совсем разбирается в тематике и хотел бы увидеть, что заказывают другие. Популярность можно отслеживать по количеству заказов или отзывов.
3. По названию (или алфавиту). Подходит для тех, кто выбрал несколько брендов и хотел бы их «сгруппировать» внутри списка.

Пример удобного размещения данных сортировок в каталоге:

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

Дополнительно

Отметим еще несколько моментов, на которые стоит обратить внимание.

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

   Два списка категорий выглядят странно, клиент не видит товаров

   

   Пример каталога, где по умолчанию выбраны популярные товары

   

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

   Сейчас не ясно, сколько найдено товаров по заданным в фильтре параметрам

   

   Пример размещения информации о количестве найденных товаров

   

3. Автоматическая подгрузка списка товаров. В теории должна помогать плавно просматривать полный список товаров, но на деле мешает ориентироваться в списке и затрудняет доступ к подвалу сайта. Рекомендуем использовать деление на страницы (пагинация).

   Автоматическая подгрузка списка может замедлять поиск товара

   

   Деление на страницы упрощает восприятие списка товаров

   

Также стоит добавить выбор количества отображаемых товаров на странице, включая кнопку «Показать все», как в примере:

Заключение

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

---