Вернуться к статьям

Полезные статьи Wcoders

Поиск и фильтры в каталоге: как сделать удобный подбор товаров, услуг, объектов или заявок

Разбираем поиск и фильтры в каталоге веб-сервиса: категории, фасеты, сортировку, пустую выдачу, SEO, мобильную версию, производительность, аналитику и админ-панель.

Разработка маркетплейса или агрегатора Разработка B2B-портала Админ-панель для веб-сервиса Разработка платформы с API Интеграция сайта с 1С Мультиарендность в SaaS и B2B-сервисах Технический аудит веб-проекта Тестирование веб-сервиса перед запуском Продуктовая аналитика веб-сервиса Как подготовить техническое задание на разработку Многопользовательский маркетплейс Платформа отслеживания транспорта Импорт и экспорт данных
Поиск и фильтры в каталоге: удобный подбор товаров, услуг, объектов и заявок

Поиск и фильтры в каталоге - это не декоративная часть интерфейса, а один из главных механизмов выбора. Пользователь приходит в каталог не смотреть на список ради списка. Он хочет быстро найти подходящий товар, услугу, объект, специалиста, заявку, документ, заказ или предложение. Если каталог большой, без нормального поиска и фильтров он превращается в длинную витрину, где выбор требует лишних кликов, звонков менеджеру и ручного уточнения. Для бизнеса плохой поиск означает потерянные заявки и продажи. Пользователь не нашел нужный размер, регион, цену, услугу или статус - и ушел. Менеджер в админке не нашел нужную заявку - и пропустил обращение. B2B-клиент не смог отфильтровать товары по наличию и персональной цене - и отправил запрос конкуренту. Руководитель не смог выгрузить список заказов по статусу - и снова ушел в таблицы. Хороший поиск и фильтры строятся не только на frontend-компонентах. Нужны структурированные данные, понятные категории, корректная модель характеристик, быстрый backend, продуманная SEO-логика, мобильный сценарий, аналитика запросов и админ-панель для управления справочниками. Если этого нет, даже красивый интерфейс будет работать плохо: фильтры покажут пустую выдачу, поиск не поймет синонимы, сортировка будет странной, а поисковые системы начнут обходить тысячи бесполезных URL.

Где нужны поиск и фильтры

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

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

  • каталог товаров;
  • каталог услуг;
  • B2B-каталог с ценами и остатками;
  • маркетплейс продавцов;
  • агрегатор специалистов или организаций;
  • каталог недвижимости, автомобилей, оборудования или объектов;
  • база заявок в админ-панели;
  • список заказов;
  • список документов;
  • реестр клиентов;
  • расписание записей;
  • база сотрудников;
  • список партнеров;
  • каталог курсов;
  • личный кабинет с историей операций.

Поиск и фильтры решают разные задачи

Поиск отвечает на вопрос: "Найди то, что я сформулировал словами". Пользователь вводит название товара, артикул, часть услуги, бренд, город, номер заявки, фамилию клиента или свободный запрос. Фильтры отвечают на вопрос: "Оставь только варианты с нужными параметрами". Пользователь выбирает категорию, цену, статус, регион, наличие, дату, рейтинг, бренд, материал, размер, тип услуги или ответственного. В хорошем каталоге поиск и фильтры работают вместе. Пользователь может сначала ввести "монитор 27", а потом отфильтровать по цене, разрешению, наличию и бренду. Менеджер может найти заявки по телефону, а затем оставить только новые обращения за неделю. B2B-клиент может открыть категорию оборудования, выбрать производителя, склад, мощность и доступность. Нельзя заменять одно другим. Если есть только поиск, пользователю сложно сравнивать. Если есть только фильтры, он вынужден вручную проходить дерево категорий. Сильный каталог дает оба механизма и помогает переходить от общего запроса к точному выбору.

Категории: фундамент удобного каталога

