System filtrowania
E-commerce - Kinderkraft
O projekcie
O kliencie
Kinderkraft to marka, która produkuje gamę produktów dla niemowląt i dzieci, takie jak: wózki, foteliki samochodowe, łóżeczka, meble itp. Znani są z produkcji wysokiej jakości, bezpiecznych i funkcjonalnych produktów, które odpowiadają potrzebom rodzin z małymi dziećmi.
Kinderkraft powstał w Polsce w 2007 roku i od tego czasu stał się znaną i cenioną marką w branży parentingowej i dziecięcej w ponad 70 krajach.
Moje zadanie
W tym projekcie byłem odpowiedzialny za zaproponowanie nowego podejścia do filtrów na listingi produktowe, które spełniałyby wymogi zleceniodawcy (bardzo duża liczba kategorii filtrów) oraz by było ono zgodne z wszelkimi zasadami UX i aktualnymi trendami.
Przygotowałem dwie wersje: horyzontalną (podobną do aktualnej) oraz wertykalną (panel wychodzący z prawej strony ekranu).
UX Research
Założenia
-
Wybór sortowania i filtrowania powinien być osobną akcją w historii przeglądarki. Dzięki temu użytkownik jest w stanie przyciskiem “wstecz” wracać do swoich poprzednich opcji filtrowania.
-
Wszystkie wartości liczbowe takie jak cena lub wymiary powinny być wybierane za pomocą suwaka oraz powinna być możliwość ręcznego wpisania zakresu liczbowego.
-
W nawiasie powinna być podawana liczba produktów, które spełniają dany warunek filtra.
-
Podczas wyboru akcji filtrowania/sortowania produkty powinny posiadać prostą animację ładowania (np. pulsujący linearny gradient), dzięki której użytkownik wie, że czeka na nową listę produktów.
-
Na desktopie zaznaczamy kolorem aktywne filtry oraz podajemy ilość wybranych filtrów z danej kategorii.
-
W wersji mobilnej również podajemy liczbę wybranych filtrów w kółku oraz wypisujemy je pod nazwą danego filtra.
-
Filtry w danej kategorii powinny być ułożone alfabetycznie.
-
Jeśli filtrów w danej kategorii jest bardzo dużo, to te wybrane powinny być powielone na samej górze listy, tak by użytkownik miał do nich szybki dostęp.
-
Przy przycisku “Zastosuj filtrowanie” w nawiasie podawana jest liczba produktów, które spełniają wszystkie warunki.
Filtrowanie horyzontalne
Dzięki takiemu rozwiązaniu, użytkownik zaczyna skanowanie strony od sekcji filtrowania, w której widoczne są od razu wszystkie kategorie filtrów. Jeśli opcji filtrowania jest więcej zaleca się korzystanie z filtrowania wertykalnego.
Filtrowanie wertykalne
Dzięki większej ilości miejsca i możliwości klarowniejszej organizacji filtrów w kategorie i subkategorie, user jest w stanie szybciej przeskanować filtry. Dodatkowo tworzymy spójny moduł wraz z wersją mobilną strony.
Filtrowanie w wersji mobilnej
Dla obu wersji filtrowania mobilnego zostały przygotowane identyczne makiety. Aktualnie strona również korzysta z podobnego rozwiązania, więc wprowadzenie jej łączyłoby się z niewielkimi zmianami.
