Odpowiedź w trzech zdaniach
Checkout to kasa sklepu internetowego: część, która zaczyna się po kliknięciu „Do kasy” (angielskie „proceed to checkout” znaczy właśnie „przejdź do kasy”), a kończy potwierdzeniem zamówienia. Klient podaje w niej dane, wybiera dostawę i płatność. Drogę do zamówienia skracają zakup jako gość, mniej pól z autouzupełnianiem i pełny koszt widoczny przed płatnością. Liczba ekranów ma mniejsze znaczenie niż to, czy klient rozumie każdy krok.
Z jakich kroków składa się checkout?
Checkout prowadzi od podsumowania koszyka przez dane i dostawę do płatności i potwierdzenia, a po potwierdzeniu pokazuje stronę podziękowania. Koszyk jest etapem przed kasą, a właściwy checkout zaczyna się po kliknięciu „Do kasy”.
- Podsumowanie koszyka po kliknięciu „Do kasy”: ostatnie spojrzenie na produkty, ilości i cenę.
- Dane kupującego i adres dostawy.
- Wybór dostawy, a potem metody płatności.
- Potwierdzenie zamówienia przyciskiem, który kończy zakup.
- Strona podziękowania z podsumowaniem tego, co klient zamówił.
Przycisk z punktu 4 ma swoje wymagania. Zgodnie z art. 17 ustawy o prawach konsumenta z 30 maja 2014 r. oznacza się go słowami „zamówienie z obowiązkiem zapłaty” albo równoważnym, jednoznacznym sformułowaniem. Etykieta „Dalej” tego nie spełnia, bo nie mówi, że klient się zobowiązuje. To omówienie, nie porada prawna, więc sprawdź pełny tekst ustawy lub zapytaj prawnika.
Jeden krok czy kilka?
To zależy od zamówienia: jeden ekran pasuje do prostych koszyków, kilka kroków do zakupów drogich i przemyślanych. Jednoetapowy checkout (ang. „one step checkout”, „one page checkout”, po polsku też „jednoetapowy koszyk”) mieści dane adresowe, dostawę, płatność i podsumowanie na jednym ekranie. Checkout wieloetapowy rozkłada te same elementy na kilka widoków.
| Kryterium | Jeden ekran | Kilka kroków |
|---|---|---|
| Liczba ekranów | jeden | kilka, z paskiem postępu |
| Czas | mniej przejść, więcej przewijania | więcej kliknięć, każdy krok krótki |
| Miejsce na ekranie | sekcje w kolumnach albo jedna pod drugą | jeden temat na widok |
| Dla jakich zakupów | proste, tanie, powtarzalne | drogie, przemyślane, gdy klient chce sprawdzić dane |
| Ryzyko | długi formularz trudniejszy do zrozumienia | niepotrzebne przejścia przy prostym zamówieniu |
Jeden ekran działa tylko przy wyraźnie oddzielonych sekcjach i jak najmniejszej liczbie pól.
Sama zaczynam od jednego pytania: ile razy klient musi kliknąć „Dalej”, zanim zobaczy sumę? Jeśli suma pojawia się dopiero po kilku kliknięciach, przenieś ją wyżej, niezależnie od tego, czy kroków jest dwa, czy cztery. O wyborze rozstrzyga test na prawdziwym zadaniu zakupowym, nie liczba ekranów.
Dlaczego zakup jako gość powinien być domyślny?
Bo wymuszone założenie konta zatrzymuje mniej więcej co czwartego kupującego, jak podaje Baymard Institute, instytut badań UX w e-commerce. Dlatego zakupy bez rejestracji stoją w kasie na pierwszym miejscu, a konto jest opcją. Kasa proponuje trzy drogi:
- zakup jako gość, bez zakładania konta,
- zakup z rejestracją, dla tych, którzy chcą mieć historię zamówień,
- logowanie dla klientów powracających, także przez konto społecznościowe.
Stałych klientów nie stracisz. Klient powracający loguje się i nie wpisuje danych ponownie, a nowy kupuje od razu, bez bramki na wejściu.
Jak zaproponować konto, nie zmuszając do niego?
Zaproponuj założenie konta na stronie podziękowania, z danych już podanych w zamówieniu: wystarczy wtedy wymyślić hasło. Hasło powinno być proste do ustawienia, a jego odzyskiwanie szybkie. Logowanie dla powracających zostaje obok, w tym samym miejscu co wcześniej. Konto traktuję jak nagrodę po zakupie, nie bramkę przed nim.
Ile pól naprawdę potrzebuje formularz zamówienia?
Tylko tyle, ile trzeba, żeby wysłać paczkę i wystawić dokument. Każde pole ponad to wydłuża formularz i daje klientowi powód do rezygnacji.
- Usuń: pola, których nikt w sklepie nie czyta, oraz dane firmy, o ile kupujący nie zaznaczył, że kupuje na firmę.
- Zostaw: imię i nazwisko, adres dostawy, e-mail i telefon, gdy jest potrzebny przewoźnikowi.
- Wypełnij automatycznie: wszystko, co przeglądarka zna z poprzednich zakupów.
Do tego służy atrybut HTML „autocomplete”. Wartości „name”, „email”, „tel”, „street-address” i „postal-code” pozwalają przeglądarce podstawić zapisane imię, e-mail, telefon, adres i kod pocztowy jednym dotknięciem. To nie tylko wygoda: kryterium 1.3.5 „Określenie pożądanej wartości” z wytycznych dostępności WCAG 2.1 (poziom AA) wymaga, żeby cel pól z danymi użytkownika był oznaczony w kodzie.
Po błędzie formularz wskazuje pole do poprawy zamiast kasować wszystko, a dane wpisane poprawnie zostają po powrocie do poprzedniego kroku i po nieudanej płatności.
Kiedy klient ma zobaczyć pełny koszt?
Przed wyborem płatności, a najlepiej jeszcze przed wejściem do kasy. Zbyt wysokie koszty dodatkowe, takie jak dostawa i opłaty, były powodem porzucenia zakupu w checkoucie u 48% kupujących (Baymard Institute, 2024) i jest to najczęstsza przyczyna rezygnacji na tym etapie.
Zasada brzmi: suma bez niespodzianek. Podsumowanie zamówienia pokazuje cenę produktów, dostawę i ewentualne dopłaty w jednym miejscu, z kwotą końcową obok przycisku zamówienia. Jeśli dopłata ujawnia się dopiero na końcu, zaskakuje klienta w najgorszym momencie. Każda składowa ceny jest widoczna, zanim klient poda dane karty.
Co w kasie rozprasza klienta?
Wszystko, co wyprowadza z kasy albo każe szukać pomocy. Kasa ma uproszczony nagłówek.
- Linki wychodzące i pełne menu, które zachęcają do opuszczenia kasy.
- Brak paska postępu w checkoucie wieloetapowym.
- Telefon lub e-mail sklepu schowany poza kasą.
- Brak dostępu do regulaminu i polityki prywatności w trakcie zakupu.
Jak sprawdzić, na którym kroku klienci rezygnują?
Przejdź konkretny zakup tak jak klient, także z nieudaną płatnością, i obejrzyj, gdzie zatrzymują się prawdziwi kupujący. Powody porzuceń z całej ścieżki zakupowej opisuje tekst o przyczynach porzuconych koszyków.
Prototyp checkoutu testuje się zadaniem z prawdziwymi polami, nie pustym szkicem. Sprawdź kolejno:
- czy uczestnik rozumie, ile zapłaci,
- czy umie zmienić podane dane,
- czy wie, co nastąpi po potwierdzeniu,
- czy po nieudanej płatności adres nadal jest w formularzu.
Czy checkout na telefonie wymaga osobnych poprawek?
Tak, na małym ekranie sprawdza się inne rzeczy niż na komputerze:
- typ klawiatury dla telefonu i kodu pocztowego,
- wybór punktu odbioru,
- komunikaty o błędach, które da się przeczytać bez przewijania,
- przycisk, który nie zasłania pól.
Czy przyczyna leży przed kasą?
Często tak. Gdy klient rezygnuje z powodu ceny produktu albo kosztu transportu, przebudowa formularza nic nie zmieni, więc najpierw ustal, na którym kroku się zatrzymuje. Koszt i termin dostawy powinny być widoczne już przy produkcie, a jak podać koszt dostawy na karcie produktu, pokazuje osobny tekst.
