Dobry sklep internetowy nie zmusza klienta do przekopywania się przez cały katalog jak przez szufladę z kablami. Filtry produktów w sklepie internetowym mają skrócić drogę do właściwego produktu. Zły panel robi jednak coś odwrotnego: pokazuje tyle opcji, że człowiek zaczyna się zastanawiać, czy właśnie kupuje buty, czy steruje elektrownią.
Jak to poukładać? Najpierw rozdziel role filtrowania, sortowania i wyszukiwarki. Potem wybierz tylko te cechy, które naprawdę pomagają w decyzji. Na końcu zadbaj o aktywne wybory, szybki reset i wygodę na telefonie. Bez czarów, bez obietnic cudów. Po prostu porządny UX listy produktów.
Filtry, sortowanie i wyszukiwarka — trzy różne narzędzia, nie jeden kombajn
Co robi każde narzędzie
Filtr odpowiada na pytanie: które produkty spełniają wybrane warunki? Jeśli klient zaznaczy konkretny kolor, rozmiar albo przedział ceny, lista powinna zostać zawężona do pasujących pozycji.
Sortowanie produktów w sklepie działa inaczej. Nie usuwa produktów z listy, tylko zmienia ich kolejność. Klient może więc ustawić wyniki według ceny, oceny albo innego dostępnego porządku, ale nadal ogląda produkty pasujące do wcześniejszych warunków.
Wyszukiwarka prowadzi do wyników na podstawie wpisanego zapytania. Ktoś wpisuje nazwę albo słowo opisujące produkt i oczekuje, że sklep pokaże mu odpowiednie wyniki. Te trzy funkcje mogą działać obok siebie, ale nie powinny udawać jednego, niejasnego mechanizmu.
Jakie filtry produktów warto dodać
Lista kontrolna filtrów
Punktem wyjścia mogą być filtry ceny, kategorii, marki, dostępności, oceny, tagów i atrybutów. WooCommerce obsługuje między innymi właśnie takie typy filtrowania. To jednak lista możliwości, a nie gotowa recepta dla każdego sklepu.
Najważniejsze są atrybuty właściwe dla konkretnego asortymentu. W jednej kategorii znaczenie może mieć kolor i rozmiar, w innej wymiary, materiał albo parametr techniczny. Filtr powinien odpowiadać na realne pytanie klienta, a nie tylko istnieć dlatego, że da się go technicznie dodać.
- Cena — gdy budżet jest ważnym kryterium wyboru.
- Kategoria — gdy katalog obejmuje różne grupy produktów.
- Marka — jeśli klienci faktycznie porównują konkretne marki.
- Dostępność — gdy ważne jest pokazanie produktów możliwych do kupienia.
- Atrybuty — takie jak kolor, rozmiar, wymiar, materiał lub parametr techniczny.
- Ocena i tagi — tylko wtedy, gdy pomagają w wyborze i są zrozumiałe.
Mniej znaczy więcej
Nie wrzucaj do panelu wszystkiego, co da się odfiltrować. Zbyt długa lista męczy, utrudnia orientację i może sprawić, że klient przestanie szukać. Dobór filtrów warto dopasować do liczby produktów, konkretnej kategorii i sposobu podejmowania decyzji zakupowej.
Przejdź po panelu jak zwykły użytkownik. Czy nazwy są jasne? Czy wiadomo, co zmieni się po zaznaczeniu opcji? Czy każda grupa filtrów faktycznie pomaga zawęzić wybór? Jeśli odpowiedź brzmi „raczej nie”, dana opcja prawdopodobnie nie powinna być na pierwszym planie.
Przed wdrożeniem sprawdź też, czy połączenie filtrów nie prowadzi do błędnych, pustych albo sprzecznych wyników. Sam fakt, że filtr działa, nie oznacza jeszcze, że działa sensownie.
Jeden wybór czy kilka? Logika filtrów bez zagadek
Jak czytać logikę wyboru
W wielu przypadkach klient powinien móc zaznaczyć kilka wartości w ramach jednego filtra. Może szukać produktu kilku marek, w kilku kolorach albo w kilku rozmiarach. Ograniczenie go do jednej opcji bywa zwyczajnie niewygodne.
Praktyczny model jest prosty: kilka wartości w jednej grupie może oznaczać alternatywy, czyli „ta albo ta”. Z kolei wybór z różnych grup powinien dalej zawężać listę. Na przykład kilka kolorów plus konkretny rozmiar daje produkty spełniające oba rodzaje warunków.
Do takiego wyboru pasują checkboxy albo podobny mechanizm wielu zaznaczeń. Nie jest to jednak sztywna reguła dla każdego asortymentu. Najważniejsze, żeby interfejs jasno komunikował efekt wyboru i nie zostawiał klienta z pytaniem: „Dlaczego po kliknięciu zostały trzy produkty, skoro miało być więcej?”.
Aktywne filtry i reset — klient musi wiedzieć, co kliknął
Podsumowanie wyboru nad listą
Po zawężeniu listy klient powinien widzieć, co dokładnie ogranicza wyniki. Aktywne filtry można pokazać jako krótkie etykiety albo chipsy umieszczone blisko listy produktów. Każda etykieta powinna pozwalać usunąć pojedynczą opcję.
Nie zmuszaj użytkownika do ponownego otwierania panelu tylko po to, żeby sprawdzić własny wybór. Dobrze widoczne podsumowanie daje orientację i ułatwia poprawienie ustawień.
Potrzebny jest także wyraźny przycisk lub odnośnik „Wyczyść filtry”. Jedno działanie powinno resetować cały wybór. WooCommerce ma do tego blok Active Filters, który pokazuje zastosowane opcje i pozwala usuwać je pojedynczo albo wyczyścić wszystkie naraz.
Liczba wyników przy opcjach
Liczba produktów pasujących do danej opcji może pomóc klientowi przewidzieć efekt kliknięcia. Jeśli przy wartości widzi informację, ile wyników pozostanie, łatwiej ocenia, czy warto ją wybrać.
Taka liczba ma sens tylko wtedy, gdy odpowiada rzeczywistym wynikom. Błędna konfiguracja szybko robi z pomocnej wskazówki małą pułapkę. Warto sprawdzić, czy wartości przy opcjach zgadzają się z tym, co faktycznie pokazuje lista.
Dobrze też zachować stan filtrów po powrocie do listy. Klient nie powinien zaczynać całej zabawy od zera tylko dlatego, że wszedł na kartę produktu i wrócił krok wcześniej.
Filtry na telefonie: panel, który nie walczy z kciukiem
Drawer czy pełny ekran
Na telefonie nie ma sensu wciskać długiego panelu filtrów nad produktami. Lista zniknie pod formularzem, a klient będzie przewijał ekran bardziej niż oglądał ofertę. Lepszym rozwiązaniem może być przycisk „Filtry” albo „Filtry i sortowanie”, który otwiera osobny interfejs.
Jedną opcją jest wysuwany panel typu drawer. Filtry pojawiają się na czas wyboru, a po zamknięciu klient wraca do listy. Przy większej liczbie opcji wygodniejszy może być widok pełnoekranowy. W obu wariantach trzeba zachować widoczny stan aktywnych filtrów i prosty powrót do wyników.
Przy zastosowaniu wyboru warto jasno pokazać, co się wydarzy: na przykład liczbę wyników, jeśli konfiguracja sklepu to umożliwia. Klient powinien wiedzieć, czy zatwierdza wybór, czy tylko zaznacza kolejną opcję.
Dotyk, etykiety i dostępność
Pola wyboru i przyciski nie mogą być mikroskopijne. Kryterium WCAG 2.2 dotyczące minimalnego rozmiaru celu dla obsługi wskaźnikiem wskazuje 24 × 24 piksele CSS, z określonymi wyjątkami. To kryterium dostępności, a nie pełna gwarancja dobrego UX.
Przy kolorach, rozmiarach i wariantach stosuj jasne etykiety tekstowe. Sama próbka koloru może być niewystarczająca. Warto też zadbać o obsługę klawiatury i technologii asystujących.
Nie zakładaj, że rozwiązanie z jednego bloku WooCommerce będzie działało identycznie w każdej wtyczce albo motywie. Filtry mobilne w e-commerce trzeba sprawdzić na realnych telefonach, nie tylko w symulatorze.
Checklista przed publikacją filtrów w sklepie
Szybki test przed wdrożeniem
Przed publikacją przejdź przez sklep jak klient, który nie zna jego zaplecza. Nie sprawdzaj wyłącznie, czy panel się otwiera. Sprawdź cały przebieg od kategorii do wyników.
- Czy filtry odpowiadają cechom, po których klient rzeczywiście wybiera produkty?
- Czy panel nie zawiera tylu opcji, że przypomina kokpit samolotu?
- Czy nazwy filtrów są zrozumiałe bez domyślania się?
- Czy można zaznaczyć kilka wartości tam, gdzie ma to sens?
- Czy różne grupy filtrów wspólnie zawężają listę w przewidywalny sposób?
- Czy aktywne filtry są widoczne blisko wyników?
- Czy można usunąć pojedynczy wybór?
- Czy da się jednym działaniem wyczyścić wszystkie filtry?
- Czy liczby wyników, jeśli są pokazywane, zgadzają się z listą?
- Czy filtrowanie działa poprawnie na telefonie?
W szybkim teście otwórz kategorię produktów, wybierz jedną wartość, a potem kilka wartości z jednej grupy. Dodaj filtr z innej grupy i sprawdź, czy wyniki mają sens. Następnie usuń jeden filtr, wyczyść wszystko i wróć do listy po wejściu w produkt.
Jeśli pojawiają się puste lub sprzeczne wyniki, nie zamiataj sprawy pod dywan. To sygnał, że konfigurację trzeba przejrzeć w konkretnym sklepie, z konkretnym motywem i używanymi narzędziami.
Dobre filtry nie mają pokazać wszystkiego, co da się technicznie ustawić. Mają skrócić drogę do właściwego produktu. Zacznij od cech ważnych dla danego asortymentu, pokaż aktywne wybory i daj klientowi prosty reset. Na telefonie zaprojektuj osobny, wygodny panel, zamiast upychać desktopowy interfejs na małym ekranie. Potem sprawdź zachowanie wyników w praktyce. Zasady UX nie są gwarancją wzrostu sprzedaży, ale pomagają uporządkować drogę użytkownika. Napisz do Szwagra i opowiedz, czego potrzebujesz — strony, grafiki, filmu albo tekstów.
