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

Maksymalizuj liczbę konwersji, ułatwiając użytkownikom szybkie i łatwe wypełnianie formularzy adresowych i płatności.

Sam Dutton

Dobrze zaprojektowane formularze ułatwiają użytkownikom wypełnianie ich i zwiększają współczynniki konwersji. Jedna drobna poprawka może wiele zmienić!

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

Oto przykład prostego formularza adresowego, który przedstawia 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.

<form> HTML daje dostęp do zaawansowanego zestawu wbudowanych funkcji we wszystkich nowoczesnych przeglądarkach i ułatwia dostęp do witryny dla czytników ekranu i innych urządzeń wspomagających. <form> ułatwia też tworzenie podstawowych funkcji na potrzeby starszych przeglądarek z ograniczoną obsługą JavaScriptu oraz umożliwianie przesyłania formularzy nawet wtedy, gdy w kodzie występują błędy, a także w przypadku niewielkiej liczby użytkowników, którzy faktycznie wyłączają 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, przypisując atrybucie for etykiety tę samą wartość co atrybucie 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 funkcja działa najlepiej w przeglądarkach, a najlepiej w przypadku czytników ekranu. Kliknięcie etykiety powoduje przejście do pola, z którym jest ona powiązana, a czytniki ekranu informują, czy etykieta lub dane wejściowe etykiety zostaną 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 wszystko działa prawidłowo. Może to zakłócić proces płatności i zwiększyć obciążenie serwera.

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.

Wykorzystywanie wszystkich możliwości 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.

Dwa 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 funkcji inputmode="numeric", aby ustawić właściwą klawiaturę na urządzeniu mobilnym i dodać wskazówki dotyczące weryfikacji oraz formatowania w formie tekstu lub obiektu zastępczego, aby mieć pewność, że użytkownik wpisuje 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 ustaw adres rozliczeniowy na taki sam jak adres dostawy. Ogranicz wizualne bałagan, podając link umożliwiający edycję adresu rozliczeniowego (lub użyj elementów summary i details), zamiast wyświetlać adres rozliczeniowy w formularzu.

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

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ć „wywoływania” klientów, ponieważ „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, aby określić 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 stylizacji elementów 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.

Podczas przesyłania formularza przeglądarki automatycznie ustawiają zaznaczenie pól z problematycznymi lub brakującymi wartościami wymaganymi. 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 weryfikacja wbudowana w przeglądarce.

Weryfikuj dane w ramach formularza i przekazuj użytkownikowi informacje zwrotne podczas wpisywania 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. Za pomocą interfejsu Constraint Validation API (który jest powszechnie obsługiwany) możesz dodać niestandardową weryfikację za pomocą wbudowanego interfejsu przeglądarki do ustawiania zaznaczenia i wyświetlania 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 z wyjaśnieniem, co ona oznacza.

Uprość płatności

Uważaj na różnice w handlu mobilnym

Wyobraź sobie, że użytkownicy mają budżet na zmęczenie. Wykorzystaj go, a Twoi użytkownicy opuszczą stronę.

Trzeba zadbać o to, by klienci nie przejmowali się tym, co robią, i koncentrowali się na nich, 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 nieprawidłowego wrażenia użytkownika. Twoim zadaniem jest zminimalizowanie utraty konwersji na urządzeniach mobilnych i maksymalizowanie konwersji na komputerach. Badania pokazują, że istnieje ogromna szansa na lepsze formularze na urządzeniach mobilnych.

Użytkownicy najchętniej rezygnują z wypełniania formularzy, które wydają się długie, skomplikowane i nie mają wyraźnego celu. Dzieje się tak zwłaszcza wtedy, gdy użytkownicy korzystają z małych ekranów, są rozproszeni lub spieszą się. Proś o jak najmniej danych.

Ustaw domyślną stronę płatności dla gości

W przypadku sklepu internetowego najprostszym sposobem na zmniejszenie tarcia związanego z formularzem 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 porzuceń koszyka podczas płatności.
Z baymard.com/checkout-usability

Możesz zaoferować rejestrację konta po zakończeniu procesu płatności. Masz już większość danych potrzebnych do skonfigurowania konta, więc tworzenie konta 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 realizacji płatności używaj nagłówków stron i opisowych wartości przycisków, aby jasno określić, co trzeba zrobić teraz i jaki jest kolejny etap płatności.

Nadawaj przyciskom formularza zrozumiałe nazwy, które pokazują, co dalej.

Używaj atrybutu enterkeyhint do wprowadzania danych w formularzu, aby ustawić etykietę klawisza Enter na klawiaturze mobilnej. Na przykład w formularzu wielostronicowym używaj znaków enterkeyhint="previous" i enterkeyhint="next", ostatnich danych wejściowych w formularzu – enterkeyhint="done", a jako wyszukiwanego – enterkeyhint="search".

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 kolejnych etapów procesu płatności oraz ułatwianie wprowadzania zmian w zamówieniu, nawet na etapie ostatniej 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. W momencie płatności Twoim priorytetem jest unikanie przerw w dokonywaniu konwersji.

