Wszystkie artykuły

Sześć barier, które blokują zakup w koszyku i kasie

Koszyk i kasa to miejsce, w którym sklep traci najwięcej, bo bariera nie oznacza tam niedogodności, tylko niedokończoną transakcję. Sześć rzeczy, na które trafiam najczęściej, i jak sprawdzić je u siebie.

Na karcie produktu bariera kosztuje zainteresowanie. W kasie kosztuje pieniądze. To ta sama usterka techniczna, ale zupełnie inna cena, i dlatego przy ograniczonym budżecie ścieżkę zakupową porządkuje się pierwszą.

Poniżej sześć rzeczy, na które w kasach sklepów trafiam najczęściej, każda z krótkim testem, który zrobisz sam, bez żadnego narzędzia.

1. Pola formularza bez etykiet i komunikaty błędu, które nic nie mówią

To zdecydowanie najczęstsza. Występuje w dwóch odmianach, obu kosztownych.

Pierwsza: pole nie ma etykiety, bo podpis jest tylko szarym tekstem w środku pola. Znika w chwili, gdy zaczynasz pisać. Osoba, która wróci do formularza po dwóch minutach, nie wie, co miała wpisać w trzecim polu. Osoba korzystająca z czytnika ekranu nie wie tego od początku, bo taki podpis często w ogóle nie jest odczytywany jako etykieta pola.

Druga, i to jest w koszykach problem numer jeden: formularz odrzuca dane komunikatem „jest błąd”, nie podświetlając pola, w którym ten błąd siedzi. Nie wiadomo, które pole, co jest nie tak ani jak to naprawić. Klasyk to numer telefonu odrzucany za spacje, bez informacji, że chodzi o spacje.

To standardowy zły wzorzec i jedyna dobra wiadomość jest taka, że jest go coraz mniej. Ale wciąż trafia się w sklepach, które poza tym wyglądają nowocześnie.

Test: wypełnij własną kasę błędnie, celowo. Zostaw puste pole, wpisz numer telefonu ze spacjami, podaj kod pocztowy w złym formacie. Jeśli po wysłaniu nie wiesz od razu, które pole jest złe i dlaczego, to samo przeżywa Twój klient.

2. Kasa, której nie da się przejść klawiaturą

Wybór wariantu, rozwijana lista dostawy, wybór punktu odbioru, checkbox zgody, przycisk „Kup”. Jeśli którykolwiek z tych elementów działa wyłącznie po kliknięciu myszą, ścieżka zakupowa się urywa i nie ma jak jej dokończyć.

Gorszy od kasy, której nie da się przejść klawiaturą, jest wariant, w którym prawie się da. Tab prowadzi przez wszystkie pola, ale pomija checkbox ze zgodami. Użytkownik dociera do przycisku „Zapłać”, naciska Enter i dostaje błąd, którego nie umie usunąć, bo element blokujący zamówienie nigdy nie pojawił się na jego drodze. Frustracja sięga wtedy maksimum, i to na ostatnim kroku, po włożeniu w zakup całej pracy.

Dotyczy to nie tylko osób z niepełnosprawnościami. Dotyczy każdego, kto akurat ma jedną rękę zajętą, kogo touchpad przestał słuchać, kto pracuje na klawiaturze z przyzwyczajenia.

Test: odłóż mysz. Dosłownie, na drugi koniec biurka. Przejdź własny sklep od karty produktu do potwierdzenia zamówienia, używając wyłącznie klawiszy Tab, Shift+Tab, Enter, spacji i strzałek. Miejsce, w którym utkniesz, jest miejscem, w którym utyka klient.

3. Fokus, którego nie widać

Fokus to wskazanie, na którym elemencie jesteś. Kiedy poruszasz się klawiaturą, jest jedyną informacją o Twoim położeniu na stronie.

Bardzo często jest wyłączony, bo domyślna obwódka przeglądarki „psuła” design i ktoś ją usunął, nie dając niczego w zamian. Efekt: da się przejść kasę klawiaturą, ale na ślepo. Naciskasz Enter, nie wiedząc, czy zatwierdzasz zgodę marketingową, czy składasz zamówienie.

W wielokrokowej kasie to szczególnie dotkliwe, bo po każdym przeładowaniu kroku trzeba odgadnąć, gdzie się jest.

Test: ten sam przebieg co wyżej. Naciskając Tab, w każdej chwili musisz widzieć, co zaraz się aktywuje. Jeśli w którymś momencie nie widzisz, fokus jest niewidoczny.

4. Zbyt niski kontrast dokładnie tam, gdzie stoją liczby

