Jak zaprojektować proces realizacji transakcji w e-commerce, który powoduje konwersję

Twój proces realizacji transakcji w e-commerce jest tam, gdzie są pieniądze. Pomyśl o tym. Przypadkowi użytkownicy opuszczają witrynę przed wejściem do ścieżki płatności. Zmotywowani kupujący przychodzą tutaj, aby dokończyć swoje zamówienie.

Każda drobna poprawa projektu w UX kasy zwykle ma bezpośredni wpływ na to, ile pieniędzy zarabia Twoja witryna.

Witryna e-commerce, którą niedawno przeanalizowałem, miała stronę płatności, na której 84,7% ruchu przechodziło na zakupy. Obliczyłem, że gdybyśmy mogli zwiększyć to do 90%, uzyskalibyśmy 461 więcej zamówień i dodatkowe 87 175 USD miesięcznie — wzrost przychodów o 23,9%. „Małe” zyski mogą być ogromne.

Tak więc pytanie brzmi: „Jak sprawić, by więcej osób przeszło przez nasz proces realizacji transakcji i dokończyło zakupy? Konkretne taktyki zależą od Twojej witryny, ale zasady wymyślania odpowiedzi są uniwersalne.

Schemat myślenia o kasach e-commerce: model zachowania Fogg

Najważniejsze jest to: Zachowanie = Motywacja x Umiejętność x Wyzwalacz.

Oto model:

Chcesz dążyć do prawego górnego rogu wykresu — wysoka motywacja, łatwa do wykonania, wyzwalacz na miejscu. Jeśli masz wysoką motywację i niskie zdolności (trudne do zrobienia), dostaniesz frustrację. Jeśli jest to niska motywacja, ale łatwa do wykonania (np. wyrzucenie śmieci), irytujesz się.

Jak Amazon wykorzystuje model zachowania Fogggg

Kiedy Amazon wyśle ​​Ci wiadomość e-mail z promocją produktu, jest to motywacja i wyzwalacz. Ludzie klikają w link i przechodzą na stronę produktu. Czytają kopię i recenzje, patrzą na zdjęcie, co zwiększa motywację. „Dodaj do koszyka” jest wyzwalaczem inicjującym proces realizacji transakcji.

A co z umiejętnościami? Jak łatwo jest zakończyć proces kasy? To tutaj Amazon kopie tyłek. Wystarczy wpisać hasło i kliknąć kilka razy. Przepływ kasy jest wolny od tarcia.

Oto rzeczywisty przepływ pracy w aplikacji mobilnej Amazon:

Zrobione i gotowe. Przejdźmy krok po kroku przez cały proces realizacji transakcji, aby zobaczyć, co sprawia, że ​​jest to dobre.

Uwaga: mnóstwo innych wskazówek dotyczących e-commerce znajdziesz w naszym obszernym raporcie wytycznych dotyczących e-commerce (247 wskazówek dotyczących e-commerce).

Jak zaprojektować funkcję „Dodaj do koszyka” i stronę koszyka?

Wszystko zaczyna się od dodania czegoś do koszyka. W chwili, gdy odwiedzający doda pierwszy produkt do koszyka, nie przegląda strony — tylko robi zakupy.

Jak powinno wyglądać „Dodaj do koszyka”?

Co powinno się stać, gdy ludzie dodają coś do koszyka na stronach Twoich produktów?

I t powinno być głupio oczywiste, że dodaliśmy coś do koszyka. Wyraźne potwierdzenie. To śmieszne, jak wiele witryn to schrzaniło, albo nie wyświetlając odpowiedniego potwierdzenia, albo wyświetlając małą animację lub mały tekst potwierdzający, który jest trudny do zauważenia.

Nie możesz przegapić koszyka dodanego w Bonobos. Po kliknięciu „Dodaj do koszyka” pojawia się koszyk z małą animacją, co jest dobre, ponieważ ludzkie oko reaguje na ruch. To subtelna wizualna wskazówka, która wskazuje na przejście od gościa do kupującego.

Zawartość koszyka wraz z przyciskiem „Do kasy” również pozostaje widoczna, dopóki użytkownik nie kliknie gdzie indziej. Dobre. Zmieniłbym kolor przycisku „Do kasy” na inny niż niebieski — nie wyróżnia się on wystarczająco. Najważniejszą rzeczą w hierarchii wizualnej jest przycisk „Dodaj do koszyka”, ale produkt jest już w koszyku.

