Jak za darmo polepszyć UX w e-commerce

User Experience jest popularnym tematem w branży e-commerce. Kiedy zaczynamy o nim czytać, to często przewijają się globalne marki, takie jak Amazon, Google, Apple czy Microsoft.

Z jednej strony dociera do nas informacja, że duże firmy inwestują w tę dziedzinę, z drugiej czasami mamy wrażenie, że UX to coś, na co stać tylko korporacje. Na szczęście jeden z “Ojców UX” stworzył 10 Heurystyk, zwane od jego nazwiska Heurystykami Nielsena, które pozwalają polepszyć User Experience nawet najmniejszego sklepu internetowego (oraz innych stron, serwisów i produktów) zupełnie za darmo.

Heurystyki Jacoba Nielsena to zbiór reguł, które pozwalają nam zadać sobie wiele pytań na temat tego, czy dany element strony jest użyteczny dla naszego klienta. Nie są to sztywne wytyczne, dlatego pozwalają wyznaczać kierunek, nie zabijając przy tym kreatywności i pomysłowości przedsiębiorcy.

“Dekalog” prezentuje się następująco:

1. Pokazuj status systemu
2. Zachowaj zgodność pomiędzy systemem a rzeczywistością
3. Daj użytkownikowi pełną kontrolę
4. Trzymaj się standardów i zachowaj spójność
5. Zapobiegaj błędom
6. Pokaż, zamiast zmuszać do pamiętania
7. Zadbaj o elastyczność i efektywność
8. Dbaj o estetykę i umiar
9. Zapewnij skuteczną obsługę błędów
10. Zadbaj o pomoc i dokumentację

Do każdego punktu oprócz opisu postanowiłem  dodać przykład bazujący na przypadkowym, niewielkim e-commerce, aby udowodnić, że w łatwy sposób można wykorzystać  te reguły w każdym sklepie internetowym. 

#1: Pokazuj status systemu

Projekt powinien informować użytkownika o tym, w jakim miejscu się znajduje. Jeżeli użytkownik nie będzie miał poczucia, że coś przed nim ukrywamy na stronie i wprowadzamy w jakiś nieświadomy proces, to szybciej zaufa marce. Jak dobrze wiemy, zaufanie w biznesie może wpłynać nie tylko bezpośrednio na nasz pojedynczy koszyk, (bo użytkownik nie ucieknie przez brak zaufania), ale także na powracalność do naszej marki.

Podstawowym przykładem statusu na stronie są okruszki. Mimo, że na załączonym screenie (Screen 1.) widać, że strona do najnowszych nie należy, to jednak zostały one zaimplementowane, przez co użytkownik wie “jak głęboko” w serwisie się znajduje.

Trzeba jednak pamiętać, że warto informować o statusie nie tylko podczas wyszukiwania produktów, ale również chociażby podczas finalizacji zakupów. O tym właściciel strony niestety zapomniał, ponieważ wpisanie “Krok 1 z 3” nie informuje o tym, co będzie się działo dalej (Screen 2.).

Screen 1. Autor sklepu pokazuje potencjalnemu klientowi za pomocą tzw. “okruszków” gdzie znajduje się na stronie podczas przeglądania produktów. Jest to dobra praktyka.

Screen 2. Ta sama strona podaje za mało informacji o statusie użytkownika podczas finalizacji zakupów. Status kroków powinien informować użytkownika o tym, co zdarzy się  później.

#2: Zachowaj zgodność pomiędzy systemem a rzeczywistością

Ta reguła dotyczy nie tylko wizualnych aspektów naszej strony, ale również słów, jakimi się posługujemy. 

Sprzedając nasz produkt lub usługę powinniśmy znać swoją grupę odbiorców, rozumieć ich potrzeby, a co za tym idzie, mówić ich językiem. I wcale nie chodzi tutaj o marketingowe zagrywki o języku korzyści, ale właśnie o zwykłe, proste, zrozumiałe dla każdego słowa. 

W e-commerce nie bez powodu wirtualne przedmioty wędrują do “Koszyka”. Jeżeli klient jest w sklepie stacjonarnym, to zazwyczaj wkłada przedmioty właśnie do niego. Sama nazwa przeniknęła w myśl tej heurystyki do interfejsów internetowych. Koszyk często rozpoczyna finalizację zakupów, ale mimo to przycisk kierujący do niego nie nazywamy “Finalizacja”. 

