Do you have a question? Contact us now!

Contact Us

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Wróć do listy wpisów
Ostatnia aktualizacja
24/9/2021
24/9/2021
Praca w agencji UX

Filtrowanie produktów – jak sprawić, by użytkownik szybko znalazł to, czego szuka? Sprawdzamy na przykładach z branży odzieżowej

Na pewno to znasz. Masz ochotę sprawić sobie konkretny ciuch, wchodzisz na stronę popularnego sklepu i Twoim oczom ukazuje się ogrom produktów. Czy mają tu to, czego szukasz? Przejrzenie asortymentu zajmie Ci mniej więcej wieczność, czy tak? Nie, jeśli sklep ma dobrze zaprojektowane filtrowanie. Sprawdzamy, jak prezentują się rozwiązania w trzech popularnych sklepach H&M, Zara, C&A.

Ewa Filipiak

Katarzyna Jezierska-Krupa

Filtrowanie to podstawowe narzędzie, dzięki któremu ludzie mogą przeglądać produkty w sklepach online wedle tego, co się dla nich liczy.

Ten element jest w e-commerce ważny z co najmniej 2 powodów:

  • pomaga łatwo znaleźć to, czego użytkownik potrzebuje, a to przekłada się na sprzedaż (o tym, jak łatwość użycia strony wpływa na jej wyniki, przeczytasz we wpisie o konwersji),
  • zapobiega frustracji i poczuciu przytłoczenia, które pojawiają się przy zbyt dużej liczbie produktów i które często sprawiają, że ludzie przerywają zakupy.

To naprawdę intuicyjne, gdy się nad tym zastanowisz.

Chcemy znaleźć to, czego potrzebujemy (nawet jeśli często nie znamy jeszcze dokładnego modelu produktu), i bezproblemowo to kupić. Taka sytuacja to w zasadzie obustronna wygrana – dla klienta, który szybko i wygodnie się obsłuży, i dla sklepu, który równie szybko zarobi.

Skoro filtry są ważnym elementem doświadczenia zakupowego, to czy ich dobry projekt to już standard?

W tym wpisie sprawdzę, jak z tematem radzą sobie popularne odzieżówki, i z perspektywy projektantki UX powiem Ci, jak powinno działać filtrowanie, które klientom oszczędza czas i nerwy, a biznesom przynosi zysk.

Jednak zanim przejdziemy do sedna – w poprzednim artykule o porównywarkach leasingowych zaczęłam od zarysowania kontekstu. Pozwól, że zrobię to samo:

Jestem trzydziestoletnią kobietą i poszukuję koszulki w rozmiarze S bez wzorów i w stonowanym kolorze. Zależy mi na czymś:

  • wykonanym w 100% z bawełny – sztucznym tkaninom mówię stanowcze „nie”,
  • ze świeżej kolekcji – bo lubię nowości,
  • bez rękawów lub z bardzo krótkimi rękawami – ale nie na ramiączkach.

Brzmi jak proste zadanie? 

Zachowaj tę myśl w pamięci, a tymczasem zapoznaj się z analizą, do której wybrałam 3 najczęściej odwiedzane sieciówki odzieżowe w polskim internecie według rankingu xann.pl (przygotowanego na podstawie Ahrefs). Czyli sklepy:

Zatem – co jest użytkownikom potrzebne do szybkich decyzji i zakupów oraz czy zastaną to w poszczególnych sklepach?

Wygodny dostęp do kategorii – pierwszy krok do sukcesu

To po kolei. Pierwszą ważną kwestią jest dla mnie dotarcie do konkretnej kategorii. Jeśli wejdziesz na strony przeglądanych serwisów, zauważysz, że we wszystkich rozwiązaniach mamy około 20 kategorii zapisanych w jednej kolumnie. Taką liczbę elementów trudno przeskanować wzrokiem.

Efekt?

Użytkownikom niełatwo będzie znaleźć tę opcję, która ich interesuje.

Co można z tym zrobić? Zredukować liczbę głównych kategorii i zapewnić bardziej szczegółową kategoryzację poziom niżej. Dzięki temu klienci szliby po nitce do kłębka – od ogólnej kategorii, której są pewni, do bardziej szczegółowej.

Okej, idźmy krok dalej, czyli do wyboru podkategorii.

