Zrealizować zakup lub zamknąć stronę? 5 błędów interfejsu, które sprawiają, że klienci odchodzą

W efektywnym interfejsie wszystko działa dla użytkownika. Wszystko, aż do ostatniego piksela.

A czasami wystarczy zmienić kolor przycisku, przearanżować układ bloków lub usunąć jeden krok, aby zwiększyć konwersję.

Ale najważniejsze jest, żeby wiedzieć, co dokładnie zmienić.

Zespół Turum-burum obserwuje to każdego dnia w projektach różnej wielkości i z różnych branż. W tym artykule dzielą się swoim doświadczeniem.

5 typowych błędów UX, które obniżają konwersję i jak je naprawić

Poniżej przedstawiono przykłady, w jaki sposób precyzyjne, ukierunkowane zmiany UX/UI mogą przekształcić błędy użyteczności w punkty wzrostu.

 1. Wersja witryny przeznaczona na komputery stacjonarne nie jest dobrze dopasowana do urządzeń mobilnych

Strona otwiera się na telefonie, wszystko jest skompresowane i wydaje się adaptacyjne, ale najważniejsze jest to, że korzystanie z niej nie jest wygodne: banery są małe i niewyraźne, tekst jest prawie nieczytelny, a przyciski są za małe lub nie ma wokół nich wystarczająco dużo miejsca i użytkownik nie może kliknąć tam, gdzie chce.

Adaptacyjne UX nie jest jeszcze mobilne.

Handel mobilny jest dziś normą. 75% zakupów w e-commerce na całym świecie odbywa się na urządzeniach mobilnych. A jeśli Twoja strona nie jest przyjazna dla użytkownika na telefonie lub tablecie, tracisz klientów i przychody.

Na przykład projekt strony internetowej Robinzon, oficjalnego dystrybutora Samsonite na Ukrainie, nie został stworzony jako pomniejszona kopia wersji desktopowej, ale zgodnie z zasadą „mobile first” . Oznacza to, że wersja mobilna ma własną logikę, strukturę i uwzględnia wzorce zachowań użytkownika mobilnego:

• Zmniejszona i stała nakładka lub taka, która pojawia się podczas przewijania wstecz;
• Znajome ikony menu, koszyka, wyszukiwarki itp., umieszczone w znanych miejscach;
• Wystarczająca ilość miejsca między elementami i przyciskami, aby zmniejszyć prawdopodobieństwo przypadkowego kliknięcia.

Projekt sklepu internetowego Robinzon

 

Dobrze zaprojektowana wersja mobilna to nie „miły bonus”, ale bezpośrednia inwestycja w wskaźniki biznesowe. Pomaga nie tylko utrzymać ruch mobilny, ale także zwiększyć jego konwersję, zmniejszając współczynnik odrzuceń i ułatwiając użytkownikowi drogę do zakupu.

2. Niejasna nawigacja, która utrudnia znalezienie odpowiedniego produktu

Nawigacja to nie tylko „menu” i „katalog”. Chodzi o to, jak szybko i łatwo użytkownik znajdzie to, czego potrzebuje.

Jeśli menu jest trudne do znalezienia, nawet Sherlock Holmes nie potrafi odnaleźć się w katalogu, a filtry nie działają, wówczas poszukiwanie produktu zamienia się w wyprawę i zabija chęć kupienia czegoś.

Skuteczna nawigacja ma miejsce wtedy, gdy użytkownik od pierwszego kontaktu intuicyjnie wie, co znajduje się na stronie, gdzie tego szukać i jak szybko dotrzeć do tego, czego potrzebuje.

Jest to szczególnie istotne dla dużych sklepów internetowych, takich jak VARUS, oferujących tysiące produktów, kategorii, podkategorii i różnych form dostawy. Aby stworzyć wygodną nawigację i katalog, ten projekt internetowy obejmował:

• Przeanalizowano mapy cieplne, widok sieci, typowe scenariusze interakcji użytkowników z katalogiem (jakie zapytania formułują, gdzie i czego szukają itp.);
• Przeprowadzono analizę porównawczą nawigacji 10 głównych konkurentów.

Na podstawie otrzymanych danych struktura katalogu została całkowicie przemyślana i przebudowana: zoptymalizowano kategoryzację, zmieniono nazwy kategorii, kolejność i głębokość zagnieżdżenia.

Na przykład, badanie wykazało, że klienci najczęściej szukają jaj wśród produktów mlecznych, chociaż VARUS wcześniej umieszczał je w kategorii mięsa.

 

Opracowanie struktury katalogu dla VARUS

 

Rezultat: intuicyjny katalog, w którym produkty są umieszczone dokładnie tam, gdzie użytkownik ich zazwyczaj szuka. W wersji mobilnej do dolnego menu dodano również osobną ikonę katalogu, umożliwiającą szybki dostęp.

katalogu sklepu internetowego VARUS w wersji mobilnej przed i po redesignie

 

Biorąc pod uwagę potrzeby użytkowników, udało się nam zbudować katalog i nawigację, które ułatwiają poruszanie się po strukturze serwisu i skracają drogę do produktu, a tym samym do zakupu.

3. Strona produktu bez… ważnych informacji o produkcie

