Редакция DDRW ·

Поиск и фильтры каталога: как помочь выбрать товар

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

Плитки товарного каталога рядом с прозрачными регуляторами фильтров

Начните с вопросов покупателя

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

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

Приведите значения к одному виду

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

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

Объясните, что уже выбрано

После применения фильтра посетитель должен видеть активные условия и способ их отменить. Удобно выводить выбранные значения рядом с результатами, особенно на телефоне, где панель фильтров может закрываться. Для сложного набора пригодится действие «Сбросить всё», но оно не заменяет возможность убрать только одно ограничение.

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

Разделите поиск и уточнение результата

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

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

Продумайте пустую выдачу

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

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

Сохраните путь к найденному товару

Открыв карточку и нажав «Назад», человек ожидает увидеть прежний список с выбранными условиями. Рекомендуем проверять сохранение фильтров, страницы и позиции прокрутки как отдельный сценарий. Иначе сравнение нескольких товаров требует заново повторять поиск после каждой карточки.

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

Проверьте каталог на телефоне

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

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

Для приёмки используйте короткую проверку:

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

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

Услуги и проекты по теме

Обсудим вашу задачу

Пришлите описание продукта, текущий сайт или список вопросов. Уточним состав работ и предложим следующий шаг для оценки проекта.

Связаться с DDRW
Все материалы