UX поиска и фильтров: как спроектировать удобный каталог

Что делает каталог удобным

Человек приходит в каталог с одной из двух стратегий: знает, что ищет, и вводит запрос, или выбирает, сужая ассортимент фильтрами. Хороший интерфейс поддерживает обе и позволяет их сочетать.

Ключевые принципы:

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

Поле поиска

• Расположение. В шапке, на заметном месте, одинаково на всех страницах. В интернет-магазине с большим ассортиментом поле лучше показывать целиком, а не прятать за иконкой.
• Ширина. Поле должно вмещать типичный запрос без обрезки.
• Подсказка внутри поля — пример запроса («Например, кроссовки для бега»), а не просто «Поиск».
• Кнопка и Enter. Отправка по клавише и по кнопке; на мобильных — подходящая клавиатура через type="search" или enterkeyhint="search".

Автодополнение

Подсказки при вводе экономят время и учат человека словарю каталога. Делите их на группы:

• запросы — популярные формулировки;
• категории — «Кроссовки в разделе Обувь»;
• товары — с миниатюрой и ценой для быстрого перехода.

Правила: выделяйте совпадающую часть, поддерживайте навигацию стрелками и Enter, не показывайте слишком длинный список и не подменяйте введённый текст без действия пользователя. Для доступности используйте паттерн combobox из WAI-ARIA Authoring Practices.

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

Люди ошибаются, пишут сокращениями и на разных языках. Поиск должен это учитывать:

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

Если запрос исправлен автоматически, скажите об этом: «Показаны результаты для "кроссовки". Искать "кросовки"?»

Пустая выдача

Страница «Ничего не найдено» — самое опасное место каталога. Вместо тупика дайте выход:

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

Фильтры, которые приводят к нулю результатов, лучше заранее помечать неактивными или показывать рядом количество товаров.

Фасеты

Фасетные фильтры — это группы свойств: бренд, размер, цена, цвет, наличие.

Советы:

• Порядок фасетов — по важности для выбора в этой категории, а не одинаковый везде.
• Длинные списки сворачивайте до нескольких значений с кнопкой «Показать все».
• Решите, применяется ли фильтр сразу или по кнопке «Показать». На десктопе обычно сразу, в мобильной шторке — по кнопке с числом результатов.
• Сохраняйте фильтры в URL, чтобы выдачей можно было поделиться и вернуться к ней кнопкой «Назад».

Чипы выбранных фильтров

Над выдачей показывайте чипы с выбранными значениями: «Nike ×», «До 500 000 сум ×». Они отвечают на вопрос «почему я вижу именно это» и дают снять условие одним нажатием. Добавьте «Сбросить всё», когда выбрано несколько фильтров.

Фильтры на мобильных

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

Сортировка

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