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

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

Sam Dutton

Dobrze zaprojektowane formularze pomagają użytkownikom i zwiększają współczynniki konwersji. Jedna mała poprawka może mieć duże znaczenie!

Oto przykład prostej formy płatności, który przedstawia wszystkie sprawdzone metody:

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

Lista kontrolna

• Używaj znaczących elementów HTML: <form>, <input>, <label> i <button>.
• Każde pole formularza oznacz etykietą <label>.
• Używaj atrybutów elementów HTML, by uzyskiwać dostęp do wbudowanych funkcji przeglądarki, w szczególności do type i autocomplete, z odpowiednimi wartościami.
• Unikaj używania type="number" w przypadku numerów, które nie są przeznaczone do przyrostu, np. numerów kart płatniczych. Zamiast nich używaj kolumn type="text" i inputmode="numeric".
• Jeśli dla elementu input, select lub textarea dostępna jest odpowiednia wartość autouzupełniania, użyj jej.
• Aby ułatwić przeglądarkom autouzupełnianie formularzy, podaj stabilne wartości atrybutów wejściowych name i id, które nie zmieniają się pomiędzy ładowaniem stron a wdrożeniami witryny.
• Wyłącz przyciski przesyłania, gdy ich klikniesz.
• Weryfikuj dane podczas wpisywania formularza, a nie tylko podczas jego przesyłania.
• Ustaw Zapłać bez logowania jako domyślną i uprość tworzenie konta po zakończeniu płatności.
• Wyraźnie pokaż postęp procesu płatności w jasny sposób z wyraźnymi wezwaniami do działania.
• Ogranicz potencjalne punkty wyjścia z procesu płatności, usuwając zniekształcenia i rozpraszające uwagę.
• Pokaż pełne szczegóły zamówienia w momencie płatności i łatwo dostosuj zamówienie.
• Nie proś o dane, których nie potrzebujesz
• Poproś o nazwisko za pomocą jednej wartości wejściowej, chyba że masz inny powód, aby tego nie robić.
• Nie wymuszaj używania znaków łacińskich w nazwach i nazwach użytkowników.
• Dopuszczaj różne formaty adresów.
• Rozważ użycie jednego typu textarea jako adresu.
• korzystać z autouzupełniania adresu rozliczeniowego,
• W razie potrzeby umiędzynarodowij i zlokalizuj.
• Unikaj wyszukiwania adresu za pomocą kodu pocztowego.
• Użyj odpowiednich wartości autouzupełniania karty płatniczej.
• W przypadku numerów kart płatniczych używaj jednego rodzaju danych.
• Unikaj używania elementów niestandardowych, które zakłócają działanie autouzupełniania.
• Testy w terenie i w module: analityka strony, analityka interakcji i pomiar skuteczności przez użytkowników.
• Testowanie w różnych przeglądarkach, na różnych urządzeniach i na różnych platformach.

Używaj zrozumiałego kodu HTML

Użyj elementów i atrybutów stworzonych dla danego zadania:

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

Umożliwiają one korzystanie z wbudowanych przeglądarek, zwiększają dostępność i nadają treść znaczników.

Używanie elementów HTML zgodnie z oczekiwaniami

Umieść formularz w <form>

Być może zastanawiasz się, czy nie pakować elementów <input> w element <form>, tylko przesyłać dane tylko za pomocą JavaScriptu.

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

<form> HTML zapewnia dostęp do rozbudowanego zestawu funkcji wbudowanych we wszystkich nowoczesnych przeglądarkach oraz może ułatwić dostęp do witryny dla czytników ekranu i innych urządzeń wspomagających osoby z niepełnosprawnością. <form> ułatwia też tworzenie podstawowych funkcji na potrzeby starszych przeglądarek z ograniczoną obsługą JavaScriptu, a także umożliwia przesyłanie formularzy nawet w przypadku błędu w kodzie – i dla niewielkiej liczby użytkowników, którzy rzeczywiście wyłączają JavaScript.