Фильтры начинаются не с чекбоксов, а со структуры каталога. Если категории хаотичны, пользователь не понимает, где искать товар или услугу, а фильтры становятся случайным набором параметров. Категория должна соответствовать тому, как выбирает пользователь, а не только внутренней логике компании. В 1С, ERP или старой таблице группы могут быть удобны бухгалтерии, складу или поставщику, но не покупателю. Например, внутренняя группа "Номенклатура 2024" не должна становиться разделом сайта. Если сайт продвигается в поиске, структура каталога должна учитывать спрос, понятные названия и реальные сценарии выбора. Для каждой категории нужно определить:

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

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

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

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

Для услуг:

Для объектов:

Для заявок в админке:

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

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

Хотите запустить похожий проект?

Опишите задачу, и команда Wcoders подскажет, какой формат подойдет: MVP, Telegram Mini App, веб-сервис, интеграция или аудит текущего продукта.

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

Фасетная навигация - это фильтрация по нескольким атрибутам одновременно, часто со счетчиками значений. Например, пользователь видит, что в категории доступно 18 товаров бренда A, 12 товаров бренда B и 4 товара бренда C. Algolia в документации описывает facets как категории, построенные по атрибутам, которые позволяют уточнять результаты и получать counts по значениям. Фасеты полезны, потому что показывают пользователю доступные варианты в текущем контексте. Если в выбранной категории нет красных товаров, фильтр "красный" можно скрыть, заблокировать или показать с нулем. Если пользователь выбрал регион, набор доступных специалистов, цен и дат должен обновиться. Фасеты особенно важны для:

Но фасеты требуют качественных данных. Если один продавец пишет "Apple", второй "apple", третий "Эпл", а четвертый "Apple Inc.", фильтр по бренду станет грязным. Поэтому фасеты нужно строить на нормализованных справочниках, а не на произвольном тексте.

  • маркетплейсов;
  • интернет-магазинов;
  • B2B-каталогов;
  • агрегаторов услуг;
  • недвижимости;
  • оборудования;
  • поиска специалистов;
  • админских таблиц с большим количеством статусов.

Свободный текст и структурированные параметры

Каталог почти всегда содержит два типа данных: текст и структурированные поля. Описание товара, услуги или объекта хорошо подходит для полнотекстового поиска. Цена, дата, наличие, регион, статус и числовые характеристики должны быть структурированными. Свободный текст нужен для:

Структурированные поля нужны для:

Если важный параметр хранится только в описании, фильтр по нему будет ненадежным. Например, если "площадь 80 м2" написана в тексте, система не сможет нормально сортировать объекты по площади. Если "доставка завтра" хранится в описании, пользователь не сможет отфильтровать срочные варианты.

  • названия;
  • описания;
  • комментариев;
  • состава;
  • особенностей;
  • вопросов и ответов;
  • документов;
  • заметок менеджера.
  • цены;
  • остатка;
  • региона;
  • категории;
  • статуса;
  • даты;
  • бренда;
  • размера;
  • веса;
  • мощности;
  • типа;
  • рейтинга;
  • ответственного;
  • филиала.

Поиск по словам, артикулам и номерам

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

Для заявок:

Для услуг:

Если запрос похож на артикул или номер, точное совпадение должно быть выше обычного текстового результата. Если пользователь вводит телефон, система должна искать нормализованное значение, а не зависеть от скобок, пробелов и дефисов. Если пользователь ищет "ремонт iphone", каталог должен понимать, что это может быть категория, услуга или карточка. PostgreSQL поддерживает полнотекстовый поиск на уровне базы данных, а Elasticsearch разделяет контекст запроса и фильтра: запрос отвечает за релевантность и ранжирование, а фильтр - за ограничение набора документов. Практический вывод для веб-сервиса простой: поисковая строка и фильтры должны проектироваться как разные слои, даже если визуально они стоят рядом.

  • точное совпадение артикула;
  • поиск по названию;
  • поиск по бренду;
  • синонимы;
  • транслитерация;
  • ошибки;
  • разные раскладки клавиатуры;
  • поиск по характеристикам.
  • номер заявки;
  • телефон;
  • email;
  • ФИО;
  • компания;
  • источник;
  • комментарий;
  • внешний ID из CRM.
  • название услуги;
  • направление;
  • симптом или задача пользователя;
  • специалист;
  • город;
  • формат.

