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.
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.
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.
