Как выбрать и настроить фильтры интернет-магазина
Практическое руководство по фильтрам интернет-магазина: как выбрать характеристики, подготовить данные, настроить логику, проверить интерфейс и оценить использование без ложных выводов.
Фильтры интернет-магазина помогают сузить уже понятный ассортимент по признакам, которые важны для выбора. Начните не со списка полей поставщика, а с вопросов покупателя: «подойдёт ли этот товар», «есть ли нужный размер», «можно ли использовать его таким способом». Для каждой категории набор фильтров будет своим.
Хороший фильтр держится на трёх вещах: чистых данных, понятной логике отбора и состоянии, которое не теряется при просмотре карточки. Если хотя бы одна из них не настроена, даже длинная панель с десятками характеристик будет мешать выбирать.
Выберите характеристики по реальным задачам
Соберите запросы поиска по сайту, вопросы в поддержку, отзывы и формулировки, которыми покупатели описывают нужный товар. Затем сопоставьте их с характеристиками, которые действительно заполнены у ассортимента. Так вы не добавите фильтр «материал» в категорию, где его не знают для половины позиций, и не пропустите параметр совместимости, от которого зависит покупка.
Число фильтров зависит от задач покупателя и полноты данных. У кофемолки нужны тип жерновов и способ приготовления, для подарочного набора — повод или состав, а для кофе — обжарка, формат и способ заваривания. Единый список «бренд, цвет, цена» для всего магазина удобен в админке, но редко помогает покупателю.
Характеристика должна отвечать на один вопрос. «Быстрый и компактный» нельзя превратить в одно значение: скорость и размер — разные свойства. Сначала определите, что означает каждое поле, какие значения допустимы и кто отвечает за их заполнение. Общую связь между категориями, карточками и фильтрами описывает статья «Структура каталога интернет-магазина».
Приведите значения к одному словарю
Значения должны быть сопоставимы до того, как их увидит покупатель. «1 кг», «1000 г» и «1 килограмм» для фильтра веса означают одно и то же, поэтому в данных у них должен быть общий числовой формат и единица измерения. Человек может видеть привычную подпись «1 кг», а система при этом хранит число 1000 и единицу «г».
То же относится к синонимам: «без кофеина» и «декаф» нужно объединить под одним согласованным значением, если магазин считает их одним признаком. Не превращайте неизвестное значение в «нет». Когда у товара не заполнено поле «подходит для аэропресса», это означает «неизвестно», а не «не подходит»; при положительном выборе «подходит для аэропресса» такой товар не должен считаться подтверждённым совпадением. Отметьте пробел в данных и исправьте его, а не выдавайте неизвестность за свойство товара.
Наличие храните на уровне продаваемого варианта. У модели может быть доступен размер 1 кг, а размер 250 г — закончиться. Нельзя показывать «в наличии» для 1 кг только потому, что у этой же модели где-то осталась пачка 250 г: фильтр должен проверять одну и ту же вариацию, которая одновременно удовлетворяет всем выбранным условиям.
Заранее зафиксируйте логику отбора
Самое привычное правило для покупателя — И между разными группами фильтров и ИЛИ между значениями внутри одной группы. Например, «средняя обжарка» и «для фильтра» означают, что нужны оба свойства. «Светлая или средняя обжарка» означает, что подойдёт любой из двух вариантов.
Это правило особенно полезно для альтернатив: несколько цветов, размеров или совместимых способов приготовления. Но бывают исключения. Функциональные признаки иногда описывают независимые обязательные условия, и выбор двух значений внутри группы может означать именно пересечение. Если логика нестандартная, подпишите её в интерфейсе и проверьте на людях: скрытое правило трудно угадать.
Счётчики у опций должны объяснять результат
Число рядом с «средняя обжарка» должно рассчитываться по одному правилу во всех состояниях фильтра. Рекомендуемый подход — применить уже выбранные фильтры из остальных групп, а внутри текущей группы считать объединение выбранных значений и проверяемой опции. Так счётчик показывает, сколько товаров будет в выдаче после добавления этой опции по правилу ИЛИ.
Например, покупатель уже выбрал «для фильтра», «250 г» и светлую обжарку. Счётчик возле «средней обжарки» показывает число пачек, которые останутся после добавления средней: подходят товары со светлой или средней обжаркой, но обязательно для фильтра и в упаковке 250 г. Он не должен считать товар, который одновременно имеет две обжарки.
Когда счётчик равен нулю, не подменяйте выбор скрытой заменой условия. Можно отключить опцию или показать ноль, но при нажатии ясно объясните, что именно нужно снять, чтобы продолжить. Автоматическое изменение другого фильтра создаёт ощущение, что каталог сам меняет запрос покупателя.
Покажите фильтры так, чтобы выбор можно было продолжить
На мобильном устройстве фильтры обычно открываются в отдельной панели. В ней должны быть видны выбранные значения, кнопка сброса и действие «Показать N товаров». Число N нужно пересчитывать до закрытия панели, иначе покупатель не понимает, к чему приведёт выбор.
После применения покажите активные условия в каталоге и дайте снять каждое одним нажатием. При возврате из карточки сохраните выбранные фильтры, сортировку и место в выдаче. Иначе человек сравнит товары, вернётся и начнёт поиск с первой страницы — особенно болезненно это в длинной категории.
Состояния загрузки, ошибки и пустой выдачи различаются. Пока данные загружаются, не показывайте «ничего не найдено». При ошибке дайте повторить запрос и не сбрасывайте уже выбранные условия. При настоящем нуле сохраните фильтры на экране, покажите, что совпадений нет, и предложите снять конкретный ограничивающий признак или очистить все условия.
На компьютере при длинной выдаче удобна боковая панель, а в компактной категории можно показать фильтры над списком. Поставьте важные группы выше второстепенных, бренды отсортируйте по алфавиту, размеры — по естественному порядку. Для цены укажите валюту и единицу измерения, а диапазон дайте ввести числами: одного ползунка недостаточно для точного выбора и клавиатурной навигации.
Учебный пример: фильтры для 18 товарных SKU кофе
Представим небольшой каталог из 18 учебных SKU — отдельных продаваемых артикулов и вариантов — кофе. Он не задаёт обязательную структуру для кофейного магазина, а помогает увидеть, какие данные должны совпадать в карточке, фильтре и наличии.
| Группа | Примеры значений | Зачем покупателю |
|---|---|---|
| Тип | зерно, молотый | Выбрать формат кофе, а не путать его с помолом |
| Обжарка | светлая, средняя, тёмная | Подобрать вкус и способ приготовления |
| Упаковка | 250 г, 1 кг | Выбрать объём конкретной вариации |
| Без кофеина | да, нет | Исключить или найти декаф |
| Способ приготовления | эспрессо, фильтр, турка | Найти подходящий профиль или помол, если магазин его гарантирует |
Тип «зерно» и «молотый» — альтернатива, а «помол» не должен тайно означать любой формат. Если магазин продаёт зерно без помола, оно не соответствует условию «молотый для турки». Если одну и ту же смесь можно заказать и в зерне, и молотой, создайте отдельные варианты с собственными признаками и остатками.
| Вариант | Упаковка | Обжарка | Остаток |
|---|---|---|---|
| Смесь A, 1 кг | 1 кг | средняя | 0 |
| Смесь A, 250 г | 250 г | средняя | 12 |
| Смесь B, 1 кг | 1 кг | средняя | 8 |
| Смесь C, 1 кг | 1 кг | тёмная | 5 |
Допустим, покупатель выбирает среднюю обжарку, 1 кг и «в наличии». В этом наборе остаётся только смесь B, 1 кг: вариант A, 1 кг закончился, а A, 250 г не соответствует упаковке. Если выбрать среднюю или тёмную обжарку, правило ИЛИ внутри группы расширит выдачу: останутся B и C, обе пачки по 1 кг в наличии. Нельзя показать карточку смеси A как доступную из-за остатка пачки 250 г: это заставит человека открыть товар, которого он фактически не может купить.
Как принять настройку до запуска
Составьте небольшую таблицу тестов с товарами, известными результатами и ожидаемым числом карточек. Проверяйте не только красивый интерфейс, но и данные, поисковый запрос к каталогу и поведение после перехода в карточку.
| Сценарий | Действие | Ожидаемый результат |
|---|---|---|
| Альтернативы | Выбрать светлую и среднюю обжарку | В выдаче товары с любой из двух обжарок |
| Пересечение групп | Добавить «для фильтра» | Остаются только товары, подходящие по обжарке и способу |
| Вариант и остаток | Выбрать 1 кг и «в наличии» | У каждой карточки доступна именно вариация 1 кг |
| Незаполненное поле | Выбрать способ приготовления, неизвестный у одной позиции | Эта позиция не попадает в подтверждённые совпадения; пробел отмечен для исправления |
| Нулевой результат | Добавить несовместимое условие | Видна пустая выдача и способ снять условие, без скрытой подмены |
| Возврат из карточки | Открыть товар и вернуться назад | Сохраняются фильтры, сортировка и позиция в списке |
| Ошибка загрузки | Имитировать недоступность выдачи | Показано сообщение об ошибке и повтор, выбранное состояние сохранено |
Проверьте также доступность с клавиатуры, читаемость названий элементов и работу на медленном мобильном интернете. Тестовый набор должен включать отсутствие товара, вариант с остатком, несколько значений одной характеристики и частично заполненные данные. Тогда приёмка ловит не только баги вёрстки, но и ошибки в правилах каталога.
Измеряйте использование, не приписывая фильтрам причины
События фильтров помогают находить проблемные категории: сохраните просмотр категории, открытие панели, применение значения, нулевой результат, очистку условий, переход в карточку, добавление в корзину и заказ. Для анализа также нужны идентификатор сессии, категория, выбранные значения и статус наличия на момент показа. Не записывайте в аналитику лишние персональные данные.
Вот учебный пример для одной категории за период. Он показывает способ расчёта, а не ожидаемые нормы для магазина.
| Показатель | Расчёт | Результат |
|---|---|---|
| Сессии категории с фильтрами | 420 из 1 000 | 42 % |
| Нулевые результаты после фильтра | 18 из 540 применений | 3,3 % |
| Сессии с корзиной после фильтра | 72 из 420 | 17,1 % |
| Сессии с заказом после фильтра | 36 из 420 | 8,6 % |
Окно здесь — одна сессия: корзина и заказ засчитываются, только если произошли в ней после применения фильтра. Люди, которые включают фильтры, часто уже мотивированы купить, поэтому эти 17,1 % и 8,6 % не доказывают, что фильтры сами повысили конверсию. Сравнивайте одинаковые категории и периоды, смотрите записи тестов и проводите контролируемые изменения, прежде чем делать причинный вывод. Общий набор метрик и проверку событий можно дополнить статьёй «Аналитика интернет-магазина: какие метрики отслеживать».
Не превращайте каждое состояние фильтра в страницу для поиска
Комбинации фильтров, сортировка и служебные параметры способны создать бесконечное число адресов. Сначала согласуйте, какие состояния нужны людям в интерфейсе, какие из них имеют отдельный поисковый спрос и ассортимент, а какие должны оставаться техническими. Это решение требует общей работы команды каталога и поискового продвижения, или SEO.
robots.txt ограничивает обход, но не гарантирует удаления адреса из результатов поиска. Указание noindex должно быть доступно роботу, иначе он может не увидеть директиву. Не закрывайте все фильтры одним правилом: часть подготовленных посадочных страниц может быть полезна, а часть параметров нужно только корректно обработать.
Частые вопросы
Сколько фильтров показывать в категории?
Показывайте столько, сколько реально помогает выбрать товар и достаточно полно заполнено в данных. Начните с признаков из вопросов покупателей и поиска по сайту, затем проверяйте использование и нулевые результаты. Общего числа для всех категорий нет.
Нужно ли показывать фильтр с незаполненными значениями?
Сначала оцените полноту данных. Неизвестное значение нельзя выдавать за ответ «нет» или считать подтверждением свойства при положительном отборе. Отмечайте такие позиции как пробел в данных и исправляйте его; правила показа до исправления должны быть заранее согласованы.
Что делать, если выбранные фильтры дают ноль товаров?
Покажите, что совпадений нет, оставьте выбранные условия видимыми и дайте снять одно ограничение или очистить все. Не меняйте фильтры автоматически: покупатель должен контролировать свой запрос.
Нужно ли индексировать страницы с параметрами фильтров?
Решайте для каждой группы состояний отдельно. Страница может быть полезна в интерфейсе и не нуждаться в поисковой индексации; самостоятельной посадочной обычно нужны отдельная задача, качественный ассортимент и согласованная техническая реализация.
Фильтры начинают работать после договорённости о данных и сценариях, а не после добавления новых чекбоксов. Поддерживайте словарь значений, тестируйте варианты с остатками и регулярно разбирайте нулевую выдачу — это даёт каталогу больше пользы, чем бесконечное расширение панели.