Фильтры решают, найдёт ли покупатель нужный товар за полминуты или уйдёт к конкуренту. Рассказываем, какие фильтры ставить, как их проектировать и почему половина проблем кроется не в интерфейсе, а в данных.
Фильтр — это не список галочек
Когда в каталоге двадцать товаров, покупатель просматривает их глазами. Когда их две тысячи, без фильтров он не справится. Но частая ошибка — воспринимать фильтр как техническую функцию: выгрузили все свойства из учётной системы, вывели их слева столбиком, задача закрыта. В результате посетитель видит тридцать блоков с непонятными названиями вроде «Тип исп.» и «Кл. защ.», а нужного ему параметра среди них нет.
Хороший фильтр отвечает на вопрос, который покупатель задаёт себе при выборе. Человек, выбирающий насос, думает о напоре, производительности и диаметре подключения. Человек, выбирающий плитку, — о размере, поверхности и помещении. Поэтому проектирование фильтров начинается не с базы данных, а с понимания того, как клиент принимает решение.
Откуда брать список параметров
Мы используем четыре источника, и только их пересечение даёт хороший результат.
- Поисковые запросы. Если люди ищут «кабель медный 3х2,5» или «ламинат 33 класс влагостойкий», значит, сечение, материал, класс и влагостойкость — кандидаты в фильтры. Анализ семантики показывает, какими словами клиенты описывают нужный товар.
- Отдел продаж. Менеджеры знают, какие три вопроса задают в первые минуты разговора. Эти вопросы почти всегда становятся главными фильтрами.
- Внутренний поиск на текущем сайте. Запросы, по которым ничего не нашлось, — прямое указание на недостающие параметры.
- Конкуренты и маркетплейсы. Не для копирования, а для понимания, к какой логике выбора покупатель уже привык.
На выходе получается список из 30–60 параметров на категорию. Дальше начинается самое важное — сокращение.
Сколько фильтров показывать
Практика показывает: на экране сразу должно быть 5–8 фильтров, остальные — под кнопкой «Все параметры». Первыми идут те, которыми пользуются чаще всего, а не те, что первыми пришли из учётной системы. Цена и наличие почти всегда в топе, дальше — два-три ключевых параметра категории.
| Категория | Главные фильтры | Второстепенные |
|---|---|---|
| Электроинструмент | тип питания, мощность, цена, бренд | вес, кейс в комплекте, число скоростей |
| Отделочные материалы | размер, поверхность, цвет, помещение | коллекция, страна, толщина |
| Промышленное оборудование | производительность, мощность, напряжение | габариты, класс защиты, материал корпуса |
| Одежда для персонала | размер, сезон, защитные свойства | цвет, материал, стандарт |
Порядок фильтров стоит пересматривать по данным аналитики через два-три месяца после запуска. Нередко оказывается, что параметр, который казался ключевым, использует 2% посетителей, а спрятанный в конец — 25%.
Типы элементов и когда какой использовать
Чекбоксы
Подходят для дискретных значений, которых немного: бренд, цвет, материал. Если значений больше десяти, показывайте пять самых популярных и кнопку «Ещё», а для длинных списков брендов добавляйте поиск внутри фильтра.
Диапазоны
Для чисел — цены, мощности, веса — нужен ползунок с полями ввода. Ползунок без полей раздражает: попасть мышкой ровно в 1 500 Вт почти невозможно, а на телефоне — тем более. Границы диапазона должны подстраиваться под текущую выборку.
Предустановленные интервалы
Иногда удобнее готовые варианты: «до 5 000 ₽», «5 000–15 000 ₽», «от 15 000 ₽». Особенно для параметров, в которых покупатель не разбирается и не может сам задать точные границы.
Визуальные фильтры
Цвет лучше показывать образцами, форму — иконками, тип монтажа — схемами. Это ускоряет выбор и снижает число ошибок, особенно у непрофессиональных покупателей.
Переключатели «да/нет»
Для бинарных признаков — «в наличии», «со скидкой», «доставка завтра», «с НДС» — подходят переключатели в верхней части панели. Они занимают минимум места, а пользуются ими охотно: в B2B-каталогах фильтр «только в наличии» нередко включает каждый второй посетитель.
Данные важнее интерфейса
Можно нарисовать идеальный фильтр, но он не заработает, если свойства товаров заполнены как попало. Типичная картина: в поле «Цвет» встречаются значения «белый», «Белый», «бел.», «white» и «белый матовый». Фильтр честно показывает пять вариантов, а покупатель, выбравший «белый», не видит половины подходящих товаров.
Поэтому любой проект каталога мы начинаем с ревизии характеристик. Значения нормализуются, для каждого параметра составляется справочник допустимых вариантов, числовые значения приводятся к единым единицам измерения. Работа кропотливая, на каталоге в 10 тысяч позиций она занимает от двух до шести недель, но без неё фильтры превращаются в декорацию. В одном проекте для поставщика электротехники после нормализации число уникальных значений в поле «Сечение» сократилось со 140 до 23, и фильтр наконец стал показывать все подходящие кабели. Часто эту задачу мы берём на себя в рамках наполнения каталога контентом.
Совет студии: не выводите фильтр, если по нему заполнено меньше 70% товаров категории. Покупатель, отметивший параметр, решит, что незаполненных товаров не существует, и магазин потеряет продажи по ним.
Поведение фильтра: мелочи, которые решают
Несколько деталей, которые заметно влияют на конверсию:
- Счётчики рядом со значениями. Цифра «(34)» рядом с вариантом показывает, стоит ли его выбирать. Недоступные варианты лучше затенять, а не прятать — так человек понимает, что их нет в текущей выборке.
- Применение без перезагрузки. На десктопе результат обновляется сразу. На мобильных — после нажатия «Показать 128 товаров», чтобы экран не прыгал при каждом касании.
- Выбранные фильтры сверху. Над списком товаров — плашки с активными фильтрами и крестиками, плюс кнопка «Сбросить всё».
- Защита от пустой выдачи. Если комбинация дала ноль результатов, предложите снять последний фильтр или показать похожие товары.
- Сохранение состояния. Вернувшись из карточки товара, покупатель должен увидеть тот же список с теми же фильтрами и на той же позиции прокрутки.
Фильтры и поисковое продвижение
Отдельная тема — посадочные страницы из фильтров. Запрос «перфоратор аккумуляторный» — это, по сути, категория «перфораторы» с фильтром «тип питания: аккумулятор». Если такая комбинация имеет собственный адрес, заголовок и короткий текст, она может ранжироваться в поиске как самостоятельная страница.
Но генерировать такие страницы для всех комбинаций нельзя: получатся десятки тысяч почти одинаковых документов, которые поисковик сочтёт мусором. Правильный подход — отобрать 50–300 востребованных комбинаций по данным семантики, сделать для них статические адреса, а остальные сочетания закрыть от индексации. В одном из проектов для поставщика отделочных материалов такие страницы через полгода давали около трети органического трафика каталога.
Чек-лист фильтров для каталога
- Параметры отобраны по запросам покупателей, опыту продавцов и неудачным поискам на сайте.
- На экране 5–8 главных фильтров, остальные доступны по кнопке.
- Для каждого типа данных выбран свой элемент: чекбокс, диапазон, интервалы, визуальный образец.
- Значения характеристик нормализованы, заполненность по каждому фильтру не ниже 70%.
- У вариантов есть счётчики, недоступные значения затенены.
- На мобильных фильтр открывается отдельным экраном с кнопкой применения.
- Активные фильтры видны над выдачей, есть сброс.
- Пустая выдача не тупик: предлагаются альтернативы.
- Востребованные комбинации оформлены как посадочные страницы, остальные закрыты от индексации.
- Использование фильтров отслеживается в аналитике, порядок пересматривается раз в квартал.
