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

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

Якщо ви хочете дізнатися, як налаштувати фільтри на сайті інтернет-магазину з точки зору юзабіліті — ця стаття буде вам у пригоді. Ви отримаєте практичні поради, побачите наочні приклади та дізнаєтеся, що варто враховувати, аби зробити фільтрацію корисною та функціональною.

Що таке фільтри на сайті та чим вони корисні для інтернет-магазину?

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

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

Фільтрація на мобільних пристроях

Щоб зробити фільтр доступним на мобільному, найкраще використовувати фіксований (sticky) бар, який завжди залишається на екрані — незалежно від того, чи користувач прокручує сторінку вгору або вниз. Це дозволяє миттєво звернутися до фільтрів у будь-який момент. 

Інший варіант — показувати цей бар лише під час прокрутки вгору. Такий підхід економить екранний простір, але може бути менш очевидним для користувача, оскільки не всі здогадаються, що фільтр «з'являється» лише при зворотній дії.

Як відображати фільтри в меню?

Щоб фільтри в меню були зручними у використанні, найкраще одразу показати всі доступні опції або розмістити їх у горизонтальному скролі з додатковою кнопкою «Усі варіанти», яка відкриває повний список. Такий підхід мінімізує кількість кліків і робить інтерфейс інтуїтивнішим. Саме такий варіант реалізований, наприклад, у SmartMag.

Ще один варіант— вкладені попапи або аккордеони з прокруткою. Якщо параметрів фільтра багато (наприклад, десятки брендів або характеристик), акордеони або попапи допомагають компактно їх організувати. Завдяки групуванню і прихованню другорядної інформації користувач швидше знаходить потрібні опції. Такий підхід можна побачити, зокрема, на сайті Symbol.

Як зручно закривати меню фільтрів?

Оскільки меню фільтрів відкривається у вигляді попапа, важливо передбачити кілька зручних способів його закриття — це покращує UX.

Найінтуїтивніший варіант — свайп вниз, до якого користувачі вже звикли. Якщо фільтр відкривається збоку, доречні також жести вліво або вправо, хоча такий підхід поки що не надто поширений.

Не менш важливою є кнопка з хрестиком («Х») — це універсальний і зрозумілий сигнал для закриття вікна.

Якщо попап займає лише частину екрана, його можна закрити натисканням поза межами. А у випадку повноекранного відображення логічним буде свайп вправо — це відповідає очікуванням більшості користувачів.

Важливе зауваження: у мобільній версії меню фільтрів завжди має бути кнопка «Застосувати» або «Показати» , яка зазвичай закріплена у фіксованій панелі, щоб бути постійно доступною. Але критично важливо, щоб фільтри застосовувались навіть у випадках, коли користувач не натискає цю кнопку, а просто закриває меню.

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

Найпоширеніші варіанти дизайну меню фільтрів:

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

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

Якщо мова йде про великий інтернет-магазин з широким асортиментом товарів, отже буде багато параметрів для пошуку — у такому випадку краще використовувати бокове меню фільтрів.

Цей варіант ідеально підходить для інтернет-магазинів електроніки, товарів для дітей, тканин та інших категорій з великою кількістю характеристик.

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

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

Якщо на сайті є фільтр за брендом, варто спочатку показувати до 5 найпопулярніших брендів, а вже після цього — решту списком в алфавітному порядку.

Додайте пошук за брендом — це значно спростить і пришвидшить вибір, адже користувачу не доведеться прокручувати весь список, щоб знайти потрібний бренд.

{{block}}

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

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

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

2. Акцентність фільтрації на веб-сайті.

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

У мобільній версії інтернет-магазину також робіть фільтри більш акцентними та помітними, щоб підвищити ймовірність того, що користувач скористається ними. Таким чином ви звузите видачу до найбільш релевантної та скоротите шлях користувача до покупки.

3. Додавання нових параметрів фільтра.

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

Існує 2 способи реалізації:

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

4. Панель швидкого фільтрування.

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

5. Фільтрування на сайті та сортування товарів — не одне й те саме.

Не плутайте сортування та фільтрацію товару. Це абсолютно різні функції. Завдання фільтрів на сайті звузити вибірку товарів на видачі за певним атрибутом, а сортування просто змінює порядок товарів у видачі за певною ознакою (за ціною, за назвою, акцією, новизною і т.д.). Розмежовуйте ці інструменти, щоб не плутати користувачів.

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

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

7. Відображення застосованих параметрів фільтра.

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

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

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

Не варто обмежуватись лише базовими фільтрами, можна додати тематичні фільтри, які будуть корисні саме вашій цільовій аудиторії. Наприклад: стиль (класичний, кежуал, спортивний, романтичний), нагода (вечірка, офіційна подія, весілля, дім), сезон.

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

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

9. Можливість згортати фільтри.

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

Фільтрація — це не просто функція в інтерфейсі, а стратегічний інструмент, що напряму впливає на продажі. Вона скорочує шлях до покупки, знижує фрустрацію, покращує користувацький досвід і підвищує конверсію. Але працює вона лише тоді, коли продумана до дрібниць: зручне розташування, логічна послідовність параметрів, адаптація до категорій і потреб аудиторії. Якщо ви досі сприймаєте фільтри як «опцію» — перегляньте підхід. Адже часто саме вони визначають, чи залишиться користувач на сайті, чи піде до конкурента.