Dlatego w sklepach internetowych problem z tą heurystyką częściej występuje przez chociażby kolory. O ile przy zaawansowanym poprawianiu konwersji można testować nawet odcienie, o tyle przy podstawowej chęci sprawdzeniu naszego sklepu internetowego możemy pomyśleć na przykład o… sygnalizacji świetlnej! Dlaczego? Dlatego, że każdy z nas prawdopodobnie rozumie, że w dużym skrócie, czerwony to zakaz, żółty to ostrzeżenie, a zielony to pozwolenie. Zastanówmy się więc dwa razy zanim nasza cena przy finalizacji zakupów będzie czerwona:

Screen 3. Czerwony kolor przyciąga uwagę, ale w codziennym życiu kojarzy się z zakazami. Warto zastanowić się czy nasza cena będzie lepiej odbierana na czerwono.

Jeżeli ktoś nadal uważa, że czerwony lepiej podkreśla gratisy, to wstawiam również przykład podsumowania w zielonych kolorach, który nie w gorszy sposób zachęca do finalizacji zakupu, podkreślając oszczędności. Ten screen, jako jedyny, pochodzi z dużego polskiego e-commerce.

Screen 4. Kolor zielony podkreśla zarówno to, ile klient oszczędza kupując przedmiot teraz w promocji, jak i  CTA, który bezpośrednio zachęca nas  do wykonania kolejnego kroku. Warto jednak uważnie mierzyć konwersję przy CTA, bo dużo zależy od kontrastu z resztą naszej strony. Może wystąpić przypadek, w którym kolor zielony kojarzy się lepiej, ale gorzej sprzedaje.

#3: Daj użytkownikowi pełną kontrolę

Trzecia Heurystyka Nielsena mówi nam o tym, aby dać użytkownikowi kontrolę nad tym, co robi. Łamanie tej heurystyki może niejednokrotnie przynieść zyski krótkoterminowe, ale w długiej perspektywie to się nie sprawdza. Znam pełno firm, do których klient już nigdy nie wrócił, bo przez pozbawienie go kontroli, ostatecznie obciążono mu rachunek na np. 50 zł. Do tego powiedział o tym znajomym, więc w efekcie firma traciła i klienta i leady. 

Warto więc dać użytkownikowi tę kontrolę, aby z uśmiechem wspominał naszą firmę, wracał do niej i polecał ją znajomym!

Przykładem może być ponownie proces finalizacji zakupów. Użytkownik chce zapłacić za nasz produkt, więc uzupełnia dane i przechodzi do płatności. Na tym etapie zmienia zdanie odnośnie kuriera i chciałby wybrać innego dostawcę – powinniśmy więc mu na to pozwolić, np. przez dodanie przycisku cofającego do poprzedniego etapu. Ten przykład możesz łatwo dodać do każdego formularza na swojej stronie!

Screen 5. Będąc na drugim kroku w procesie finalizacji zakupów mogę cofnąć się za pomocą przycisku “Powrót do koszyka”, aby zmienić moje poprzednie wybory.

#4: Trzymaj się standardów i zachowaj spójność

Trzymanie się standardów oraz zachowanie spójności mimo że idą w parze, to nawiązują do aspektów wewnętrznych i zewnętrznych organizacji. 

Na początku skupmy się więc na zachowaniu spójności. Jeżeli słyszałeś kiedyś o design systemie, to prawdopodobnie wiesz o tym już dość dużo. Jeżeli nie miałeś przyjemności (lub budżetu do jego stworzenia), to możesz zadbać o spójność w takich elementach jak:

• Paleta kolorów – Nie używaj miliona odcieni do podobnych elementów na stronie. Dobrą praktyką jest posiadanie kilku dominujących barw.
• Fonty – Wybierz 2-3 dominujące na stronie fonty (czcionki). Jeżeli nie masz o nich pojęcia, to najlepiej trzymać się nawet jednego.
• Sposób podświetlania linków – Jeden sposób na całą stronę.
• Styl przycisków (np. Call To Action)

