В продолжение статьи про формы поиска поговорим про организацию фильтров в каталоге. Задуматься о том, какими будут фильтры, лучше до добавления товаров на сайт, чтобы потом не пришлось менять характеристики для длинного списка наименований.
Такой поиск позволяет:
Также опыт наших клиентов показывает, что хорошо организованная фильтрация товаров помогает повысить конверсию страниц каталога и снизить процент отказов.
Наиболее привычный вариант – боковое меню слева от списка товаров. Пользователи привыкли воспринимать информацию слева-направо и сначала выбирают критерии, а затем уже смотрят на сформированный список товаров.
Фильтры занимают почти два первых экрана и список товаров не сразу заметен
Меню фильтров удобно расположено слева
Также не стоит «прятать» фильтры, так как пользователи могут их просто не заметить:
Сложно выделить универсальный список фильтров, который подходил бы к каждому товару, поэтому поговорим об обязательных элементах.
Категории товаров. Очевидно, но не всегда встретишь их на сайте. Делить товары на категории лучше по их типу, назначению и\или бренду. Расположить список ссылок рекомендуем в начале блока с фильтром.
Список категорий отсутствует, что затрудняет поиск, если вам нужны разные товары
Хороший пример того, как после выбора категории компактно показать ссылки на другие товары
Новинки и/или акции. Пользователи любят такие разделы, поэтому стоит добавить выбор новых или скидочных товаров для всего списка товаров и отдельно для каждой категории.
Не самое удачное название фильтра, лучше заменить на «Товары со скидкой»
Удачно, что выделили не только новинки и скидки, но и товары с подарками
Наличие товара. Если у вас хотя бы часть товаров доступна под заказ, то обязательно добавьте возможность отсортировать товары, которые можно купить прямо сейчас.
Антипример фильтрации по наличию, так как два пункта означают одно и то же
Хороший пример фильтрации товаров по расположению склада
Выбор диапазона цен. Очень удобный фильтр для тех клиентов, которые хотели бы исключить слишком дешевые и\или дорогие товары.
Можно использовать готовые варианты диапазонов, но лучше позволить пользователю самому задать значения
Хороший пример выбора диапазона цены
Кнопка сброса фильтров. В отличие от кнопки запуска фильтрации, которую можно не добавлять (если у вас настроено автоматическое обновление списка товаров), отмена выбранных фильтров должна присутствовать в каждом каталоге.
Можно использовать готовые варианты диапазонов, но лучше позволить пользователю самому задать значения
Хороший пример выбора диапазона цены
Перечислим основные ошибки, которые следует избегать:
Пустые категории. Рекомендуем не отображать категорию, если для нее по каким-то причинам нет подходящих товаров, чтобы не нагружать блок фильтров.
Такие категории только мешают поиску товара:
Выбранные фильтры не выделяются. Следует показать пользователю что он выбрал, на случай если он захочет изменить параметры.
Выбранные фильтры нужно выделить в боковом меню, а также можно продублировать перед списком товаров:
Длинный список фильтров. Сворачивайте дополнительные параметры, чтобы они не занимали много места. Помните, что цель фильтра категории товаров – сузить поиск, поэтому ориентируйтесь только на важные характеристики.
Пример компактного отображения фильтров:
В начале списка стоит показать самые важные категории, такие как тип товара, бренд, цена, а остальные фильтры расположить ниже. Если дополнительных фильтров слишком много, то можно скрыть их, как показано в примере:
Непонятные категории. Смотрите на фильтры глазами клиентов. Рекомендуем изучить статистику запросов, например, в Яндекс.Метрике или Google Analytics. Помните о новичках, которым нужны пояснения для профессиональных терминов или характеристик товара.
Хороший пример списка категорий товаров на основе проблем клиента:
Дублирование фильтров. Повторяющимися или похожими фильтрами вы можете только запутать пользователя, а наша задача помочь ему.
Пример похожих параметров, которые только дезориентируют пользователя:
И, конечно же, проверьте, чтобы все фильтры работали и список товаров загружался как можно быстрее, дабы пользователь не успел заскучать или уйти к конкурентам.
Кроме того, советуем для каждой категории или параметра указывать справа от него количество товаров. Так пользователь может предварительно оценить время на просмотр.
Рассказывая о фильтрах, нельзя не упомянуть сортировку товаров. Располагать ее лучше над списком товаров, чтобы отделить от фильтров:
Рекомендуем выбрать следующие три вида, которые подойдут для большинства товаров.
Пример удобного размещения данных сортировок в каталоге:
Существуют и другие варианты сортировки, но они уже более специфичны и зависят от тематики товаров.
Отметим еще несколько моментов, на которые стоит обратить внимание.
Список товаров по умолчанию. До того, как пользователь выберет фильтр или способ сортировки, лучше всего показать список популярных товаров или новинок. Возможно, клиент сразу заметит необходимый товар.
Два списка категорий выглядят странно, клиент не видит товаров
Пример каталога, где по умолчанию выбраны популярные товары
Количество найденных товаров. Перед блоком товаров укажите общее число найденных наименований, чтобы пользователь оценил, нужно ли ему сузить или расширить параметры фильтрации.
Сейчас не ясно, сколько найдено товаров по заданным в фильтре параметрам
Пример размещения информации о количестве найденных товаров
Автоматическая подгрузка списка товаров. В теории должна помогать плавно просматривать полный список товаров, но на деле мешает ориентироваться в списке и затрудняет доступ к подвалу сайта. Рекомендуем использовать деление на страницы (пагинация).
Автоматическая подгрузка списка может замедлять поиск товара
Деление на страницы упрощает восприятие списка товаров
Также стоит добавить выбор количества отображаемых товаров на странице, включая кнопку «Показать все», как в примере:
Надеемся, что данный обзор способов фильтрации и сортировки товаров поможет вам организовать удобный каталог продукции и радовать ваших клиентов =). Если у вас возникли сложности с настройкой фильтров на сайте, напишите нам – поможем с реализацией.
Оценок: 1 577 (средняя 5 из 5)
Фильтрация и сортировка товаров каталога {descr}
