Popularne błędy UX w e-commerce

Problemy w zakresie UX, szczególnie dla sklepów mających silną konkurencję, mogą okazać się czynnikiem decydującym o sukcesie lub porażce. Gdy ceny są zbliżone, użytkownik często wybierze to miejsce, gdzie łatwiej, szybciej i wygodniej zrealizuje zakup. Chociaż coraz więcej właścicieli sklepów dba o doświadczenia użytkownika, nadal w e-commerce można natknąć się na błędy obniżające ux.  

Poniżej krótkie podsumowanie błędów ux, które mogą mieć poważne skutki, jeżeli chodzi o konwersję i wartość klienta przez całe życie (CLV – customer lifetime value).

‍

Nieetyczne praktyki czyli tzw. dark patterns

Dodawanie produktów do koszyka bez wiedzy użytkownika, niejasne informowanie o kosztach, utrudnianie rezygnacji z usługi czy skłanianie podstępem do udzielenia zgody na wykorzystanie danych, to tylko niektóre przykłady praktyk stosowanych w celu uzyskania szybkiego wzrostu zysków. Choć czasem tego typu zabiegi rzeczywiście działają na krótką metę, to w długiej perspektywie są one szkodliwe dla biznesu.

Raz oszukani użytkownicy stracą zaufanie do serwisu. Nie tylko nie wrócą, żeby ponownie zrobić tam zakupy (gorsze customer lifetime value), ale również nie polecą go swoim znajomym (gorszy net promoter score).

‍Negatywne opinie, które w dzisiejszych czasach bardzo szybko pojawiają się w agregatorach, takich jak np. Opineo i na mediach społecznościowych, skutecznie będą zniechęcać nowych klientów do ewentualnych zakupów.

‍

Niedostatecznie wyróżnione przyciski wzywające do akcji

W sieci naszą uwagę bombardują miliony różnych, próbujących wyróżnić się  elementów – banery reklamowe, wyskakujące chaty, powiadomienia RODO, prośby o możliwość wysyłania powiadomień… W tym zalewie bodźców użytkownicy mogą mieć problem z zauważeniem tego, co naprawdę ważne – przycisków wzywających do działania. Wezwania do działania (CTA) powinny być widoczne, wyróżniać się na tle pozostałych elementów. Można to osiągnąć np. za pomocą intensywnego koloru lub mikroanimacji. Pamiętajmy jednak, że więcej nie zawsze znaczy lepiej. Gdy dostępnych akcji lub mocno zaznaczonych elementów jest zbyt wiele, może pojawić się konflikt decyzyjny. Gdy chcemy podkreślić wszystko okazuje się, że tak naprawdę żaden element się nie wyróżnia, a jedyne, co uzyskujemy, to chaos i bałagan na stronie. Dlatego tak ważne jest dobre przemyślenie tego, jaka akcja jest dla nas najważniejsza, co jest kluczową konwersją, i konsekwentne podkreślanie właśnie tej akcji.

Kolejnym aspektem związanym z przyciskami wzywającymi do podjęcia działania, jest kwestia ich umiejscowienia. Zasada jest dość intuicyjna – jeżeli coś nie jest wystarczająco wyeksponowane, użytkownik tego nie zobaczy i nie podejmie akcji. Ważne przyciski należy umieszczać nad tzw. linią foldu (końcem widocznej od razu, bez konieczności scrollowania, części strony), inaczej użytkownicy mogą mieć problem z ich zauważeniem i nie podjąć przez to akcji.

‍

Zasada ta ma również wpływ na sposób wizualizacji menu. Gdy kluczowe linki do pozostałych części strony ukryjemy w tzw. hamburgerze, czyli ikonie trzech równoległych kresek stosowanym często (szczególnie na wersjach strony dedykowanych na urządzenia mobilne) jako symbol menu, użytkownicy nie zobaczą ich od razu i mniejsze jest prawdopodobieństwo, że w nie klikną. Rozwiązaniem tego problemu może być zastosowanie kontekstowego menu „przyklejonego” do dolnej krawędzi ekranu smartphone’a.

