Sprawdzone metody dotyczące formularzy płatności i adresów

Maksymalizuj liczbę konwersji, pomagając użytkownikom w szybkim i łatwym wypełnianiu formularzy adresowych i płatności.

Sam Dutton

Dobrze zaprojektowane formularze pomagają użytkownikom i zwiększają współczynniki konwersji. Jedna mała zmiana może zrobić dużą różnicę.

Oto przykład prostego formularza płatności, prezentujący wszystkie sprawdzone metody:

Oto przykład prostego formularza adresu, prezentujący wszystkie sprawdzone metody:

Lista kontrolna

Używanie znaczących znaczników HTML

Użyj elementów i atrybutów utworzonych na potrzeby zadania:

  • <form>, <input>, <label> i <button>
  • type, autocomplete i inputmode

Umożliwiają one korzystanie z wbudowanych funkcji przeglądarki, poprawiają ułatwienia dostępu i nadają znaczenie znacznikom.

Używanie elementów HTML zgodnie z przeznaczeniem

Umieść formularz w tagu <form>

Może Cię kusić, aby nie umieszczać elementów <input> w znaczniku <form> i obsługiwać przesyłanie danych wyłącznie za pomocą JavaScriptu.

Nie jest to właściwe postępowanie.

Element HTML <form> zapewnia dostęp do zaawansowanego zestawu wbudowanych funkcji we wszystkich nowoczesnych przeglądarkach i może pomóc w udostępnianiu witryny czytnikom ekranu i innym urządzeniom wspomagającym. Element <form> ułatwia też tworzenie podstawowych funkcji dla starszych przeglądarek z ograniczoną obsługą JavaScriptu i umożliwia przesyłanie formularzy nawet wtedy, gdy w kodzie występuje błąd, a także w przypadku niewielkiej liczby użytkowników, którzy wyłączają JavaScript.

Jeśli masz więcej niż 1 komponent strony do wprowadzania danych przez użytkownika, umieść każdy z nich w osobnym elemencie <form>. Jeśli na przykład na tej samej stronie masz wyszukiwanie i rejestrację, umieść każdy z tych elementów w osobnym tagu <form>.

Używanie <label> do oznaczania elementów etykietami

Aby oznaczyć etykietą element <input>, <select> lub <textarea>, użyj <label>.

Powiąż etykietę z polem wejściowym, nadając atrybutowi for etykiety tę samą wartość co atrybutowi id pola wejściowego.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

Używaj jednej etykiety dla jednego pola wejściowego: nie próbuj oznaczać wielu pól wejściowych tylko jedną etykietą. Ta opcja najlepiej sprawdza się w przypadku przeglądarek i czytników ekranu. Kliknięcie etykiety przenosi zaznaczenie na powiązane z nią pole, a czytniki ekranu odczytują tekst etykiety, gdy etykieta lub jej pole zostaną zaznaczone.

Użyteczne przyciski

Użyj <button>, aby utworzyć przyciski. Możesz też użyć elementu <input type="submit">, ale nie używaj elementu div ani innego losowego elementu, który ma działać jako przycisk. Elementy przycisków zapewniają ułatwienia dostępu, wbudowaną funkcję przesyłania formularzy i można je łatwo stylizować.

Nadaj każdemu przyciskowi przesyłania formularza wartość, która opisuje jego działanie. Na każdym etapie procesu płatności używaj opisowego wezwania do działania, które pokazuje postęp i wyraźnie wskazuje następny krok. Na przykład przycisk przesyłania w formularzu adresu dostawy oznacz etykietą Przejdź do płatności, a nie Dalej czy Zapisz.

Rozważ wyłączenie przycisku przesyłania po kliknięciu go przez użytkownika, zwłaszcza gdy użytkownik dokonuje płatności lub składa zamówienie. Wielu użytkowników klika przyciski wielokrotnie, nawet jeśli działają one prawidłowo. Może to zakłócić proces płatności i zwiększyć obciążenie serwera.

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

