Согласно исследованию, внедрение системы фильтрации товаров может сократить путь пользователя, повысить LTV и увеличить коэффициент конверсии интернет-магазина на 26%. Если вы хотите узнать как настроить фильтры на сайте интернет-магазина с точки зрения usability, эта статья вам в помощь. Вы получите практические советы, увидите наглядные примеры и узнаете что следует учитывать, чтобы сделать фильтрацию полезной и функциональной.

Что такое фильтры на сайте и чем они полезны для интернет-магазина?

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

Дизайн меню фильтров на сайте — какой выбрать?

Наиболее распространены два подхода к дизайну меню фильтров:

  • слева в боковой панели
  • горизонтально под шапкой сайта.

Можно комбинировать оба эти подхода для упрощения и ускорения поиска нужного товара.

Пример вертикального фильтра в интернет-магазина косметики Mon Amie
Пример комбинированных фильтров на сайте Intertop

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

Еще один пример вертикального оформления блока фильтров на сайте интернет-магазина электроники ТехноЁж

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

Пример горизонтального фильтра на сайте интернет-магазина обуви Pratik
Очередность параметров фильтра должна соответствовать популярности использованию параметра: для бокового фильтра сверху вниз и для горизонтального — слева направо.

Если есть фильтр по бренду, то стоит выделить до 5 наиболее популярных брендов и только потом выдавать список в алфавитном порядке.

Пример приоритизации фильтра по бренду на сайте косметики MakeUp

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

Пример использования поиска по бренду в фильтре на сайте Denika

Чек-лист настройки и проектирования фильтров на сайте

1. Корректность работы фильтров

Важно, чтобы выдача соответствовала заданным параметрам фильтра. Протестируйте работу всех параметров, чтобы избежать вывода нерелевантных товаров и выдачи с нулевым результатом.

2. Акцентность фильтрации на сайте

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

Антипример кнопки для фильтрации на сайте Zara

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

Пример кнопки фильтра в мобильной версии интернет-магазина Baku Electronics

3. Добавление новых параметров фильтра

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

Существует 2 способа реализации:

  • Ajax-подгрузка контента — когда контент страницы автоматически подгружается из базы, без видимой перезагрузки всей страницы. Такой подход позволяет пользователям быстрее получить доступ к необходимому товару без необходимости кликать ссылки постраничной навигации.
  • Вывод кнопки «Показать» или «Применить» после выбора определенного параметра фильтра — для осознанного решения применения фильтра или комбинации фильтров.
Так, например, в интернет-магазине косметики Mon Amie можно выбрать все необходимые параметры фильтра и только после этого нажать кнопку «Применить»
В студии модных метаморфоз Solh фильтр не будет применен если не нажать кнопку «Применить». При этом сразу отображается количество товаров, которые подходят под параметры фильтра.

4. Панель быстрых фильтров

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

Пример готовых страниц фильтрации на сайте интернет-магазина HotLine

5. Быстрые ссылки на категории

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

Пример реализации быстрых ссылок в интернет-магазине OBI

6. Фильтрация на сайте и сортировка товаров — не одно и то же

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

Пример разделения сортировки товара и фильтрации в интернет-магазине электроники Denika

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

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

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

8. Отображение примененных параметров фильтра

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

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

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

Пример фильтрации на сайте Zlato.ua

9. Тематические фильтры на сайте

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

Из названия «Вечный фестиваль» или «Новые герои» пользователю сложно понять что именно он получит на выдаче

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

Например, интернет-магазин Intertop предлагает своим пользователям подобрать целый look из нескольких элементов по заданным параметрам. При этом любой параметр можно изменить в ходе поиска.

10. Возможность сворачивать фильтры

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

Пример фильтрации на сайте интернет-магазина детской тематики Pampik

Итак, при проектировании и настройке фильтрации товаров стоит учитывать множество нюансов. Но при этом, если все сделать грамотно, то фильтры на сайте могут сделать сервис более клиентоориентированным и тем самым увеличить коэффициент конверсии интернет-магазина на 26%.

Поделиться постом в:

Также читайте

1
/
1

Больше кейсов от турум-бурум?

Ознакомьтесь с нашим портфолио из различных сфер бизнеса.

Смотреть портфолио

Оставьте заявку и наш UX−специалист свяжется с вами

Ваше сообщение было отправлено! Мы свяжемся с вами как можно скорее

Отправить ещё одну заявку
Doublecheck your form data please