Нечувствительные ползунки в фильтрах каталога: влияние на UX и конверсию

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

В тестах пользователи тратят 10–20 секунд на одну настройку. Меняют хват, возвращаются назад, сбрасывают фильтр. Ошибочные срабатывания приводят к пустой выдаче или слишком узким результатам. Возникает усталость и недоверие, часть аудитории уходит в поиск или к конкуренту. Если числовых полей нет, выхода нет. Если есть — приходится метаться между вводом и неудачными попытками сдвинуть бегунок.

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

Когда проблема критична, а когда нет

Критична:

• На мобильном трафике и touch-first сайтах.
• В e-commerce с широкими диапазонами (электроника, маркетплейсы, DIY, мода с размерными сетками).
• В вертикалях, где фильтр — основной инструмент: недвижимость, авто, отели/авиабилеты, аренда, вакансии.
• В каталогах с тысячами SKU, когда без точной фильтрации выдача перегружена.
• В платном трафике и акциях с ограниченным временем — любая задержка бьёт по конверсии.

Мало влияет:

• В небольших витринах с 5–20 товарами, где фильтр почти не нужен.
• В нишевом B2B с малым ассортиментом и длинным циклом выбора.
• На десктопных внутренних инструментах, где есть альтернативный ввод (точные поля) и обученные пользователи.
• Когда основной сценарий — поиск по запросу, а не по диапазонам.
• Если фильтрация построена на чекбоксах/тегах, а ползунки вторичны.

Открытый вопрос для проверки

Что мешает пользователю установить нужный диапазон в фильтре с первого касания/клика на разных устройствах, и какие шаги он предпринимает после неудачной попытки?

Возможное решение проблемы

• Увеличьте активную зону бегунка до 44×44 px (iOS) или 48×48 dp (Android). Расширьте hit-area невидимыми полями.
• Разрешите клик/тап по треку: ближайший бегунок перемещается туда.
• Добавьте поля min/max с маской ввода и шагом. Синхронизируйте их со слайдером в обе стороны.
• Покажите текущие значения рядом с бегунком в компактной подсказке.
• Цель — отклик <100 мс. Уберите лишние задержки, дебаунсируйте пересчёт результатов.
• Анимируйте движение бегунка плавно, без скачков.
• Введите минимальный зазор между бегунками. Разрешите перетаскивание «сквозь», автоматически меняя роли min/max.
• Снап к шагам, метки делений и явный формат (₽, см, ГБ).
• Keyboard: Tab, стрелки, PageUp/Down. Видимое кольцо фокуса.
• ARIA: role="slider", aria-valuemin/max/now, связанная подпись.
• Контраст и размер текста соответствуют WCAG.
• Блокируйте горизонтальный сдвиг при вертикальном скролле и наоборот.
• Уберите «мёртвые зоны» у краёв, добавьте внутренние отступы.

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

• Если включить перемещение бегунка по клику/тапу на треке, то конверсия в применение фильтра может увеличиться за счёт того что диапазон задаётся одним действием.
• Если добавить поля точного ввода min/max, то конверсия в просмотр товаров может увеличиться за счёт того что пользователи задают нужные значения без ошибок ползунка.
• Если увеличить hit-area бегунков до 48×48 и усилить визуальный фокус, то конверсия в добавление в корзину может увеличиться за счёт того что на мобильных настройки фильтра выполняются быстрее.