Сортировка: что показывать первым

Фильтры отвечают за состав выдачи, сортировка - за порядок. Если порядок странный, пользователь может решить, что подходящих вариантов нет, хотя они просто спрятаны ниже. Типовые варианты сортировки:

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

  • по релевантности;
  • по популярности;
  • по цене по возрастанию;
  • по цене по убыванию;
  • по рейтингу;
  • по новизне;
  • по наличию;
  • по сроку доставки;
  • по дате;
  • по приоритету;
  • по расстоянию;
  • по обновлению;
  • по статусу.

Пустая выдача: как не терять пользователя

Пустая выдача - важный экран. Если пользователь выбрал фильтры и получил "ничего не найдено", сервис не должен просто ставить тупик. Хороший пустой экран может:

В админке пустая выдача тоже должна быть понятной. Если менеджер не видит заявки, система должна показать примененные фильтры, а не создавать ощущение, что данные пропали. Для B2B-каталога важно объяснять, почему товаров нет: нет доступа по договору, нет остатков, категория скрыта, выбран не тот филиал или фильтры слишком узкие.

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

Мобильная версия фильтров

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

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

  • кнопку открытия фильтров;
  • полноэкранную панель или bottom sheet;
  • видимые активные фильтры;
  • быстрый сброс;
  • количество найденных результатов;
  • применяются фильтры сразу или по кнопке;
  • удобные диапазоны цены;
  • поиск внутри длинного списка значений;
  • липкую кнопку "Показать";
  • сохранение состояния при возврате из карточки.

UX деталей: выбранные фильтры, сброс и понятные labels

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

Фильтры должны иметь понятные названия. W3C в пояснениях к WCAG 2.2 SC 3.3.2 подчеркивает важность labels и инструкций для элементов ввода, чтобы пользователь понимал, какую информацию вводить или выбирать. Для каталога это практично: "Диаметр, мм" понятнее, чем просто "Диаметр"; "Дата заявки" не равно "Дата выполнения"; "В наличии на складе" не равно "Доступно под заказ". Если фильтр сложный, нужна подсказка. Но подсказка должна помогать, а не заменять нормальное название. Интерфейс не должен требовать от пользователя знания внутренней терминологии компании.

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

Поиск в админ-панели и поиск на сайте отличаются

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

В админке важны:

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

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

Фильтры в B2B-каталоге

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

Фильтры должны учитывать права доступа. Один клиент может видеть персональные цены и одни группы товаров, другой - другие. Внутренний менеджер может видеть весь каталог, клиент - только разрешенные позиции. Эта логика пересекается с темами B2B-портала и мультиарендности в SaaS и B2B-сервисах.

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

Фильтры в маркетплейсе или агрегаторе

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

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

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

Фильтры для услуг, объектов и заявок

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

Для объектов важны физические параметры: локация, площадь, тип, состояние, дата доступности, документы, цена, владелец, статус. Для заявок - статус, ответственный, источник, дата, приоритет, SLA, тип обращения, клиент, филиал. Нельзя переносить фильтры интернет-магазина на все типы каталогов. Удобный подбор начинается с понимания решения, которое принимает пользователь.

  • направление;
  • проблема;
  • формат;
  • специалист;
  • город;
  • дата;
  • стоимость;
  • длительность;
  • уровень;
  • срочность;
  • результат.

SEO фильтров и фасетной навигации

Фасетная навигация может быть полезной для SEO, но может и навредить. Google в документации по faceted navigation предупреждает, что фильтры на URL-параметрах могут создавать огромное количество комбинаций, из-за чего краулеры тратят ресурсы на бесполезные страницы и медленнее находят полезные URL. Поэтому нужно заранее определить:

