System filtrowania

E-commerce - Kinderkraft

glowne zdjecie przedstawiajace wszystkie widoki

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.

propozycja widoku filtrowania horyzontalnego filtrowanie horyzontalne z zastosowaniem ladowania produktow

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 wertykalne w dwoch wersjach

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.

prezentacja filtrowania w wersji mobilnej