ASOS pokazuje również małą animację. Otwierają zawartość wózka, a po kilku sekundach składają go. Przycisk „Dodaj do koszyka” zmienia się również na „Dodane”, co jest miłym potwierdzeniem dla kupujących:

Zachowałbym zawartość koszyka otwartą, dopóki użytkownik nie dokona wyboru, klikając gdzieś. W ten sposób przycisk „Do kasy” nadal patrzy im w twarz.

Chociaż zawsze chcemy, aby kupowali więcej rzeczy, ulepszenie procesu zakupu nawet jednego przedmiotu może prowadzić do dużych ulepszeń. Popychanie ich w stronę kasy to zawsze dobry pomysł.

Kiedy produkt znajdzie się w koszyku, co wtedy?

Istnieją dwa główne podejścia:

1. Pokaż potwierdzenie dodania koszyka i utrzymuj użytkowników na tej samej stronie. Plusy: Ludzie nie prosili o przejście na inną stronę, więc nie ma niespodzianek. Mogą również rozważyć dodanie większej liczby produktów do koszyka przed dokonaniem transakcji. Minusy: Mają już produkt, na który teraz patrzą w koszyku. Bardziej przydatne byłoby, gdyby spojrzeli na coś innego, co mogliby chcieć kupić.
2. Przenieś użytkownika na stronę koszyka. Plusy: Zbliżasz ich o krok do dokonania płatności. To także świetna okazja do składania ofert dosprzedażowych. Minusy: Możesz stracić na maksymalizacji „przedmiotów w koszyku”.

Amazon zabierze Cię na stronę koszyka, potwierdzi, że dodałeś produkt do koszyka i pokaże Ci oferty dodatkowe. To, co Amazon robi dobrze, to kurczenie się zawartości koszyka, więc wyróżniają się sprzedaże dodatkowe:

Właściwa równowaga potencjalnych strategii zależy od Twojej branży i celów i zdecydowanie chcesz to przetestować.

Dane, o których należy pamiętać:

• Średnia wartość transakcji;
• Średnia ilość na transakcję.

Nie chcemy zwiększać samej liczby transakcji, ale także kwoty wydawanej na każdą transakcję.

Dobrze wyświetlaj zawartość koszyka

Kluczowe zasady skutecznego wyświetlania zawartości koszyka to przejrzystość i kontrola.

• Przejrzystość. Zrozumienie zawartości koszyka i ostatecznego kosztu, w tym kosztów wysyłki i podatków, jest łatwe i oczywiste. Koszty niespodzianek w dół sprawiają, że ludzie porzucają wózki.
• Kontrola: wprowadzanie zmian, takich jak aktualizacja ilości lub usuwanie produktów, jest łatwe.

ASOS ma dobre podejście do strony koszyka:

Co robią dobrze:

• Zdjęcia produktów;
• Nazwa i cena produktu;
• Możliwość usunięcia, zapisania na później lub zmiany szczegółów, takich jak rozmiar;
• Pokaż rodzaj płatności, które akceptują;
• Pokaż łączną cenę i potwierdź darmową dostawę;
• Wyraźne wezwanie do działania „Do kasy”;
• Zmniejsz niepewność, podkreślając „Łatwe zwroty”.

Indochino prezentuje przyjemne, minimalistyczne podejście do prezentowania zawartości koszyka. To powiedziawszy, strona nadal ma kilka problemów, takich jak widoczne pole kuponu i brak możliwości zmiany ilości:

Uzyskaj właściwą hierarchię wizualną

Najważniejszą rzeczą w hierarchii wizualnej powinno być kontynuowanie kasy. (Przetestuj różne CTA). Powinny być dwa wezwania do działania: jedno nad i pod koszykiem.

Coś w tym stylu — dwa przyciski kasy wyraźnie się wyróżniają:

Modcloth ulepszyło tę stronę od czasu, gdy ją ostatnio sprawdzaliśmy. Wcześniej aktualizowanie wymaganej ilości wpisując. Teraz możesz użyć stepperów, aby zwiększyć lub zmniejszyć ilość.

Zauważ, że Modcloth oferuje również opcję PayPal. Podczas gdy większość ludzi woli płacić kartą kredytową, oferowanie 1-2 alternatywnych metod płatności (np. PayPal, Amazon) jest dobrym pomysłem i wykazano, że pomaga w konwersjach. Zbyt wiele wyborów jest jednak bolesnych.

