Поиск и фильтрация в интернет-магазине — это два инструмента, которые сокращают путь от «зашёл на сайт» до «нашёл нужный товар». Поиск ищет конкретную вещь по запросу, фильтры сужают список товаров по параметрам: цене, размеру, бренду. Если один из инструментов работает плохо, клиент не листает каталог вручную — он уходит туда, где искать проще.
Почему поиск и фильтры решают, купят или уйдут
Поиск и фильтры решают, купит клиент товар или уйдёт, потому что они — единственная альтернатива ручному перебору каталога. Человек не готов листать сотни карточек в поиске нужной модели: он либо находит вещь за пару кликов, либо закрывает вкладку и ищет тот же товар у другого продавца.
Каталог с большим числом товаров без рабочих фильтров превращается в стену карточек, по которой можно только листать вниз. Клиент, который пришёл за конкретной моделью, вынужден просматривать все товары подряд, включая те, что ему точно не подойдут по размеру, цене или характеристикам. Чем больше позиций в каталоге, тем дороже обходится каждая лишняя секунда поиска.
Связь между удобной навигацией и продажами прямая: магазин, где покупатель находит товар за пару шагов, конвертирует посетителей в заказы лучше, чем магазин с тем же ассортиментом, но запутанным каталогом. Подробнее о том, какие ещё элементы сайта влияют на конверсию, — в разборе 5 методов поднять конверсию интернет-магазина.
Поиск и фильтры — не техническая деталь каталога, а часть воронки продаж: каждый шаг, на котором клиент не может сузить выбор, — точка, где он может уйти.
Поисковая строка: что должно работать с первого символа
Строка поиска должна работать с первого символа: быть заметной на странице, не требовать точного названия товара и подсказывать варианты по мере ввода. Если её спрятали в иконку без подписи или она реагирует только на точное совпадение, клиент решает, что поиска на сайте нет, и уходит листать каталог руками.
Первое условие — заметность. Строка поиска должна бросаться в глаза на любой странице сайта, а не прятаться за значком, который ещё нужно опознать и найти. Второе — подсказки при вводе: список товаров или категорий, который появляется по мере набора текста, сокращает путь к нужной странице и сразу показывает, что поиск работает.
Третье условие — терпимость к опечаткам и синонимам. Клиент пишет название с ошибкой или использует не то слово, которым товар назван в каталоге, — и поиск должен подобрать похожие варианты, а не выдать пустой список. Отдельный сценарий — поиск по артикулу: часть клиентов ищет товар не по названию, а по номеру, который увидели в прайсе, на упаковке или у консультанта, и строка поиска должна одинаково хорошо работать и с текстом, и с цифрами.
Ещё один полезный элемент — история и популярные запросы. Она подсказывает направление тем, кто открыл поиск, но ещё не сформулировал, что именно ищет.
Фильтры: как не запутать клиента параметрами
Фильтры не путают клиента параметрами, если набор значений подобран под категорию товара и все выбранные условия работают вместе, а не по очереди. Одинаковый список фильтров на все разделы каталога — частая ошибка: покупателю одежды нужен размер и цвет, покупателю электроники — технические характеристики, и один шаблон фильтров на обе категории только мешает обоим.
Рядом с каждым значением фильтра стоит показывать количество подходящих товаров: если клиент видит ноль в скобках, он не станет тратить клик на заведомо пустой результат. Это же число служит ориентиром — стоит ли вообще сужать выбор по этому параметру.
Фильтры должны комбинироваться одновременно: выбор размера не должен сбрасывать уже отмеченный цвет, а добавление бренда — обнулять диапазон цены. Сброс — тоже одно действие: и отдельного фильтра, и всех сразу, без необходимости возвращаться на шаг назад через историю браузера. Так же клиент ожидает, что выбранные фильтры сохранятся, если он открыл карточку товара и вернулся к списку — начинать подбор заново после каждого просмотра карточки никто не станет.
Каталог с фильтрами часто строят на решениях вроде 1С-Битрикс, и здесь стоит отдельно проговорить вопрос с адресами страниц: url с параметрами фильтров может плодить дубли страниц в поиске, если движок сайта не настроен на это отдельно. Конкретную реализацию защиты от дублей определяет разработчик сайта — универсального решения на все движки нет.
Фильтр, который сбрасывает соседние условия при каждом клике, отнимает у клиента больше времени, чем экономит сама фильтрация.
Сортировка: помощник или лишняя деталь
Сортировка помогает, когда меняет порядок уже отобранных товаров понятным образом, и превращается в лишнюю деталь, когда клиент не понимает логику порядка или вариантов слишком много. Важно не путать сортировку с фильтрацией: фильтр сокращает список товаров, а сортировка только меняет их порядок внутри уже отобранного набора.
Типовые варианты — по цене, по популярности, по новизне, по рейтингу — закрывают почти все сценарии покупателя. Тот, кто выбирает по бюджету, сортирует по цене; тот, кто не определился с моделью, — по популярности или рейтингу; тот, кто следит за ассортиментом, — по новизне.
Сортировка «по умолчанию» — это фактически первое впечатление от каталога: именно в этом порядке товары видит клиент, который ничего не трогал. Если порядок кажется случайным или нелогичным, это заметно с первого экрана и работает против доверия к магазину ещё до того, как покупатель успел что-то отфильтровать.
Сортировку по умолчанию клиент не выбирает — он её получает. Если порядок товаров в ней случайный, это первое, что подрывает доверие к каталогу.
Лишние варианты сортировки, которые непонятно чем отличаются друг от друга, не расширяют выбор, а добавляют шум: клиент тратит время на то, чтобы понять разницу между пунктами меню, вместо того чтобы смотреть товары.
Пустая выдача: что показать, если ничего не нашлось
Пустая выдача — это не тупик, а точка, откуда можно вернуть клиента к покупке, если показать ему следующий шаг. Голая фраза «ничего не найдено» без единого варианта действия — и человек, скорее всего, закрывает сайт, а не пробует другой запрос.
Рабочих вариантов несколько, и их стоит показывать вместе, а не по одному. Первый — похожие товары: даже если точного совпадения нет, соседние по категории или характеристикам модели удерживают клиента в каталоге. Второй — предложение снять последний применённый фильтр: часто пустой результат получается не потому, что нужного товара нет в принципе, а потому что покупатель случайно выбрал слишком узкую комбинацию условий. Третий — ссылка написать в поддержку: для товаров, которых действительно нет в наличии, это не даёт клиенту уйти совсем без ответа.
Магазины, которые оставляют пустую выдачу без единого действия, повторяют одну из частых ошибок каталога — теряют клиента не потому, что у него не было нужного товара, а потому что ему не предложили следующий шаг.
Пустой результат поиска — это не финал сценария, а место, где магазин либо предлагает альтернативу, либо теряет клиента.
Мобильная версия: те же задачи, другое пространство
На телефоне поиск и фильтры решают те же задачи, что на десктопе, но работают в другом пространстве экрана, и это меняет их устройство. Фильтры обычно уходят в отдельный экран или выезжающую панель — на маленьком экране нет места держать их сбоку от списка товаров, как на десктопе.
Кнопка вызова фильтра должна быть видна без прокрутки вниз: если клиент долистывает список товаров и только потом натыкается на возможность его сузить, часть пути он уже проделал впустую. То же касается поисковой строки — на мобильном она чаще спрятана в верхнем меню, и её заметность там ещё важнее, потому что альтернативных подсказок на экране меньше.
Применение фильтра не должно ощущаться как перезагрузка всей страницы заново: если после каждого выбранного параметра экран мигает и грузится с нуля, клиент откажется трогать оставшиеся фильтры даже при в целом удобном интерфейсе. Здесь напрямую работает общее правило дизайна интернет-магазина: с телефона сегодня приходит заметная часть покупателей, и мобильный сценарий стоит проверять отдельно, а не считать уменьшенной копией десктопа.
Что проверить у себя
Проверить у себя работу поиска и фильтров можно за один проход по каталогу — без метрик и аналитики, просто пройдя путь покупателя: от строки поиска до пустой выдачи. Ниже — пункты, которые стоит закрыть в первую очередь, если хотя бы один из сценариев выше сейчас не работает.
- Строка поиска заметна на всех страницах и понимает опечатки и синонимы, а не только точное название товара.
- Подсказки при вводе показывают товары или категории раньше, чем клиент дописал запрос до конца.
- Фильтры на каждой категории собраны из подходящих ей параметров, а не из одного общего шаблона на весь каталог.
- Фильтры комбинируются одновременно и сохраняются при возврате из карточки товара на список.
- Сортировка по умолчанию выдаёт товары в логичном порядке, а не в случайном.
- Пустая выдача предлагает похожие товары или снятие последнего фильтра, а не голую фразу «ничего не найдено».
- На мобильной версии кнопка фильтра видна без прокрутки, а его применение не перезагружает страницу целиком.
Чаще всего фильтры и поиск не чинят, потому что кажется — раз каталог работает и заказы идут, значит, всё в порядке. Но часть клиентов при этом просто не доходит до корзины: они закрывают вкладку на пустой выдаче или на третьей странице бесконечного скролла, потому что не смогли сузить список. Я обычно советую пройти путь покупателя самому, на реальных запросах, а не смотреть на каталог глазами администратора — тогда сразу видно, где логика фильтров ломается. — Алексей Колесников, UX-дизайнер студии «ЦЕМЕС»
Если каталог растёт, а трафика на карточки товаров не прибавляется, есть смысл заодно свериться с более широким SEO-аудитом интернет-магазина — поиск и фильтры решают часть задачи привлечения клиента, но не всю.
Источники
- Ecommerce UX Research Topics — Nielsen Norman Group
- E-Commerce UX Research — Baymard Institute
- Designing for Web Accessibility — Tips — W3C
Если хотите проверить поиск и фильтры на своём сайте или обсудить, что стоит доработать в каталоге, — оставьте заявку, и мы посмотрим на конкретный магазин.