Jasnoszary tekst na białym tle wygląda w projekcie schludnie. Problem w tym, że w koszyku tym jasnoszarym są zwykle akurat rzeczy, na które klient patrzy najuważniej: koszt dostawy, kwota rabatu, suma do zapłaty, informacja o darmowej wysyłce od jakiejś kwoty.

To bariera dla osoby słabowidzącej, ale też dla każdego, kto patrzy w telefon na słońcu albo ma przygaszony ekran. Sklep, w którym nie widać kosztu dostawy, produkuje porzucone koszyki i telefony do obsługi klienta.

Test: wyjdź z telefonem na zewnątrz w słoneczny dzień i otwórz własny koszyk. Ten test brzmi nieprofesjonalnie i jest zaskakująco skuteczny.

5. Cele klikalne za małe, żeby w nie trafić palcem

Przyciski zmiany ilości, „usuń z koszyka”, zamknięcie okna z kodem rabatowym, checkboxy zgód. Na desktopie z myszą wszystko działa. Na telefonie, gdzie sklep robi większość obrotu, trafienie w plusik przy ilości bywa loterią.

Najgorszy wariant to małe cele stojące blisko siebie, na przykład „usuń” tuż obok „zapisz na później”. Pomyłka nie jest wtedy niewygodą, tylko utratą zawartości koszyka.

Test: przejdź kasę na własnym telefonie, kciukiem jednej ręki, idąc. Nie z dwóch rąk przy biurku, bo tak nikt nie kupuje w tramwaju.

6. Kod rabatowy, po którym nie wiadomo, co się stało

Pole na kod rabatowy jest jednym z niewielu miejsc w kasie, gdzie strona przelicza coś w tle i zmienia liczbę w innym miejscu ekranu. Osoba patrząca na ekran zobaczy, że suma podskoczyła w dół. Osoba korzystająca z czytnika ekranu nie zobaczy nic, bo zmiana zaszła poza miejscem, w którym stoi jej kursor, i nikt jej o tym nie powiedział.

Efekt jest taki, że nie wiadomo, czy kod w ogóle został przyjęty, czy został odrzucony jako nieważny, ani co zrobił z ceną końcową. Zostaje wpisywanie go drugi raz i zgadywanie.

To bariera, którą widzę regularnie, i jednocześnie taka, o której rzadko ktoś myśli, bo na ekranie wszystko działa poprawnie.

Test: wpisz kod rabatowy i, nie patrząc na ekran, spróbuj ustalić, czy zadziałał. Jeśli masz pod ręką czytnik ekranu, tym lepiej. Jeśli nie, wystarczy odwrócić wzrok i sprawdzić, czy cokolwiek Cię o zmianie poinformowało.

Wyróżnienie poza kasą: zdjęcia bez opisu alternatywnego

Nie jest to bariera koszyka, ale należy do tej samej rodziny i ma najkrótszą drogę do naprawy. Zdjęcie produktu bez opisu alternatywnego dla osoby korzystającej z czytnika ekranu po prostu nie istnieje. W sklepie, w którym zdjęcie jest informacją o produkcie, oznacza to katalog bez połowy treści.

Na gotowej platformie zwykle poprawisz to sam, w panelu, bez programisty.

Jeśli testy wypadły źle

To nie jest wyjątkowy wynik i nie oznacza, że sklep jest zepsuty. Oznacza, że ścieżka zakupowa nigdy nie była sprawdzana pod tym kątem, co jest domyślnym stanem większości sklepów.

Kolejność, w jakiej bym to porządkował, wynika wprost z tego, ile kosztuje każda pozycja: najpierw to, co uniemożliwia dokończenie zakupu (punkty 1 i 2), potem to, co pozwala go dokończyć na ślepo albo bez potwierdzenia (punkty 3 i 6), na końcu to, co go utrudnia (punkty 4 i 5).

Te testy nie zastępują audytu i nie mają zastępować: sprawdzają sześć rzeczy, a nie serwis. Wystarczają natomiast w zupełności, żeby ustalić, czy w ogóle jest o czym rozmawiać. Jeśli okaże się, że jest, opisałem ile kosztuje audyt i od czego zależy cena.

Potrzebujesz tego w praktyce? Audyt dostępności.

Chcesz najpierw uporządkować pojęcia? dostępność cyfrowa od podstaw.

Zbudujmy stronę dostępną dla każdego

Zgodną z WCAG 2.2 i zaprojektowaną wokół ludzi, którzy będą z niej korzystać. Napisz, odpowiem w ciągu jednego dnia roboczego.

Umów konsultację