Z drugiej strony nie wyłączaj przycisku przesyłania, gdy czekasz na pełne i prawidłowe dane wejściowe użytkownika. Na przykład nie pozostawiaj przycisku Zapisz adres wyłączonego, jeśli czegoś brakuje lub coś jest nieprawidłowe. Nie pomaga to użytkownikowi – może on nadal klikać przycisk i uznać, że jest on uszkodzony. Zamiast tego, jeśli użytkownicy próbują przesłać formularz z nieprawidłowymi danymi, wyjaśnij im, co jest nie tak i co należy zrobić, aby to naprawić. Jest to szczególnie ważne na urządzeniach mobilnych, gdzie wprowadzanie danych jest trudniejsze, a brakujące lub nieprawidłowe dane w formularzu mogą nie być widoczne na ekranie użytkownika, gdy próbuje on przesłać formularz.

Wykorzystaj w pełni atrybuty HTML

Ułatwianie użytkownikom wprowadzania danych

Użyj odpowiedniego atrybutu type, aby zapewnić odpowiednią klawiaturę na urządzeniach mobilnych i włączyć podstawową weryfikację wbudowaną w przeglądarkę.

Na przykład użyj type="email" w przypadku adresów e-mail i type="tel" w przypadku numerów telefonów.

Dwa zrzuty ekranu telefonów z Androidem, na których widać klawiaturę odpowiednią do wpisywania adresu e-mail (z użyciem type=email) i numeru telefonu (z użyciem type=tel).
Klawiatury odpowiednie do wpisywania adresów e-mail i numerów telefonów.

W przypadku dat staraj się unikać niestandardowych elementów select. Jeśli nie zostaną prawidłowo wdrożone, mogą zakłócać działanie autouzupełniania i nie będą działać w starszych przeglądarkach. W przypadku liczb takich jak rok urodzenia rozważ użycie elementu input zamiast select, ponieważ ręczne wpisywanie cyfr może być łatwiejsze i mniej podatne na błędy niż wybieranie z długiej listy, zwłaszcza na urządzeniach mobilnych. Użyj inputmode="numeric", aby zapewnić odpowiednią klawiaturę na urządzeniach mobilnych, i dodaj wskazówki dotyczące sprawdzania poprawności i formatu za pomocą tekstu lub obiektu zastępczego, aby użytkownik wprowadził dane w odpowiednim formacie.

Używanie autouzupełniania w celu ułatwienia dostępu i pomocy użytkownikom w unikaniu ponownego wpisywania danych

Użycie odpowiednich wartości autocomplete umożliwia przeglądarkom pomaganie użytkownikom przez bezpieczne przechowywanie danych i autouzupełnianie wartości input, select i textarea. Jest to szczególnie ważne na urządzeniach mobilnych i ma kluczowe znaczenie dla uniknięcia wysokiego współczynnika porzucania formularzy. Autouzupełnianie zapewnia też wiele korzyści związanych z ułatwieniami dostępu.

Jeśli dla pola formularza dostępna jest odpowiednia wartość autouzupełniania, należy jej użyć. Pełną listę wartości i wyjaśnienia, jak ich prawidłowo używać, znajdziesz w dokumentacji MDN.

Stabilne wartości

Adres rozliczeniowy

Domyślnie ustaw adres rozliczeniowy taki sam jak adres dostawy. Zmniejsz wizualny bałagan, udostępniając link do edycji adresu rozliczeniowego (lub użyj elementów summary i details), zamiast wyświetlać adres rozliczeniowy w formularzu.

Przykładowa strona płatności z linkiem do zmiany adresu rozliczeniowego.
Dodaj link do sprawdzania rozliczeń.

Używaj odpowiednich wartości autouzupełniania dla adresu rozliczeniowego, tak jak w przypadku adresu dostawy, aby użytkownik nie musiał wpisywać danych więcej niż raz. Jeśli masz różne wartości dla danych wejściowych o tej samej nazwie w różnych sekcjach, dodaj prefiks do atrybutów autouzupełniania.