Jeśli używasz więcej niż 1 komponentu strony, umieść każdy z nich w osobnym elemencie <form>. Jeśli np. masz wyszukiwarkę i rejestrację na tej samej stronie, umieść każdą z nich w osobnym tagu <form>.

Użyj <label>, aby oznaczyć elementy etykietami

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

Powiąż etykietę z danymi wejściowymi, nadając jej atrybutowi for tę samą wartość co id danych wejściowych.

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

Używaj 1 etykiety dla jednego elementu wejściowego: nie próbuj oznaczać etykietami wielu danych wejściowych tylko jedną etykietą. Działa to najlepiej w przypadku przeglądarek i najlepiej w przypadku czytników ekranu. Kliknięcie etykiety powoduje przeniesienie zaznaczenia na dane wejściowe, z którym jest ona powiązana, a czytniki ekranu czytają tekst etykiety, gdy etykieta lub jej wejściowa jest zaznaczona.

Używaj przycisków jako pomocnych

Używaj symbolu <button> w przypadku przycisków. Możesz też użyć elementu <input type="submit">, ale nie div ani innego losowego elementu działającego jako przycisk. Elementy przycisku są bardziej przystępne i mają wbudowaną funkcję przesyłania formularzy, a także można łatwo dostosować ich styl.

Każdy przycisk przesyłania formularza ma wartość, która opisuje jego działanie. Na każdym etapie procesu płatności użyj opisowego wezwania do działania, które pokazuje postępy i jasno sygnalizuje, że kolejny krok jest zrozumiały. Na przykład oznacz przycisk przesyłania w formularzu adresu dostawy etykietą Przejdź do płatności zamiast Dalej czy Zapisz.

Rozważ wyłączenie przycisku przesyłania, gdy użytkownik go kliknie, zwłaszcza gdy dokonuje on 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.

Z drugiej strony nie wyłączaj przycisku przesyłania w oczekiwaniu na kompletne i prawidłowe dane wejściowe użytkownika. Nie pozostawiaj na przykład wyłączonego przycisku Zapisz adres, ponieważ czegoś brakuje lub jest on nieprawidłowy. To nie pomaga użytkownikowi – może ciągle klikać przycisk i zakładać, że jest uszkodzony. Jeśli użytkownik spróbuje przesłać formularz z nieprawidłowymi danymi, wyjaśnij im, co jest nie tak i co należy zrobić, aby rozwiązać ten problem. Jest to szczególnie ważne w przypadku urządzeń mobilnych, gdy wpisanie danych jest trudniejsze, a jego brakujące lub nieprawidłowe dane mogą nie być widoczne na ekranie, gdy użytkownik spróbuje przesłać formularz.

Wykorzystaj wszystkie możliwości atrybutów HTML

Ułatw użytkownikom wpisywanie danych

Użyj odpowiedniego atrybutu type, aby podać właściwą klawiaturę na urządzeniu mobilnym i włączyć podstawową wbudowaną weryfikację przez przeglądarkę.

Możesz na przykład użyć type="email" jako adresów e-mail i type="tel" jako numerów telefonów.

W przypadku dat unikaj używania niestandardowych elementów select. Nieprawidłowo zaimplementowane i nie działają w starszych przeglądarkach, które zakłócają działanie autouzupełniania. W przypadku liczb takich jak rok urodzenia rozważ użycie elementu input zamiast select, ponieważ ręczne wpisanie cyfr jest łatwiejsze i mniej podatne na błędy niż wybieranie z długiej listy, zwłaszcza na urządzeniach mobilnych. Użyj inputmode="numeric", aby zadbać o właściwą klawiaturę na urządzeniu mobilnym i dodać wskazówki dotyczące weryfikacji i formatowania treści za pomocą tekstu lub symbolu zastępczego, aby mieć pewność, że użytkownik wpisuje dane w odpowiednim formacie.