Kolejną pułapką, w jaką łatwo wpaść, jest usuwanie lub skracanie tekstów na przyciskach. Niezrozumiałe akcje nie będą podejmowane. Warto zadbać, aby wszystkie ikony na stronie miały odpowiednie podpisy. Nawet te dość oczywiste – to, co dla nas wydaje się oczywiste, innym osobom może sprawiać problem. Na przyciskach dobrze jest umieścić teksty zawierające w sobie czasownik w formie rozkazującej np. „Dodaj do koszyka” zamiast „Do koszyka”, „Wypróbuj wersję próbną” zamiast „Wersja próbna”. Czasowniki te pełnią rolę perswazyjną i zwiększają szansę na kliknięcie. Jednocześnie nie powinno się rezygnować z rzeczownika – daje on kontekst i upewnia użytkownika, że wykona zamierzoną akcję np. „Dodaj” w sklepie internetowym może oznaczać zarówno dodanie do koszyka, jak i dodanie do listy życzeń. Niepewność zmniejsza konwersję, więc należy się jej wystrzegać.

‍
Zbyt długie formularze w procesie składania zamówienia

Formularz to miejsce, w którym dużo sklepów popełnia błędy, tracąc przy tym klientów. Jednym z podstawowych błędów jest niepotrzebne wydłużanie formularzy i wymaganie informacji, które tak naprawdę nie są potrzebne do zakupu. Przeciąga to cały proces i może u użytkowników wzbudzić wątpliwości związane z prywatnością lub bezpieczeństwem. Jeżeli więc naprawdę musimy o coś pytać, ale nie jest to niezbędne do dokonania zakupu, oznaczmy tę opcję jako niewymaganą.

Czasami reorganizacja kroków lub kolejności wpisywania danych pozwoli nam uniknąć konieczności wpisywania części danych dla niektórych użytkowników np. gdy klient zdecyduje się na dostawę do Paczkomatu, nie musimy pytać go o adres, wystarczy imię, nazwisko, mail i nr telefonu.

Tam, gdzie to możliwe, warto stosować samouzupełniające się pola. Na przykład, gdy użytkownik poda kod pocztowy, możemy z niego odczytać miasto. Można zastosować również tzw. inteligentne uzupełnienia – pola, które są uzupełnione domyślnie wartością najczęściej wybieraną, możliwą do zmiany. To rozwiązanie nie sprawdzi się wszędzie, ale warto o nim pamiętać, szczególnie, gdy dysproporcja pomiędzy najczęściej wybieraną pozycją, a pozostałymi, jest bardzo duża. Mistrzem tego typu rozwiązań jest np. Amazon, który zalogowanym użytkownikom pozwala na zakupy za pomocą jednego kliknięcia – wszystkie wymagane dane uzupełniane są na podstawie poprzednich zakupów. Podobne rozwiązanie stosuje również Zalando – zalogowany użytkownik widzi tylko podsumowanie zakupów, nie musi uzupełniać adresu czy wybierać sposobu płatności lub przesyłki.

Myśląc o formularzach, nie można zapomnieć o ich odpowiedniej walidacji. Brak lub nieodpowiednia komunikacja błędów popełnionych w formularzu może się okazać przeszkodą nie do pokonania. Obowiązkowo, trzeba pamiętać: 

• błędy powinny być jasno oznaczone przy polu, którego dotyczą,
• użytkownik od razu powinien widzieć, że w formularzu znajdują się błędy i to one blokują przejście dalej,
• opis błędu powinien zawierać jasną instrukcję, jak go naprawić,
• błędy powinny być oznaczone zarówno kolorem, jak i znakiem – pozwoli to na zauważenie walidacji również osobom z problemami ze wzrokiem.

‍

Najbardziej optymalnym wyjściem jest stosowanie dynamicznej walidacji, czyli takiej, która pojawia się od razu, gdy popełniony został błąd, nie dopiero po kliknięciu przycisku do zatwierdzenia formularza.