Zara

W Zarze podkategorie pokazywane są na sliderze (przesuwnym pasku) u góry strony. To raczej mało popularne rozwiązanie – i nic w tym dziwnego. 

Pomyśl tylko. W przypadku większej listy kategorii jako użytkownik musisz skorzystać ze strzałek nawigacyjnych, co zawsze jest kłopotliwe, a jednocześnie widzisz max. 5 podkategorii.

Etykieta Bez rękawów, która mnie interesuje, jest widoczna w takim układzie tylko do połowy. Tak naprawdę wystarczyłoby pokazać podkategorie jako listę (podobnie do kategorii głównych), żeby całość interakcji z nimi była dużo lepsza.

Co ciekawe, Zara stosuje już takie rozwiązanie, ale dostęp do niego jest mocno utrudniony, ponieważ lista kategorii chowa się pod ikoną menu.

Nawigacja po kategoriach - Zara
Nawigacja po kategoriach w Zarze
Nawigacja po kategoriach - Zara
Nawigacja po kategoriach w Zarze
Menu i lista kategorii - Zara
Po lewej: ikona menu, pod którą ukryta jest lista kategorii.
Po prawej: slajder do wyboru podkategorii z przyciętą opcją Bez rękawów. Źródło: zara.com

H&M i C&A

H&M oraz C&A pokazują podkategorie w formie listy, na której możesz zauważyć Topy. Ta etykieta kieruje mnie jako użytkowniczkę od razu do poszukiwanych produktów. Chciałabym jednak zwrócić Twoją uwagę na problematyczny „top” – to słowo jest różnie wykorzystywane w różnych sklepach i może nie być oczywiste.

Dodatkowo układ nawigacji w H&M sprawia, że poszukiwana kategoria ląduje w dolnej części ekranu (czasem trzeba nawet przewinąć stronę, by ją zobaczyć) i ustępuje miejsca Nowościom, Najnowszym trendom oraz Ofertom

Czy jest tu potencjał do ulepszeń? Pewnie! 

Zespół H&M mógłby umieścić przeglądaną kategorię u góry listy lub zwinąć elementy z kategorii Nowości, Najnowszych trendów i Ofert. Dzięki temu użytkownicy mieliby wygodny dostęp do interesującej kategorii, która pojawiłaby się wyżej na ekranie.

Nawigacja po kategoriach - C&A
Nawigacja po kategoriach w C&A
Nawigacja po kategoriach - C&A
Nawigacja po kategoriach w C&A
Nawigacja po kategoriach - H&M
Nawigacja po kategoriach w H&M
Nawigacja po kategoriach - H&M
Nawigacja po kategoriach w H&M

Podsumowując:

H&M - daje stosunkowo łatwy dostęp do docelowej kategorii, jednak umieszcza ją nisko na ekranie.

C&A - zapewnia łatwy dostęp do kategorii, która jest zawsze nad foldem (w górnej części ekranu widocznej bez przewijania).

Zara - chowa kategorie pod ikoną menu, ma trudny dostęp do podkategorii.

Chcesz dowiedzieć się więcej, jak poprawić filtrowanie w swoim sklepie online? Skontaktuj się z nami!

Porozmawiajmy

Szybkie i wieloaspektowe filtrowanie – skuteczny sposób na zapobieganie frustracji

Kiedy upewnię się, że trafiłam do dobrej kategorii, chcę zawęzić wyświetlane wyniki. Ze wstępu wiesz już, że interesują mnie jednolite kolory, bawełna, brak rękawów i rozmiar S lub 36.

Jak myślisz, czy poszczególne sklepy ułatwiają mi wyszukanie preferencji?

H&M

W H&M mam szybki dostęp do wybranych kryteriów, dzięki czemu mogę łatwo zawęzić wyniki pod względem rozmiaru i wzoru. Jeśli chcę filtrować po materiale, muszę wejść we Wszystkie filtry

Filtrowanie - H&M
Filtrowanie w H&M

C&A i Zara

C&A i Zara nie wyświetlają na górze żadnej listy filtrów. Aby dotrzeć do jakichkolwiek opcji, jestem zmuszona kliknąć w przycisk Filtr (C&A) lub Filtry (Zara). 