Korzystaj z autouzupełniania, aby zwiększyć dostępność i pomóc użytkownikom uniknąć ponownego wpisywania danych

Używanie 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 w przypadku urządzeń mobilnych, a także pozwala uniknąć wysokich współczynników porzuceń. Autouzupełnianie ma też wiele funkcji ułatwień dostępu.

Jeśli dla danego pola formularza dostępna jest odpowiednia wartość autouzupełniania, należy ją użyć. Dokumentacja internetowa MDN zawiera pełną listę wartości i wyjaśnienie, jak ich używać.

Wartości stabilne

Adres rozliczeniowy

Domyślnie ustaw adres rozliczeniowy na taki sam jak adres dostawy. Ogranicz wzrok, podając link umożliwiający zmianę adresu rozliczeniowego (lub używając elementów summary i details), zamiast wyświetlać adres rozliczeniowy w formularzu.

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

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

Pomóż użytkownikom wpisać właściwe dane

Staraj się unikać „oszustw” klientów, ponieważ „zrobili coś nie tak”. Zamiast tego pomóż użytkownikom szybciej i łatwiej wypełniać formularze, pomagając im na bieżąco rozwiązywać problemy. W procesie płatności klienci starają się przekazać Twojej firmie pieniądze za produkt lub usługę – Twoim zadaniem jest ich pomóc, a nie kara.

Do elementów formularza możesz dodawać atrybuty ograniczeń, 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 jego wartość jest prawidłowa, podobnie jak pseudoklasy CSS :valid i :invalid, których można używać do określania stylu elementów z prawidłowymi lub nieprawidłowymi wartościami.

Na przykład ten kod HTML zawiera rok urodzenia między 1900 a 2020 rokiem. Użycie funkcji type="number" ogranicza wartości wejściowe tylko do liczb w zakresie określonym przez min i max. Jeśli spróbujesz wpisać liczbę spoza zakresu, dane wejściowe będą miały nieprawidłowy stan.

W tym przykładzie użyto parametru pattern="[\d ]{10,30}", aby sprawdzić, czy numer karty płatniczej jest prawidłowy (chociaż można było do niego dodać spacje):

Nowoczesne przeglądarki wykonują również podstawową weryfikację danych wejściowych typu email lub url.

Podczas przesyłania formularza przeglądarki automatycznie koncentrują się na polach z problematycznymi lub brakującymi wartościami wymaganymi. Obsługa JavaScriptu nie jest wymagana.

Weryfikacja w tekście i przekazywanie użytkownikowi opinii podczas wpisywania danych, zamiast podawania listy błędów po kliknięciu przycisku przesyłania. Jeśli po przesłaniu formularza musisz zweryfikować dane na swoim serwerze, wymień wszystkie znalezione problemy i wyraźnie wyróżnij wszystkie pola formularza z nieprawidłowymi wartościami. Przy każdym problematycznym polu wyświetli się 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 przeprojektować formularz.

Używaj też JavaScriptu, aby przeprowadzać dokładniejszą weryfikację, gdy użytkownicy wpisują dane i przesyłają formularz. Użyj interfejsu Constraint Validation API (który jest powszechnie obsługiwany), aby dodać niestandardową weryfikację za pomocą wbudowanego interfejsu przeglądarki w celu ustawiania zaznaczenia i wyświetlania promptów.

Więcej informacji znajdziesz w sekcji Używanie JavaScriptu do bardziej złożonej weryfikacji w czasie rzeczywistym.

Pomóż użytkownikom uniknąć utraty wymaganych danych

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

Po przesłaniu formularza nowoczesne przeglądarki automatycznie wyświetlają prośby i ustawiają fokus na polach required z brakującymi danymi. Pola wymagane możesz wyróżnić za pomocą pseudoklasy :required. Nie musisz używać JavaScriptu.