Każdy użytkownik Internetu, bardziej lub mniej świadomie,wie, że są pewne standardy w interfejsach. Są to właśnie aspekty zewnętrzne, o które każdy właściciel e-commerce powinien zadbać na swojej stronie. Niektóre nie zmieniają się od lat, ale giganci tacy jak Google, Facebook czy Instagram umieją je zmieniać poprzez zmiany w swoich interfejsach. Mimo, że wiele tych zmian początkowo spotyka się z krytyką, to historia pokazuje, że po kilku miesiącach mniejsze strony ulegają i zmieniają swoje strony tak, aby miały elementy podobne do wielkich marek. 

Jeżeli spojrzysz na strony dużych firm i porównasz je do swojej, możesz zauważyć, że niektóre rzeczy zostały umiejscowione podobnie:

Screen 6. Strony powinny być zaprojektowane według pewnych standardów. Na screenie widzimy, że duże marki mają ułożone w tym samym miejscu m.in. wyszukiwarkę, koszyk i logowanie.  Źródło: https://www.nngroup.com/articles/consistency-and-standards/ 

#5: Zapobiegaj błędom

Zapobieganie błędom nie tylko polepsza doświadczenie użytkownika, ale również bezpośrednio wpływa na konwersję naszego koszyka. Sprawienie, że nasz użytkownik szybko znajdzie upragniony przedmiot lub nie będzie miał problemu z przejściem przez proces zakupowy sprawi, że mniej czynników zniechęci go do finalizacji zakupu.

Zapobiegać błędom możesz dzięki:

• Odpowiednim podpowiedziom w wyszukiwarce, które sprawią, że użytkownik szybciej znajdzie upragniony towar;
• Zadbaniu o pokazanie stanu magazynowego, aby użytkownik nie kupił wyprzedanego towaru;
• Podpowiedziom w polach formularza, aby użytkownik wiedział co ma wpisywać i nie musiał cofać.

Screen 7. Formularz na podstawie adresu sugeruje numer kierunkowy +48, a pole wymagające cyfr dba o odpowiedni format.

#6: Pokaż zamiast zmuszać do pamiętania

Robiąc zakupy niekoniecznie chcemy czuć się jak na sprawdzianie z historii, dlatego jako użytkownicy chcemy korzystać z interfejsów, które nie wymagają od nas zapamiętywania niepotrzebnych rzeczy.

Jako właściciel strony powinieneś przestrzegać się przed opisami w środku pól formularza, które po wpisaniu znaku znikają. Jeżeli ktoś lub coś przeszkodzi użytkownikowi w wypełnianiu formularza, to jest duża szansa, że będzie musiał usunąć wpis, aby zobaczyć, o co był proszony i dopiero kontynuować wypełnianie. 

Dobrą praktyką z zakresu tej heurystyki może być chociażby łatwy podgląd stanu koszyka zakupowego:

Screen 8. Po najechaniu na koszyk w prawym górnym rogu wysuwa się lista z towarami, które użytkownik dodał będąc na stronie. To sprawia, że w każdym momencie ma kontrolę i może w łatwy sposób sprawdzić czy kupił wszystko co chciał.

#7: Zadbaj o elastyczność i efektywność

Jestem daleki od mówienia, że jakakolwiek strona, produkt lub usługa jest dla każdego. Zawsze priorytetyzuję klientów i tworzę produkt dla konkretnych person. W e-commerce bardzo rzadko (a raczej bym powiedział, że nigdy) produkt jest tylko dla jednej grupy odbiorców. Jeżeli nasi klienci mają kilka cech wspólnych, to i tak mogą się różnić, chociażby stylem życia, wiekiem, doświadczeniami lub chorobami. Jeżeli nie chcemy tracić klientów, to warto zadbać o elastyczność, którą ja interpretuję bardziej jako dostępność. 

Dostępność (accessibility), to dziedzina wiedzy, która zajmuje się projektowaniem dla szerokiej grupy odbiorców, czyli tak, aby chociażby nie wykluczać osób ze względu na ich wiek czy choroby. Jeżeli chcemy dobrze o to zadbać , to powinniśmy pochłonąć się lekturą WCAG (ostrzegam, nie jest to mała dawka wiedzy, ale warto poświęcić jej  czas!). 