Modcloth przypomina również, że ma darmowe zwroty i bezpłatną wysyłkę przy zamówieniach powyżej 75 USD.

Nie eksponuj kuponów

Kiedy ludzie widzą pole „Wprowadź kod kuponu tutaj”, czują się mniej wyjątkowi. „Jak to możliwe, że go nie mam?” Wielu udaje się do Google, aby znaleźć kupon; wielu nigdy nie wraca. Częstym powodem porzucania koszyka jest opuszczenie witryny w poszukiwaniu kuponów.

Więc to nie jest dobry pomysł:

Zamiast tego przygotuj link tekstowy „Masz kupon?” lub coś podobnego. Gdy ktoś kliknie łącze, utwórz pole wejściowe, takie jak to powyżej. Linki tekstowe są mniej widoczne, więc mniej osób zwróci na nie uwagę.

Klienci, którzy mają już kod kuponu, będą szukać sposobu na jego wprowadzenie. Jeśli nie ukryjesz tego naprawdę dobrze, znajdą go i będą mogli zastosować swój kod kuponu.

Przypomnij kupującym o dobrych rzeczach: wysyłce, zwrotach i bezpieczeństwie

Kiedy otrzymają swoje towary? Ile kosztuje wysyłka. Czy to jest darmowe? Czy transakcja będzie bezpieczna? Przypomnij ludziom.

Oto przykład, który pokazuje te trzy kluczowe komunikaty pod przyciskiem kasy, który również mówi „Zapłać bezpiecznie teraz”:

Trwałe wózki FTW

Kiedy ludzie dodają coś do koszyka, nie pozwól, aby zawartość koszyka wygasła. Używaj e-maili o porzucaniu koszyka i reklam retargetingowych, aby sprowadzić ludzi z powrotem w przyszłym tygodniu lub w przyszłym miesiącu, aby mogli kontynuować tam, gdzie przerwali.

Proces rejestracji: Założyć konto czy nie?

Wiele witryn e-commerce chce, aby kupujący zarejestrowali się przed zakupem. Niektórzy nawet wymuszają rejestrację (tzn. nie można kupić bez rejestracji). Krótko mówiąc: nie rób tego. Boli konwersje. Dużo.

Co czwarty rezygnuje z zakupów online z powodu przymusowej rejestracji. Przymusowa rejestracja jest częścią „syndromu chciwego marketera”. Łatwo zrozumieć, dlaczego marketerzy e-commerce chcą to robić — mają nadzieję, że użytkownik zostanie „zablokowany” i będzie robić więcej zakupów, ponieważ ma konto.

Czy tak jest naprawdę ? Oh proszę. Na ilu stronach internetowych masz zarejestrowane konto? Czy teraz czujesz się wobec nich lojalny z tego powodu? Założę się, że nie logowałeś się do większości z nich więcej niż raz.

Oto dobra historia o wymuszonej rejestracji, opowiedziana przez guru użyteczności Jareda Spoola:

Trudno wyobrazić sobie formularz, który mógłby być prostszy: dwa pola, dwa przyciski i jeden link. Okazuje się jednak, że ten formularz uniemożliwiał klientom kupowanie produktów w dużej witrynie e-commerce w wysokości 300 000 000 USD rocznie. Co gorsza: projektanci strony nie mieli pojęcia, że ​​w ogóle jest problem.

Forma była prosta. Pola to Adres e-mail i Hasło. Przyciskami były Logowanie i Rejestracja. Link brzmiał Nie pamiętam hasła. Był to formularz logowania do serwisu. To formularz, z którym użytkownicy spotykają się cały czas. Jak mogli mieć z tym problemy?

Problem nie polegał na układzie formy, ale na miejscu, w którym forma żyła. Użytkownicy napotkali go po wypełnieniu koszyka zakupowego produktami, które chcieli kupić i naciśnięciu przycisku Do kasy . Pojawił się, zanim faktycznie mogli wprowadzić informacje, aby zapłacić za produkt.

Zespół uznał, że formularz umożliwia stałym klientom szybsze zakupy. Osoby dokonujące zakupu po raz pierwszy nie będą miały nic przeciwko dodatkowym wysiłkom związanym z rejestracją, ponieważ w końcu wrócą po więcej i docenią wygodę przy kolejnych zakupach. Każdy wygrywa, prawda?

