10 Поради щодо електронної комерції UX для оптимізації відфільтрованої навігації

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

Подумайте про Ви можете встановити фільтри для пошук продукту на eBay або Amazon, такі як категорія, матеріал або марка продукту.

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

1. Виберіть оптимальне місце

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

Дослідження зручності використання Baymard Institute про фільтрацію виявили, що a горизонтальна навігація, розміщена поверх вмісту може працювати краще у багатьох випадках.

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

Завжди варто перевірити, де розміщувати фільтровану навігацію, оскільки між величинами конверсій можуть існувати великі відмінності. Сайт Crate & Barrel, роздрібний продавець меблів та домашнього декору, є гарним прикладом для горизонтально розміщеної фільтрованої навігації.

2. Надайте відповідні фільтри

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

Наприклад, Nordstrom надає своїм клієнтам ретельно відібрані фільтри для кожної категорії продуктів, як от “тип об'єктива”, “форма обличчя”, “колір”, “ціна”, і “бренд” для сонцезахисних окулярів.

3. Дозвольте клієнтам вибрати кілька фільтрів

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

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

4. При необхідності ввімкніть ручний ввід

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

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

5. Відображення лічильника продуктів

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

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

6. Створіть групи фільтрів, які мають сенс

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

В інтернет-магазині The Body Shop є, мабуть, трохи більше фільтрів, які потрібні, але, оскільки фільтри добре згруповані, користувальницький досвід не порушується надтривалими та незрозумілими списками фільтрів.

7. Зробіть групи фільтрів перемикаються

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

Відфільтрована навігація Target використовує добре відомий візерунок стрілками вгору і вниз для позначення перемикання, тим більше, що список фільтрів всередині групи надто довгий (наприклад, у випадку кольорів), a додано смугу прокручування так само. Обидві ці функції розширення мобільності.

8. Розглянемо тематичні фільтри

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

Це завжди варто розглянути, якщо є якісь тематичні фільтри використовувати у власному магазині. Macy's може бути хорошим прикладом для нюансованої фільтрованої навігації. В “Плаття” категорія, вона пропонує фільтри для ретельно відібраних тем, як от “Спеціальні пропозиції”, “Сукня з нагоди”, і “Весілля”. Якщо ви хочете прочитати поглиблений аналіз фільтруючого інтерфейсу Macy, перевірте це дослідження.

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

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

Debenhams не тільки показати застосовані фільтри поверх фільтрованої навігації, але також їх групи при застосуванні декількох фільтрів, які забезпечують навіть більш привабливий візуальний сигнал.

10. Показати популярні фільтри зверху

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

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

Магазин ігор Nintendo наразі надає три популярні фільтри, “Продається”, “Доступний DLC”, і “Доступно демо”, і відображає їх поверх всіх інших варіантів, щоб спокусити навіть нерішучих користувачів виконати швидкий запит що тільки коштують мінімальних зусиль.