Obiecałem jednak kilka gotowych rozwiązań w każdej heurystyce, dlatego to, co jest filarem listy produktowej w każdym e-commerce, to odpowiednie filtry i sortowanie. Warto zapytać naszych klientów, które kryteria biorą pod uwagę podczas szukania danego przedmiotu i dodać możliwość filtrowania po tych parametrach. Część użytkowników będzie skupiała się na cenie, inni na opiniach, a jeszcze inni na specyficznych parametrach technicznych – to właśnie wspomniana wcześniej elastyczność, która pozwala różnym użytkownikom odnaleźć się na stronie.

Jeżeli chodzi o efektywność, to warto zadbać m.in. o szybkość strony. Wpływa ona zarówno na doświadczenie użytkownika (nikt z nas nie lubi długo czekać), ale również na pozycjonowanie naszej strony.

Wyszukiwarka Google podpowie wiele stron, które są w stanie sprawdzić jak wypada nasza strona na tle innych. Przykładem może być narzędzie od samego Google’a, czyli Google PageSpeed Insights. Osobiście polecam jednak zrobić test na kilku stronach, aby mieć większą pewność co do danych.

W przypadku strony na WordPress warto poszukać wtyczek, które optymalizują szybkość. Niestety najczęściej musimy za nie zapłacić, a artykuł jest o darmowych sposobach, stąd niezależnie od silnika sklepowego, można zwrócić uwagę na:

• Optymalizację zdjęć – zarówno jeżeli chodzi o ich jakość, wagę, jak i format. Musimy znaleźć złoty środek tak, aby nie pokazywać klientom pikselozy, ale jednocześnie, aby zdjęcia nie miały po kilkadziesiąt MB. Po wdrożeniu lżejszych zdjęć, warto je otworzyć i spojrzeć, czy ich jakość nie będzie źle świadczyła o marce.

• Odpowiedź serwera – usunięcie niepotrzebnych skryptów oraz odpowiedni cashing, czyli przerzucanie części pamięci na przeglądarki użytkowników, dzięki czemu przy ponownych odwiedzinach czas reakcji będzie lepszy. 

Screen 9. Warto wyeksponować możliwość filtrowania i sortowania na stronie. W tym przykładzie warto dodatkowo zwrócić uwagę na podpowiedzi dotyczące ceny – podana jest minimalna i maksymalna cena w danej kategorii.

#8: Dbaj o estetykę i umiar

Kiedy myślę o tej heurystyce, to przypomina mi się serial “Abstrakt: Sztuka designu”, odcinek o Ian Spalter, czyli wybitnym projektancie Instagrama, który przeprojektował logo i aplikacje, a w zamian przez kilka miesięcy wylewał się na niego hejt w Internecie. Dlaczego?

Ian zamienił kolorowy interfejs na prosty, czarno-biały, aby podkreślić główną wartość Instagrama, czyli oglądania zdjęć dodanych przez użytkowników. Po fali hejtu projektanci zaczęli inspirować się tym projektem, a tę lekcję w prosty sposób możemy przełożyć na branżę e-commerce.

Aby podobnie jak Ian podkreślić najważniejsze funkcje, musimy najpierw zastanowić się, które informacje i opcje są dla nich najprzydatniejsze. Jeżeli mamy podpiętą analitykę, to nie musimy zgadywać – wystarczy zajrzeć do niej i sprawdzić, które przyciski (buttony) są najczęściej klikane, a które wcale. Do tego możemy też spojrzeć na heatmapy (np. dzięki HotJar), aby zobaczyć, które sekcje nasi użytkownicy omijają. 

Jeżeli nie mamy takich możliwości, to warto się zainspirować znanymi markami, które sprzedają towar podobny do naszego. Porównajmy nasze funkcje i ułożenie elementów do stron wielkich marek i zastanówmy się, jakie są różnice i z czego wynikają. Jeśli zauważymy, że duże marki często nie mają kilku elementów, które znajdują się  u nas, to jest dość duże prawdopodobieństwo, że brak tych funkcji u nich nie wynika z małego budżetu, a pewnej strategii.