<input autocomplete="shipping address-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

Pomaganie użytkownikom we wpisywaniu prawidłowych danych

Staraj się unikać „upominania” klientów, ponieważ „zrobili coś źle”. Zamiast tego pomóż użytkownikom szybciej i łatwiej wypełniać formularze, pomagając im rozwiązywać problemy na bieżąco. Podczas procesu płatności klienci próbują zapłacić Twojej firmie za produkt lub usługę – Twoim zadaniem jest im pomóc, a nie utrudniać im życie.

Do elementów formularza możesz dodawać atrybuty ograniczeń, aby określić akceptowalne wartości, m.in. min, max i pattern. Stan poprawności elementu jest ustawiany automatycznie w zależności od tego, czy wartość elementu jest prawidłowa. Podobnie jest w przypadku pseudoklas CSS :valid i :invalid, których można używać do stylizowania elementów z prawidłowymi lub nieprawidłowymi wartościami.

Na przykład ten kod HTML określa dane wejściowe dla roku urodzenia między 1900 a 2020. Użycie type="number" ogranicza wartości wejściowe tylko do liczb z zakresu określonego przez min i max. Jeśli spróbujesz wpisać liczbę spoza zakresu, stan danych wejściowych zostanie ustawiony jako nieprawidłowy.

W tym przykładzie użyto wyrażenia pattern="[\d ]{10,30}", aby zapewnić prawidłowy numer karty płatniczej, zezwalając jednocześnie na spacje:

Nowoczesne przeglądarki przeprowadzają też podstawową weryfikację danych wejściowych typu email lub url.

Po przesłaniu formularza przeglądarki automatycznie ustawiają fokus na polach z problemami lub brakującymi wymaganymi wartościami. Nie jest wymagany żaden kod JavaScript.

Formularz logowania w Chrome na komputerze z wyświetloną prośbą przeglądarki i zaznaczeniem nieprawidłowego adresu e-mail.
Podstawowa wbudowana weryfikacja przez przeglądarkę.

Weryfikuj dane na bieżąco i przekazuj użytkownikowi informacje zwrotne podczas wprowadzania danych, zamiast wyświetlać listę błędów po kliknięciu przycisku przesyłania. Jeśli po przesłaniu formularza musisz sprawdzić poprawność danych na serwerze, wyświetl listę wszystkich znalezionych problemów i wyraźnie zaznacz wszystkie pola formularza z nieprawidłowymi wartościami. Obok każdego pola z błędem wyświetl też komunikat wyjaśniający, co należy poprawić. Sprawdź logi serwera i dane analityczne pod kątem typowych błędów – być może trzeba będzie zmienić projekt formularza.

Możesz też użyć JavaScriptu, aby przeprowadzić bardziej rygorystyczną weryfikację podczas wprowadzania danych przez użytkowników i przesyłania formularza. Użyj interfejsu Constraint Validation API (który jest powszechnie obsługiwany), aby dodać walidację niestandardową za pomocą wbudowanego interfejsu przeglądarki do ustawiania zaznaczenia i wyświetlania komunikatów.

Więcej informacji znajdziesz w artykule Weryfikacja formularza po stronie klienta.

Pomaganie użytkownikom w unikaniu pomijania wymaganych danych

Użyj atrybutu required w przypadku danych wejściowych dla wartości obowiązkowych.

Po przesłaniu formularza nowoczesne przeglądarki automatycznie wyświetlają prośbę o uzupełnienie i ustawiają kursor na polach required, w których brakuje danych. Możesz też użyć pseudoklasy :required, aby wyróżnić wymagane pola. Nie, nie jest wymagany JavaScript.

Dodaj gwiazdkę do etykiety każdego wymaganego pola i dodaj na początku formularza notatkę wyjaśniającą, co oznacza gwiazdka.

Uproszczenie procesu płatności