Dodaj gwiazdkę do każdego wymaganego pola i dodaj wyjaśnienie na początku formularza z wyjaśnieniem, co oznacza gwiazdka.

Uprość płatności

Zwróć uwagę na lukę w handlu mobilnym!

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

Musisz skupić się na swojej witrynie, zwłaszcza na urządzeniach mobilnych. Wiele witryn uzyskuje większy ruch z urządzeń mobilnych, ale więcej konwersji na komputerach – jest to tzw. luka w sprzedaży mobilnej. Klienci mogą po prostu preferować zakupy na komputerze, ale niższe współczynniki konwersji z urządzeń mobilnych zmniejszają wygodę użytkowników. Twoim zadaniem jest zminimalizować liczbę utraconych konwersji z urządzeń mobilnych i zmaksymalizować liczbę konwersji na komputerach. Badania dowodzą, że masz ogromne możliwości zapewniania użytkownikom większej wygody podczas korzystania z formularzy mobilnych.

Przede wszystkim użytkownicy częściej rezygnują z formularzy, które wyglądają na długie, są złożone i nie zawierają wskazówek. Jest to szczególnie ważne, gdy użytkownicy korzystają z małych ekranów, są rozproszeni lub spieszą się. Poproś o jak najmniejszą ilość danych.

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

W przypadku sklepu internetowego najprostszym sposobem na uproszczenie formularza jest ustawienie opcji „Zapłać bez logowania” jako domyślną. Nie zmuszaj użytkowników do założenia konta przed dokonaniem zakupu. Brak zezwolenia na zakup bez logowania podana jest jako główny powód porzucenia koszyka.

Możesz zaoferować rejestrację konta po dokonaniu płatności. W tym momencie masz już większość danych niezbędnych do skonfigurowania konta, więc tworzenie konta powinno być szybkie i łatwe.

Pokaż postęp płatności

Możesz sprawić, że proces płatności będzie prostszy, jeśli poinformujesz go o postępach i dowiesz się, co należy zrobić dalej. Poniższy film pokazuje, jak brytyjski sprzedawca johnlewis.com osiąga to osiągnięcie.

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

Używaj atrybutu enterkeyhint w polach wprowadzania danych w formularzu, aby ustawiać etykietę klawisza Enter na klawiaturze mobilnej. Na przykład użyj enterkeyhint="previous" i enterkeyhint="next" w formularzu wielostronicowym, enterkeyhint="done" do końcowego pola w formularzu i enterkeyhint="search" w przypadku danych wyszukiwania.

Atrybut enterkeyhint jest obsługiwany na urządzeniach z Androidem i iOS. Więcej informacji znajdziesz w przewodniku Enterkeyhint.

Ułatw użytkownikom przejście przez proces płatności i z łatwością dostosuj zamówienie, nawet na ostatnim etapie płatności. Pokaż pełne szczegóły zamówienia, a nie tylko ograniczone podsumowanie. Pozwól użytkownikom łatwo dostosować liczbę produktów na stronie płatności. Twoim priorytetem w momencie płatności jest uniknięcie zakłócania procesu konwersji.

Usuwaj niechciane elementy

Ogranicz potencjalne punkty wyjścia, usuwając niepotrzebne elementy wizualne i odwracające uwagę, np. związane z promocjami produktów. Wielu odnoszących sukcesy sprzedawców rezygnuje nawet z nawigacji i wyszukiwania przy kasie.

Skup się na prezentacji. Nie jest to czas, aby kusić użytkowników, aby zrobili coś innego.

W przypadku powracających użytkowników możesz jeszcze bardziej uprościć proces płatności, ukrywając dane, których nie potrzebują. Na przykład możesz wyświetlać adres dostawy w postaci zwykłego tekstu (a nie w formularzu) i umożliwiać użytkownikom zmienianie go za pomocą linku.

Ułatw wpisywanie imienia i nazwiska oraz adresu