Usuń elementy rozpraszające uwagę

Ogranicz potencjalne punkty wyjścia, usuwając wizualne elementy rozpraszające uwagę, takie jak promocje produktów. Wielu odnoszących sukcesy 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.

Zadbaj o to, aby Twoja podróż była ukierunkowana. 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ą promocję na BEZPŁATNE NAKLEJKI.
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 sekcją „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 również dobre dla ochrony prywatności klientów oraz może zmniejszyć koszty związane z danymi backendu i zmniejszyć odpowiedzialnością.

Użyj 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 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. Poza tym autouzupełnianie honorific-prefix nie działa obecnie w większości przeglądarek, więc dodanie pola zawierającego prefiks nazwy lub tytułu zakłóci działanie autouzupełniania formularza adresowego u większości użytkowników.

Włącz autouzupełnianie nazw

Wpisz name jako imię i nazwisko:

<input autocomplete="name" ...>

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

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

Zezwalaj na używanie nazw międzynarodowych

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. Wybór języka łacińskiego wyklucza użytkowników, którzy mają nazwy lub adresy zawierające znaki nienależące do alfabetu łacińskiego. Zezwól zamiast tego na dopasowywanie liter w standardzie Unicode i upewnij się, że Twój backend obsługuje kodowanie Unicode zarówno na danych wejściowych, jak i wyjściowych. 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} \-]+" ...>
Dopasowanie liter Unicode w porównaniu do dopasowania liter tylko w alfabecie łacińskim.

Akceptuj 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. Należy uważać, aby nie dojść do założeń dotyczących „normalnych” adresów. (jeśli nie jesteś przekonany, sprawdź dziwactwa adresowe 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" ...>

Dodawanie etykiet 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 elastyczną opcją w przypadku adresów jest podanie jednego elementu textarea.

Metoda textarea pasuje do każdego formatu adresu. Świetnie nadaje się do wycinania i wklejania. Pamiętaj jednak, że może nie spełniać wymagań dotyczących danych, a użytkownicy mogą pominąć autouzupełnianie, jeśli wcześniej używali tylko formularzy z atrybutami address-line1 i address-line2.

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

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

Umiędzynarodowienie i lokalizacja formularzy adresowych

W przypadku formularzy adresowych jest szczególnie ważne, aby wziąć pod uwagę internacjonalizację i lokalizację w zależności od tego, gdzie znajdują się użytkownicy.

Pamiętaj, że nazwy części adresu są różne, podobnie jak ich formaty, nawet w tym samym języku.

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

Prezentowanie formularza, który nie odpowiada Twojemu adresowi lub nie zawiera oczekiwanych słów, może być irytujący lub zagadkowy.

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 wiejskie mogą nie mieć nazwy ulicy. * 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ć sensowne 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ć dużo adresów

Użytkownikom trudno jest wybierać pozycje z długiej listy adresów, zwłaszcza na urządzeniach mobilnych, gdy są zmęczeni 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 wpisanie nazwy umożliwia wpisywanie adresu 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 w taki sposób, aby ułatwić użytkownikom wprowadzanie danych.

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

Pamiętaj, by w formularzach kart płatniczych dodać odpowiednie wartości autocomplete, w tym numer karty płatniczej, imię i nazwisko na karcie oraz miesiąc i rok wygaśnięcia:

  • 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 autouzupełniania użytkownicy mogą z większym prawdopodobieństwem przechowywać dane kart płatniczych lub przechowywać je w niebezpieczny sposób na swoich urządzeniach.

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

Nieprawidłowo zaprojektowane elementy niestandardowe mogą zakłócać proces płatności ze względu na nieprawidłowe działanie 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żywaj jednego pola do wprowadzania danych 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. Warto zrobić to samo w przypadku innych danych liczbowych, np. kodu PIN lub kodu banku.

Zrzut ekranu z formularzem płatności, w którym pole karty kredytowej jest podzielone na 4 elementy wejściowe.
Nie używaj kilku pól tekstowych do wpisywania numeru karty kredytowej.

Zweryfikuj dokładnie

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. JavaScript nie jest wymagany.

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 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 w przypadku mniejszych widocznych obszarów na urządzeniach mobilnych, 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.

W tym celu potrzebujesz usług analitycznych i monitorowania rzeczywistych użytkowników – czyli danych o wrażeniach rzeczywistych użytkowników, takich jak czas wczytywania stron płatności czy czas realizacji płatności:

  • Statystyki stron: wyświetlenia stron, współczynniki odrzuceń i wyjścia z każdej strony zawierającej formularz.
  • Analiza interakcji: ścieżki celów i zdarzenia wskazują, w którym miejscu użytkownicy rezygnują z procesu płatności i jakie działania podejmują podczas interakcji z Twoimi formularzami.
  • Skuteczność witryny: dane dotyczące użytkowników informują o tym, czy strony płatności wczytują się wolno, a jeśli tak, to co jest ich przyczyną.

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.