Zmniejszanie luki w handlu mobilnym

Wyobraź sobie, że Twoi użytkownicy mają budżet zmęczenia. Jeśli go wyczerpiesz, użytkownicy odejdą.

Musisz ograniczyć rozpraszacze i utrzymać skupienie, zwłaszcza na urządzeniach mobilnych. Wiele witryn odnotowuje większy ruch na urządzeniach mobilnych, ale więcej konwersji na komputerach. To zjawisko jest znane jako luka w handlu mobilnym. Klienci mogą po prostu woleć dokonywać zakupów na komputerze, ale niższe współczynniki konwersji na urządzeniach mobilnych wynikają również z gorszych wrażeń użytkowników. Twoim zadaniem jest zminimalizowanie liczby utraconych konwersji na urządzeniach mobilnych i zmaksymalizowanie liczby konwersji na komputerach. Badania pokazują, że istnieje ogromna szansa na poprawę wygody korzystania z formularzy na urządzeniach mobilnych.

Użytkownicy najczęściej porzucają formularze, które wyglądają na długie, są skomplikowane i nie mają jasnej struktury. Dotyczy to zwłaszcza użytkowników, którzy korzystają z mniejszych ekranów, są rozproszeni lub się spieszą. Proś o jak najmniej danych.

Ustaw opcję Zapłać bez logowania jako domyślną

W przypadku sklepu internetowego najprostszym sposobem na zmniejszenie problemów z formularzem jest ustawienie opcji Zapłać bez logowania jako domyślnej. Nie zmuszaj użytkowników do tworzenia konta przed dokonaniem zakupu. Brak możliwości zapłaty bez logowania jest podawany jako główny powód porzucania koszyka.

powody porzucenia koszyka w momencie płatności;
Źródło: baymard.com/checkout-usability

Możesz zaoferować rejestrację konta po dokonaniu płatności. W tym momencie masz już większość danych potrzebnych do skonfigurowania konta, więc jego utworzenie powinno być dla użytkownika szybkie i łatwe.

Wyświetlanie postępu procesu płatności

Możesz sprawić, że proces płatności będzie wydawał się mniej skomplikowany, pokazując postęp i jasno informując, co należy zrobić dalej. Poniższy film pokazuje, jak robi to brytyjski sprzedawca johnlewis.com.

Pokaż postęp procesu płatności.

Musisz utrzymać tempo. Na każdym etapie płatności używaj nagłówków stron i opisowych wartości przycisków, które jasno określają, co należy zrobić teraz i jaki jest następny krok.

Nadaj przyciskom formularza zrozumiałe nazwy, które wskazują, co nastąpi po ich kliknięciu.

Użyj atrybutu enterkeyhint w polach formularza, aby ustawić etykietę klawisza Enter na klawiaturze mobilnej. Na przykład użyj enterkeyhint="previous" i enterkeyhint="next" w formularzu wielostronicowym, enterkeyhint="done" w przypadku ostatniego pola w formularzu i enterkeyhint="search" w przypadku pola wyszukiwania.

Dwa zrzuty ekranu formularza adresu na Androidzie pokazujące, jak atrybut wejściowy enterkeyhint zmienia ikonę przycisku Enter.
Przyciski klawisza Enter na Androidzie: „Dalej” i „Gotowe”.

Atrybut enterkeyhint jest obsługiwany na urządzeniach z Androidem i iOS. Więcej informacji znajdziesz w wyjaśnieniu dotyczącym enterkeyhint.

Ułatw użytkownikom przechodzenie do przodu i do tyłu w procesie płatności, aby mogli łatwo dostosować zamówienie, nawet na ostatnim etapie płatności. Wyświetlaj pełne szczegóły zamówienia, a nie tylko ograniczone podsumowanie. Umożliwiaj użytkownikom łatwe dostosowywanie liczby produktów na stronie płatności. Priorytetem podczas płatności jest unikanie przerywania procesu konwersji.

