Фильтры на сайте: Чек-лист для повышения конверсии

Согласно исследованию Baymard Institute, только 16% крупных e-commerce сайтов обеспечивают качественный опыт фильтрации товаров. Большинство сайтов не используют фильтры эффективно: 42% не имеют фильтров, специфичных для основных категорий товаров, а 20% не предлагают тематические фильтры.

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

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

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

Дизайн меню фильтров на сайте — UX-практики

Фильтрация на мобильных устройствах

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

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

Как отображать фильтры в меню?

Чтобы фильтры в меню были удобными в использовании, лучше всего сразу показать все доступные опции или разместить их в горизонтальном скролле с дополнительной кнопкой «Все варианты», которая открывает полный список. Такой подход минимизирует количество кликов и делает интерфейс более интуитивным. Именно такой вариант реализован, например, в SmartMag.

Как удобно закрывать меню фильтров?

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

Самый интуитивный вариант — свайп вниз, к которому пользователи уже привыкли. Если фильтр открывается сбоку, уместны также жесты влево или вправо, хотя такой подход пока не слишком распространен.

Не менее важной является кнопка с крестиком («Х») — это универсальный и понятный сигнал для закрытия окна.

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

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

Фильтрация на десктопе

Самые распространенные варианты дизайна меню фильтров:

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

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

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

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

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

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

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

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

{{block}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Настройки фильтров для разных категорий

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

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

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

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

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

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

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

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

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

Фильтрация — это не просто функция в интерфейсе, а стратегический инструмент, напрямую влияющий на продажи. Она сокращает путь к покупке, снижает фрустрацию, улучшает пользовательский опыт и повышает конверсию. Но работает она только тогда, когда продумана до мелочей: удобное расположение, логичная последовательность параметров, адаптация к категориям и потребностям аудитории. Если вы до сих пор воспринимаете фильтры как «опцию» - пересмотрите подход. Ведь часто именно они определяют, останется ли пользователь на сайте или уйдет к конкуренту.