Dbanie o estetykę i umiar to ciągła walka z myślami, że “dodam to na zapas” albo “może użytkownicy zaczną z tego korzystać”. Skoro widzimy, że coś jest nieużywane, to znaczy, że jest niepotrzebne lub źle zaprojektowane.

Screen. 10. Chcąc zobaczyć produkt, rozmiary i opinie o nim niekoniecznie chcemy, aby pop-up z kuponami zajmował ćwierć ekranu. Dodatkowo sprawienie, że pop-up wysuwa się z boku sprawia, że przestajemy skupiać się na towarze, który chcieliśmy kupić.

#9: Zapewnij skuteczną obsługę błędów

Każdemu zdarza się popełnić błąd i podobnie jest ze stronami internetowymi – zawsze jakiś się znajdzie. Ważne jest jednak to, aby przekazać użytkownikowi co się stało i co powinien zrobić w danej sytuacji. To kwintesencja zapewniania skutecznej obsługi błędów.

Jeżeli nie mamy pomysłu na to, jak skutecznie obsłużyć dany błąd, to wystarczy, że napiszemy komunikat z dwóch składników:

Dlaczego wystąpił błąd + Co użytkownik może zrobić

Często w formularzach stosuje się tylko pierwszy składnik np. “Niepoprawny adres e-mail”. Ważne jest, aby dopisać dlaczego (przykład na screenie). Większym problemem (choć na szczęście coraz rzadszym) są hasła – bez odpowiedniej walidacji zdarza się, że użytkownik szybciej opuści stronę, niż wpisze bezpieczne hasło, które zostanie zaakceptowane przez system.

Aby nie tracić przychodu, warto pamiętać o zapewnieniu pomocy np. podczas braku towaru. Oprócz poinformowania, że towaru nie ma w magazynie, dodatkowo można dać mu opcję powiadomienia, gdy produkt będzie dostępny lub zasugerować podobny przedmiot.

Screen 11. Skuteczna obsługa błędu polega na poinformowaniu użytkownika o tym, dlaczego pojawił się błąd i poinformowaniu jak można go usunąć. 

#10: Zadbaj o pomoc i dokumentację

To normalnie, że klienci mają pytania o nasz towar, sposób płatności, wysyłkę, reklamacje, czy inne istotne dla nich tematy. Pierwsze takie pytania od klientów nawet cieszą, ale gdy biznes rośnie i pytań zaczyna przybywać, to może brakować nam doby, aby na nie odpowiedzieć. To pierwszy powód, czysto biznesowy, który powinien przekonać nas do zadbania o dobrze zaprojektowaną pomoc dla naszych użytkowników na stronie.

Drugim powodem jest po prostu ucieczka klienta, gdy nie otrzyma odpowiedzi wystarczająco szybko. Jako społeczeństwo żyjemy w pośpiechu, więc niekoniecznie chcemy wysyłać maila, który może nie doczekać się odpowiedzi. Co możemy zrobić z tym faktem?

Po pierwsze możemy zaprojektować FAQ (ang. frequently asked questions – często zadawane pytania), gdzie umieścimy odpowiedzi na te pytania, które użytkownicy najczęściej zadawali nam mailowo lub telefonicznie. Może być to dosłownie 5-10 tematów, które już odciążą nas od maili, a klientom dadzą szybką odpowiedź.

W przypadku rozbudowanych usług lub produktów może być nam potrzebny cały dział pomocy. Dotyczy to jednak głównie korporacji, które projektują całą strategię treści dla artykułów pomocowych.

Podsumowanie

W rozwijającym się świecie e-commerce nie wystarczy zadbać o konkurencyjne ceny. Każdego użytkownika trzeba najpierw przekonać do wejścia na stronę (z tym może pomóc Ci Booste), a następnie zapewnić mu jak najlepsze doświadczenia z naszą marką. Aby to zrobić na podstawowym poziomie, wystarczy poświęcić czas na zapoznanie się z podstawami User Experience, takimi jak 10 Heurystyk Nielsena, a następnie wdrożyć to w swoim sklepie internetowym.

Mam nadzieję, że ten artykuł ułatwi Ci pracę nad poprawą UX w Twoim e-commerce.