Не каждая комбинация фильтров должна индексироваться. Страница "ноутбуки Lenovo 16 ГБ RAM" может быть полезной, если по ней есть спрос и нормальная выдача. Страница "ноутбуки + зеленый + цена от 48213 до 49127 + сортировка по скидке + 3 страница" чаще всего не нужна в индексе. Для товарных страниц Google рекомендует использовать Product structured data, если страница подходит под требования. Это помогает поисковой системе лучше понимать данные товара: цену, наличие, рейтинг, доставку и другие свойства. Но структурированные данные не заменяют нормальную структуру каталога, уникальные карточки и технически корректную индексацию.

  • какие страницы категорий индексировать;
  • какие фильтры должны создавать SEO-страницы;
  • какие комбинации закрывать;
  • какие URL использовать для фильтров;
  • где ставить canonical;
  • какие параметры не давать поисковым системам;
  • как обрабатывать пустые комбинации;
  • как формировать sitemap;
  • какие страницы имеют уникальный контент.

URL фильтров: параметры, порядок и дубли

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

Хороший подход:

Для пользователей URL должен быть полезным. Для поисковых систем - управляемым. Для backend - однозначным.

  • один и тот же набор фильтров имеет несколько URL;
  • порядок параметров меняется;
  • пустые параметры остаются в URL;
  • сортировка попадает в индекс;
  • пагинация создает дубли;
  • несуществующие комбинации возвращают успешный статус;
  • фильтры в path можно переставлять местами;
  • параметры создают бесконечное количество страниц.
  • стабильный порядок параметров;
  • единый canonical;
  • нормализация значений;
  • отсутствие дублей;
  • 404 для бессмысленных комбинаций, если страница реально невозможна;
  • закрытие технических параметров от индексации;
  • отдельные SEO-страницы только для полезных комбинаций.

Производительность поиска и фильтров

Поиск и фильтры должны быть быстрыми на реальном объеме данных, а не только на тестовой базе из 20 карточек. На скорость влияют:

Если каталог маленький, можно начать с обычной базы данных и правильно настроенных индексов. Если товаров много, запросы сложные, нужна релевантность, синонимы, фасеты, подсказки и высокая скорость, может понадобиться отдельный поисковый движок. Но выбирать технологию нужно после понимания данных и сценариев, а не по моде. Главное - проверять производительность на реалистичном объеме. Фильтр, который работает на 100 товарах, может тормозить на 100 000. Подробнее такие проверки связаны с материалом Тестирование веб-сервиса перед запуском.

  • объем каталога;
  • структура таблиц;
  • индексы;
  • количество фильтров;
  • расчет facet counts;
  • полнотекстовый поиск;
  • сортировка;
  • персональные цены;
  • права доступа;
  • наличие изображений;
  • кэш;
  • поисковый движок;
  • API;
  • frontend-рендеринг.

Индексы, кэш и актуальность данных

Быстрый поиск часто использует индексы и кэш. Но скорость не должна ломать актуальность. Нужно решить:

Например, товар может быть обновлен в 1С, затем данные попадают в backend, потом в поисковый индекс. Если индекс не обновился, пользователь видит старую цену или наличие. Поэтому интеграцию каталога, поиск и фильтры нельзя проектировать отдельно друг от друга. Если источником каталога является 1С, полезно связать эту тему со статьей Интеграция сайта с 1С.

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

Права доступа и персональная выдача

В B2B, SaaS и личных кабинетах пользователь видит не весь каталог, а только доступную часть. Поиск и фильтры должны учитывать права на backend, а не только скрывать элементы в интерфейсе. Ограничения могут зависеть от:

Если менеджер вводит ID чужой заявки, система должна проверить право доступа. Если клиент открывает ссылку на товар, скрытый для его договора, backend должен вернуть корректный запрет или пустой результат. Если фильтр показывает количество товаров, эти счетчики тоже должны учитывать права. Иначе пользователь может узнать о существовании закрытых данных по косвенным признакам.

  • компании;
  • филиала;
  • роли;
  • договора;
  • тарифа;
  • региона;
  • статуса пользователя;
  • персонального прайса;
  • назначенного менеджера;
  • группы доступа;
  • владельца заявки.

API для поиска и фильтров

Поиск и фильтры часто работают через API. Frontend отправляет запрос, backend проверяет права, применяет фильтры, обращается к базе или поисковому индексу и возвращает результаты. API должен поддерживать:

Не стоит давать frontend возможность отправлять произвольные SQL-похожие фильтры. Backend должен принимать понятный контракт и разрешенные поля. Иначе можно получить проблемы с безопасностью, производительностью и совместимостью. Общая архитектура API, backend и интеграций раскрыта в статье Разработка платформы с API.

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

Аналитика поиска и фильтров

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

Полезные метрики:

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

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

Управление фильтрами в админке

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

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

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

Подсказки, синонимы и исправление ошибок

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

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

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

Сохраненные фильтры и быстрые представления

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

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

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

Пагинация, бесконечная лента и "показать еще"

Для каталога нужно выбрать, как пользователь будет просматривать выдачу: страницы, кнопку "Показать еще" или бесконечную ленту. Пагинация удобна для SEO, контроля URL и возврата на нужную страницу. Кнопка "Показать еще" часто удобна в коммерческих каталогах и на мобильных устройствах. Бесконечная лента может быть хороша для вдохновения, но хуже подходит для точного выбора, B2B-каталогов и админок. Важно сохранить состояние. Если пользователь открыл карточку и вернулся назад, он должен оказаться там же: с теми же фильтрами, сортировкой и позицией в списке. Потеря состояния - одна из самых раздражающих ошибок в каталоге.

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

Поиск и фильтры нужно тестировать на реальных данных и реальных сценариях. Минимальный чек-лист:

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

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

Типичные ошибки при разработке поиска и фильтров

Первая ошибка - делать фильтры по всем полям подряд. Это перегружает интерфейс и не помогает пользователю. Вторая ошибка - хранить важные параметры только в тексте описания. Тогда нормальные фильтры и сортировка невозможны. Третья ошибка - не нормализовать значения. "Синий", "син.", "blue" и "Blue" становятся разными фильтрами. Четвертая ошибка - не учитывать пустую выдачу. Пользователь должен получить следующий шаг, а не тупик. Пятая ошибка - забывать про мобильную версию. Фильтры, удобные на десктопе, могут быть мучительными на телефоне. Шестая ошибка - не управлять SEO фасетной навигации. Бесконечные комбинации фильтров могут тратить краулинговый бюджет и плодить дубли. Седьмая ошибка - не тестировать производительность на реальном объеме данных. Восьмая ошибка - считать права доступа только в интерфейсе. Backend должен фильтровать результаты по роли, компании и другим ограничениям. Девятая ошибка - не собирать аналитику запросов и пустых выдач. Без данных команда улучшает каталог вслепую.

Что включить в первый релиз

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

Синонимы, сложная персонализация, сохраненные фильтры, полнотекстовый движок, платное продвижение, A/B-тесты и расширенная фасетная аналитика могут быть вторым этапом. Но структуру данных лучше заложить сразу: если параметры изначально хранятся хаотично, развивать поиск будет сложно.

  • понятные категории;
  • поиск по названию и ID/артикулу;
  • 3-7 ключевых фильтров;
  • сортировка по релевантности, цене или дате;
  • активные фильтры;
  • быстрый сброс;
  • пустое состояние;
  • мобильная версия;
  • базовая SEO-логика;
  • проверка прав доступа;
  • аналитика поисковых запросов;
  • админское управление категориями и ключевыми справочниками.