Usuń elementy rozpraszające uwagę

Ogranicz potencjalne punkty wyjścia, usuwając elementy, które mogą rozpraszać uwagę, np. promocje produktów. Wielu sprzedawców, którzy odnieśli sukces, usuwa nawet nawigację i wyszukiwanie z procesu płatności.

Dwa zrzuty ekranu na urządzeniu mobilnym pokazujące postęp w procesie płatności na stronie johnlewis.com. Wyszukiwanie, nawigacja i inne elementy rozpraszające uwagę są usunięte.
Wyszukiwanie, nawigacja i inne elementy rozpraszające uwagę zostały usunięte z procesu płatności.

Skup się na ścieżce. To nie jest czas na kuszenie użytkowników, aby zrobili coś innego.

Strona płatności na urządzeniu mobilnym z rozpraszającą promocją naklejek bez opłat.
Nie odciągaj uwagi klientów od finalizowania zakupu.

W przypadku powracających użytkowników możesz jeszcze bardziej uprościć proces płatności, ukrywając dane, których nie muszą widzieć. Na przykład: wyświetlaj adres dostawy w formie zwykłego tekstu (nie w formularzu) i pozwól użytkownikom na jego zmianę po kliknięciu linku.

Sekcja „Sprawdź zamówienie” na stronie płatności, zawierająca zwykły tekst z linkami do zmiany adresu dostawy, formy płatności i adresu rozliczeniowego, które nie są wyświetlane.
Ukryj dane, których klienci nie muszą widzieć.

Ułatwianie wpisywania imienia i nazwiska oraz adresu

Proś tylko o potrzebne dane.

Zanim zaczniesz kodować formularze imienia i nazwiska oraz adresu, upewnij się, że wiesz, jakie dane są wymagane. Nie proś o dane, których nie potrzebujesz. Najprostszym sposobem na zmniejszenie złożoności formularza jest usunięcie niepotrzebnych pól. Jest to również korzystne dla prywatności klientów i może zmniejszyć koszty danych backendu oraz odpowiedzialność.

Używaj pojedynczego pola na imię i nazwisko

Zezwalaj użytkownikom na wpisywanie imienia i nazwiska w jednym polu, chyba że masz ważny powód, aby osobno przechowywać imiona, nazwiska, tytuły lub inne części imienia i nazwiska. Użycie jednego pola do wpisywania imienia i nazwiska upraszcza formularze, umożliwia wycinanie i wklejanie oraz ułatwia autouzupełnianie.

Jeśli nie masz ku temu ważnego powodu, nie dodawaj osobnego pola na prefiks lub tytuł (np. Pani, Dr lub Lord). Użytkownicy mogą wpisać tę informację razem ze swoim imieniem i nazwiskiem, jeśli chcą. Ponadto autouzupełnianie honorific-prefix obecnie nie działa w większości przeglądarek, więc dodanie pola prefiksu imienia lub tytułu spowoduje, że autouzupełnianie formularza adresu nie będzie działać u większości użytkowników.

Włącz autouzupełnianie imienia i nazwiska

Użyj name, aby podać imię i nazwisko:

<input autocomplete="name" ...>

Jeśli masz ważny powód, aby rozdzielić części imienia i nazwiska, użyj odpowiednich wartości autouzupełniania:

  • honorific-prefix
  • given-name
  • nickname
  • additional-name-initial
  • additional-name
  • family-name
  • honorific-suffix

Zezwalaj na nazwy międzynarodowe

Możesz sprawdzić poprawność wpisanych nazw lub ograniczyć znaki dozwolone w danych dotyczących nazw. Jednak w przypadku alfabetów należy stosować jak najmniej ograniczeń. To niegrzeczne, gdy ktoś mówi, że Twoje imię jest „nieprawidłowe”.

