Фильтры каталога одежды: как превратить вопросы покупателя в характеристики товара

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

Начните с задачи, а не с панели фильтров

Для каждой товарной группы запишите пять-десять реальных формулировок, с которыми человек может начать выбор. Источники — поисковые запросы внутри магазина, вопросы в поддержке, интервью и наблюдение за сессиями. Если таких данных пока нет, составьте рабочие гипотезы и явно пометьте их как гипотезы. «Тёплое пальто» — не готовый фильтр. Нужно решить, какие проверяемые свойства товара отвечают за это обещание: состав, утеплитель, подкладка, сезонность, температурный режим, если бренд действительно может его обосновать.

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

Матрица перед разработкой

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

• «Высокая посадка» → атрибут посадки → вводит товарный редактор по спецификации → проверить заполнение по всем джинсам → товар без данных не выдавать за модель с высокой посадкой.
• «Натуральная ткань» → состав в процентах → поступает из карточки поставщика и проверяется редактором → проверить формат и пропуски → не заменять отсутствие состава догадкой по фотографии.
• «Есть в моём размере» → наличие конкретного варианта → поступает из учётной системы → сверить частоту обновления → после смены размера пересчитать список и число результатов.
• «Можно забрать сегодня» → остаток по точке и правило резерва → ответственный за остатки и логистику → проверить задержку синхронизации → показывать только подтверждённые варианты.

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

Проверьте четыре состояния интерфейса

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

На мобильном экране важны те же вопросы. После применения фильтров пользователь должен видеть изменившееся количество товаров и возможность вернуться к прежнему набору. Не заставляйте его заново выставлять всё после просмотра одной карточки.

Что проверить с командой разработки и SEO

Фильтры полезны покупателю, но их URL могут создавать почти бесконечное число комбинаций. Документация Google отдельно предупреждает о риске чрезмерного обхода таких адресов. Решение об индексируемых сочетаниях принимайте для конкретной архитектуры: какие страницы имеют самостоятельный спрос и содержание, а какие существуют только для выбора внутри каталога. Заодно проверьте, что важные категории и карточки доступны по обычным ссылкам из навигации. Один только фильтр не должен быть единственным путём к товару.

Мини-тест перед релизом: дайте человеку четыре задания («найти чёрные прямые брюки своего размера», «сравнить две посадки», «снять один фильтр после нулевого результата», «вернуться к выбору после карточки»). Отмечайте не только выполнение, но и моменты, где название признака пришлось объяснять. Это сигнал исправить словарь, а не добавить подсказку к непонятному слову.

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

Павел Забара, руководитель STIK.

Источники: исследование Baymard Institute о фильтрах товарного списка; документация Google Search Central по фасетной навигации и структуре интернет-магазина. Проверить первоисточники можно по этим названиям.