Filtrowanie produktów bez tajemnic w e-commerce
05 marca 2020
Wyobraź sobie, że szukasz w sklepie stacjonarnym konkretnych butów, ale obsługa każe Ci przejrzeć każdą półkę po kolei. Frustrujące? Dokładnie tak czują się Twoi klienci, kiedy muszą przedzierać się przez dziesiątki stron na małym ekranie telefonu. Niewygodne filtry to najszybszy sposób na to, by zniechęcić kupującego, który ma już kartę w ręku. Zobacz, jak projektować wyszukiwanie, które mądrze poprowadzi klienta do produktu i sprawdź, które układy filtrów naprawdę ratują porzucane koszyki.
Spis treści:
Z tego artykułu dowiesz się:
- jakie są sprawdzone dobre praktyki filtrowania produktów w sklepie internetowym,
- dlaczego wyjaśnianie nazw filtrów wciąż jest problemem większości sklepów,
- jakie układy filtrów sprawdzają się najlepiej na urządzeniach mobilnych,
- czym jest faceted search i jak wdrożyć filtrowanie fasetowe w PrestaShop.
Dlaczego filtrowanie produktów w e-commerce jest ważne?
Zadaniem filtrowania jest wygenerowanie jak najbardziej dopasowanych do preferencji użytkownika produktów. Z reguły filtrowanie (zmiana ilości produktów) znajduje się w pobliżu opcji sortowania (zmiana kolejności produktów „od – do”).
Dobrze zaprojektowane filtry:
- wspomagają nawigację w sklepie,
- mają pozytywny wpływ na konwersję,
- zoptymalizowane filtry mają wpływ na SEO sklepu:
- wewnętrzne linkowanie witryny sklepu się wzmacnia,
- widoczność witryny na słowa kluczowe się zwiększa,
Dlatego bardzo ważne jest prawidłowe indeksowanie produktów z filtrami. Niektóre platformy CMS np. PrestaShop posiadają wbudowaną opcję optymalizacji struktury treści, w celu zminimalizowania jej duplikacji.
Dowiedz się więcej: UX sklepu internetowego – czyli zestawienie sklepów PrestaShop z ciekawymi rozwiązaniami user experience
Dlaczego nazewnictwo jest istotnym elementem filtrowania w sklepie online?
Okazuje się, że 62% sklepów internetowych, które pokazują specyficzne nazwy cech produktów, nie dba o odpowiednie wyjaśnienie tych nazw ludziom spoza branży (Baymard Institute, „Always Explain Industry-Specific Filters”, luty 2024). Stosując żargon branżowy, bez wyjaśnienia laikom, co dokładnie podlega filtracji, przyczyniamy się do niejednoznacznego wyszukiwania produktów, a co za tym idzie porzuceń. Stosuj zawsze język użytkowników.
Często, gdy użytkownik czegoś nie rozumie, stara się po prostu to „wygooglować”, najprawdopodobniej znajdzie odpowiedź na swoje pytanie gdzieś indziej i istnieje ryzyko, że do poprzedniego sklepu już nie wróci…
Raport Baymard Institute (Product List UX, 2025) pokazuje skalę problemu: aż 58% sklepów desktopowych i 78% sklepów mobilnych ma przeciętną lub gorszą implementację UX list produktowych. Dodatkowo, 28% sklepów nie pokazuje w ogóle przeglądu aktualnie zastosowanych filtrów, przez co użytkownik traci orientację, co właściwie zawęża wyniki, które widzi.
Sprawdź też: 5 sposobów jak poprawić współczynnik konwersji w Twoim sklepie internetowym
Dobre praktyki filtrowania produktów w e-sklepie
- Umiejscowienie opcji filtrów nie powinno się zmieniać po ich wyborze
- Użytkownik powinien łatwo znaleźć aktywne filtry – informacja powinna znajdować się obok filtra lub nad wynikami wyszukiwania – najlepiej tymi dwoma sposobami jednocześnie.
Filtrowanie produktów – aktywne filtry - Wyjaśnione powinny być kryteria wyświetlania filtrów.
Filtrowanie produktów – kryteria wyświetlania filtrów - Użytkownik powinien mieć możliwość łatwego odznaczenia/usunięcia filtrów.
- Kontekst wyboru dodatkowych filtrów powinien być jasny i zrozumiały.
- Najważniejsze cechy dla danego produktu w danej kategorii powinny być uwzględnione – tutaj przykład asos.com.
Filtrowanie produktów – najważniejsze cechy dla danego produktu
- Zapewnienie możliwości wielokrotnego wyboru opcji.
- Warto stosować pokazywanie ilości produktów pasujących do kryteriów – to ułatwia orientację użytkownikowi.
- Zapobieganie błędnym (zerowym) wynikom filtrowania – zastosowanie wyszarzenia danej opcji, dzięki czemu unikniemy rozczarowania użytkownika.
- Personalizowanie filtrów (filtry tematyczne) – oszczędza czas użytkownika na poszukiwania oraz wyróżnia sklep na tle konkurencji – rockmetalshop.pl, gdzie filtr „Tematyka” obejmuje kilkadziesiąt kategorii (Gotyckie, Fantasy, Horror, Film/TV/Komiks, Gry komputerowe, Okultyzm i inne), każda z widoczną liczbą pasujących produktów.
Filtrowanie produktów – personalizowanie filtrów (filtry tematyczne) - Unikanie zbyt obszernych opcji w danej kategorii – warto łączyć podobne opcje w jedną grupę). Tutaj przykład t-shirt.pl, gdzie duże rozmiary 3XL-5XL tworzą jedną kategorię.
Filtrowanie produktów – unikanie zbyt obszernych opcji w danej kategorii
- Logiczna hierarchia – ułożenie filtrów według najpopularniejszych preferencji użytkownika.
- Dobra widoczność filtrów.
14. Odpowiednia wielkość klikalnych elementów – dla mobile przyciski CTA i klikalne ikony powinny być odpowiednio duże, aby łatwo można je było zaznaczyć palcem.
15. Szybkość odświeżania strony ma znaczenie – na wyniki nie powinno się długo czekać – nie dłużej niż 5 sekund.
16. Daj użytkownikowi pełną kontrolę – wskaż drogę wyjścia z filtrów na każdym etapie ich użycia oraz wszystkie możliwości zachowania w jasny sposób. Niektóre sklepy wskazują nawet dwie drogi wyjścia.
Sprawdź: Wyszukiwarka w sklepie internetowym – najlepsze praktyki UX
Filtrowanie fasetowe (faceted search) w PrestaShop
Filtrowanie produktów w międzynarodowej terminologii UX i e-commerce nosi też nazwę faceted search, czyli filtrowanie fasetowe – to po prostu synonim filtrowania wielokryterialnego, w którym użytkownik zawęża listę produktów, łącząc jednocześnie kilka niezależnych kryteriów (np. kolor, rozmiar, cenę), a wyniki aktualizują się na bieżąco.
W PrestaShop mechanizm filtrowania fasetowego jest dostępny w standardzie platformy, w postaci modułu Blokfacetowe wyszukiwanie (Faceted Search/ps_facetedsearch), instalowanego domyślnie przy nowej instalacji sklepu. Moduł pozwala skonfigurować, które cechy produktów (kolor, rozmiar, cena, marka, atrybuty niestandardowe) mają być dostępne jako filtry w danej kategorii, a także zarządzać ich kolejnością wyświetlania.
Dobrą praktyką przy konfiguracji jest ograniczenie liczby aktywnych filtrów do tych, które faktycznie mają znaczenie w danej kategorii produktowej – zgodnie z zasadą numer 6 z listy dobrych praktyk wyżej, czyli pokazywania tylko najważniejszych cech dla danego typu produktu. Warto też pamiętać o właściwej konfiguracji indeksowania stron z filtrami, żeby uniknąć duplikacji treści w wynikach wyszukiwania.
Popularne układy budowy filtrów dla mobile
Układ filtrowania w głównej mierze uzależniony jest od CMS, z jakiego zbudowany jest sklep internetowy. Oczywiście przerobić można wszystko, ale związane jest to z pracami programistów, a co za tym idzie z dodatkowymi kosztami. Najpopularniejszą formą przedstawienia filtrów jest wyskakujące okno (pop up) lub statyczny widok przesuwany w dół. Poniżej przedstawiono najpopularniejsze układy, z jakimi można się spotkać bez względu na platformę zakupową.
Branża w dużej mierze ujednoliciła się wokół jednego głównego kontenera – tzw. filter drawer, czyli panelu filtrów otwieranego jednym przyciskiem „Filtruj”, który wjeżdża z dołu lub zajmuje cały ekran. To, co kiedyś wyglądało jak pięć konkurencyjnych układów całego panelu, dziś sprowadza się właściwie do jednego pytania: co dzieje się po dotknięciu pojedynczej kategorii filtra (np. „Kolor” czy „Marka”) wewnątrz tego panelu? W praktyce spotyka się dwa warianty, często wymieszane w obrębie jednego sklepu.
1. Rozwijanie w miejscu (akordeon)
Dotknięcie nazwy filtra rozwija jego opcje bezpośrednio pod nią, w tym samym widoku – kolejne dotknięcie zwija je z powrotem. Użytkownik cały czas widzi resztę panelu filtrów i nie traci kontekstu. To wciąż częsty wybór dla krótkich list opcji (np. rozmiar, płeć).
Przykład: reserved.com – dotknięcie kategorii filtra (np. „Materiał”) rozwija listę opcji w tym samym ekranie, podczas gdy pozostałe kategorie zostają zwinięte obok.
Przykład filtrów typu akordeon w reserved.com
2. Osobny podekran (drill-down)
Dotknięcie nazwy filtra przenosi użytkownika na zupełnie nowy, dedykowany ekran tylko dla tej kategorii, ze strzałką powrotu do panelu głównego. To dziś dominujący wzorzec, szczególnie przy dłuższych listach opcji – wtedy dedykowany ekran dodatkowo zyskuje pole wyszukiwania, żeby nie trzeba było przewijać dziesiątek pozycji ręcznie.
Przykład: eobuwie.com.pl – dotknięcie „Kolor” w panelu „Wszystkie filtry” otwiera osobny ekran z próbkami kolorów, z powrotem przez strzałkę „<” u góry. Ten sam mechanizm, tylko przy dłuższej liście (np. „Marka”), dodatkowo pokazuje pole wyszukiwania na górze ekranu.
Przykład filtra typu drill-down w eobuwie.com.pl
Panele filtrów rzadko trzymają się jednego wzorca w czystej formie. Większość miesza oba warianty w obrębie jednego drawera, tak jak eobuwie.pl, gdzie „Cena” rozwija się w miejscu jako suwak, a „Kolor” i „Marka” korzystają z drill-downu.
Pozostałe elementy filtrowania
Ważnym aspektem filtrowania jest wydajność strony. Po otrzymaniu wyników, produkty powinne ładować się optymalnie. Aby uniknąć problemów z wydajnością strony, można używać kombinacji przycisku „Załaduj więcej” i opóźnionego ładowania. Warto załadować mniejszą ilość wyników niż w przypadku desktop, zwykle od 15 do 30 produktów.
Paginacja
Na urządzeniach mobilnych popularnym rozwiązaniem jest paginacja (stronicowanie). Przy dużej ilości wyników produktowych warto umieścić przycisk powrotu na górę, aby zaoszczędzić czas na scrollowanie z powrotem.
Filtrowanie produktów – paginacja (stronicowanie)
Infinite scroll
Infinite scroll (jak w Facebook-u) oraz tryb mieszany infinite scroll wywołany przyciskiem (przykład poniżej) – sprawdzają się szczególnie podczas przeglądania treści np. w portalach społecznościowych. Jednak wybór sposobu przewijania powinien być zawsze dostosowany do potrzeb odbiorców produktu jaki oferuje sklep internetowy.
Filtrowanie produktów – tryb mieszany infinite scroll wywołany przyciskiem (przykład poniżej)
Przeczytaj również: Priorytety produktów – jak zarządzać listami produktów?
Filtrowanie bez tajemnic – podsumowanie
Unikanie żargonu branżowego oraz wyjaśnianie znaczeń specyficznych słów pomoże użytkownikom wykorzystać możliwości filtrowania. Jednak wszędzie trzeba zachować umiar. Zbyt duża liczba filtrów może okazać się dla użytkowników przytłaczająca. Z drugiej strony zbyt mała ilość filtrów zniechęca użytkowników do dalszego, precyzyjnego poszukiwania.
Właściwe nazewnictwo oraz dobór tematyczny zasobu produktowego wymaga przemyślanej strategii implementacji filtrów. Jak widać, aspekt filtrów nie należy do łatwych zagadnień, dlatego należy zadbać o właściwą ich ekspozycję w każdym sklepie internetowym.
Zobacz także:
Jak zbudować program lojalnościowy w e-commerce? 9 metod lojalizacji klientów