Фильтры в каталоге: как покупатели ищут и почему уходят

Каталогу нужны фильтры по тем параметрам, по которым покупатель на самом деле выбирает товар: размер, цена, назначение, наличие. Обычно это 4–8 фильтров на категорию, причём у каждой категории набор свой. Хороший фильтр показывает, сколько товаров найдётся, применяется без лишних кликов и не заводит в тупик «ничего не найдено». Ниже разберём, как выбрать параметры, как оформить фильтры на компьютере и смартфоне, что делать с поисковыми дублями и на чём магазины чаще всего ошибаются.

Зачем каталогу фильтры и когда без них можно обойтись

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

Маленькому каталогу на 30–50 товаров чаще достаточно продуманных категорий и сортировки. Фильтры становятся необходимыми примерно от сотни позиций в одной категории: столько человек уже не просматривает глазами.

Фильтры — не единственный способ найти товар. Часть покупателей сразу идёт в строку поиска, и её тоже стоит привести в порядок: об этом мы писали в статье про поиск по сайту магазина.

Какие фильтры нужны: от сценариев выбора, а не от базы данных

Частая ошибка — выгрузить в фильтры все поля из учётной системы. Артикул, код поставщика, страна регистрации бренда: покупателю это не нужно. Он думает категориями своей задачи — «зимняя», «на мембране», «до 10 тысяч», «на рост 134».

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

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

Фильтры собираются из характеристик товаров. Если в одной карточке написано «хлопок», в другой «100% cotton», а в третьей поле пустое, фильтр по материалу покажет часть ассортимента. Поэтому работа над фильтрами начинается с порядка в данных — о нём мы говорили в статье про карточку товара.

Как показывать разные типы фильтров

Механика, которая не бесит

Сами значения фильтров тоже требуют аккуратности.

• Счётчик товаров у каждого значения: «Красный (3)». Человек заранее видит, что его ждёт, и не кликает в пустоту.
• Мгновенное применение без кнопки «Показать» — или хотя бы заметная плавающая кнопка с числом найденных товаров.
• Выбранные фильтры видны сверху списком, каждый снимается одним кликом, а «Сбросить всё» невозможно не заметить.
• Несколько значений в одном фильтре. Покупателю подходят и 42-й, и 43-й размер — не заставляйте его смотреть их по очереди.
• Порядок по важности. Сверху — то, чем пользуются чаще всего, редкие параметры свёрнуты.
• Выбор не сбрасывается. Человек открыл карточку, вернулся назад — и видит тот же отфильтрованный список, а не весь каталог заново.
• Адрес страницы меняется вместе с фильтром. Тогда подборкой можно поделиться или сохранить её в закладки.

Фильтр и сортировка — разные инструменты. Фильтр убирает неподходящее, сортировка расставляет оставшееся: по цене, популярности, новизне. Сортировку стоит держать отдельно, над списком товаров, и не смешивать с фильтрами в одной панели.

Что делать со страницей «ничего не найдено»

Отдельная боль — тупик «ничего не найдено». Пустая страница без подсказок — точка, где покупателя теряют насовсем.

• Покажите, какой именно фильтр обнулил выдачу, и предложите его снять одним нажатием.
• Выведите похожие товары: тот же тип в соседнем размере, цвете или ценовом диапазоне.
• Дайте кнопку «Сбросить все фильтры» и способ связаться, если человек ищет что-то конкретное.
• Ещё лучше — не допускайте заведомо пустых комбинаций: показывайте нули в счётчиках или делайте недоступные значения неактивными.

Фильтры на смартфоне

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

• Кнопка «Фильтры» закреплена и показывает, сколько параметров выбрано.
• Внутри шторки разделы сворачиваются, первыми идут самые нужные.
• Внизу шторки всегда видна кнопка «Показать 24 товара» с актуальным числом.
• Выбранные значения показаны над списком товаров и снимаются касанием.
• Галочки и плитки достаточно крупные, чтобы попасть пальцем с первого раза.

