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

Maksymalizuj liczbę konwersji, pomagając użytkownikom szybko i łatwo wypełniać formularze adresowe i płatności.

Sam Dutton

Dobrze zaprojektowane formularze ułatwiają użytkownikom wypełnianie ich i zwiększają współczynniki konwersji. Jedna mała poprawka może przynieść duże korzyści.

Oto przykład prostego formularza płatności, który zawiera wszystkie sprawdzone metody:

Oto przykład prostego formularza adresowego, który zawiera wszystkie sprawdzone metody:

Lista kontrolna

Używanie znaczących znaczników HTML

Użyj elementów i atrybutów stworzonych do tego celu:

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

Umożliwiają one korzystanie z wbudowanych funkcji przeglądarki, ułatwiają dostępność i dodają znaczeń do znacznika.

Używanie elementów HTML zgodnie z przeznaczeniem

Umieść formularz w elementach <form>

Możesz nie chcieć opakowywać elementów <input> w element <form> i chcieć przesyłać dane tylko za pomocą JavaScriptu.

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

HTML <form> zapewnia dostęp do zaawansowanego zestawu wbudowanych funkcji we wszystkich nowoczesnych przeglądarkach. Może też ułatwić dostęp do witryny czytnikom ekranu i innym urządzeniom wspomagającym. <form> ułatwia też tworzenie podstawowych funkcji w starszych przeglądarkach z ograniczoną obsługą JavaScriptu oraz umożliwia przesyłanie formularzy, nawet jeśli wystąpi błąd w kodzie, a także w przypadku niewielkiej liczby użytkowników, którzy wyłączyli JavaScript.

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

Etykietowanie elementów za pomocą <label>

Aby oznaczyć <input>, <select> lub <textarea>, użyj znaku <label>.

Połącz etykietę z danymi wejściowymi, nadając atrybutowi for etykiety tę samą wartość co atrybutowi id danych wejściowych.

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

Używaj jednej etykiety dla jednego wejścia: nie próbuj oznaczać kilku wejść jedną etykietą. Ta opcja działa najlepiej w przypadku przeglądarek i czytników ekranu. Gdy klikniesz etykietę, zaznaczenie zostanie przeniesione do powiązanego z nią pola tekstowego. Czytniki ekranu odczytują tekst etykiety, gdy etykieta lub pole tekstowe powiązane z etykietą zostanie zaznaczone.

Przydatne przyciski

Użyj <button> do przycisków. Możesz też użyć <input type="submit">, ale nie używaj div ani innych losowych elementów działających jak przycisk. Elementy przycisku zapewniają dostępność, wbudowaną funkcję przesyłania formularzy i możliwość łatwego nadawania im stylu.

Przypisz do każdego przycisku przesyłania formularza wartość, która informuje, do czego służy. W przypadku każdego kroku prowadzącego do płatności użyj opisowego wezwania do działania, które pokazuje postęp i ułatwia znalezienie następnego kroku. Na przykład przycisk przesyłania w formularzu adresu dostawy oznacz etykietą Przejdź do płatności zamiast Dalej lub Zapisz.

Rozważ wyłączenie przycisku przesyłania po jego kliknięciu przez użytkownika, zwłaszcza gdy użytkownik dokonuje płatności lub składa zamówienie. Wielu użytkowników wielokrotnie klika przyciski, nawet jeśli działają prawidłowo. Może to spowodować problemy z zapłatą i obciążyć serwer.

Z drugiej strony nie wyłączaj przycisku przesyłania, gdy oczekujesz na pełny i prawidłowy wpis użytkownika. Nie zostawiaj na przykład wyłączonego przycisku Zapisz adres, ponieważ coś w nim jest nieprawidłowe lub niekompletne. To nie pomaga użytkownikowi, który może nadal klikać lub dotykać przycisku, zakładając, że jest on zepsuty. Jeśli użytkownicy spróbują przesłać formularz z nieprawidłowymi danymi, wyjaśnij im, co poszło nie tak i jak to naprawić. Jest to szczególnie ważne na urządzeniach mobilnych, gdzie wpisywanie danych jest trudniejsze, a brakujące lub nieprawidłowe dane formularza mogą nie być widoczne na ekranie użytkownika w momencie próby przesłania formularza.

Korzystanie z atrybutów HTML

Ułatwienie użytkownikom wprowadzania danych

