Wyciągnij rękę do usera, a on sięgnie po Twój produkt. Karta produktu w e-commerce.

Zarówno 2020, jak i 2021 to czas olbrzymich zmian. Sytuacja światowa odbiła się na wszystkich sektorach, począwszy od społeczeństwa, poprzez naukę i biznes, na usługach i rozrywce kończąc. Z pierwszej ręki wiem, że kolosalna zmiana dokonała się również w branży sprzedażowej. E-commerce stał stał się królem rynku, a Ci, którzy jeszcze nie byli przekonani do sprzedaży i kupowania online, szybko zmienili zdanie.

Na dobry sklep składa się wiele elementów i każdy z nich powinien być dopracowany dla najlepszego doświadczenia konsumentów. Zamiast rozciągać się i traktować całość sklepu po macoszemu, postanowiłem skupić się na jednej części – na stronie produktu. Wyszukiwarka i lista produktów pozwalają znaleźć userom to, czego szukają, a koszyk jest tym, co decyduje o dokonaniu płatności i finalnej konwersji z usera na konsumenta, ale to strona produktu jest miejscem, gdzie podejmuje się decyzję. Część osób pomija listę produktów i przekierowanie z reklam, lądują bezpośrednio na karcie produktu. Tutaj więc musimy „kupić” usera, żeby chciał nasz produkt kupić. Dobrze zaprojektowana strona produktu potrafi zarówno przekonać niezdecydowanych, jak i ich odrzucić. W kilku krokach przedstawię zatem dobre praktyki.

E-Commerce, a raczej m-commerce

Pierwsze i najważniejsze: mobile first! Możliwe, że jest to dla Ciebie oczywista oczywistość, ale szokuje mnie, z jak wieloma sklepami, które są przygotowane głównie pod desktop, się spotkałem. Nawet wiele z nowych projektów, błyszczących na Awwwards.com, bardzo designerskich i rzucających się w oczy, ma zaniedbaną część mobile. Szkoda. Portal Statista podaje, że ponad 79% użytkowników mobilnych dokonywało zakupów na tych właśnie urządzeniach. Dla wielu osób dobrze przygotowany, wygodny m-commerce jest czymś, co decyduje o wyborze sklepu. Wzrost udziału w rynku jest widocznym trendem. Wydatki na m-commerce w 2018 roku wyniosły 501 miliardów i mają wzrosnąć do 740 miliardów do 2023 roku.

Ciekawym trendem jest to, że w m-commerce klienci chcą więcej informacji w witrynach mobilnych. Badania pokazują, że 80% użytkowników smartfonów odczuwa braki w informacjach o produktach podczas zakupów na urządzeniach mobilnych. M-commerce jest wygodny, ale jeśli wygoda ta wiąże się z poświęceniem informacji, klienci z pewnością będą szukać gdzie indziej. Dlatego dobrze przygotowany UX sklepu, z myślą o urządzeniach mobilnych, jest czymś, o czym musiałem wspomnieć na początku.

Osobiście nadal lubię zaczynać projektowanie od najmniejszego ekranu smartfona. Mimo że 360×640 zdarza się fizycznie coraz rzadziej, daje pewność, że wszystko będzie dobrze wyglądać na wszystkich urządzeniach.

Okruszki czy nić Ariadny

Breadcrumbs. Często spotykam się z mieszanymi opiniami, co do dodawania ich na projektach. Część projektantów uważa, że przy dobrze zaprojektowanej architekturze nie są one przydatne. Osobiście uważam, że są bardzo potrzebne. Dlaczego? Bo z własnego doświadczenia widzę, jak bardzo pomaga to w eksploracji strony. Tam, gdzie normalnie pomaga to userowi znaleźć się na stronie i zobaczyć w jakim miejscu jest, w m-commerce pozwala też na eksplorację innych produktów.
Często sam znajdowałem się w takim scenariuszu. Wyszukuję produkt X. Znam nazwę konkretnego modelu. Nie do końca wiem, do jakiej kategorii można go przydzielić, a chciałbym zobaczyć jakie mam opcję do wyboru. Wyszukuję więc go po nazwie, a następnie cofam się do jego kategorii.

