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

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

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

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

Как покупатель выбирает товар

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

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

Фильтры: какие параметры выбрать

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

Как определить набор

• Проанализируйте запросы в поиске по сайту и в поисковых системах: люди часто сами называют параметры («диван угловой серый», «кроссовки для бега 42»).
• Поговорите с менеджерами: какие уточняющие вопросы они задают клиентам.
• Изучите, как устроены фильтры у лидеров ниши, но не копируйте слепо.
• Для каждой категории — свой набор: для смартфонов важны память и камера, для мебели — размеры и материал.

Порядок и приоритеты

Самые востребованные фильтры располагают вверху и раскрывают по умолчанию. Менее важные прячут в сворачиваемые группы или в «Все параметры». Классический верхний набор: цена, бренд, главный технический параметр, наличие. Остальное доступно по требованию. Такая градация позволяет не перегружать интерфейс и одновременно не лишать продвинутых пользователей тонкой настройки.

Типы фильтров и элементы управления

Для разных данных подходят разные контролы, и выбор влияет на скорость работы.

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

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

Два принципиальных решения: применять фильтры мгновенно или по нажатию кнопки, и как показывать результат.

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

Сортировка: соседний инструмент

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

Поиск: основа и подсказки

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

Автодополнение и подсказки

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

Опечатки, морфология и синонимы

Ни один покупатель не обязан писать запрос идеально. Поиск должен понимать:

• опечатки и пропущенные буквы («ноутбук» и «ноутбк»);
• неправильную раскладку клавиатуры («ноутбук» по-английски, как «yenb,erf»);
• формы слов: единственное и множественное число, падежи;
• синонимы и разговорные названия: «холодильник» и «холодос», «кроссовки» и «кеды»;
• транслитерацию и написание брендов кириллицей и латиницей;
• поиск по артикулу и коду без учёта пробелов и дефисов.

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

Страница результатов поиска

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

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

Пустой результат: что делать

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

1. Предложите исправление опечатки или альтернативный запрос.
2. Расширьте поиск автоматически: уберите последнее слово, ослабьте условия.
3. Покажите популярные категории и бестселлеры.
4. Если фильтры исключили все товары, предложите убрать самый ограничивающий.
5. Дайте возможность оставить заявку или написать в чат: «Не нашли нужное? Подберём вручную».

Каждый запрос без результата — ценная информация. Если люди ищут товар, которого нет в каталоге, это сигнал расширить ассортимент или добавить синоним.

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

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

Фильтры и SEO

У страниц с фильтрами есть опасная и выгодная стороны. Выгодная: каждая комбинация, по которой люди ищут («красные кроссовки для бега»), может стать отдельной посадочной страницей с собственным заголовком, описанием и адресом. Опасная: бесконтрольная генерация комбинаций создаёт тысячи дублей, которые тратят краулинговый бюджет и размывают позиции.

• Определите, какие комбинации имеют поисковый спрос, и для них создайте чистые адреса и уникальные тексты.
• Остальные комбинации закройте от индексации через мета-теги, канонические адреса или файл robots; подробнее — в материале про robots.txt и sitemap.xml.
• Следите за формированием адресов: понятные URL с категорией и параметром лучше, чем длинная строка символов, это мы разбирали в статье про ЧПУ.
• Страницы результатов внутреннего поиска обычно закрывают от индексации.

Общие правила подготовки сайта к продвижению приведены в статье про SEO на этапе разработки.

Скорость и производительность

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

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

Данные о поведении подскажут, что улучшать. Отслеживайте:

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

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

Типичные ошибки

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

Итог

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