Kupujący, którzy nie trafiają prosto na stronę produktu, prawie zawsze najpierw przechodzą przez stronę kategorii lub wyników wyszukiwania. To tam sklep albo pomaga zawęzić setki produktów do kilku, albo traci klientów na rzecz przycisku "wstecz". Projekt strony listy produktów dostaje mniej uwagi niż strona główna czy finalizacja zamówienia, a jednak decyduje, czy odwiedzający w ogóle dotrą do produktu. Oto, co trzeba dobrze zrobić: filtry, karty produktów, sortowanie i własną wyszukiwarkę sklepu.
Co musi osiągnąć projekt strony listy produktów
Dobry UX strony kategorii pomaga odwiedzającemu zrobić cztery rzeczy w szybkiej kolejności:
- Zorientować się: zobaczyć, w jakiej kategorii jest, ile produktów zawiera i co obejmuje asortyment.
- Zawęzić: skrócić listę według atrybutów, na których mu zależy.
- Porównać: przejrzeć pozostałe produkty bez otwierania każdego z nich.
- Iść dalej: otworzyć produkt albo wrócić do listy bez utraty miejsca.
Krótki wstęp i linki do podkategorii pomagają w pierwszym kroku; reszta zależy od filtrów i kart produktów. Strony kategorii to jeden z szablonów, które prototypujemy w Figmie w ramach pracy nad projektowaniem UX dla e-commerce, razem ze stronami produktów i finalizacją zamówienia.
UX filtrów w e-commerce, który pomaga zamiast ukrywać
Większość problemów z filtrami zaczyna się od danych, a nie od projektu. Filtry są tak dobre, jak atrybuty produktów, na których się opierają, więc pierwsze pytanie brzmi, jakich atrybutów kupujący faktycznie używają do wyboru: rozmiaru i kroju w odzieży, zgodności w częściach, wymiarów w meblach, mocy w narzędziach. Najlepszymi źródłami są frazy wpisywane w wyszukiwarkę sklepu i pytania, które słyszą sprzedawcy.
- Pokazuj liczby przy każdej wartości filtra oraz ukrywaj lub wyłączaj wartości, które nic by nie zwróciły.
- Pokazuj zastosowane filtry nad wynikami jako znaczniki, które można usuwać pojedynczo, z jednym przyciskiem "wyczyść wszystko".
- Używaj słów klientów: "Pasuje do modeli z lat 2018-2023" zamiast wewnętrznego kodu.
- Układaj filtry według przydatności, a nie alfabetycznie, i utrzymuj krótką listę tam, gdzie liczy się tylko kilka atrybutów.
- Utrzymuj stabilność strony. Aktualizowanie wyników bez przeładowania jest w porządku, o ile strona nie skacze, a wybrane filtry przeżywają przycisk "wstecz".
Gdy atrybuty są niespójne w tysiącach produktów, poprawka należy do samych danych produktowych, a tą stroną zajmuje się nasza usługa integracji ERP i PIM.
Filtry mobilne
Na telefonie filtry mobilne działają najlepiej w panelu pełnoekranowym otwieranym przyklejonym przyciskiem "Filtruj" obok "Sortuj". Pozwól wybierać kilka wartości i stosować je razem przyciskiem, który pokazuje, ile produktów zostanie. Po zastosowaniu przenieś użytkownika na górę wyników i zostaw zastosowane filtry widoczne nad listą.
Projekt karty produktu
Każda karta musi w sekundę lub dwie odpowiedzieć na pytanie "czy warto to otworzyć?". Przydatny projekt karty produktu zawiera:
- Zdjęcia w stałych proporcjach i na stałym tle, aby oko porównywało produkty, a nie fotografie.
- Nazwę zawierającą wyróżniający szczegół, taki jak model, rozmiar lub pojemność, a nie tylko linię produktów.
- Cenę, z wyraźnie i uczciwie pokazanymi cenami promocyjnymi.
- Jeden lub dwa rozstrzygające fakty: próbki kolorów, rozmiary na stanie lub czas dostawy.
- Oceny tylko tam, gdzie pochodzą z prawdziwych opinii.
Pomiń to, co należy do strony produktu. Karta zatłoczona plakietkami i przyciskami spowalnia skanowanie, a na telefonie każda dodatkowa linia spycha następny produkt z ekranu.
Opcje sortowania, paginacja czy nieskończone przewijanie
Oferuj opcje sortowania zgodne z tym, jak ludzie robią zakupy w danej kategorii: trafność lub bestsellery jako domyślne, cena w obu kierunkach, najnowsze dla mody i technologii oraz ocena tam, gdzie opinii jest dużo. Zapamiętaj wybór, gdy odwiedzający przegląda dalej.
Spór o paginację czy nieskończone przewijanie ma dla większości sklepów praktyczną odpowiedź: przycisk "załaduj więcej". Nieskończone przewijanie uniemożliwia dotarcie do stopki i utrudnia powrót w to samo miejsce po otwarciu produktu, a klasyczna paginacja dodaje dotknięcia na telefonie. Przycisk "załaduj więcej" zostawia ludziom kontrolę, a każdy załadowany blok powinien nadal mieć własny adres URL możliwy do skanowania, aby wyszukiwarki mogły dotrzeć do każdego produktu.
Wyszukiwarka w sklepie internetowym i strona braku wyników
Odwiedzający korzystający z wyszukiwarki zwykle wiedzą, czego chcą, więc wyszukiwarka w sklepie internetowym zasługuje na tyle samo uwagi co menu. Powinna tolerować literówki i liczbę mnogą, rozumieć synonimy, takie jak "kanapa" i "sofa", znajdować produkty po SKU i numerze modelu oraz podpowiadać produkty i kategorie w trakcie pisania. Przeglądaj dziennik wyszukiwań co miesiąc: frazy, które nic nie zwracają, to gotowa lista brakujących produktów, brakujących synonimów i brakujących atrybutów.
Strona braku wyników nigdy nie powinna być ślepym zaułkiem. Zaproponuj poprawę pisowni, popularne kategorie, kilka bestsellerów i sposób, by zapytać człowieka. Ktoś, kto szukał, to ktoś z zamiarem, a pomocna strona braku wyników zatrzyma przynajmniej część takich osób.
Najczęściej zadawane pytania: projekt strony listy produktów
Ile filtrów powinna mieć strona kategorii?
Tyle, ilu kupujący faktycznie używają do decyzji, i nie więcej. Układaj je według ważności, a rzadko używane filtry przenieś za link "więcej filtrów" zamiast je usuwać.
Czy produkty niedostępne powinny pojawiać się na listach?
Zwykle tak, ale niżej na liście i wyraźnie oznaczone, z opcją ich ukrycia. Usunięcie ich całkowicie psuje linki i ukrywa produkty, które wkrótce wrócą.
Skąd wiemy, czy zmiany na stronie listy zadziałały?
Śledź użycie filtrów, wyszukiwania kończące się bez kliknięcia i to, ile wizyt na liście prowadzi do strony produktu. Przy większych zmianach test A/B daje czystszą odpowiedź, co obejmuje nasza usługa optymalizacji konwersji.
Czy kupujący gubią się między Twoim menu a produktami? Nasza usługa projektowania UX i UI dla e-commerce zaczyna się od audytu doświadczenia użytkownika, a potem przechodzi do prototypów w Figmie stron kategorii, filtrów, stron produktów i finalizacji zamówienia dla sklepów WooCommerce, Magento i PrestaShop. Napisz do nas, podając adres sklepu i najlepiej sprzedające się kategorie, a podpowiemy, od czego zacząć.