Użyj odpowiedniego atrybutu wejścia type, aby udostępnić odpowiednią klawiaturę na urządzeniach mobilnych i włączyć podstawową wbudowaną walidację przez przeglądarkę.

Na przykład type="email" dla adresów e-mail i type="tel" dla numerów telefonu.

2 zrzuty ekranu telefonów z Androidem, na których widać klawiaturę do wpisywania adresu e-mail (za pomocą typu type=email) oraz numeru telefonu (za pomocą typu type=tel).
Klawiatury odpowiednie do obsługi poczty e-mail i telefonu.

W przypadku dat staraj się unikać stosowania niestandardowych elementów select. Jeśli nie są prawidłowo zaimplementowane, mogą zakłócać działanie autouzupełniania i nie działają w starszych przeglądarkach. W przypadku liczb, takich jak rok urodzenia, rozważ użycie elementu input zamiast elementu select, ponieważ wpisywanie cyfr ręcznie może być łatwiejsze i mniej podatne na błędy niż wybieranie z długiej listy, zwłaszcza na urządzeniu mobilnym. Użyj inputmode="numeric", aby zapewnić odpowiednią klawiaturę na urządzeniach mobilnych, oraz dodaj wskazówki dotyczące walidacji i formatu z tekstem lub miejscem zastępczym, aby użytkownik wpisał dane w odpowiednim formacie.

Używanie autouzupełniania w celu ułatwienia dostępu i unikania ponownego wpisywania danych przez użytkowników

Używanie odpowiednich wartości autocomplete umożliwia przeglądarkom pomaganie użytkownikom przez bezpieczne przechowywanie danych i automatyczne wypełnianie wartości input, select i textarea. Jest to szczególnie ważne na urządzeniach mobilnych i kluczowe, aby uniknąć wysokiego współczynnika porzuceń formularzy. Autouzupełnianie zapewnia też wiele ułatwień dostępu.

Jeśli dla pola formularza dostępna jest odpowiednia wartość autouzupełniania, użyj jej. Pełna lista wartości i wyjaśnienia dotyczące ich prawidłowego stosowania znajdują się w dokumentacji MDN.

Stabilne wartości

Adres rozliczeniowy

Domyślnie adres rozliczeniowy jest taki sam jak adres dostawy. Zamiast wyświetlać adres rozliczeniowy w formularzu, podaj link do jego edycji (lub użyj elementów summary i details).

Przykład strony płatności z linkiem do zmiany adresu rozliczeniowego
Dodaj link do strony z informacjami o płatnościach.

W przypadku adresu rozliczeniowego, podobnie jak w przypadku adresu dostawy, należy użyć odpowiednich wartości autouzupełniania, aby użytkownik nie musiał wpisywać danych więcej niż raz. Jeśli masz różne wartości atrybutów z tą samą nazwą w różnych sekcjach, dodaj do nich prefiks.

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

Pomoc użytkownikom w wprowadzaniu odpowiednich danych

Staraj się unikać „obwiniania” klientów, że „coś zrobili nie tak”. Zamiast tego pomóż użytkownikom wypełniać formularze szybciej i łatwiej, pomagając im rozwiązywać problemy w miarę ich pojawiania się. 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 ich karać.

Możesz dodawać atrybuty ograniczeń, aby tworzyć elementy, które określają dopuszczalne wartości, w tym min, max i pattern. Stan ważności elementu jest ustawiany automatycznie w zależności od tego, czy wartość elementu jest prawidłowa. Podobnie jest z pseudoklasami CSS :valid i :invalid, które można wykorzystać do nadawania stylów elementom z prawidłowymi lub nieprawidłowymi wartościami.

Na przykład poniższy kod HTML określa dane wejściowe dla roku urodzenia w zakresie 1900–2020. Użycie parametru type="number" ogranicza wartości wejściowe tylko do liczb w zakresie określonym przez parametry min i max. Jeśli spróbujesz wpisać liczbę spoza zakresu, dane zostaną ustawione jako nieprawidłowe.

W tym przykładzie używamy pattern="[\d ]{10,30}", aby zapewnić prawidłowy numer karty płatniczej, zezwalając 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 problematycznymi lub brakującymi wymaganymi wartościami. Nie wymaga JavaScriptu.

Zrzut ekranu formularza logowania w Chrome na komputerze, na którym widać prompt przeglądarki i wyróżniony niepoprawny adres e-mail.
Podstawowa wbudowana walidacja przez przeglądarkę.