Страницы фильтров и SEO: посадочные и дубли

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

Но здесь легко навредить. Если каждая комбинация фильтров плодит отдельный адрес, поисковик получает тысячи почти одинаковых страниц: робот тратит на них время, а нужные страницы ранжируются хуже. Открывать для индексации стоит только отобранные сочетания с реальным спросом и достаточным числом товаров, остальные — закрывать или указывать для них основную страницу тегом canonical. Спрос проверяют в Вордстате — так же, как при сборе семантического ядра.

Настройка тонкая, и делать её лучше вместе с SEO-специалистом. Как устроены дубли, что такое canonical и как выбирать сочетания для посадочных, подробно разобрано в статье про дубли страниц и canonical.

Почему фильтры тормозят и как это лечится

Фильтрация по каталогу в несколько тысяч позиций — тяжёлые выборки из базы. На дешёвом хостинге с медленными дисками такой каталог задумывается на секунды, и никакой UX это не спасёт. Быстрый хостинг на NVMe-дисках и нормальные индексы в базе — тоже часть юзабилити, просто невидимая.

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

Как спроектировать фильтры: пошагово

1. Соберите вопросы покупателей: что спрашивают по телефону и в чате, что вводят в поиск по сайту.
2. Для каждой категории выпишите 4–8 параметров, по которым реально выбирают, и расставьте их по важности.
3. Проверьте данные: заполнены ли эти характеристики у всех товаров и одинаково ли записаны значения.
4. Объедините значения-синонимы и уберите технические поля, которые покупателю ничего не говорят.
5. Выберите оформление для каждого параметра: галочки, плитки, диапазон, переключатель.
6. Продумайте поведение: счётчики, список выбранного, сброс, пустая выдача, мобильная шторка.
7. Решите с SEO-специалистом, какие сочетания станут посадочными страницами, а какие закрываются от индексации.
8. После запуска посмотрите в Яндекс Метрике, какими фильтрами пользуются, и уберите те, которые никто не трогает.

Частые ошибки в фильтрах

• Один набор фильтров на весь каталог. Диагональ экрана в разделе чехлов и размер обуви в разделе сумок только мешают.
• Десятки параметров подряд. Нужные три тонут среди тридцати ненужных.
• Значения без счётчиков. Каждый клик — лотерея, половина заканчивается пустой страницей.
• Фильтр перезагружает страницу и возвращает наверх. Выбрать три параметра — три долгих ожидания.
• Сброс выбора при возврате из карточки. Покупатель настраивает всё заново или уходит.
• Названия из учётной системы. «Тип_2» и «Свойство 14» вместо «Материал» и «Сезон».
• Все сочетания открыты поисковикам. Сайт разрастается до десятков тысяч одинаковых страниц.
• Мобильную версию не проверяли. Кнопка «Применить» прячется под клавиатурой или за краем экрана.

Чек-лист фильтров каталога

• У каждой категории свой набор фильтров из 4–8 параметров.
• Первыми стоят параметры, о которых покупатели спрашивают чаще всего.
• Характеристики заполнены у всех товаров, значения записаны единообразно.
• У значений есть счётчики товаров, пустые комбинации недоступны.
• Выбранные фильтры видны над списком и снимаются одним нажатием.
• Страница пустой выдачи предлагает ослабить фильтр и показывает похожие товары.
• На смартфоне фильтры открываются в шторке с кнопкой «Показать N товаров».
• Выбор сохраняется при возврате из карточки товара.
• Для поиска открыты только отобранные сочетания, остальные закрыты от индексации.
• Список товаров после применения фильтра обновляется быстро.

Коротко

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

Посмотрите на свои фильтры глазами покупателя с конкретной задачей: быстро ли он доберётся до нужного товара? В CasperLab мы проектируем каталоги от сценариев покупателя — расскажем, как это устроено, на странице разработки интернет-магазинов, и поможем и с логикой, и со скоростью.