Каталог и фильтры: удобная навигация в интернет-магазине

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

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

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

Структура каталога начинается не с сайта

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

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

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

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

Глубина и ширина: сколько уровней нужно

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

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

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

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

Принцип отбора

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

Рабочий подход для небольшого магазина:

1. Для каждой категории выпишите 5–7 параметров, о которых чаще всего спрашивают покупатели.
2. Проверьте, что эти параметры заполнены у всех товаров категории в едином формате.
3. Выведите их в фильтр в порядке важности: самые частые — сверху и развёрнуты, остальные — свёрнуты.
4. Через месяц посмотрите в аналитике, какими фильтрами пользуются, и уберите невостребованные.

Типы фильтров

• Чекбоксы — для признаков с несколькими значениями, которые можно выбрать одновременно: бренды, цвета, материалы.
• Слайдер с полями ввода — для числовых диапазонов: цена, мощность, вес. Поля ввода обязательны: двигать ползунок на телефоне неудобно.
• Кнопки-переключатели — для размеров и коротких значений, которые удобно показать плиткой.
• Да/нет — для бинарных признаков: «в наличии», «со скидкой», «бесплатная доставка».

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

Мелочи, которые решают удобство

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

• Счётчик товаров рядом с каждым значением фильтра — человек видит, сколько позиций останется, ещё до клика.
• Неактивные значения, которые дадут ноль результатов, приглушены или скрыты.
• Выбранные фильтры показаны над списком товаров как «чипсы» с крестиком для быстрого сброса.
• Кнопка «Сбросить всё» на видном месте.
• Фильтры применяются без перезагрузки страницы, но адрес в браузере меняется — подборкой можно поделиться или вернуться к ней кнопкой «Назад».
• Длинные списки значений (например, 40 брендов) имеют поиск внутри блока или показывают первые 5–7 с кнопкой «Показать все».

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

Фильтры на мобильных устройствах

На телефоне больше половины покупателей, а иногда и до 80%, если трафик идёт из соцсетей. При этом боковой колонки на мобильном нет, и фильтры приходится прятать. Здесь легко ошибиться.

Что работает

Заметная кнопка «Фильтры» над списком товаров, рядом с ней — «Сортировка». По нажатию открывается полноэкранная панель с блоками фильтров. Внизу закреплена кнопка «Показать 47 товаров», где число меняется по мере выбора. Человек настраивает подборку и сам решает, когда посмотреть результат.

Полезно вынести 2–3 главных фильтра в горизонтальную ленту прямо над товарами: например, для обуви это размер и «в наличии». Это экономит одно действие для большинства пользователей.

Что не работает

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

Каталог и поисковая оптимизация

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

Правильная схема выглядит так:

1. Популярные сочетания, под которые есть заметный спрос в поиске («кроссовки мужские Nike», «диваны угловые серые»), оформляются как отдельные посадочные страницы с собственным адресом, заголовком, мета-тегами и небольшим текстом.
2. Все остальные комбинации фильтров закрываются от индексации через мета-тег robots или canonical на основную категорию.
3. Сортировка и пагинация не должны создавать дублей: страницы сортировки закрываются, у пагинации корректно настроены канонические адреса.

Мы обычно собираем список посадочных страниц по фильтрам на этапе проектирования. Для магазина среднего размера это 30–100 страниц, и они дают ощутимую долю органического трафика уже через несколько месяцев. Без такой проработки весь поисковый трафик приходится на главную и несколько крупных категорий.

Фильтр решает задачу покупателя, посадочная страница — задачу поиска. Хорошая архитектура каталога делает так, чтобы одна и та же подборка выполняла обе роли.

Поиск по сайту как часть навигации

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

Минимальные требования:

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

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

Как проверить, что навигация работает

Самый дешёвый способ — попросить 3–5 человек, не знакомых с вашим сайтом, найти конкретный товар по описанию задачи. Не «найдите товар с артикулом 1234», а «найдите подарок для мужчины, который любит рыбалку, до 3 000 рублей». Наблюдайте молча и записывайте, где человек остановился, засомневался или вернулся назад. Двух часов такого тестирования хватает, чтобы найти большую часть проблем.

Дополнительно смотрите метрики:

• долю переходов из категории в карточку товара — если она ниже 30–40%, подборка плохо отвечает ожиданиям;
• использование фильтров — какие нажимают, какие игнорируют;
• глубину просмотра и возвраты назад из карточки в каталог;
• долю поисковых запросов на сайте без результатов.

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

Выводы

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

Короткий план действий:

• соберите структуру категорий по поисковым запросам и вопросам покупателей;
• не делайте больше трёх уровней и не превращайте характеристики в категории;
• приведите значения характеристик к единому формату — без этого фильтры не заработают;
• оставьте в фильтрах 5–7 ключевых параметров для каждой категории;
• продумайте мобильную панель фильтров с кнопкой «Показать N товаров»;
• оформите популярные сочетания фильтров как посадочные страницы, остальные закройте от индексации;
• следите за поиском по сайту и запросами без результатов.

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