Weryfikuj dane w ramach strony i przekazuj użytkownikowi informacje zwrotne podczas wprowadzania danych, zamiast wyświetlać listę błędów po kliknięciu przez niego przycisku przesyłania. Jeśli po przesłaniu formularza musisz zweryfikować dane na serwerze, wyświetl listę wszystkich znalezionych problemów i jasno zaznacz wszystkie pola formularza z nieprawidłowymi wartościami. Możesz też wyświetlić obok każdego problemowego pola komunikat z informacją, co należy poprawić. Sprawdź dzienniki serwera i dane analityczne pod kątem typowych błędów – być może trzeba będzie zmienić wygląd formularza.

Do bardziej rygorystycznej weryfikacji podczas wprowadzania danych przez użytkowników i przesyłania formularzy powinieneś też używać JavaScriptu. Użyj interfejsu Constraint Validation API (który jest powszechnie obsługiwany), aby dodać weryfikację niestandardową za pomocą wbudowanego interfejsu przeglądarki, który umożliwia ustawianie fokusa i wyświetlanie promptów.

Więcej informacji znajdziesz w artykule Używanie kodu JavaScript do bardziej złożonej walidacji w czasie rzeczywistym.

Pomoc użytkownikom w unikaniu braku wymaganych danych

Użyj atrybutu required w przypadku wartości obowiązkowych.

Po przesłaniu formularza nowoczesne przeglądarki automatycznie wyświetlają prompty i ustawiają fokus na polach required z brakującymi danymi. Możesz użyć pseudoklasy :required, aby wyróżnić pola wymagane. Nie wymaga JavaScriptu.

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

Uprość płatności

Uważaj na lukę w zakresie handlu mobilnego

Wyobraź sobie, że użytkownicy mają budżet na zmęczenie. Użyj go, a użytkownicy odejdą.

Musisz ograniczyć tarcie i utrzymać skupienie, zwłaszcza na urządzeniach mobilnych. Wiele witryn ma więcej ruchu na urządzeniach mobilnych, ale więcej konwersji na komputerach. Jest to zjawisko znane jako luka w handlu mobilnym. Klienci mogą po prostu woli robić zakupy na komputerach, ale niższe współczynniki konwersji na urządzeniach mobilnych są też wynikiem niewygodnej obsługi. Twoim zadaniem jest zminimalizowanie utraty konwersji na urządzeniach mobilnych i maksymalizowanie konwersji na komputerach. Badania pokazują, że istnieje ogromna szansa na lepsze formularze mobilne.

Użytkownicy najchętniej rezygnują z wypełniania formularzy, które wydają się długie, skomplikowane i nie mają wyraźnego celu. Jest to szczególnie ważne, gdy użytkownicy korzystają z mniejszych ekranów, są rozproszeni lub się śpieszą. Proś o jak najmniej danych.

Ustaw domyślne płatności bez logowania

W przypadku sklepu internetowego najprostszym sposobem na zmniejszenie oporu związanego z wypełnianiem formularzy jest ustawienie płatności bez logowania jako domyślnej. Nie wymagaj od użytkowników utworzenia konta przed dokonaniem zakupu. Brak możliwości płatności bez logowania jest wymieniany jako główna przyczyna rezygnacji z dodania produktów do koszyka.

Przyczyny porzucenia koszyka podczas płatności
Z baymard.com/checkout-usability

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

Pokaż postęp płatności

Możesz sprawić, że proces płatności będzie mniej skomplikowany, pokazując postęp i jasno informując, co należy zrobić dalej. Film poniżej pokazuje, jak brytyjski sprzedawca detaliczny johnlewis.com to osiąga.

Pokaż postęp 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 teraz zrobić i jaki jest następny krok.

Nadaj przyciskom w formularzu znaczące nazwy, które wskazują, co będzie dalej.

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

2 zrzuty ekranu z formularzem adresu na Androidzie, na których widać, jak atrybut wejścia enterkeyhint zmienia ikonę przycisku Enter.
Klawisze na Androidzie: „dalej” i „gotowe”.

Atrybut enterkeyhint jest obsługiwany na Androidzie i iOS. Więcej informacji znajdziesz w artykule wyjaśniającym, jak używać polecenia Enter Keyhint.