Z karty produktu, który kojarzymy, do karty produktu, który chcemy zakupić

Danie naszym userom narzędzi do eksploracji często wystarczy, aby znaleźli u nas to, czego szukają. Breadcrumbs najlepiej działają w swojej klasycznej formie, chociaż warto szukać nowych rozwiązań tak długo, jak nie naginamy użyteczności dla oryginalności.

Pokaż mi, co chcę kupić

Zawsze słyszałem określenie ‚Klient kupuje oczami”. Jest to powód, dla którego na początku UXD w Polsce nawet designerzy, którzy nie widzieli się w UI, tworzyli projekty High Fidelity.
Całe szczęście rynek pracy powoli zmienia się w tej kwestii na lepsze, ale powyższe stwierdzenie pozostaje jak najbardziej żywe w e-commerce.
Zakupy przez internet niosą za sobą obawę userów, że kupują przysłowiowego „kota w worku”. Brak możliwości kontaktu z fizycznym obiektem przed jego zakupem zmusza nas do rozważania faktycznej jakości towaru. Jest to rzadsze w przypadku kupowania konkretnych zapakowanych produktów, ale nadal pozostaje prawdziwe, bo nawet kupując konkretną książkę, szukamy tej w idealnym stanie.

Mam tu na myśli wszystkie formy prezentacji. Większość sklepów ogranicza się do zdjęć, ale są takie, które pokazują filmik reklamowy lub modele 3D. Bardzo dobrze robi to branża motoryzacyjna. Możemy zobaczyć pełen konfigurator naszego pojazdu, łącznie z wycieczkami po jego wnętrzu i obracanym modelem 3D. Dużo pracy wkłada się w perfekcyjną prezentację produktu, którego nie kupuje się przez internet.
Przeważnie nie jesteśmy w stanie pokazać dokładnie tej sztuki, którą wysyłamy klientowi (chyba że jest to aukcja), ale warto postarać się, aby materiały odzwierciedlały faktyczny produkt.
Dobrze robią to sklepy odzieżowe, które po zmianie koloru na karcie produktu zmieniają się też zdjęcia poglądowe, ale już mało kto robi to samo z rozmiarami. Materiały powinny być rzeczowe i pokazywać ten właśnie produkt, coś, co dostajemy po zakupie. Dobrą praktyką jest pokazanie produktu na kilku zdjęciach (samego, wyizolowanego na neutralnym tle) oraz dodanie zdjęć kontekstowych (takich, jak sposób użycia lub wkomponowanie w przestrzeń).

Warto postarać się też o multimedia w dobrej jakości. Spotykałem się więcej razy niż chciałbym ze zdjęciami wyglądającymi ostro tylko na miniaturkach. Często nie miałem możliwości powiększenia zdjęcia, co też sprawiało, że szukałem innego sklepu, w którym można zweryfikować produkt przynajmniej w taki sposób.

Lepsze zaprezentowanie produktu zwiększa początkowo niskie zaufanie usera

Dobrze rozumiem, że wszystko ma swoje granice i przy dużej liczbie produktów nie można pozwolić sobie na to, żeby zmienić sklep online w katalog ze zdjęciami. Trzeba wyważyć, aby strona była lekka i załadowała się szybko, mając na uwadze to, że nawet najszybsza strona nie przekona do zakupu tak, jak dobra prezentacja produktu.

Jak to: nie ma kawy?

Nic nie boli tak bardzo, jak moment, kiedy znajdujemy coś, czego szukaliśmy od długiego czasu, w idealnej dla nas cenie, tylko po to, żeby dowiedzieć się, że nie możemy kupić tego produktu. Większośc sklepów poprawnie nie pozwala dodać produktów, kórych nie mają na stanie, do koszyka, ale można iść o krok dalej.
Warto dać naszemu userowi więcej informacji niż zero jedynkowe „jest albo nie ma”.
W takiej sytuacji nasz potencjalny klient idzie szukać gdzieś indziej. Jeżeli jednak pokażemy mu, że produkt będzie dostępny już zaraz, to może to przekonać go, żeby jednak poczekać i kupić go u nas.

