Поиск и фильтры в интернет-магазине: лучшие UX-практики
Практика3 минРедакция Innovialabs
Коротко
Хороший поиск понимает запрос в любом виде — с опечаткой, на другой раскладке или синонимом — и никогда не оставляет пустой экран, а фильтры повторяют критерии, по которым люди действительно выбирают товар.
Главное о поиске и фильтрах
Покупатель, который пользуется поиском, обычно уже знает, что хочет. Задача магазина — не потерять его на этом шаге. Для этого поиск должен прощать ошибки и понимать разные формулировки, а фильтры — помогать быстро сузить выбор до нескольких подходящих товаров.
Строка поиска должна быть заметной: на десктопе — открытое поле в шапке, на мобильном — поле или крупная иконка, которые видны сразу.
Автодополнение
Подсказки появляются уже после первых символов и экономят покупателю время.
- Показывайте несколько типов подсказок: популярные запросы, категории, конкретные товары с фото и ценой.
- Выделяйте совпадающую часть текста.
- Поддерживайте навигацию стрелками и Enter на десктопе.
- Учитывайте недавние запросы пользователя — их удобно повторить.
- Подсказки должны появляться быстро, иначе ими не пользуются.
Опечатки, синонимы и транслитерация
Люди пишут по-разному, и поиск должен это понимать.
| Ситуация | Пример | Что делать |
|---|---|---|
| Опечатка | «холодильнк» | Нечёткий поиск (fuzzy matching) |
| Неверная раскладка | «yjenet» вместо «ноутбук» | Конвертация раскладки |
| Транслитерация | «noutbuk», «iphone» → «айфон» | Словарь и правила транслита |
| Синоним | «смартфон» и «телефон» | Словарь синонимов |
| Единицы и форматы | «1 тб», «1tb», «1000 гб» | Нормализация значений |
| Языки | запрос на узбекском или английском | Индексировать названия на нескольких языках |
Для рынка Узбекистана транслитерация особенно важна: покупатели смешивают кириллицу и латиницу, а узбекский язык встречается в обеих графиках. Словарь синонимов стоит пополнять из журнала поисковых запросов — это лучший источник реальных формулировок.
Для этой работы обычно используют специализированные движки (Elasticsearch, OpenSearch, Meilisearch, Typesense и другие) — встроенный поиск по базе данных редко справляется с опечатками и релевантностью.
Пустая выдача
Экран «Ничего не найдено» — это потерянный покупатель. Что делать вместо него:
- Исправить запрос и показать результаты: «Показаны результаты по запросу „ноутбук“».
- Если совпадений нет — показать похожие товары, популярные позиции или категории.
- Предложить ослабить фильтры, если пустую выдачу дали они.
- Дать способ связаться: чат или форму «Не нашли? Поможем подобрать».
Регулярно выгружайте запросы с нулевым результатом. Они подскажут, каких синонимов не хватает, а иногда — каких товаров ждут покупатели.
Фильтры, которые совпадают с логикой выбора
Фильтры строятся не из всех полей в базе, а из того, как люди реально выбирают товар в этой категории.
- Для одежды: размер, цвет, сезон, материал. Для техники: объём памяти, диагональ, бренд. Для мебели: габариты, материал, цвет.
- Самые важные фильтры — сверху, редкие — свёрнуты.
- Цена — диапазон с полями ввода, а не только ползунок.
- Показывайте количество товаров рядом с каждым значением и скрывайте или блокируйте значения, дающие пустой результат.
- Выбранные фильтры — чипами над выдачей с возможностью снять каждый в один клик и кнопкой «Сбросить всё».
- Единые значения атрибутов: «синий», «Синий» и «темно-синий» не должны быть тремя разными цветами случайно.
Фильтры на мобильном
- Фильтры открываются в полноэкранной панели, кнопка «Показать N товаров» внизу.
- Сортировка отдельно от фильтров и всегда под рукой.
- Выбор фильтра не должен перезагружать страницу и сбрасывать прокрутку.
- Состояние фильтров сохраняется при возврате из карточки товара назад.
SEO и фильтры
Комбинации фильтров создают огромное число URL. Решите заранее, какие страницы фильтров полезны для поиска (например, «Кроссовки Nike»), — их стоит сделать индексируемыми с уникальным заголовком. Остальные комбинации закрывайте от индексации или указывайте canonical, чтобы не плодить дубли.
Частые ошибки
- Поиск ищет только точное совпадение в названии.
- Фильтры одинаковые для всех категорий.
- Пустая выдача без подсказок.
- Атрибуты заполнены не у всех товаров — фильтр «теряет» часть каталога.
- Никто не смотрит аналитику поисковых запросов.