Ułatw użytkownikom przechodzenie do poprzednich i następnych kroków procesu płatności, aby mogli łatwo zmieniać zamówienie, nawet na ostatnim etapie płatności. wyświetlać pełne szczegóły zamówienia, a nie tylko ograniczone podsumowanie; Umożliw użytkownikom łatwe dostosowywanie ilości produktów na stronie płatności. Podczas płatności priorytetem jest unikanie przerwania procesu prowadzącego do konwersji.

Usuń elementy rozpraszające uwagę

Ogranicz potencjalne punkty wyjścia, usuwając wizualne elementy rozpraszające uwagę, takie jak promocje produktów. Wielu sprzedawców usuwa nawet nawigację i wyszukiwanie z procesu płatności.

2 zrzuty ekranu na urządzeniu mobilnym przedstawiające proces płatności w witrynie johnlewis.com. Wyszukiwanie, nawigacja i inne elementy rozpraszające uwagę są usuwane.
Usunięcie wyszukiwania, nawigacji i innych elementów rozpraszających uwagę w procesie płatności.

Nie odbiegaj od tematu. To nie jest czas na zachęcanie użytkowników do robienia czegoś innego.

Zrzut ekranu strony płatności na urządzeniu mobilnym, na której widać rozpraszającą uwagę promocję dotyczącą bezpłatnych naklejek.
Nie rozpraszaj klientów, gdy dokonują 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ć. Przykład: wyświetlaj adres dostawy w zwykłym tekście (nie w formularzu) i pozwalaj użytkownikom na zmianę adresu za pomocą linku.

Zrzut ekranu z sekcji „Sprawdź zamówienie” na stronie płatności, na którym widać tekst w zwykłym tekście oraz linki 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łatwienie wpisywania nazwiska i adresu

Proś o podawanie tylko niezbędnych informacji.

Zanim zaczniesz kodować formularze imienia i adresu, sprawdź, jakie dane są wymagane. Nie proś o dane, których nie potrzebujesz. Najprostszym sposobem na zmniejszenie złożoności formularza jest usunięcie zbędnych pól. Jest to też korzystne dla prywatności klientów i może zmniejszyć koszty i odpowiedzialność po stronie serwera.

Używanie pojedynczego pola tekstowego na nazwę

Pozwól użytkownikom na wpisanie nazwiska w jednym polu, chyba że masz ważny powód, aby przechowywać imię, nazwisko, tytuły honorowe lub inne części nazwy osobno. Użycie jednego pola tekstowego z nazwą ułatwia wypełnianie formularzy, umożliwia też kopiowanie i wklejanie oraz upraszcza autouzupełnianie.

Jeśli nie masz ku temu ważnego powodu, nie dodawaj osobnego pola na przedrostek ani tytuł (np. „Pani”, „Pan” lub „Lord”). Użytkownicy mogą wpisać go razem z nazwą użytkownika. Ponadto autouzupełnianie honorific-prefix nie działa obecnie w większości przeglądarek, więc dodanie pola na prefiks nazwy lub tytuł spowoduje, że większość użytkowników nie będzie mogła korzystać z autouzupełniania w formularzu adresu.

Włącz autouzupełnianie nazwy

Użyj name, aby uzyskać pełną nazwę:

<input autocomplete="name" ...>

Jeśli masz naprawdę dobry powód, aby rozdzielić części nazwy, użyj odpowiednich wartości autouzupełniania:

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

Zezwalanie na nazwy międzynarodowe

Możesz zweryfikować dane nazwy lub ograniczyć znaki dozwolone w danych nazwy. Musisz jednak stosować jak najmniej ograniczeń w przypadku alfabetów. To niegrzeczne mówić, że czyjeś imię jest „nieprawidłowe”.

Podczas weryfikacji unikaj stosowania wyrażeń regularnych pasujących tylko do znaków łacińskich. Wykluczanie użytkowników z nazwami lub adresami zawierającymi znaki inne niż z alfabetu łacińskiego. Zamiast tego zezwól na dopasowywanie znaków Unicode i upewnij się, że backend obsługuje bezpiecznie 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 znaków Unicode w porównaniu z dopasowywaniem znaków alfabetu łacińskiego.

Zezwalanie na różne formaty adresów

Podczas projektowania formularza adresowego pamiętaj o niezwykłej różnorodności formatów adresów, nawet w ramach jednego kraju. Nie należy zakładać, że adresy są „normalne”. (Jeśli nie jesteś przekonany, sprawdź dziwactwa związane z adresami w Wielkiej Brytanii).

