Ścieżka zamówienia PrestaShop została zaprojektowana dla szerokiego ekranu. Na urządzeniach mobilnych, przez które przechodzi obecnie większość ruchu, zachowuje wybory interfejsu, które kosztują zamówienia na każdym etapie.
Oto analiza ekran po ekranie, z tym, co da się poprawić bez przebudowy.
Ekran 1: koszyk
Trzy powtarzające się problemy.
Przycisk zamówienia pod listą. Przy koszyku z pięcioma artykułami znajduje się pod długim przewijaniem. Oczekiwane zachowanie to przycisk przyklejony do dołu ekranu, pokazujący sumę, widoczny stale.
Miniaturowe selektory ilości. Przyciski plus i minus mają często mniej niż trzydzieści pikseli. Zalecenie dostępności ustala minimalny cel dotykowy na około czterdzieści cztery piksele boku. Poniżej klient trafia w zły przycisk, co zmusza go do poprawiania i irytuje.
Usuwanie bez potwierdzenia i cofnięcia. Przypadkowe dotknięcie kosza opróżnia linię bez możliwości odwrotu. Opcja tymczasowego cofnięcia oszczędza pełnej mentalnej rekonstrukcji koszyka.
Ekran 2: identyfikacja
To ekran, który generuje najwięcej porzuceń na urządzeniach mobilnych, a wystarczą dwa szczegóły techniczne.
Pole e-mail nie wywołuje właściwej klawiatury. Poprawnie otypowane pole wyświetla klawiaturę z dostępną małpą. Bez tego klient przechodzi przez klawisz przełączania przy każdym wpisie.
Automatyczne wypełnianie nie działa. Przeglądarki potrafią wypełnić e-mail, nazwisko, adres i kartę płatniczą, pod warunkiem że pola noszą oczekiwane wskazówki autouzupełniania. Poprawnie oznaczony formularz wypełnia się dwoma dotknięciami. Formularz bez oznaczeń wymusza pełne wpisywanie.
To prawdopodobnie najbardziej opłacalna poprawka całej ścieżki, a wymaga jedynie dodania atrybutów do istniejących pól.
Trzeci punkt: hasło. Jeśli wymuszacie założenie konta, brak opcji pokazania wpisanego hasła generuje powtarzające się błędy na klawiaturze dotykowej.
Ekran 3: adres
Formularz adresu jest najdłuższy w ścieżce i najgorzej dostosowany.
Za dużo pól. Wiele konfiguracji pyta o firmę, uzupełnienie adresu, drugie uzupełnienie, telefon stacjonarny i komórkowy. Na urządzeniu mobilnym każde dodatkowe pole to przeszkoda. Ograniczcie do ścisłego minimum i ukryjcie pola opcjonalne za linkiem.
Kod pocztowy nie wywołuje klawiatury numerycznej. Ta sama uwaga co przy e-mailu: typ pola decyduje o proponowanej klawiaturze.
Kolejność pól nie podąża za lokalną logiką. W Polsce kod pocztowy wpisuje się przed miastem, a pierwszy powinien wstępnie wypełniać drugie. To autouzupełnianie usuwa całe pole i redukuje błędy.
Błędy pokazują się po walidacji. Formularz, który zgłasza pięć błędów naraz po naciśnięciu przycisku, zmusza do przewijania strony w górę. Walidacja w trakcie wpisywania, pole po polu, jest zdecydowanie mniej frustrująca.
Prosty i elegancki checkout dla PrestaShopElegancki checkout na jednej stronie, który konwertuje€99,00
Ekran 4: dostawa
Dwa problemy.
Opcje transportu w ściśniętych przyciskach radio. Trzej przewoźnicy przedstawieni w kompaktowych wierszach z małymi przyciskami radio generują błędne wybory. Każda opcja powinna być kartą klikalną w całości.
Punkt odbioru na niedostosowanej mapie. Moduły punktów odbioru wyświetlają często mapę zaprojektowaną dla desktopa, z miniaturowymi znacznikami i kapryśnym zoomem. Na urządzeniu mobilnym lepiej działa lista uporządkowana według odległości, z mapą jako opcją.
Ekran 5: płatność
To ekran, na którym problem kosztuje najwięcej, ponieważ cały wcześniejszy wysiłek przepada.
Klawiatura numeryczna dla karty. Numer karty, data ważności i kod bezpieczeństwa muszą wywoływać klawiaturę numeryczną. To wciąż często źle skonfigurowane, także w nowych modułach płatności.
Automatyczne wypełnianie karty. Przeglądarki i menedżery haseł potrafią wypełnić zapisaną kartę, o ile wskazówki autouzupełniania są poprawne. Bez nich klient musi wyjąć fizyczną kartę, co przerywa ścieżkę i zostawia czas na rezygnację.
Przekierowanie na niedostosowaną stronę bankową. Silne uwierzytelnianie otwiera czasem stronę z zepsutym wyświetlaniem na urządzeniu mobilnym. Przetestujcie tę ścieżkę w realnych warunkach, z prawdziwą kartą: to najmniej testowany i najbardziej krytyczny punkt ścieżki.
Powrót po uwierzytelnieniu. Jeśli klient przełącza się do aplikacji bankowej, by zatwierdzić, opuszcza przeglądarkę. Powrót musi przywrócić sesję i kontynuować zamówienie, a nie zaczynać od koszyka.
Problemy przekrojowe
Cztery elementy, które dotyczą wszystkich ekranów.
Automatyczny zoom przy fokusie. W niektórych przeglądarkach mobilnych pole z rozmiarem czcionki poniżej szesnastu pikseli wyzwala automatyczny zoom przy zaznaczeniu, co przesuwa całą stronę. Poprawka polega na tym, by nigdy nie schodzić poniżej tego rozmiaru w formularzach.
Klawiatura zasłaniająca aktywne pole. Przy długim formularzu wirtualna klawiatura przykrywa czasem wypełniane właśnie pole. Przewijanie musi dostosować się do otwarcia klawiatury.
Skumulowane stałe paski. Przyklejony nagłówek, baner cookies, baner promocyjny: na ekranie telefonu zostaje czasem tylko jedna trzecia wysokości na treść. W ścieżce zamówienia usuńcie wszystko, co nie jest konieczne.
Czas ładowania między etapami. Każde pełne przeładowanie to okazja do porzucenia. Ścieżka na jednej stronie lub przejścia bez przeładowania usuwają te punkty zerwania.
Metoda diagnozy
Trzy działania, w tej kolejności, przed jakąkolwiek modyfikacją.
Złóżcie zamówienie na własnym telefonie, w realnych warunkach, z prawdziwą kartą i siecią komórkową zamiast wifi. To ujawnia w dziesięć minut większość problemów.
Zmierzcie współczynnik ukończenia na etap, osobno na urządzeniach mobilnych i na komputerze. Różnica między nimi lokalizuje problem: jeśli mobile odpada przy adresie, nie ma sensu poprawiać płatności.
Obejrzyjcie nagrania sesji mobilnych, które nie doszły do końca. Wahania, powtarzane poprawki i ręczne zoomy widać natychmiast i wskazują one problematyczne pola.
Od czego zacząć
Jeśli możecie zrobić tylko trzy rzeczy, weźcie te.
Atrybuty autouzupełniania na wszystkich polach ścieżki. Niski koszt, natychmiastowy efekt, a korzystają na tym wszystkie przeglądarki.
Typy pól, aby każdy wpis wywoływał właściwą klawiaturę. Ta sama logika, ten sam stosunek wysiłku do rezultatu.
Strefy dotykowe powiększone do minimum czterdziestu czterech pikseli na wszystkich elementach interaktywnych ścieżki.
Te trzy poprawki nie wymagają żadnej przebudowy i rozwiązują większość mierzalnych tarć.
Moduł Prosty i Elegancki Checkout dla PrestaShop przebudowuje tę ścieżkę w PrestaShop 8 i 9: ścieżka na jednej stronie bez przeładowania między etapami, odchudzony formularz adresu ze wstępnym wypełnianiem miasta na podstawie kodu pocztowego, poprawnie ustawione typy pól i atrybuty autouzupełniania oraz strefy dotykowe zwymiarowane dla urządzeń mobilnych.