Podobnie jest z dostępną liczbą – określenie konkretnej wartości jest bardzo pomocne. Unikniemy sytuacji, w której zadowolony user dozna rozczarowania, kiedy nie będzie mógł zakończyć płatności przez brak produktów lub – co gorsza – dostanie e-mail z przeprosinami, że niestety, zrealizowanie zamówienia jest niemożliwe.

Nie zamykajmy usera w ślepym flow oraz dajmy mu więcej informacji

Brak produktu przeważnie kieruje usera w ślepy zaułek. Nie ma i tyle.
Warto pomyśleć, jakie ścieżki pokazać mu dalej. Zaproponujmy mu personalne przypomnienie o dostępności produktu. Szczególnie dobrze działa to, kiedy mówimy o tym, kiedy produkt będzie dostępny, bo zwiększamy szanse, że użytkownik wróci do nas, jak tylko będzie mógł zakupić produkt.

Dodajmy też propozycje innych podobnych produktów poniżej. Jeżeli user może kupić produkt, warto zaproponować mu mieszankę podobnych produktów (większy wybór) z produktami łączącymi się (cross-selling).

Do wyboru, do koloru

Nic tak nie męczy, jak lista 20 podobnych produktów, różniących się jednym aspektem – szukanie po nazwie i skakanie po kartach niemal identycznych produktów tylko po to, żeby już w koszyku zobaczyć, że dodaliśmy nie to, co trzeba.
Tak, jak zmniejszamy mnogość kategorii, tak samo streszczajmy lawinę podobnych produktów. Zalew osobnych produktów, w jakim tonie nasz user, sprawia, że ciężko jest mu się odnaleźć. Negatywny wpływ nadmiernego wyboru pokazały badania prowadzone przez Sheene Iyengar. Porównywano w nich wpływ ilości asortymentu na stoiskach na sprzedaż produktów. Bogatsze stoiska przyciągały uwagę 60% przechodniów, a mniejsze 40%. Mniejszy wybór sprawiał jednak, że zakupu dokonywało 27% więcej klientów.

Zamiast mnożyć sztucznie asortyment, dajmy edycję konkretnego produktu

Mimo że nie zawsze jest to możliwe, to osobiście zalecam porządne przeglądanie asortymentu sklepu pod kątem wyboru. Pomoże to nie tylko usprawnić ofertę, ale również zoptymalizować budżet czy produkcję.
Zawsze warto jednak streścić nasz asortyment do mniejszej liczby kart produktów, dodając możliwość edycji. User od razu widzi, jakie ma opcje, nie zmuszamy go do szukania na ślepo różnych wersji na stronie. Ma to olbrzymie znaczenie, kiedy produkt występuje w różnych konfiguracjach, które czasami mogą się wykluczać.

Więcej sensownych słów

Jak wspomniałem wyżej, m-commerce zderza się z problemem zbyt małej liczby informacji. Według mnie dotyczy to e-commerce’u jako całości. Bardzo modny i minimalistyczny styl oraz trend usuwania zbędnych słów momentami idzie za daleko. Prowadzi do maniakalnego wręcz skąpienia userom informacji o produkcie.
Głodzenie informacyjne potencjalnych klientów nie wpływa dobrze na ich zaufanie do produktu. Informacji, których nie dostanie u nas, będzie szukał w innych miejscach. Mogą one sprawić że user kupi produkt w innym miejscu; mogą też być fałszywe i sprawić, że porzuci zakup całkowicie.
Mówiąc o informacjach, mam na myśli rzeczowe informacje. Zawsze warto unikać typowego zalewu marketingowego tekstu. Dane, które nic nie wnoszą, są gorsze niż ich brak.