Szkoda, bo wyświetlenie najpopularniejszych filtrów nad listą produktów, jak robi to H&M, pomogłoby klientom szybciej znaleźć to, czego chcą.

Filtrowanie - C&A
Filtrowanie w C&A
Filtrowanie - Zara
Filtrowanie w Zarze


Analizowane serwisy mają jednak wspólną cechę, która dotyczy układu filtrów. Na wszystkich stronach projektanci przewidzieli dla nich układ boczny. Czy to najlepsze rozwiązanie? Nie, ponieważ wyjeżdżający panel zakrywa sporą część listy produktów. 

A jak ma się sprawa, jeśli chodzi o opcje filtrowania?

H&M i C&A umożliwiają mi zdefiniowanie wszystkich preferencji – wybór rozmiaru, materiału, wzoru (czytaj: „tu właściwie bez wzoru”) i długości rękawów. Za to plus. Dalej nie jest jednak równie dobrze.

Gdy chcę określić poszczególne filtry, każdorazowo muszę wejść w głąb struktury (do widoku filtra), a potem wrócić poziom wyżej na listę filtrów, aby zdefiniować kolejny. To utrudnia i wydłuża cały proces.

Filtrowanie - C&A
Filtrowanie w C&A
Filtrowanie - H&M
Filtrowanie w H&M
Struktura filtrowania w C&A

Zara pozwala jedynie na podstawowe filtrowanie – po rozmiarze i typie koszulki. To sprawia, że do przejrzenia mam ogrom produktów, w tym te, które mnie nie interesują.

Czy w takiej sytuacji zdarza Ci się zniechęcić i rzucić zakupy?

Mnie tak – i wiem, że nie jestem w tym sama.

Filtrowanie - Zara
Filtrowanie w Zarze

Podsumowując:

H&M - zapewnia szybki dostęp do filtrów i szeroki zakres filtrowania.

C&A - nie daje szybkiego dostępu do filtrów, ma za to szeroki zakres filtrowania.

Zara - nie daje szybkiego dostępu do filtrów, a same opcje filtrowania są ubogie.

Prezentowanie użytych filtrów – dla zapewnienia wygody i kontroli użytkownikom

Okej, udało mi się ustawić filtry dla mojej przyszłej koszulki. Teraz sprawdźmy, jak tam z widocznością i możliwością ewentualnej zmiany tych wyborów.

C&A i H&M

C&A oraz H&M dobrze radzą sobie z prezentowaniem użytkownikowi zastosowanych filtrów. Wyświetlają je w postaci chipsów…

„Czekaj, czekaj. Jakich chipsów?”

Chipsów, czyli niewielkich elementów, które przedstawiają podjęte wybory. Spójrz tylko na załączone zrzuty ekranów – chipsy to te prostokątne pola ze znakiem „X”.

Zastosowane filtry w C&A
Zastosowane filtry w C&A
Zastosowane filtry w H&M
Zastosowane filtry w H&M

Na czym stanęło? A! No właśnie.

Omawiane sklepy wyświetlą użyte filtry w postaci chipsów z opcją wyłączenia, dzięki czemu użytkownik może łatwo zmienić swoje wybory i poszerzyć listę wyników.

Zara

Zara nie pokazuje zastosowanych filtrów, choć daje sygnał, że lista wyników została zawężona.

Widzisz jaki?

Zastosowane filtry w
Zastosowane filtry w Zarze

Zgadza się, to liczba zastosowanych filtrów zapisana w nawiasie obok przycisku Filtry.

Takie wyjście jest kłopotliwe z 2 powodów, tzn. użytkownik:

  • nie widzi, jakie filtry są aktywne,
  • nie jest w stanie ich szybko wyłączyć. 

Co byłoby lepsze? W tym przypadku po prostu przyjęcie efektywnego rozwiązania konkurencji.

Podsumowując:

H&M - użytkownik widzi aktywne filtry i może nimi zarządzać

C&A - użytkownik widzi aktywne filtry i może nimi zarządzać.

Zara - użytkownik widzi jedynie liczbę aktywnych filtrów. Aby nimi zarządzać, musi ponownie wejść w Filtry

Możliwość sortowania – by wybór produktu był jeszcze szybszy

Dzięki filtrowaniu wyłoniłam produkty, które mnie mogą interesować. Zgodzisz się jednak, że to dopiero pierwszy krok.