Proś tylko o dane, których potrzebujesz

Zanim zaczniesz kodować formularze imienia i nazwiska oraz adresu, sprawdź, jakie dane są wymagane. Nie proś o dane, których nie potrzebujesz! Najprostszym sposobem na uproszczenie formularza jest usunięcie zbędnych pól. Takie podejście pomaga nam też chronić prywatność klientów, a także pozwala obniżyć koszty i odpowiedzialności za korzystanie z danych zaplecza.

Użyj pojedynczej nazwy

Zezwalaj użytkownikom na wpisywanie imion i nazwisk przez jedno pole, chyba że masz odpowiedni powód do osobnego przechowywania imion i nazwisk, imion i nazwisk, wyrazów wyróżniających lub innych części imion i nazwisk. Użycie tej samej nazwy sprawia, że formularze są mniej złożone, umożliwiają wycinanie i wklejanie oraz upraszcza autouzupełnianie.

W szczególności, chyba że masz powód, aby tego nie robić, nie próbuj dodawać osobnego tekstu dla prefiksu lub tytułu (np. Mrs, Dr lub Lord). Użytkownicy mogą to wpisać przy użyciu swojego imienia i nazwiska. Poza tym autouzupełnianie honorific-prefix nie działa obecnie w większości przeglądarek, dlatego dodanie pola prefiksu nazwy lub tytułu może negatywnie wpłynąć na działanie autouzupełniania formularza adresowego u większości użytkowników.

Włącz autouzupełnianie nazw

Aby podać imię i nazwisko, użyj fragmentu name:

<input autocomplete="name" ...>

Jeśli masz dobry powód, by dzielić nazwy, 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

Warto zweryfikować wpisane imię i nazwisko lub ograniczyć dopuszczalne znaki w danych imion i nazwisk. Przy korzystaniu z liter alfabetu musisz jednak zachować jak najbardziej restrykcyjne warunki. Powiedzenie, że Twoje imię jest „nieprawidłowe”, jest niegrzeczne.

W celu weryfikacji unikaj używania wyrażeń regularnych, które pasują tylko do znaków łacińskich. Kod tylko w języku łacińskim wyklucza użytkowników, których imiona i nazwiska lub adresy zawierają znaki spoza alfabetu łacińskiego. Zamiast tego włącz dopasowywanie liter w standardzie Unicode i upewnij się, że backend obsługuje Unicode bezpiecznie zarówno jako dane wejściowe, jak i wyjściowe. Unicode w wyrażeniach regularnych jest dobrze obsługiwany przez nowoczesne przeglądarki.

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

Zezwalaj na różne formaty adresu

Projektując formularz adresowy, pamiętaj o oszałamiającej różnorodności formatów adresów – nawet w obrębie jednego kraju. Należy uważać, aby nie podejmować założeń dotyczących „normalnych” adresów. (W razie potrzeby zajrzyj do UK Address Oddities!)

Elastyczne formularze adresowe

Nie zmuszaj użytkowników do wciskania adresu w polach formularza, które się nie mieszczą.

Na przykład nie wymagaj od siebie wpisania numeru domu i nazwy ulicy, ponieważ wiele adresów nie korzysta z tego formatu, a niepełne dane mogą zakłócać autouzupełnianie w przeglądarce.

Zwróć szczególną uwagę na pola adresu required. Na przykład adresy w dużych miastach w Wielkiej Brytanii nie mają numeru hrabstwa, ale wiele witryn zmusza użytkowników do jego wpisywania.

Użycie dwóch elastycznych wierszy adresu sprawdza się w przypadku różnych formatów adresu.

<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 wypróbować tę funkcję, remiksując i edytując wersję demonstracyjną umieszczoną poniżej.

Rozważ użycie jednego obszaru tekstowego jako adresu

Najbardziej elastycznym rozwiązaniem w przypadku adresów jest podanie jednego atrybutu textarea.

