Фильтры на сайте: Чек-лист для повышения конверсии
Согласно исследованию, внедрение системы фильтрации товаров может сократить путь пользователя, повысить LTV и увеличить коэффициент конверсии интернет-магазина на 26%. Если вы хотите узнать как настроить фильтры на сайте интернет-магазина с точки зрения usability, эта статья вам в помощь. Вы получите практические советы, увидите наглядные примеры и узнаете что следует учитывать, чтобы сделать фильтрацию полезной и функциональной.
Что такое фильтры на сайте и чем они полезны для интернет-магазина?
Фильтры на сайте — это инструмент, который упрощает навигацию по интернет-магазину, помогает пользователю найти необходимый товар, улучшает поведенческие характеристики и способен улучшить видимость сайта в поиске. Правильно настроенный и спроектированный фильтр сокращает путь пользователя, повышает LTV, может увеличить средний чек и другие KPI проекта, которые в целом влияют на прибыль бизнеса.
Дизайн меню фильтров на сайте — какой выбрать?
Наиболее распространены два подхода к дизайну меню фильтров:
- слева в боковой панели
- горизонтально под шапкой сайта.
Можно комбинировать оба эти подхода для упрощения и ускорения поиска нужного товара.


Если речь идет о крупном интернет-магазине с широким ассортиментом товаров, значит будет много параметров для поиска, поэтому лучше использовать боковое меню. Такой вариант подходит интернет-магазинам электроники, детских товаров, тканей, и прочее.

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

Очередность параметров фильтра должна соответствовать популярности использованию параметра: для бокового фильтра сверху вниз и для горизонтального — слева направо.
Если есть фильтр по бренду, то стоит выделить до 5 наиболее популярных брендов и только потом выдавать список в алфавитном порядке.

Добавьте поиск по бренду — это ускорит и облегчит задачу пользователю, так как ему не придется скроллить весь список, чтобы выбрать нужный бренд.

Чек-лист настройки и проектирования фильтров на сайте
1. Корректность работы фильтров
Важно, чтобы выдача соответствовала заданным параметрам фильтра. Протестируйте работу всех параметров, чтобы избежать вывода нерелевантных товаров и выдачи с нулевым результатом.
2. Акцентность фильтрации на сайте
Сделайте инструмент заметным, чтобы пользователю не пришлось искать его у вас на сайте. Например, на сайте Zara не сразу можно увидеть кнопку фильтра в верхнем правом углу.

В мобильной версии интернет-магазина также делайте фильтры более акцентными и заметными, чтобы повысить вероятность того, что пользователь воспользуется ими. Таким образом вы сузите выдачу до наиболее релевантной и сократите путь пользователя к покупке.

3. Добавление новых параметров фильтра
При добавлении новых параметров выдача не должна перезагружаться, а ранее примененный фильтр исчезать. Важно, чтобы фокус пользователя оставался на том же месте и ему не приходилось искать нужный параметр заново.
Существует 2 способа реализации:
- Ajax-подгрузка контента — когда контент страницы автоматически подгружается из базы, без видимой перезагрузки всей страницы. Такой подход позволяет пользователям быстрее получить доступ к необходимому товару без необходимости кликать ссылки постраничной навигации.
- Вывод кнопки «Показать» или «Применить» после выбора определенного параметра фильтра — для осознанного решения применения фильтра или комбинации фильтров.


4. Панель быстрых фильтров
Добавьте панель с наиболее популярными и часто используемыми параметрами фильтрации определенной категории товаров, чтобы пользователь мог быстро перейти на нужную ему выдачу. Такие готовые страницы фильтрации на сайте — это дополнительный источник качественного целевого трафика и помощь в SEO продвижении интернет-магазина.

5. Быстрые ссылки на категории
Используйте быстрые ссылки над параметрами фильтра для отработки популярных запросов пользователей.

6. Фильтрация на сайте и сортировка товаров — не одно и то же
Не путайте сортировку и фильтрацию товара. Это абсолютно разные функции. Задача фильтров на сайте сузить выборку товаров на выдаче по определенному атрибуту, а сортировка просто меняет порядок товаров в выдаче по определенному признаку (по цене, по названию, по акции, по новизне, и т.д.). Разграничивайте эти инструменты, чтобы не путать пользователей.

7. Параметры фильтров для разных категорий
Параметры фильтра и их приоритезация должны быть релевантны категории товаров и меняться в зависимости от выбранной категории.

8. Отображение примененных параметров фильтра
Продемонстрируйте пользователю, какие именно параметры фильтра уже применены. Также дайте возможность сбросить все параметры сразу или отдельные настройки фильтра.

Не останавливайтесь на стандартных приемах. Например, интернет-магазин ювелирных изделий Zlato.ua предоставил пользователям возможность не только просматривать и удалять настройки фильтра в строке, но и менять отдельные параметры без удаления и повторного добавления этого параметра. Таким образом проявили заботу о клиенте, сделав сервис еще более клиентоориентированным.

9. Тематические фильтры на сайте
Не стоит ограничиваться только базовыми фильтрами, можно добавить тематические фильтры, которые будут полезны именно вашей целевой аудитории. Тут главное не перестараться и не перемудрить с названиями фильтров. Помните, главное облегчить поиски нужного товара и сузить круг поиска, а не запутать пользователя, как это было у H&M.

Анализируйте поисковые запросы ваших посетителей. Например, если пользователь хочет купить микрофон, то можно добавить фильтры: «микрофоны для iPhone», «микрофоны для пения», «микрофоны для конференций», «микрофоны для видеокамер» и т.д. Это ускорит процесс подбора товара для ваших пользователей.

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

Итак, при проектировании и настройке фильтрации товаров стоит учитывать множество нюансов. Но при этом, если все сделать грамотно, то фильтры на сайте могут сделать сервис более клиентоориентированным и тем самым увеличить коэффициент конверсии интернет-магазина.
Поделиться постом в:
Больше кейсов от турум-бурум?
Ознакомьтесь с нашим портфолио из различных сфер бизнеса.
Смотреть портфолио