Do weryfikacji nie używaj wyrażeń regularnych, które pasują tylko do znaków łacińskich. Opcja „Tylko alfabet łaciński” wyklucza użytkowników, których imiona i nazwiska lub adresy zawierają znaki spoza alfabetu łacińskiego. Zamiast tego zezwól na dopasowywanie liter w standardzie Unicode i upewnij się, że Twój backend bezpiecznie obsługuje standard Unicode zarówno na wejściu, jak i na wyjściu. Unicode w wyrażeniach regularnych jest dobrze obsługiwany przez nowoczesne przeglądarki.

Nie
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>
Tak
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>
Dopasowywanie liter Unicode w porównaniu z dopasowywaniem liter tylko w alfabecie łacińskim.

Zezwalaj na różne formaty adresów.

Projektując formularz adresu, pamiętaj o ogromnej różnorodności formatów adresów, nawet w obrębie jednego kraju. Uważaj, aby nie zakładać, że adresy są „normalne”. (Jeśli nie masz pewności, zapoznaj się z artykułem UK Address Oddities!).

Uelastycznij formularze adresowe

Nie zmuszaj użytkowników do wpisywania adresu w polach formularza, które nie pasują do jego formatu.

Nie wymagaj na przykład podawania numeru domu i nazwy ulicy w osobnych polach, ponieważ wiele adresów nie ma takiego formatu, a niekompletne dane mogą uniemożliwić autouzupełnianie w przeglądarce.

Zachowaj szczególną ostrożność w przypadku pól adresowych required. Na przykład adresy w dużych miastach w Wielkiej Brytanii nie zawierają hrabstwa, ale wiele witryn nadal wymaga od użytkowników podania tej informacji.

Użycie 2 elastycznych wierszy adresu może się sprawdzić w przypadku różnych formatów adresów.

<input autocomplete="address-line1" id="address-line1" ...>
<input autocomplete="address-line2" id="address-line2" ...>

Dodaj etykiety do dopasowania:

<label for="address-line1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line1" id="address-line1" ...>

<label for="address-line2">
Address line 2 (optional)
</label>
<input autocomplete="address-line2" id="address-line2" ...>

Rozważ użycie jednego pola tekstowego na adres

Najbardziej elastyczną opcją w przypadku adresów jest podanie pojedynczego elementu textarea.

Podejście textarea pasuje do każdego formatu adresu i świetnie nadaje się do wycinania i wklejania, ale pamiętaj, że może nie odpowiadać Twoim wymaganiom dotyczącym danych, a użytkownicy mogą nie mieć możliwości korzystania z autouzupełniania, jeśli wcześniej używali tylko formularzy z polami address-line1 i address-line2.

W przypadku pola tekstowego użyj wartości autouzupełniania street-address.

Oto przykład formularza, który pokazuje użycie pojedynczego pola textarea na adres:

Internacjonalizacja i lokalizacja formularzy adresowych

W przypadku formularzy adresowych szczególnie ważne jest uwzględnienie internacjonalizacji i lokalizacji w zależności od lokalizacji użytkowników.

Pamiętaj, że nazwy części adresu i formaty adresów mogą się różnić, nawet w obrębie tego samego języka.

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

Formularz, który nie pasuje do Twojego adresu lub nie zawiera oczekiwanych słów, może być irytujący lub mylący.

Dostosowywanie formularzy adresowych do wielu regionów może być konieczne w przypadku Twojej witryny, ale wystarczające może być użycie technik maksymalizujących elastyczność formularzy (opisanych powyżej). Jeśli nie lokalizujesz formularzy adresowych, zapoznaj się z najważniejszymi priorytetami, aby poradzić sobie z różnymi formatami adresów:

  • Unikaj zbyt szczegółowych informacji o częściach adresu, takich jak nazwa ulicy czy numer domu.
  • Jeśli to możliwe, unikaj ustawiania pól jako required. Na przykład adresy w wielu krajach nie mają kodu pocztowego, a adresy na obszarach wiejskich mogą nie mieć nazwy ulicy ani drogi.
  • Używaj nazw, które nie wykluczają żadnych użytkowników: „Kraj/region”, a nie „Kraj”; „Kod pocztowy”, a nie „Kod ZIP”.

