banner
  • Małgorzata Iwańska

  • | 30.11.2020

Lista produktów pełni rolę katalogu oferty sklepu, stanowi wynik wyszukiwania lub zawartość kategorii. Jest wiele sposobów dotarcia na listing, jednak często trafiają użytkownicy wpisujący daną kategorię produktu w wyszukiwarce lub osoby przechodzące ze strony głównej sklepu. Listing to zazwyczaj drugi krok na ścieżce użytkowników, dlatego warto zadbać o to, aby potencjalni klienci mogli sprawnie przejść dalej, odnaleźć interesujący ich produkt i dokonać zakupu. Zoptymalizuj zatem listę produktów w Twoim sklepie, aby nie zabrakło na niej 10 kluczowych elementów, które stosuje się w eCommerce.

Paginacja

Powinna być widoczna na górze i na dole strony, aby użytkownicy mogli z dowolnego poziomu przechodzić między kolejnymi stronami listy. Zamiast standardowej paginacji możesz zastosować tzw. infinite scroll, czyli ładowanie kolejnych produktów bez konieczności przechodzenia między stronami. Pamiętaj jednak, aby zawsze informować użytkownika ile produktów już wyświetlił i ile zostanie załadowanych po podjęciu akcji.

Odradzane jest ładowanie kolejnych produktów na scroll (jest to bardziej charakterystyczne działanie dla platform social media), lepiej natomiast zastosować przycisk “Pokaż więcej (50 produktów)”, aby akcja ta była bardziej świadoma dla użytkowników.

Sortowanie

Widoczne na górze listy, umożliwiające wybór jednego ze sposobów sortowania. Niemożliwe jest zastosowanie kilku metod, dlatego pamiętaj, aby nie stosować w tym wypadku np. checkboxów. Lepiej sprawdzi się dropdown z możliwością wybrania opcji. Pamiętaj o jasnym wskazaniu kolejności sortowania: nazwy produktów od A do Z, cena od najmniejszej do największej itp.

Drzewko kategorii

Umieszczone po lewej stronie listy, umożliwia przejście do nadrzędnej lub podrzędnej kategorii produktów. Dzięki temu użytkownicy wiedzą którą kategorię obecnie przeglądają, mogą łatwo sprawdzić czy ma one jakieś podkategorie i przejść do kolejnych, bardziej dopasowanych do ich oczekiwań produktów. Dzięki temu ułatwisz swoim użytkownikom nawigację i eksplorację sklepu.

Działanie filtrów

Filtry pozwalają na wybór wielu opcji w obrębie jednego atrybutu. Nazwy filtrów powinny być zrozumiałe dla użytkowników dlatego unikaj określeń branżowych, chyba, że tworzysz specjalistyczny sklep, którego użytkownicy posługują się typowymi dla ich otoczenia nazwami. Wybór filtrów powinien działać automatycznie (szybkie przeładowanie strony po wybraniu każdej opcji) lub po kliknięciu “Zatwierdź filtry” przez użytkownika.

Ilość i zakres filtrów

Zadbaj o to, aby filtry były dopasowane do kategorii produktów. Nie powinno być ich za dużo ani nie powinny na listingu znajdować się filtry, które nie dotyczą danej kategorii produktów. Filtry nie powinny być zbyt szczegółowe, ale dzięki nim użytkownik powinien zawęzić listę do kilku produktów o interesujących go cechach lub parametrach.

Informacje o zastosowanych filtrach

Nad listą produktów należy zamieścić informację o aktywnych filtrach. Przy każdej wybranej opcji daj możliwość usunięcia pojedynczych filtrów a także wszystkich wybranych opcji za pomocą jednego przycisku, np. “Usuń filtry”. Dzięki temu, że możliwość wyczyszczenia filtrów będzie dostępna w jednym miejscu, użytkownicy nie będą musieli szukać zaznaczonych opcji w różnych sekcjach i będą mogli wykonać akcję dużo szybciej.

Informacje w boksie produktowym

Produkt na liście powinien zawierać podstawowe informacje takie jak nazwa produktu i cena. Pamiętaj o dopasowaniu treści do swoich odbiorców, w zależności od branży treść boksa produktowego może się różnić kiedy wymagane jest podanie innych parametrów jak np. pojemności, wymiarów, modelu itp. Informacji tych nie powinno być jednak za dużo, aby nie przeładować listingu treścią, a wskazać na najważniejsze cechy produktu, które pozwolą w łatwy sposób odróżnić je od pozostałych. 

Zdjęcie produktu

W boksie produktowym nie może zabraknąć zdjęcia produktu. Ważne, aby było one dobrej jakości i pozwalało na łatwe rozpoznanie produktu. Najlepszym rozwiązaniem jest zaprezentowanie zdjęcia samego produktu a opcjonalnie po najechaniu na nie można wyświetlić alternatywne zdjęcie produktu, np. w sytuacji użycia.

Dodatkowe informacje o produkcie

Boks produktowy powinien także zawierać informację o promocji czy nowości, jeśli produkt należy także do takich kategorii w sklepie i należy go wyróżnić. Można w takim wypadku zastosować etykietę z odpowiednim oznaczeniem. Dodatkowo, jeśli produkt posiada warianty i występuje np. w różnych kolorach czy rozmiarach, warto dodać taką informację na liście produktów, aby użytkownik wiedział jakie może mieć opcje do wyboru w wypadku danego produktu.

Dodanie do ulubionych lub schowka

Z poziomu listy produktów użytkownik może dodać produkt do ulubionych lub do schowka, opcjonalnie także do porównania. Jeśli natomiast produkt nie wymaga dłuższej konfiguracji ani konieczności sprawdzania opisu produktu można wprowadzić przycisk dodania do koszyka.

Powyższy artykuł powstał na bazie zbioru wytycznych i rekomendacji zawartych w publikacji Best Practices for eCommerce opracowanej przez naszych projektantów. Doświadczenie i ponad 400 zrealizowanych projektów pozwoliło nam na wysnucie wniosków, które rzeczywiście sprawdzają się w sklepach naszych klientów. Pamiętaj jednak, aby wprowadzane zmiany testować, badać, analizować dane i wyciągać odpowiednie wnioski – tylko wtedy będziesz mógł zaproponować idealne rozwiązanie dopasowane do Twoich użytkowników.

Newsletter IDEACTOZawsze w czwartek. Co drugi czwartek.

UX Czwartek to lista inspirujących treści ze świata UX i eCommerce. Każdy subskrybent otrzyma za darmo (sic!) komplet naszych publikacji.

Newsletter