System filtrowania

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.

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

Dobrze zaprojektowany system filtrowania produktów to podstawa udanego sklepu eCommerce. Oto dlaczego:

1. Zwiększa zaangażowanie użytkowników: Przyjazny dla użytkownika i wydajny system filtrowania może zwiększyć zaangażowanie użytkowników, umożliwiając użytkownikom łatwe znalezienie poszukiwanych produktów. To może prowadzić do lepszego, ogólnego wrażenia z zakupów i wyższego współczynnika konwersji.

2. Oszczędność czasu: Dobrze zaprojektowany system filtrowania może zaoszczędzić czas i wysiłek użytkowników, umożliwiając im szybkie i łatwe zawężanie ich wyników filtrowania. Może to prowadzić do bardziej efektywnych zakupów i zmniejszyć frustrację, co również może prowadzić do większej konwersji.

3. Zwiekszona konwersja: Dobry system filtrowania pomaga użytkownikom znaleźć interesujące ich produkty , co może zwiększyć prawdopodobieństwo konwersji. Użytkownik prędzej kupi produkt, jeśli będzie w stanie go łatwo i szybko znaleźć.

4. Zwiększona satysfakcja klienta: Kiedy użytkownicy mogą łatwo znaleźć produkty, których szukają, są bardziej zadowoleni z zakupów. Może to prowadzić do pozytywnych recenzji, stawania się stałym klientem i zwiększoną lojalnością klientów.

5. Ułatwiona wykrywalność produktów: Dobrze zaprojektowany system filtrowania może pomóc użytkownikom odkryć nowe produkty, których inaczej by nie znaleźli. Może to prowadzić do zwiększenia sprzedaży, a także może pomóc firmom zidentyfikować popularne produkty i trendy.

1. Mała ilość opcji filtrowania: Witryna ma ograniczone opcje filtrowania, co może utrudniać użytkownikom znalezienie konkretnych produktów, których szukają.

2. Słaba funkcjonalność filtrowania: System filtrowania nie dostarcza wystarczających informacji o liczbie produktów spełniających podane kryteria. Początkowe filtry znikają w zależności od produktów wyświetlanych na liście kategorii, a nie w zależności od samej kategorii. Prowadzi to do zamieszania i frustracji użytkownika, który musi usunąć filtry, aby ponownie wyświetlić kategorię filtrów i produkty.

3. Niespójny i mylący design filtrownia: Opcje filtrowania nie są konsekwentnie wyświetlane na wszystkich stronach, co może wprowadzać użytkowników w błąd podczas poruszania się po witrynie. Gdy zastosowane filtry nie pokazują żadnych produktów, informacja o braku wyników jest bardzo słabo widoczna.

4. Mała ilość opcji sortowania: Witryna nie oferuje wielu opcji sortowania wyników wyszukiwania, co może utrudniać użytkownikom znalezienie najbardziej odpowiednich produktów. Witryna pozwala użytkownikom sortować produkty tylko według ceny i nazwy, a nie według innych ustawień, takich jak najnowsze lub przecenione produkty.

1. Zmiany dotyczące filtrów i sortowania powinny być osobnymi wpisami w historii przeglądarki użytkownika: Wybór sortowania i filtrowania powinien być osobną akcją w historii przeglądarki i aktualizować kadorazowo url. Dzięki temu użytkownik ma możliwość powrotu do swoich poprzednich opcji filtrowania przyciskiem „wstecz”.

2. Wartości liczbowe: Wszystkie wartości liczbowe, takie jak cena czy wymiary, powinny być wybierane za pomocą suwaka oraz powinna istnieć możliwość ręcznego wprowadzenia zakresu liczbowego.

3. Wyświetlanie odpowiednich informacji: W nawiasach należy podać liczbę produktów spełniających dany warunek filtrowania. Gdy liczba dopasowań dla opcji filtrowania nie jest wyświetlana, użytkownicy nie będą wiedzieć, jaki będzie efekt zastosowania filtrów.

4. Listę produktów należy aktualizować symultanicznie w miarę stosowania filtrów: Przy wyborze akcji filtrowania/sortowania produkty powinny mieć prostą animację ładowania (np. pulsujący gradient), dzięki temu, użytkownik wie, że produkty na listingu się aktualizują.

5. Wyśiwetlanie zastosowanych filtrów w podsumowaniu: Na desktopie aktywne filtry powinny być wyróżnione kolorem i wyświetlać liczbę wybranych filtrów z danej kategorii. W wersji mobilnej powinna być wyświetlona liczba wybranych filtrów w kółku, a pod nazwą danego filtra wszystkie wypisane.

6. Wypisywanie elementów filtra w kolejności alfabetycznej: Filtry w danej kategorii powinny być ułożone alfabetycznie, ułatwia to użytkownikowi szybsze odnalezienie poszukiwanych opcji filtrów. Natomiast kategorie filtrowania powinny być ustawiane od najpopularniejszych lub takich które pozwolą użytkwnikowi zawężyć produkty możliwie najszybciej.

7. Wyświetlanie duplikatów wybranych filtrów w pierwszej kolejności: Jeśli w danej kategorii jest dużo filtrów, wybrane należy zduplikować na górze listy, aby użytkownik miał do nich szybki dostęp.

8. Pokaż liczbę przefiltrowanych produktów: Obok przycisku „Zastosuj filtrowanie” należy wiświetlić ilość produktów spełniających wszystkie warunki. Dzięki temu użytkownik wie, czego może się spodziewać po zaakceptowaniu filtrowania.