Как описать поиск и фильтры в ТЗ

Чтобы получить точную оценку разработки, в ТЗ нужно описать не "сделать фильтры", а конкретный сценарий. Стоит указать:

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

  • что является элементом каталога;
  • какие категории есть;
  • какие поля у карточки;
  • какие фильтры нужны в каждой категории;
  • какие фильтры обязательны для MVP;
  • какие значения берутся из справочников;
  • нужен ли поиск по тексту;
  • нужен ли поиск по артикулу, телефону, ID или номеру заявки;
  • какие синонимы важны;
  • какая сортировка нужна;
  • как выглядит пустая выдача;
  • нужен ли preview количества результатов;
  • как фильтры работают на мобильном;
  • какие URL должны индексироваться;
  • какие роли видят разные данные;
  • какой объем каталога ожидается;
  • нужна ли админка для управления фильтрами;
  • какие события аналитики собираются.

Как Wcoders подходит к поиску и фильтрам

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

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

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

FAQ

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

Зависит от каталога. Если пользователь знает, что ищет, важен поиск. Если он сравнивает варианты, важны фильтры. В большинстве каталогов нужны оба механизма: поиск сужает область, фильтры помогают выбрать.

Сколько фильтров нужно делать в первом релизе?

Лучше начать с небольшого набора самых важных фильтров. Обычно это категория, цена, наличие, регион, статус, бренд или ключевые характеристики. Лишние фильтры можно добавить позже на основе аналитики.

Нужно ли делать фасетные счетчики?

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

Как фильтры влияют на SEO?

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

Нужно ли подключать Elasticsearch или другой поисковый движок?

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

Как понять, какие фильтры убрать?

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

Как сделать фильтры удобными на мобильном?

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

Почему фильтры могут работать неправильно?

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

Итог

Поиск и фильтры в каталоге - это система, которая помогает пользователю быстро перейти от большого списка к подходящему решению. Она требует не только интерфейса, но и качественных данных, понятных категорий, структурированных характеристик, backend-логики, прав доступа, SEO-настроек, производительности и аналитики. Удобный каталог не заставляет пользователя думать, где спрятан нужный товар, услуга, объект или заявка. Он показывает понятный путь: ввести запрос, выбрать категорию, уточнить параметры, сравнить варианты и выполнить целевое действие. Для бизнеса это означает больше заявок, меньше ручных уточнений, быстрее работу менеджеров и лучшее понимание спроса. Если поиск и фильтры проектировать с первого релиза, каталог можно развивать спокойно: добавлять категории, характеристики, продавцов, B2B-условия, SEO-страницы, аналитику и сложные сценарии без полной переделки данных.

Хотите запустить похожий проект?

Опишите задачу, и команда Wcoders подскажет, какой формат подойдет: MVP, Telegram Mini App, веб-сервис, интеграция или аудит текущего продукта.

Еще по теме

Другие полезные материалы

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

Импорт и экспорт данных в веб-сервисе: Excel, CSV, API, ошибки и очереди
30 мин чтения

Импорт и экспорт данных в веб-сервисе: Excel, CSV, API, ошибки, очереди и проверка качества данных

Разбираем импорт и экспорт данных в веб-сервисе: Excel, CSV, API, шаблоны, валидацию, очереди, ошибки, отчёты, безопасность и качество данных.

Разработка маркетплейса или агрегатора: продавцы, каталог, комиссии и выплаты
22 мин чтения

Разработка маркетплейса или агрегатора: продавцы, каталог, комиссии, модерация и выплаты

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

Мультиарендность в SaaS и B2B-сервисах: компании, филиалы, роли и изоляция доступа
25 мин чтения

Мультиарендность в SaaS и B2B-сервисах: компании, филиалы, роли, данные и изоляция доступа

Разбираем мультиарендность в SaaS и B2B-сервисах: компании, филиалы, роли, tenant isolation, админку, API, биллинг, безопасность и тестирование доступа.