Utworzenie elastycznych formularzy adresowych

Nie zmuszaj użytkowników do próby wciśnięcia adresu w pola formularza, które są za małe.

Nie wymagaj na przykład podawania numeru domu i nazwy ulicy w osobnych polach, ponieważ wiele adresów nie używa tego formatu, a niekompletne dane mogą zakłócić funkcję autouzupełniania w przeglądarce.

Zwróć szczególną uwagę na pola adresów required. Na przykład adresy w wielkich miastach w Wielkiej Brytanii nie mają kodu pocztowego, ale wiele witryn nadal wymaga od użytkowników podania tego kodu.

Użycie 2 elastycznych wierszy adresu może być wystarczające w przypadku różnych formatów adresów.

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

Dodaj etykiety do dopasowania:

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

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

Możesz to wypróbować, remiksując i edytując załączony poniżej demo.

Rozważ użycie pojedynczego pola tekstowego na adres

Najbardziej elastyczna opcja dotycząca adresów to podanie jednego textarea.

Metoda textarea pasuje do dowolnego formatu adresu i jest świetna do wycinania i wklejania, ale pamiętaj, że może nie spełniać Twoich wymagań dotyczących danych, a użytkownicy mogą nie mieć dostępu do autouzupełniania, jeśli wcześniej używali tylko formularzy z address-line1 i address-line2.

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

Oto przykład formularza, który pokazuje użycie pojedynczego znacznika textarea do adresu:

Internacjonalizacja i lokalizacja formularzy adresowych

W przypadku formularzy adresowych należy wziąć pod uwagę międzynarodowość i lokalizację 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 ramach tego samego języka.

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

Może to być irytujące lub zaskakujące, gdy zobaczysz formularz, który nie pasuje do Twojego adresu lub nie zawiera oczekiwanych słów.

W przypadku Twojej witryny może być konieczne dostosowanie formularzy adresowych do wielu lokalizacji, ale wystarczające może być zastosowanie technik maksymalizujących elastyczność formularzy (jak opisano powyżej). Jeśli nie chcesz lokalizować formularzy adresowych, musisz znać najważniejsze priorytety, aby poradzić sobie z różnymi formatami adresów: * Unikaj nadmiernego określania części adresu, np. nalegania na nazwę ulicy lub numer domu. * Jeśli to możliwe, unikaj pól required. Na przykład adresy w wielu krajach nie mają kodu pocztowego, a adresy na obszarach wiejskich mogą nie zawierać nazwy ulicy ani drogi. * Używaj nazw uwzględniających wszystkich: „Kraj/region”, a nie „Kraj”; „Kod pocztowy”, a nie „Kod”.

Zachowaj elastyczność. Prosty przykład formularza adresu powyżej można dostosować do wielu lokalizacji.

Rozważ unikanie wyszukiwania adresu za pomocą kodu pocztowego

Niektóre strony internetowe korzystają z usługi, która wyszukuje adresy na podstawie kodu pocztowego lub kodu pocztowego USA. Może to być rozsądne w niektórych przypadkach, ale należy pamiętać o potencjalnych wadach.

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

Kody pocztowe mogą zawierać wiele adresów!

Użytkownicy mają trudności z wybraniem adresu na długiej liście, zwłaszcza na urządzeniu mobilnym, gdy są sfrustrowani lub zestresowani. Może być łatwiej i mniej podatne na błędy, aby umożliwić użytkownikom korzystanie z autouzupełniania i wpisanie pełnego adresu jednym kliknięciem.

Pojedyncze pole z nazwą umożliwia wpisanie adresu jednym dotknięciem (jednym kliknięciem).

Uprość formularze płatności

Formularze płatności to najważniejszy element procesu płatności. Niewłaściwy projekt formularza płatności jest częstą przyczyną porzucenia koszyka zakupów. Diabeł tkwi w detale: małe błędy mogą skłonić użytkowników do rezygnacji z zakupu, zwłaszcza na urządzeniach mobilnych. Twoim zadaniem jest zaprojektowanie formularzy, aby jak najbardziej ułatwić użytkownikom wprowadzanie danych.

Pomoc użytkownikom w unikaniu ponownego wpisywania danych do płatności