Zachowaj elastyczność. Powyższy przykład prostego formularza adresu można dostosować tak, aby działał „wystarczająco dobrze” w wielu regionach.

Unikaj wyszukiwania adresu po kodzie pocztowym

Niektóre witryny korzystają z usługi wyszukiwania adresów na podstawie kodu pocztowego. W niektórych przypadkach może to być uzasadnione, ale należy pamiętać o potencjalnych wadach.

Sugestie adresów na podstawie kodu pocztowego nie działają we wszystkich krajach, a w niektórych regionach kody pocztowe mogą obejmować dużą liczbę potencjalnych adresów.

Kody pocztowe mogą obejmować wiele adresów.

Użytkownikom trudno jest wybrać adres z długiej listy, zwłaszcza na urządzeniach mobilnych, gdy się spieszą lub są zestresowani. Łatwiejsze i mniej podatne na błędy może być umożliwienie użytkownikom korzystania z autouzupełniania i wpisywania pełnego adresu jednym kliknięciem.

Pojedyncze pole nazwy umożliwia wpisanie adresu jednym kliknięciem.

Uproszczenie formularzy płatności

Formularze płatności to najważniejszy element procesu płatności. Słabo zaprojektowany formularz płatności to częsta przyczyna porzucania koszyka. Diabeł tkwi w szczegółach: drobne błędy mogą skłonić użytkowników do porzucenia zakupu, zwłaszcza na urządzeniach mobilnych. Twoim zadaniem jest zaprojektowanie formularzy, które maksymalnie ułatwią użytkownikom wprowadzanie danych.

Pomaganie użytkownikom w unikaniu ponownego wpisywania danych karty

Pamiętaj, aby dodać odpowiednie wartości autocomplete w formularzach kart płatniczych, w tym numer karty płatniczej, imię i nazwisko na karcie, datę ważności i kod zabezpieczający:

  • cc-number
  • cc-name
  • cc-exp lub cc-exp-month i cc-exp-year w przypadku osobnych pól
  • cc-csc

Dzięki temu przeglądarki mogą pomagać użytkownikom, bezpiecznie przechowując dane kart płatniczych i prawidłowo wprowadzając dane w formularzach. Bez autouzupełniania użytkownicy mogą być bardziej skłonni do zapisywania danych karty płatniczej na papierze lub przechowywania ich w niebezpieczny sposób na urządzeniu.

Unikaj używania elementów niestandardowych w przypadku dat na kartach płatniczych.

Jeśli elementy niestandardowe nie zostaną prawidłowo zaprojektowane, mogą zakłócać proces płatności, uniemożliwiając autouzupełnianie, i nie będą działać w starszych przeglądarkach. Jeśli wszystkie inne dane karty płatniczej są dostępne w autouzupełnianiu, ale użytkownik musi znaleźć fizyczną kartę, aby sprawdzić datę ważności, ponieważ autouzupełnianie nie zadziałało w przypadku elementu niestandardowego, prawdopodobnie stracisz sprzedaż. Zamiast tego rozważ użycie standardowych elementów HTML i odpowiednio je sformatuj.

Formularz płatności z niestandardowymi elementami daty ważności karty, które przerywają autouzupełnianie.
Autouzupełnianie wypełniło wszystkie pola oprócz daty ważności.

Używanie jednego pola do wprowadzania numerów kart płatniczych i telefonów

W przypadku numerów kart płatniczych i numerów telefonów używaj jednego pola wejściowego: nie dziel numeru na części. Ułatwia to użytkownikom wprowadzanie danych, upraszcza weryfikację i umożliwia autouzupełnianie w przeglądarkach. Rozważ zrobienie tego samego w przypadku innych danych liczbowych, takich jak kody PIN i kody bankowe.