Metoda textarea pasuje do każdego formatu adresów i świetnie sprawdza się przy wycinaniu i wklejaniu. Pamiętaj jednak, że może nie spełniać wymagań dotyczących danych, a użytkownicy mogą nie korzystać z autouzupełniania, jeśli wcześniej używali tylko formularzy address-line1 i address-line2.

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

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

Umiędzynarodowienie i lokalizowanie formularzy adresowych

Szczególnie w przypadku formularzy adresowych należy wziąć pod uwagę internacjonalizację i lokalizację zależnie od tego, gdzie znajdują się użytkownicy.

Pamiętaj, że nazwy części adresu różnią się od siebie w różnych formatach, nawet w obrębie tego samego języka.

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

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

Dostosowanie formularzy adresowych dla wielu języków może być konieczne w przypadku Twojej witryny, ale wystarczające może się okazać korzystanie z technik, które pozwalają zmaksymalizować elastyczność formularzy (jak opisano powyżej). Jeśli nie lokalizować formularzy adresowych, pamiętaj o najważniejszych priorytetach związanych z różnymi formatami adresów: * Unikaj ogólników w zakresie elementów adresu, takich jak konieczność podania nazwy ulicy lub numeru domu. * W miarę możliwości unikaj używania w tych polach wartości required. Na przykład adresy w wielu krajach nie mają kodu pocztowego, a adresy wiejskie – nie mają nazwy ulicy ani ulicy. * Używaj nazw inkluzywnych: „Kraj/region”, a nie „Kraj”, „Kod pocztowy”, a nie „ZIP”.

Zachowaj elastyczność. Prosty przykład adresu z przykładu powyżej można dostosować tak, aby działał w wielu językach.

Unikaj wyszukiwania adresu pocztowego

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

Sugestia dotycząca adresów pocztowych nie działa we wszystkich krajach, a w niektórych regionach kody pocztowe mogą zawierać dużą liczbę potencjalnych adresów.

Trudno użytkownikom wybrać z długiej listy adresów, zwłaszcza na urządzeniach mobilnych, gdy są pospieszeni lub zestresowani. Umożliwienie użytkownikom skorzystania z autouzupełniania jest łatwiejsze i mniej podatne na błędy – wystarczy jedno kliknięcie lub wpisanie całego adresu.

Uprość formularze płatności

Formularz płatności to najważniejszy element procesu płatności. Niewłaściwy wygląd formularza płatności jest częstą przyczyną porzuceń koszyka. Diabe tkwi w szczegółach: drobne 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 wpisywanie danych.

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

Sprawdź, czy w formularzach karty płatniczej masz 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ą pomóc użytkownikom, bezpiecznie przechowując dane karty płatniczej i poprawnie wpisując dane formularza. Bez autouzupełniania użytkownicy mogą być bardziej skłonni do przechowywania danych karty płatniczej lub przechowywania ich w niebezpieczny sposób na urządzeniu.

Unikaj używania elementów niestandardowych w przypadku dat kart płatniczych

Nieprawidłowo zaprojektowane elementy niestandardowe mogą zakłócać przepływ płatności, zakłócając działanie autouzupełniania. Nie będą też one działać w starszych przeglądarkach. Jeśli autouzupełnianie zawiera wszystkie inne dane karty płatniczej, ale użytkownik musi znaleźć fizyczną kartę płatniczą, aby sprawdzić datę ważności, ponieważ autouzupełnianie nie działało z elementem niestandardowym, prawdopodobnie przegrasz. Rozważ użycie standardowych elementów HTML i nadaj im odpowiedni styl.

Podanie jednego rodzaju danych karty płatniczej i numeru telefonu

W przypadku danych karty płatniczej i numeru telefonu należy użyć jednego rodzaju danych: nie dziel numeru na części. Ułatwia to użytkownikom wpisywanie danych, ułatwia weryfikację i pozwala przeglądarkom na autouzupełnianie. Rozważ wykonanie tych samych czynności w przypadku innych danych liczbowych, np. kodów PIN i kodów bankowych.

