Когда в каталоге больше сотни позиций, фильтры перестают быть удобством и становятся основным способом навигации. Через них проходит большая часть посетителей с конкретным запросом — то есть самая ценная аудитория. При этом фильтры остаются местом, где чаще всего сдаются: три клика, пустой результат, никаких подсказок, человек возвращается в поиск и уходит к конкуренту. Ниже разбираем, что делает фильтры рабочими, какие элементы подходят разным типам данных и почему интерфейс здесь вторичен по отношению к данным.
Базовые правила
- Счётчики у каждого варианта. Человек сразу видит, есть ли смысл выбирать этот пункт. Без счётчиков выбор делается вслепую.
- Варианты с нулём результатов скрываются или помечаются. Второе лучше: пропадающие пункты сбивают с толку, а недоступные показывают границы ассортимента.
- Выбор отражается в адресе страницы. Ссылку на отфильтрованный список можно отправить коллеге, сохранить в закладки и вернуться к ней из истории.
- Страница не перезагружается целиком при каждом клике, но результат обновляется заметно и с индикацией.
- Выбранные условия показаны отдельным списком над результатами, каждое снимается по отдельности, есть кнопка полного сброса.
- Выбор сохраняется при возврате из карточки товара. Потерять подбор при нажатии кнопки «назад» — самая обидная из потерь.
- Порядок фильтров осмысленный: сверху то, чем пользуются чаще всего, а не алфавитный список всех характеристик.
Что где уместно
| Тип данных | Подходящий элемент | Почему |
|---|---|---|
| Категория, бренд, тип | Флажки со счётчиками | Виден весь список и объём выбора |
| Цена | Два поля ввода плюс ползунок | Ползунком не задать точное значение, полями удобно |
| Наличие, акции | Переключатель | Двоичный выбор, не требует списка |
| Размер, цвет | Кнопки-плитки | Компактно, узнаётся визуально |
| Много вариантов (более 15) | Список с поиском внутри и сворачиванием | Иначе фильтр занимает весь экран |
| Взаимоисключающие значения | Радиокнопки или сегменты | Показывают, что выбрать можно одно |
| Числовые характеристики | Диапазон с шагом | Точные значения редко нужны |
Мобильная версия
На телефоне фильтры выносят в отдельный экран, открывающийся кнопкой. Ключевые требования три.
Первое: кнопка применения показывает количество найденного и обновляет его до применения. Человек видит, что получит, и не возвращается назад впустую. Второе: сама кнопка закреплена внизу экрана и доступна всегда, а не после прокрутки длинного списка характеристик. Третье: закрытие экрана без применения не должно молча сбрасывать выбор — либо предупреждение, либо сохранение.
Отдельно про размеры: элементы выбора должны быть достаточно крупными для пальца. Мелкие флажки, скопированные с настольной версии, — частая причина случайных нажатий и раздражения.
Что ломает фильтры
- Медленный отклик. Ожидание в несколько секунд после каждого клика прекращает подбор — люди просто перестают уточнять.
- Пустой результат без объяснения. Экран, на котором написано «ничего не найдено» и больше ничего, — тупик. Нужно показать, какое условие сузило выборку, и предложить снять его.
- Сброс выбора при переходе на вторую страницу или при смене сортировки.
- Фильтры по характеристикам, заполненным у трети товаров. Человек отфильтрует и не увидит половину подходящих позиций.
- Слишком много фильтров сразу. Двадцать групп характеристик в развёрнутом виде читаются как таблица настроек, а не как помощь.
- Разные названия одного и того же в разных категориях: цвет, окраска, оттенок.
- Отсутствие сортировки — фильтры сужают выборку, но не помогают выбрать внутри неё.
Пустой результат — отдельный экран
Это состояние проектируют реже всего, а встречается оно постоянно. Что на нём должно быть: понятное объяснение, какие условия дали пустоту; возможность снять последнее условие одним нажатием; предложение похожих позиций с ослабленными критериями; кнопка полного сброса. Хорошо работает автоматическая подсказка вида «по этим условиям ничего нет, но если расширить диапазон цены, найдётся столько-то позиций».
Фильтры и поиск в поисковых системах
Отфильтрованные списки — потенциальные посадочные страницы под запросы вроде «купить тип товара определённого бренда». Но бесконтрольно открытые для индексации комбинации фильтров порождают тысячи почти одинаковых страниц.
- Выберите ценные сочетания (обычно категория плюс один популярный признак) и сделайте для них полноценные страницы с собственными заголовком, описанием и текстом.
- Остальные комбинации закройте от индексации и укажите канонический адрес.
- Следите, чтобы адреса фильтров были стабильными: порядок параметров не должен меняться от клика к клику, иначе одна и та же выборка даст несколько разных адресов.
Данные важнее интерфейса
Самая частая причина плохих фильтров — незаполненные характеристики товаров. Никакой интерфейс не спасает, если у половины позиций не указан размер: человек отфильтрует и не увидит подходящее, а вы потеряете продажу, не узнав об этом.
Поэтому работу над фильтрами мы всегда начинаем с проверки данных: какие характеристики заполнены и у какой доли позиций, нет ли разных написаний одного значения, единообразны ли единицы измерения, есть ли значения-мусор вроде прочерков и слова «нет». Дальше становится понятно, какие фильтры вообще можно выводить, а какие сначала нужно наполнить.
Полезное правило: выводить фильтр по характеристике, заполненной менее чем у восьмидесяти процентов позиций категории, не стоит — он будет вводить в заблуждение. Лучше сначала дозаполнить данные, чем показывать неполный подбор.
Как проверить свои фильтры
- Пройдите типовой сценарий покупателя целиком, с телефона, при обычном соединении.
- Проверьте, сколько времени проходит от клика до обновления результата.
- Намеренно доведите выборку до пустого результата и посмотрите, что увидит человек.
- Откройте карточку товара и вернитесь назад: сохранился ли подбор.
- Скопируйте адрес отфильтрованного списка и откройте в другом браузере.
- Посмотрите в аналитике, какими фильтрами пользуются чаще всего и на каком шаге уходят.
Если каталогом неудобно пользоваться
Логику подбора, состояния и поведение фильтров мы описываем на этапе прототипа, до вёрстки, и проверяем на реальных данных каталога. Посмотрите, как устроено проектирование пользовательских интерфейсов, и напишите нам — разберём ваш каталог и покажем, где теряются посетители.
Такую логику мы закладываем на этапе прототипа — это проектирование пользовательских интерфейсов до начала разработки.