Przeprowadziliśmy testy użyteczności z osobami, które musiały kupować produkty ze strony. Poprosiliśmy ich o przyniesienie swoich list zakupów i daliśmy im pieniądze na zakupy. Wystarczyło sfinalizować zakup.

Myliliśmy się co do kupujących po raz pierwszy. Mieli coś przeciwko rejestracji. Nie podobało im się, że muszą się zarejestrować, gdy trafią na stronę. Jak powiedział nam jeden z kupujących: „Nie jestem tutaj, aby nawiązać związek. Po prostu chcę coś kupić”.

Usuwając przymusową rejestrację, zwiększyli sprzedaż o 300 milionów dolarów.

Zespół Spoola zorientował się również, że większość ludzi ma wiele kont w systemie. Ludzie zapomnieli, że mają już konta. Otrzymywali komunikaty o błędach, gdy próbowali utworzyć taki za pomocą standardowego adresu e-mail, więc musieli użyć alternatywnego adresu e-mail, aby utworzyć więcej kont.

Co powinieneś zrobić zamiast tego? Zawsze proponuj wymeldowanie gościom. Po sprzedaży możesz pracować nad rejestracją:

• Nawet nie wspominaj słowa „Zarejestruj się”. Powiedz „Nowy klient” lub podobny termin.
• Po wymeldowaniu zaproponuj utworzenie konta na stronie „Dziękuję”. Masz już ich imię i nazwisko, adres e-mail i adres z kasy, więc utworzenie konta nie powinno zająć więcej niż kilka kliknięć. Poproś o żądane hasło (lub zapewnij opcję automatycznego wygenerowania go) i potwierdź uprawnienia do utworzenia konta.

Z mojego doświadczenia wynika, że ​​najpopularniejsze podejście w witrynach e-commerce jest nadal nieoptymalne. Ogólnie rzecz biorąc, jest zbyt zajęty i prosi nowych klientów o dokonanie wyboru, co prowadzi do wahania:

Istnieje kilka znacznie korzystniejszych opcji.

Opcja rejestracji w kasie 1

Daj użytkownikom dwie możliwości, nowe lub powracające:

Asos nie zawsze miał takie podejście. To była ich poprzednia strona rejestracji, która miała trzy możliwości:

Zaprzestanie tego podejścia i przejście na uproszczoną wersję zmniejszyło porzucanie koszyka o 50%!

Wciąż jest to (zasadniczo) wymuszona rejestracja, ale jest inaczej pakowana. Jest to również łatwiejsze dzięki opcjom logowania społecznościowego. Typowy problem z użytecznością sprowadza się do zaledwie kilku kliknięć.

Zamówienie opcja rejestracji 2

Porzucanie koszyka to poważny problem. Proszenie o e-mail z góry ułatwia rozpoczęcie procesu odzyskiwania porzuconego koszyka. Są też dwa proste wybory — brak przeciążenia sensorycznego:

Zamówienie opcja rejestracji 3

Innym świetnym sposobem jest całkowite pominięcie ekranu logowania. Zamiast tego po prostu domyślnie wybieraj kasę gościa. Osoby z istniejącym kontem mogą zalogować się przez link, a nowi klienci mogą założyć konto po opłaceniu:

To, co robi dobrze Diamond Candles, nie jest nawet widoczne. Tworzą dla Ciebie konto automatycznie, ale o tym nie wspominają. Załóżmy, że przechodzisz przez cztery kasy jako gość z tym samym adresem e-mail, a następnie decydujesz się na utworzenie konta (w zasadzie wpisujesz hasło).

Wszystkie Twoje poprzednie zamówienia z tym adresem e-mail zostaną połączone z tym kontem, więc Twoje nowo utworzone konto ma odpowiednią historię zamówień.

Zamówienie opcja rejestracji 4

Dzięki tej opcji rejestracja konta jest oferowana wraz z zachętą po dokonaniu zakupu. Oto przykład z Speedo:

Ludzie nie przejmują się żadną rejestracją konta, dopóki nie zapłacą Ci pieniędzy. Jeśli musiałbyś wybierać, co jest dla Ciebie ważniejsze: rejestracja konta czy zakupy?