Brak odpowiednio dostosowanej wersji mobilnej strony

Zakupy przez smartphone’a to dzisiaj już właściwie standard, szczególnie wśród młodszych pokoleń. Mimo tego, część sklepów nadal nie oferuje wersji strony dopasowanej do przeglądania na telefonach lub niedostatecznie dba o doświadczenie użytkownika w tym kanale. Sama responsywność strony (dynamiczna zmiana odległości i wielkości elementów, gdy są one oglądane na mniejszym ekranie) to nie wszystko. Przygotowanie specjalnej wersji mobilnej pozwala na uniknięcie takich błędów jak:

• zbyt małe, trudne do naciśnięcia przyciski,
• strona trudna w obsłudze jedną ręką,
• niedopasowanie formularzy do sposobu ich obsługi na telefonie np. ukrywanie się uzupełnianego pola pod klawiaturą,
• zbyt długie listy kategorii lub wyników wyszukiwania wymuszające na użytkowniku bardzo długie przewijanie, aby przejrzeć więcej produktów.

Trudności w wyszukaniu produktu na stronie

Wiele artykułów dotyczących poprawy doświadczenia użytkownika w sklepach internetowych skupia się na procesie składania zamówienia jako najważniejszym dla konwersji. To prawda, ten etap, jak to wcześniej zostało opisane, jest bardzo ważny. Niemniej jednak istotne jest również to, co następuje wcześniej, czyli dotarcie do produktu, który zainteresuje użytkownika. Aby było to możliwe, sklep internetowy musi posiadać dobrze działające i zoptymalizowane pod kątem UX 3 obszary: wyszukiwarkę, filtry oraz sortowanie, nawigację. Bez nich nawet sklep z najlepszymi produktami i najwspanialszym procesem zamawiania ich będzie zdany na łaskę i niełaskę Google.

Ponieważ wyszukiwarka jest jedną z ważniejszych funkcji sklepu internetowego, powinna być  dobrze widoczna na wszystkich podstronach. Aby ułatwić korzystanie z tej funkcji, warto proponować użytkownikom autouzupełnianie i „dopowiadać” wpisywane frazy na podstawie wcześniej wprowadzanych. Nie zapominajmy też o tym, że wszyscy jesteśmy ludźmi – nie działamy wg zasad twardej logiki i popełniamy błędy. Powinien brać to pod uwagę algorytm wyszukiwania i dopasowywać się do popełnianych literówek, czy możliwości różnego sformułowania tego samego zapytania (wykorzystanie synonimów lub odmian danego wyrazu). Bez tych elementów wyszukiwarka stanie się źródłem frustracji użytkowników. 

Wyniki wyszukiwania powinny być dopasowane do wpisanego hasła. Jeżeli w naszej bazie nie ma produktu odpowiadającego zadanym kryteriom, należy jasno zakomunikować, że brak jest wyników odpowiadających na wpisane zapytanie. Do dobrych praktyk należy jednak pokazywanie dodatkowych produktów np. oznaczonych jako „Najpopularniejsze w naszym sklepie” lub “Może Cię zainteresować”.

Nawigacja, filtry i sortowanie to alternatywny wybór np. dla osób, które nie są pewne, czego szukają lub chcą po prostu przejrzeć produkty w sklepie. Zbudowanie odpowiedniej nawigacji może być samo w sobie przedmiotem projektu optymalizacyjnego. Tworząc ją warto pamiętać o dobrym balansie pomiędzy szerokością (ilość kategorii na danym poziomie), a głębokością (ilość podkategorii przypadająca na wyższy poziom). Dodatkowo, konieczne jest stosowanie zrozumiałych i prostych etykiet. 

Filtry i sortowanie powinny dopasowywać się kontekstowo do kategorii produktu, jakiego szukamy – inne będą potrzebne użytkownikom poszukującym butów, a inne kupującym tablet. Ma to duże znaczenie szczególnie w wypadku sklepów wielobranżowych.

‍

Dowiedz się, jak usprawnić ux w e-commerce.

Grafika wykonana przez @pikisuperstar