Formularz płatności z polem karty kredytowej podzielonym na 4 elementy wejściowe.
Nie używaj wielu pól do wpisywania numeru karty kredytowej.

Dokładna weryfikacja

Dane wejściowe należy sprawdzać zarówno w czasie rzeczywistym, jak i przed przesłaniem formularza. Jednym ze sposobów jest dodanie atrybutu pattern do danych wejściowych karty płatniczej. Jeśli użytkownik spróbuje przesłać formularz płatności z nieprawidłową wartością, przeglądarka wyświetli komunikat ostrzegawczy i ustawi kursor w polu wejściowym. Nie, nie jest wymagany JavaScript.

Wyrażenie regularne pattern musi być jednak na tyle elastyczne, aby obsługiwać zakres długości numerów kart płatniczych: od 14 cyfr (lub mniej) do 20 (lub więcej). Więcej informacji o strukturze numerów kart płatniczych znajdziesz na stronie LDAPwiki.

Zezwalaj użytkownikom na wpisywanie spacji podczas wprowadzania nowego numeru karty płatniczej, ponieważ w ten sposób numery są wyświetlane na fizycznych kartach. Jest to bardziej przyjazne dla użytkownika (nie musisz mu mówić, że „zrobił coś źle”), mniej prawdopodobne jest przerwanie procesu konwersji, a usunięcie spacji w liczbach przed przetworzeniem jest proste.

Prowadź testy w różnych przeglądarkach, na różnych urządzeniach i platformach

Szczególnie ważne jest przetestowanie formularzy adresowych i płatności na platformach najczęściej używanych przez użytkowników, ponieważ funkcje i wygląd elementów formularza mogą się różnić, a różnice w rozmiarze widocznego obszaru mogą prowadzić do problemów z pozycjonowaniem. BrowserStack umożliwia bezpłatne testowanie projektów open source na różnych urządzeniach i w różnych przeglądarkach.

Formularz płatności na iPhonie 7 i 11. Przycisk „Zrealizuj płatność” jest widoczny na iPhonie 11, ale nie na iPhonie 7.
Ta sama strona na iPhonie 7 i iPhonie 11.
Zmniejsz dopełnienie w przypadku mniejszych widocznych obszarów na urządzeniach mobilnych, aby przycisk Zapłać nie był ukryty.

Wdrażanie statystyk i monitorowania rzeczywistych użytkowników

Testowanie użyteczności i wydajności lokalnie może być pomocne, ale aby prawidłowo zrozumieć, jak użytkownicy korzystają z formularzy płatności i adresu, potrzebujesz danych z rzeczywistego środowiska.

Do tego potrzebne są analizy i monitorowanie rzeczywistych użytkowników – dane o wrażeniach rzeczywistych użytkowników, np. o tym, ile czasu zajmuje wczytanie stron płatności lub ile czasu zajmuje dokonanie płatności:

  • Analityka strony: wyświetlenia strony, współczynniki odrzuceń i wyjścia dla każdej strony z formularzem.
  • Analityka interakcji: ścieżki do celu i zdarzenia wskazują, w którym miejscu użytkownicy rezygnują z procesu płatności, oraz jakie działania podejmują podczas interakcji z formularzami.
  • Wydajność witryny: wskaźniki dotyczące użytkowników mogą Ci powiedzieć, czy strony płatności wczytują się powoli, a jeśli tak, to jaka jest tego przyczyna.

Analizy stron, analizy interakcji i pomiary skuteczności rzeczywistych użytkowników stają się szczególnie cenne, gdy są połączone z logami serwera, danymi o konwersjach i testami A/B. Pozwalają wtedy odpowiedzieć na pytania, takie jak: czy kody rabatowe zwiększają przychody lub czy zmiana układu formularza zwiększa liczbę konwersji.

To z kolei daje solidną podstawę do ustalania priorytetów, wprowadzania zmian i nagradzania sukcesów.

Kontynuuj naukę

Zdjęcie: @rupixen, Unsplash.