Фильтры интернет-магазина: как выбрать параметры для каждой категории

Фильтр должен помогать выбрать подходящий товар

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

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

Начните с вопросов покупателей к конкретной категории. Что обязательно должно совпасть? Какие различия они готовы обсуждать? Что проверяют перед оплатой? Возьмите обращения в поддержку, вопросы менеджерам и описание типичного заказа. Из этого списка легче выбрать первые параметры, чем из всех столбцов выгрузки.

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

Как составить набор параметров по категории

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

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

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

В документации Shopify о фильтрах источниками условий выступают, в частности, свойства товаров и вариантов. Это показывает связь интерфейса с данными на примере конкретной платформы. Возможности вашей системы нужно проверить отдельно; название поля в учёте не обязано становиться подписью на витрине.

Почему данные нужно проверить до дизайна

Одна характеристика может быть записана как «10 см», «100 мм» и «0,1 м». Для человека значения сопоставимы, а система без правила нормализации может считать их разными. В результате фильтр показывает несколько похожих пунктов или не находит товар по ожидаемому диапазону. Сначала согласуйте единицу хранения и отображения.

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

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

Как должны сочетаться выбранные условия

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

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

Проверьте границы диапазона. Входит ли товар с ценой, равной верхнему значению? Как обрабатывается пустое поле? Что происходит, если нижняя граница выше верхней? Не заставляйте покупателя догадываться по пустому результату. Сообщение об ошибке должно объяснять, какое значение исправить.

Согласуйте момент применения: после каждого выбора или по кнопке. Автоматическое обновление удобно, когда оно быстро и не сбивает человека с нужного пункта. Кнопка может быть уместна для сложного подбора. В обоих случаях пользователь должен видеть, какие условия уже выбраны и идёт ли обновление списка.

Различайте товар и доступный вариант

Одна карточка может объединять несколько размеров и цветов. Покупатель выбирает красный цвет и свой размер, видит товар в выдаче, но внутри обнаруживает, что нужная комбинация недоступна. Если система учитывает признаки карточки независимо, она может соединить цвет одного варианта с размером другого. Такой случай нужно включить в проверку.

Решите, что означает попадание в результат: существует подходящая комбинация вообще, она доступна к заказу или есть сейчас на выбранном складе. Эти условия нельзя молча подменять друг другом. Особенно внимательно проверьте самовывоз, регион доставки и товары под заказ, если они влияют на доступность.

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

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

Как вести себя при пустом результате

Пустая выдача должна помогать продолжить выбор. Покажите активные ограничения и дайте снять одно из них, не сбрасывая весь подбор. Кнопка общего сброса тоже нужна, но она не заменяет удаление отдельного условия. Человек должен понимать, что система выполнила поиск, а не перестала работать.

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

Если магазин предлагает альтернативы, объясните, какое ограничение они не соблюдают. Нельзя под заголовком «подходящие товары» незаметно показать другой размер или несовместимую деталь. Для технических категорий такая подмена особенно опасна. Лучше предложить изменить условие или обратиться за подбором.

Не сохраняйте пустой результат как тупик при возврате из карточки или обновлении страницы. Пользователь должен видеть выбранные условия и иметь возможность продолжить. Возможность поделиться ссылкой на подбор полезна, но способы хранения и индексации таких адресов согласуются отдельно от этой задачи.

Что проверить на телефоне и с клавиатуры

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

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

Проверьте полный путь с клавиатуры: открытие, переход по условиям, выбор, применение и возвращение к результатам. Видимое выделение текущего элемента помогает понять, где находится фокус. Кнопки и поля должны иметь понятные названия. Это проверяемые требования к интерфейсу, а не просьба сделать «удобный мобильный фильтр».

Как подготовить контрольные товары для приёмки

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

Для каждого сценария заранее запишите ожидаемые позиции. Например: категория, одно условие, добавление второго, снятие первого и полный сброс. Проверьте не только число результатов, но и их состав. Две ошибочные выдачи могут иметь одинаковое количество товаров.

Обязательно проверьте изменение данных после запуска. Исправленная характеристика должна появиться в подборе после согласованного обновления. Поисковый индекс хранит данные в подготовленном для поиска виде, а кеш — ранее рассчитанный результат. Если сайт использует эти механизмы, разработчик должен объяснить срок обновления и способ обнаружить задержку.

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

Кто поддерживает фильтры после запуска

Назначьте владельца словаря характеристик и правила добавления новых категорий. Если каждый сотрудник вводит значения по-своему, аккуратная панель быстро наполнится дублями. У нового товара должны быть заполнены признаки, необходимые для подбора, а у новой категории — согласованный набор условий.

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

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

Передайте подрядчику таблицу категорий, словарь значений и контрольные сценарии. ШТАБ ИТ помогает проектировать и дорабатывать интернет-магазины; эти материалы позволяют оценить не только интерфейс, но и подготовку каталога. Для выбора по текстовому запросу отдельно продумайте поиск по сайту: он решает соседнюю, но самостоятельную задачу.