Zazwyczaj strony z podziękowaniami nie są zbyt przydatne, ale nie tutaj. Dają ci bezproblemową ofertę: wprowadź hasło i otrzymaj kupon (plus śledzenie zamówień, szybsze zakupy itp.). Procent tworzenia kont dla nowych użytkowników często przekracza 75%.

Strona płatności e-commerce

To jest strona pieniędzy. Każdy wzrost na końcowej stronie kasy znacznie wpłynie na Twoje konto bankowe. Oto kilka zasad, które pomogą Ci stworzyć lepszy końcowy krok w procesie realizacji transakcji.

Zapytaj o dane karty kredytowej na końcu

Niech ludzie uzupełnią informacje o wysyłce, zanim przejdą do rozliczenia. To wprowadza w życie zasady Zaangażowania i Konsekwencji Cialdini. Kiedy ludzie zaczynają coś robić, czują, że powinni skończyć.

Poproszono ich już o podanie imienia i nazwiska, adresu e-mail oraz informacji o wysyłce, które w idealnym przypadku są takie same jak adres rozliczeniowy, więc nie muszą wpisywać ich ponownie.

Ta sama zasada, czasami nazywana techniką „stopa w drzwiach”, dotyczy pól formularzy. Zacznij od łatwiejszych pól, takich jak nazwa. Pole numeru karty kredytowej jest „najtrudniejsze”, więc powinno być ostatnie.

To jest to, czego nie należy robić:

To jest lepsze. (Dostajesz tutaj ze strony wysyłki.)

Zaleta: ma wyraźny przepływ 1–2–3 kroków. Pole nazwy znajduje się przed danymi karty, a adres rozliczeniowy (jeśli jest taki sam jak wysyłka) nie musi być wpisywany ponownie.

Złe: głównym wezwaniem do działania jest „Zapisz i kontynuuj”. Kontynuować gdzie ? Powinna być konkretna, na przykład „Kontynuuj przegląd” lub jakakolwiek kolejna czynność.

Użyj formy płatności, która wygląda jak prawdziwa karta kredytowa

Dodaj autentyczny charakter, projektując formularz płatności w ten skeuomorficzny sposób:

Możesz otrzymać interfejs do tego o nazwie Skeuocard za darmo(!) do wdrożenia w swoim systemie. Wypróbuj demo tutaj.

Spraw, aby proces płatności wyglądał na bezpieczny

Bezpieczeństwo to poważny problem. Oprócz tego, że płatności są bezpieczne dzięki SSL, poinformuj o tym ludzi. Oto przykład formularza, który ma wyglądać na bezpieczny:

Kilka powodów, dla których to działa:

• Inny kolor tła pola numeru karty kredytowej.
• Logo SSL.
• Oświadczenie pisemne: „Bezpieczna płatność kartą kredytową. Jest to bezpieczna płatność zaszyfrowana 128-bitowym SSL.”
• Wyjaśnienia dotyczące wygaśnięcia i kodu zabezpieczającego.

Pamiętaj, że jeśli Twoi odbiorcy nie znają się na technologii, mogą nie wiedzieć, czym jest SSL lub HTTPS, więc mów prostymi słowami.

Przechowuj karty kredytowe w swoim systemie

Oczywiście, musisz radzić sobie ze zgodnością z PCI i istnieje ryzyko zhakowania, ale zarobisz o wiele więcej pieniędzy na powracających użytkownikach. Gdy ludzie nie muszą wprowadzać swoich informacji rozliczeniowych, kupowanie staje się procesem jednym kliknięciem.

Amazon zabija go w dużej mierze dlatego, że tarcie o powracających kupujących zostało prawie całkowicie usunięte! Przepływ kasy to ledwie przepływ — to zdarzenie za jednym kliknięciem.

Powracający użytkownicy są znacznie bardziej skłonni do zakupów niż nowi, ale to nic w porównaniu z powracającymi kupującymi. Ułatw im to.

Wniosek

Rozpocznij optymalizację e-commerce w trakcie realizacji transakcji. Względne zyski przyniosą tutaj bardzo ładne sumy bezwzględne.

Aby poprawić UX procesu realizacji transakcji:

• Wyczyść funkcję „Dodaj do koszyka”.
• Ułatw odwiedzającym zmianę lub usunięcie elementów koszyka.
• Usprawnij proces rejestracji — pozwól nowym kupującym zarejestrować się po dokonaniu zakupu.
• Na stronie kasy poproś najpierw o najłatwiejsze informacje.