Chcę to wszystko jeszcze uporządkować i wyświetlić w preferowanej kolejności, dlatego sięgam do sortowania.

Jakie są moje przemyślenia w poszczególnych sklepach?

Zara

Zara niestety w ogóle nie daje mi możliwości sortowania, więc muszę przeglądać całą listę produktów w poszukiwaniu interesującego mnie artykułu. Niewygodnie.

Sortowanie - Zara
Sortowanie w Zarze, a właściwie brak sortowania

C&A

C&A ukrywa sortowanie w nieintuicyjnym miejscu – to tu jeden z filtrów, co jeszcze mogłoby się obronić, jeśli podpis brzmiałby jednoznacznie, np. Filtry i sortowanie. Obecnie jednak dość trudno odkryć tę opcję.

Ale wiesz co? Da się to rozwiązać jeszcze lepiej.

Warto byłoby rozdzielić filtry i sortowanie i pokazywać je jako 2 niezależne przyciski powyżej listy produktów.

Sortowanie C&A
Sortowanie w C&A

H&M

Najlepiej z dostępnością sortowania poradził sobie H&M. Ten sklep także umieszcza sortowanie w grupie filtrów, jednak jako osobny element, pierwszy w grupie szybko dostępnych opcji.

Po zadaniu moich początkowych kryteriów i sortowaniu według popularności mam przed sobą 21 rzeczy. Sensownie, na pewno coś z tego wybiorę.

Sortowanie H&M
Sortowanie w H&M

Podsumowując:

H&M - ma łatwo dostępne sortowanie o zadowalającym zakresie.

C&A - umożliwia sortowanie w zadowalającym zakresie, jednak chowa je w Filtrach.

Zara - nie umożliwia sortowania.

Podsumowanie

W sklepach fizycznych mamy działy – w sklepach online tymi działami są kategorie, dlatego jeśli e-commerce chce osiągać wysokie wyniki, musi dbać o jasne grupowanie rzeczy i maksymalnie ułatwiać klientom dotarcie do wybranej kategorii. 

Do tego właśnie służą kategoryzacja oraz filtrowanie. Podsumujmy sobie zatem, jaką wiedzę o nich wynosisz z tego artykułu:

  1. Lepiej sprawdza się kategoryzacja zagnieżdżona niż rozbudowana. Kiedy na danym poziomie nie ma zbyt wielu elementów, a ich zakres i nazwy są oczywiste, użytkownik nie ma problemu z przeglądaniem listy i poruszaniem się po niej.
  2. Filtry są ogromnym wsparciem w szybkim dotarciu do preferowanego produktu. Dlatego warto (a w przypadku sklepów z dużym asortymentem – trzeba) zatroszczyć się o to, aby były łatwo dostępne, uwzględniały wiele kryteriów, a po wybraniu wyświetlały się w widocznym miejscu.
  3. Sortowanie to element oszczędzający czas i energię użytkowników, którzy dzięki niemu mogą przeglądać produkty w kolejności od najbardziej dla nich atrakcyjnych. Właśnie dlatego ta opcja powinna być w e-commerce po pierwsze zapewniona klientom, a po drugie łatwa do znalezienia.

„No dobra, to powiedz jeszcze, który serwis sprawdził się najlepiej”

Zaskoczę Cię – nie ma tu jednoznacznego faworyta.

Zarówno H&M, jak i C&A całkiem dobrze radzą sobie z nawigacją po kategoriach, chociaż H&M trochę zaniedbuje widoczność kategorii na głębszych poziomach. Ma jednak szybki dostęp do filtrów, więc użytkownicy chętnie do nich sięgną.

Najgorzej radzi sobie Zara, która przez dążenie do minimalistycznego designu ukrywa kluczowe dla użytkownika funkcje:

  • chowa nawigację pod przyciskiem, 
  • nie umożliwia sortowania, 
  • nie oferuje rozbudowanego zakresu filtrów.

To wszystko można jednak z sukcesem przepracować ;) Mam nadzieję, że podane we wpisie wskazówki się do tego przydadzą.

Lepsze filtry (i nie tylko) w Twoim sklepie?

Jasna sprawa! Daj znać, czego potrzebujesz.