Pamiętaj, aby w formularzach karty płatniczej dodać odpowiednie wartości autocomplete, w tym numer karty płatniczej, imię i nazwisko na karcie oraz miesiąc i rok ważności:

  • cc-number
  • cc-name
  • cc-exp-month
  • cc-exp-year

Dzięki temu przeglądarki mogą pomagać użytkownikom, zapewniając bezpieczne przechowywanie danych karty płatniczej i prawidłowe wprowadzanie danych formularza. Bez funkcji autouzupełniania użytkownicy mogą częściej przechowywać fizyczne dane karty płatniczej lub przechowywać dane karty płatniczej w niebezpieczny sposób na urządzeniu.

Unikaj używania elementów niestandardowych do dat karty płatniczej

Jeśli nie są odpowiednio zaprojektowane, elementy niestandardowe mogą zakłócać proces płatności przez zakłócenie autouzupełniania 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źć swoją fizyczną kartę płatniczą, aby sprawdzić datę ważności, ponieważ autouzupełnianie nie działa w przypadku elementu niestandardowego, prawdopodobnie stracisz sprzedaż. Zamiast tego możesz użyć standardowych elementów HTML i odpowiednio je sformatować.

Zrzut ekranu formularza płatności pokazujący elementy niestandardowe 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 wejściowego do karty płatniczej i numeru telefonu

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

Zrzut ekranu formularza płatności pokazujący pole karty kredytowej podzielone na 4 elementy danych wejściowych
Nie używaj kilku pól tekstowych do wpisywania numeru karty kredytowej.

Uważnie sprawdzaj

Dane należy weryfikować zarówno w czasie rzeczywistym, jak i przed przesłaniem formularza. Jednym ze sposobów jest dodanie atrybutu pattern do pola danych 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 z ostrzeżeniem i skoncentruje się na polu danych. Nie wymaga JavaScriptu.

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

Zezwalaj użytkownikom na wpisywanie spacji podczas wprowadzania numeru nowej karty płatniczej, ponieważ tak właśnie wyglądają numery na kartach fizycznych. Jest to przyjaźniejsze dla użytkownika (nie musisz informować go, że „coś zrobił źle”), powoduje mniejsze prawdopodobieństwo przerwania procesu konwersji i umożliwia łatwe usuwanie spacji w liczbach przed przetworzeniem.

testowanie na różnych urządzeniach, platformach, przeglądarkach i wersjach,

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

Zrzuty ekranu formularza płatności payment-form.glitch.me na iPhone’ach 7 i 11. Przycisk Zakończ płatność jest widoczny na iPhonie 11, ale nie na iPhonie 7
Ta sama strona na iPhone'a 7 i iPhone'a 11.
Zmniejsz odstępy na mniejszych ekranach, aby mieć pewność, że przycisk Zakończ płatność nie jest ukryty.

Wdrożenie funkcji analitycznych i RUM

Testowanie użyteczności i wydajności lokalnie może być przydatne, ale aby właściwie zrozumieć, jak użytkownicy korzystają z formularzy płatności i adresów, potrzebujesz rzeczywistych danych.

Do tego potrzebne są usługi analityczne i monitorowanie rzeczywistych użytkowników – dane o wrażeniach rzeczywistych użytkowników, takie jak czas wczytywania stron płatności czy czas realizacji płatności:

  • Statystyki stron: wyświetlenia stron, współczynniki odrzuceń i opuszczenia na każdej stronie z formularzem.
  • Analiza interakcji: ścieżki do celu i zdarzenia wskazują, gdzie użytkownicy porzucają proces płatności i jakie działania wykonują podczas interakcji z formularzami.
  • Wydajność witryny: dane dotyczące użytkowników mogą Ci pomóc sprawdzić, czy strony płatności wczytują się powoli, a jeśli tak, to jaka jest tego przyczyna.

Statystyki strony, analiza interakcji i pomiary wydajności w przypadku rzeczywistych użytkowników stają się szczególnie przydatne, gdy połączysz je z dziennikami serwera, danymi o konwersjach i testami A/B. Dzięki temu możesz uzyskać odpowiedzi na pytania w rodzaju „Czy kody rabatowe zwiększają przychody?” lub „Czy zmiana układu formularza zwiększa liczbę konwersji?”.

To z kolei daje Ci solidną podstawę do nadawania priorytetów działaniom, wprowadzania zmian i nagradzania za sukcesy.

Ucz się dalej

Zdjęcie: @rupixen z Unsplash.