Dokładnie sprawdź

Weryfikację wprowadzonych danych należy przeprowadzać zarówno w czasie rzeczywistym, jak i przed przesłaniem formularza. Możesz to zrobić, dodając atrybut 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 zaznaczy dane wejściowe. Nie musisz używać JavaScriptu.

Wyrażenie regularne pattern musi jednak być wystarczająco elastyczne, by obsłużyć zakres długości numerów kart płatniczych: od 14 (lub mniej) do 20 (lub więcej). Więcej informacji o strukturze numerów kart płatniczych znajdziesz w witrynie LDAPwiki.

Zezwalaj użytkownikom na dodawanie spacji podczas wpisywania nowego numeru karty płatniczej, ponieważ tak są one wyświetlane na kartach fizycznych. Jest to wygodniejsze dla użytkownika (nie trzeba będzie mówić mu, że coś zrobiła nie tak”), które nie zakłócą procesu konwersji, a bez spacji przed przetwarzaniem można łatwo usunąć spacje z liczby.

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

Szczególnie ważne jest przetestowanie formularzy adresowych i płatności na najpopularniejszych dla użytkowników platformach, 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 umiejscowieniem. BrowserStack umożliwia bezpłatne testowanie projektów open source na różnych urządzeniach i w różnych przeglądarkach.

Wdrażanie analityki i RUM

Lokalne testowanie łatwości obsługi i skuteczności może być pomocne, ale potrzebne są rzeczywiste dane, które pozwolą nam zrozumieć, jak użytkownicy korzystają z formularzy płatności i jak rozwiązywać problemy.

W tym celu potrzebujesz statystyk i monitorowania użytkowników, czyli danych o wrażeniach użytkowników, takich jak czas wczytywania stron płatności lub czas realizacji płatności:

• Statystyki strony: wyświetlenia strony, współczynniki odrzuceń i wyjścia dla każdej strony z formularzem.
• Analiza interakcji: ścieżki celów i zdarzenia wskazują, gdzie użytkownicy rezygnują z procesu płatności i jakie działania podejmują podczas interakcji z formularzami.
• Wydajność witryny: dane nastawione na użytkowników powiedzą Ci, czy strony płatności wczytują się wolno, a jeśli tak, to co jest tego przyczyną.

Statystyki strony, analityka interakcji i pomiar rzeczywistej skuteczności użytkowników stają się szczególnie wartościowe w połączeniu z dziennikami serwera, danymi o konwersjach i testami A/B. Dzięki temu możesz uzyskać odpowiedzi na pytania, np. czy kody zniżkowe zwiększają przychody albo czy zmiana układu formularza zwiększa liczbę konwersji.

To z kolei daje solidną podstawę, na której można priorytetowo traktować wysiłek, wprowadzać zmiany i satysfakcjonować sukces.

Ucz się dalej

• Sprawdzone metody dotyczące formularza logowania
• Sprawdzone metody dotyczące formularza rejestracyjnego
• Weryfikowanie numerów telefonów w internecie za pomocą interfejsu WebOTP API
• Tworzenie niesamowitych formularzy
• Sprawdzone metody projektowania formularzy mobilnych
• Ulepszone elementy sterujące formularzy
• Tworzenie łatwo dostępnych formularzy
• Uproszczenie procesu rejestracji za pomocą interfejsu Credential Management API
• W publikacji Frank's Compulsive Guide to Postal Addresses (Obowiązkowy przewodnik po adresach pocztowych) znajdziesz przydatne linki i obszerne wskazówki dotyczące formatów adresów w ponad 200 krajach.
• Listy krajów zawierają narzędzie do pobierania kodów krajów i ich nazw w wielu językach i w wielu formatach.

Autor zdjęcia: @rupixen w: Unsplash.