Opisując produkt trzeba zobaczyć, czego może szukać user. Należy postawić się w sytuacji nie tylko kogoś, kto zna produkt, ale i całkowicie nowej osoby. Informacje powinny być treściwe, napisane w prosty sposób. Zawierać dane techniczne, wymiary, obostrzenia.

Za krótkie i zbyt obszerne opisy są równie złe. Dajmy pełnię konkretnych informacji

Pokażmy, jak długi jest okres gwarancji na produkt, czy można go wymienić oraz w jakim czasie; jakie są metody dostawy i płatności. Jeżeli produkt ma elementy, to jakie one są. Postawmy się w miejscu naszego klienta i pokażmy to, co jest ważne również dla niego, a nie dla nas.
UX Copy jest czymś bardzo ważnym, a często traktowanym po macoszemu – dobrze napisany opis potrafi skutecznie zachęcić do zakupu.

Trafić do koszyka

Na koniec ostatnie dwa elementy: cena oraz dodanie do koszyka.
Przyznam, że z aż tak złym sklepem, żeby nie było na nim któregoś z powyższych, jeszcze się nie spotkałem. Widziałem natomiast wiele złych rozwiązań.

Po pierwsze: nie chowajmy przycisku. Widziałem sklepy, w których przycisk nie pojawiał się do momentu, kiedy user nie podał liczby sztuk lub gdy nie było produktu na stanie. Wyjątkiem jest sytuacja, gdy zastępujemy przycisk dodania do koszyka przyciskiem o poinformowaniu o dostępności, ale wtedy też oba call to action powinny się znacząco różnić od siebie.
Mówiąc o call to action, warto podkreślić słowo call. Przycisk dodania do koszyka powinien być widoczny. Często spotykam się z sytuacjami, gdy najważniejszy button na stronie produktu zupełnie nie rzuca się w oczy. Nie tylko warto uwidocznić go wizualnie (kolor, kształt, cień), ale też poprzez umiejscowienie. User nie powinien szukać przycisku.

Obok naszego „Dodaj do koszyka” warto umieścić zmianę liczby sztuk. Jeśli liczba dostępnych sztuk jest ograniczona, warto od razu zablokować przekroczenie tej liczby.

Wyróżniający się przycisk i widoczna cena pomogą naszym userom

Tutaj przechodzimy do ceny. Wizualnie musi być równie dobrze widoczna, co „Dodaj do koszyka”. Powinna znajdować się też blisko naszego call to action – dla wygody użytkownika.
Jasno informujemy, czy cena uwzględnia dostawę. Jeśli jakiś wybór wersji produktu ma wpływ na cenę, to powinna się ona dynamicznie zmieniać. W wypadku produktów promocyjnych określmy jasno obecną cenę – nie zostawiajmy matematyki naszym userom. Podobnie warto dodać możliwość pokazania ceny w innych walutach, jeżeli otwieramy się na rynek zagraniczny.

Na koniec

Każdy z tych elementów można jeszcze bardziej rozwinąć, jeżeli skupilibyśmy się na konkretnym przykładzie. Różne rozwiązania mogą lepiej lub gorzej sprawdzić się w konkretnych obszarach e-commerce.
Na przykład: można dodać wersje demonstracyjne, gdy sprzedajemy gry, programy czy pliki audio. W usługach, gdzie sprzedajemy bardzo spersonalizowany produkt, większą uwagę zwraca się na konfigurację niż dobrą prezentację.
W produktach digital mamy często do czynienia z wyborem pakietu. Tutaj każdy z nich powinien być od razu opisany, z widocznymi różnicami i ceną. Waga, jaką przywiązujemy do poszczególnych elementów, jest zależna od wyzwania projektowego, przed jakim staniemy, lecz o każdym z tych elementów warto pamiętać. To, co pozostaje dla nas stałą we wszystkich projektach, to stawianie naszych userów w ich centrum.