To właśnie na stronie produktu użytkownik rozważa wszystkie za i przeciw i podejmuje decyzję o zakupie. A jeśli odwiedzający nie zobaczy odpowiedzi na swoje pytania, nie kupi. Nie dlatego, że produkt jest zły. Ale dlatego, że brakuje argumentów: niskiej jakości zdjęć, brak cech, niewystarczający opis, nieoczywiste zalety, brak widoczności ceny i warunków itp.

Wszystko zależy od struktury strony.

Przykładowo, w przypadku sklepu internetowego z kosmetykami profesjonalnymi Lamour udało się zwiększyć efektywność strony produktu i zwiększyć średnią liczbę zakupów 1,7 raza, zmieniając układ i porządkując informacje według priorytetów:

• Przenieśliśmy najważniejsze elementy (duże zdjęcie z karuzelą, tytuł, cenę, przycisk, płatność, dostawę) na pierwszy ekran;
• Uprościliśmy opis i uczyniliśmy go bardziej strukturalnym: z podtytułami, listami i oddzielnymi blokami;
• Dodano dowód społeczny i korzyści marki jako osobny blok (wyjaśniono znaczenie nietypowego przycisku „Tylko Pro”).

Usunęli również niepotrzebne elementy i umieścili akcenty w typografii i elementach wizualnych (etykiety, wezwania do działania itp.), a także dodali przestrzeń, aby uzyskać efekt wystawy.

sklepu internetowego Lamour

4. Sprzedaż krzyżowa i sprzedaż dodatkowa bez logiki = utracone możliwości wzrostu średniej wartości zamówienia

Nie obecność rekomendacji ma znaczenie, ale jej trafność. Zatem jeśli blok „Kup z tym produktem” zawiera te same lub niedostępne produkty, a blok „Może Ci się również spodobać” oferuje produkty nieistotne, to nie działa i nie przynosi żadnych korzyści.

Ale właściwie skonfigurowane strategie cross-sellingu i up-sellingu nie tylko zwiększają przeciętny koszt zakupu, ale także poprawiają doświadczenia użytkownika.

Przecież cross-selling nie pokazuje po prostu czegoś „podobnego”, ale sugeruje coś, co będzie uzupełnieniem bieżącego zakupu, podczas gdy up-selling oferuje alternatywę, być może nieco droższą, ale taką, która lepiej odpowiada potrzebom klienta.

Tak, w projekcie YouShouldBeHair rekomendacje opierają się na rzeczywistych scenariuszach użytkowania produktów: dla każdej kategorii dostępne są różne opcje ich dodawania, dzięki czemu są widoczne w samym sercu produktu. I to dokładnie tam, gdzie zostaną zauważone i w momencie, gdy będą najbardziej potrzebne: na stronie produktu (zestawy i podobne produkty), w koszyku, na końcu strony wyświetlania kategorii.

Przykład wdrożenia bloku cross-sell w koszyku zakupowym sklepu internetowego YouShouldBeHair
 

Użytkownik nie musi zastanawiać się, co jeszcze kupić, ponieważ wszystko jest już dla niego wybrane. To nie tylko wpływa na średni rachunek, ale także świadczy o dbałości o klienta, co zwiększa jego lojalność.

5. Skomplikowany i długi proces realizacji zamówienia = niedokończony zakup

Kiedy użytkownik opuszcza kasę, tracisz nie tylko potencjalnego klienta, ale osobę, która była już gotowa do zapłaty. A to jest kluczowe.

Często przyczyną nie jest cena, ale wady użytkowe, takie jak zbyt długi formularz, niejasny proces, brak podpowiedzi, rozpraszające elementy itp. Zasada jest taka: im prościej i krócej, tym lepiej.

Dobrym przykładem interfejsu zorientowanego na klienta jest strona przetwarzania zamówień w sklepie internetowym ORNER:

• Prosty proces na jednym ekranie;
• Jasne kroki zapewniające przejrzystość i jasność;
• Kompaktowa jednostka dostarczająca informacje z możliwością ich zwinięcia w celu zobaczenia większej ilości informacji;
• Informacje o produktach w zamówieniu ze wszystkimi ważnymi szczegółami i możliwością edycji;
• Wersja mobilna ma przypięty przycisk „Złóż zamówienie” na dole, dzięki czemu jest zawsze pod ręką.

Strona płatności ORNER : 1) Krótki formularz krok po kroku, w którym należy wypełnić dane niezbędne do dokonania zakupu; 2) Edytowalne dane zamówienia

Ważne jest również zapisywanie danych, które użytkownik już wprowadził, aby nie musiał wpisywać ich ponownie po ponownym załadowaniu strony lub powrocie do poprzedniego kroku.

Dobry interfejs nie zawsze sprzedaje, ale wygodny zawsze tak.

W artykule omówiono tylko pięć najczęstszych błędów, które uniemożliwiają sprzedaż na stronach internetowych. To zaledwie wierzchołek góry lodowej. Ale naprawienie nawet tych błędów może przynieść znaczące efekty: zmniejszyć liczbę odrzuceń, skrócić ścieżkę do zakupu i zwiększyć konwersję.

Ale najważniejsze jest to, że każdy projekt jest wyjątkowy i nie ma uniwersalnych rozwiązań. To, co sprawdza się w jednym przypadku, może nie sprawdzić się w innym.

Dlatego doskonalenie UX zaczyna się nie od estetyki, ale od analityki. Od zrozumienia użytkownika i jego potrzeb, problemów i zadań. Skuteczny interfejs to nie tylko ładne piksele. To przemyślana logika, przejrzysta struktura i aktualne podpowiedzi.