Jak poprawić UX formularza rozliczeniowego w jeden dzień?

Strona kasy to ostatnia strona, którą odwiedza użytkownik, zanim ostatecznie zdecyduje się na dokonanie zakupu w Twojej witrynie. To miejsce, w którym kupujący okna zamieniają się w płacących klientów. Jeśli chcesz pozostawić dobre wrażenie, powinieneś zadbać o optymalną użyteczność formularza rozliczeniowego i ulepszać go tam, gdzie jest to możliwe.

W mniej niż jeden dzień możesz dodać kilka prostych i przydatnych funkcji do swojego projektu, aby formularz rozliczeniowy był przyjazny dla użytkownika i łatwy do wypełnienia. Dostępna jest wersja demonstracyjna ze wszystkimi funkcjami omówionymi poniżej. Możesz znaleźć jego kod w repozytorium GitHub.

Dalsze czytanie na SmashingMag:

• Zmniejszenie porzuconych koszyków w e-commerce
• Walidacja pola formularza: podejście tylko z błędami
• Podstawowe wytyczne projektowania kas w handlu elektronicznym
• Obszerny przewodnik po użyteczności formularzy internetowych

Dane karty kredytowej należą do najczęściej poprawianych pól w formularzach. Na szczęście w dzisiejszych czasach prawie każda popularna przeglądarka ma funkcję autouzupełniania, która pozwala użytkownikom przechowywać dane karty w przeglądarce i szybciej wypełniać pola formularzy. Ponadto, od wersji iOS 8, mobilni użytkownicy Safari mogą skanować informacje o swojej karcie aparatem iPhone'a i automatycznie wpisywać numer karty, datę ważności i nazwę. Autouzupełnianie jest proste, przejrzyste i wbudowane w HTML5, więc najpierw dodamy je do naszego formularza.

Zarówno autouzupełnianie, jak i skanowanie kart działają tylko z formularzami, które mają specjalne atrybuty: autocomplete dla nowoczesnych przeglądarek (wymienionych w standardzie HTML5) i name dla przeglądarek bez obsługi HTML5.

Uwaga : dostępna jest wersja demonstracyjna ze wszystkimi funkcjami opisanymi poniżej. Możesz znaleźć jego kod w repozytorium GitHub .

Karty kredytowe mają określone atrybuty autouzupełniania. Dla autocomplete :

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

Na name :

• ccname
• cardnumber
• cvc
• ccmonth
• ccyear
• expdate
• card-type
• cvc
  

Aby użyć autouzupełniania, należy dodać odpowiednie atrybuty autocomplete i name dla elementów wejściowych w pliku index.html :

 <input type="text" class="card__input card__input_number" placeholder="XXXX XXXX XXXX XXXX" pattern="[0-9]{14,23}" required autofocus autocomplete="cc-number" name="cardnumber"> <input type="text" class="card__input card__input_date card__input_month" placeholder="MM" pattern="[0-9]{1,2}" required autocomplete="cc-exp-month" name="ccmonth"> <input type="text" class="card__input card__input_date card__input_year" placeholder="YYYY" pattern="[0-9]{2,4}" required autocomplete="cc-exp-year" name="ccyear"> <input type="text" class="card__input card__input_cardholder" placeholder="CARDHOLDER NAME" required autocomplete="cc-name" name="ccname">

Nie zapomnij użyć placeholder w polach wejściowych, aby pomóc użytkownikom zrozumieć wymagane formaty danych. Możemy zapewnić walidację danych wejściowych za pomocą atrybutów HTML5: pattern (opartego na wyrażeniach regularnych JavaScript) i required . Na przykład, jeśli w polu pattern=”[0-9\s]{14,23}” required atrybuty, użytkownik nie będzie mógł przesłać formularza, jeśli pole jest puste, ma wartość nienumeryczną lub -symbol spacji lub jest krótszy niż 14 symboli lub dłuższy niż 23 symbole.

Gdy użytkownik zapisze dane swojej karty w przeglądarce, możemy zobaczyć, jak to działa:

Zwróć uwagę, że używanie jednego pola dla daty wygaśnięcia ( MM/YYYY ) nie jest zalecane, ponieważ Safari wymaga oddzielnych pól miesiąca i roku do autouzupełniania.

Oczywiście atrybuty autouzupełniania i autouzupełniania są szeroko stosowane nie tylko w formularzach rozliczeniowych, ale także w przypadku nazwisk, adresów e-mail i adresów pocztowych oraz haseł. Możesz zaoszczędzić czas użytkownika i uczynić go jeszcze szczęśliwszym, poprawnie używając tych atrybutów w swoich formularzach.

Mimo że mamy teraz autouzupełnianie, Google Payments i Apple Wallet, wielu użytkowników nadal woli wprowadzać dane karty kredytowej ręcznie i nikt nie jest bezpieczny przed popełnieniem literówki w 16-cyfrowym numerze. Długie liczby są trudne do odczytania, jeszcze bardziej bolesne do napisania i prawie niemożliwe do zweryfikowania.

Aby użytkownicy czuli się komfortowo ze swoim długim numerem karty, możemy podzielić go na czterocyfrowe grupy, dodając do naszego projektu prostą bibliotekę VanillaMasker firmy BankFacil. Wprowadzone dane zostaną przekształcone w zamaskowany ciąg. Możemy więc dodać niestandardowy wzór ze spacjami po co czwartej cyfrze numeru karty, dwucyfrowy wzór dla miesiąca wygaśnięcia i czterocyfrowy wzór dla roku wygaśnięcia. VanillaMasker może również weryfikować formaty danych: jeśli do identyfikatora przekazaliśmy tylko „9” (domyślna liczba maskera), to wszystkie znaki nieliczbowe zostaną usunięte po wprowadzeniu.

 npm install vanilla-masker --save

W naszym index.js zaimportujmy bibliotekę i użyjmy jej z jednym ciągiem dla każdego pola:

 import masker from 'vanilla-masker'; const cardNumber = document.getElementById('card__input_number'); const cardMonth = document.getElementById('card__input_month'); const cardYear = document.getElementById('card__input_year'); masker(cardNumber).maskPattern('9999 9999 9999 9999 99'); masker(cardMonth).maskPattern('99'); masker(cardYear).maskPattern('9999');

W ten sposób cyfry numeru karty w naszym formularzu zostaną oddzielone, jak na prawdziwej karcie:

Masker usunie znaki o niepoprawnym typie wartości lub długości, chociaż nasza walidacja HTML powiadomi użytkownika o nieprawidłowych danych dopiero po przesłaniu formularza. Ale możemy również sprawdzić poprawność numeru karty podczas jego wpisywania. Czy wiesz, że wszystkie plastikowe numery kart kredytowych są generowane zgodnie z prostym i skutecznym algorytmem Luhna? Została stworzona w 1954 roku przez Hansa Petera Luhna, a następnie wyznaczona jako międzynarodowy standard. Możemy uwzględnić algorytm Luhna, aby wstępnie zweryfikować pole wprowadzania numeru karty i ostrzec użytkownika o literówce.

Aby to zrobić, możemy użyć malutkiego pakietu fast-luhn npm, zaadaptowanego z istoty Shirtless Kirk. Musimy go dodać do zależności naszego projektu:

 npm install fast-luhn --save

Aby użyć fast-luhn, zaimportujemy go do modułu i po prostu luhn(number) w zdarzeniu wejściowym, aby sprawdzić, czy liczba jest poprawna. Na przykład dodajmy klasę card__input_invalid , aby zmienić color tekstu outline i pola, gdy użytkownik popełnił przypadkowy błąd i sprawdzenie nie zostało wykonane. Zauważ, że VanillaMasker dodaje spację po każdej czterocyfrowej grupie, więc przed wywołaniem lunh musimy przekonwertować wprowadzoną wartość na zwykłą liczbę bez spacji za pomocą metod split i join .

Wynikiem jest kod, który wygląda tak:

 import luhn from 'fast-luhn'; const cardNumber = document.getElementById('card-number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; if (number.length >= 14) { const isLuhnCheckPassed = luhn(number.split(' ').join('')); cardNumber.classList.toggle('card__input_invalid', !isLuhnCheckPassed); cardNumber.classList.toggle('card__input_valid', isLuhnCheckPassed); } else { cardNumber.classList.remove('card__input_invalid', 'card__input_valid'); } });

Aby zapobiec luhn , gdy użytkownik pisze, wywołujmy go tylko wtedy, gdy wprowadzona liczba jest tak długa, jak minimalna długość ze spacjami (14 znaków, w tym 12 cyfr) lub dłuższa, albo usuń klasę card__input_invalid .

Oto przykłady walidacji w akcji:

Algorytm Luhna jest również używany w przypadku niektórych numerów kart rabatowych, numerów IMEI, numerów identyfikatorów dostawcy krajowego w USA i numerów ubezpieczenia społecznego w Kanadzie. Tak więc ten pakiet nie ogranicza się do kart kredytowych.

Wielu użytkowników chce sprawdzić dane swojej karty na własne oczy, nawet jeśli wiedzą, że formularz jest weryfikowany. Ale ludzie postrzegają rzeczy w sposób, który sprawia, że ​​porównywanie różnie stylizowanych liczb jest trochę mylące. Ponieważ chcemy, aby interfejs był prosty i intuicyjny, możemy pomóc użytkownikom, pokazując czcionkę, która wygląda podobnie do tej, którą znaleźliby na prawdziwej karcie. Ponadto czcionka sprawi, że nasz formularz wprowadzania danych podobny do karty będzie wyglądał bardziej realistycznie i odpowiednio.

Dostępnych jest kilka bezpłatnych czcionek kart kredytowych:

• Halter, laboratoria apostroficzne
• Kredyt, czcionki typodermiczne
• Karta kredytowa typu K (bezpłatna do użytku osobistego)

Użyjemy Haltera. Najpierw pobierz czcionkę, umieść ją w folderze projektu i utwórz regułę CSS3 @font-face w style.css :

 @font-face { font-family: Halter; src: url(font/HALTER__.ttf); }

Następnie po prostu dodaj go do reguły font-family dla klasy .card-input :

 .card-input { color: #777; font-family: Halter, monospace; }

Nie zapominaj, że jeśli wprowadzisz CSS w pliku JavaScript z pakietem webpack, będziesz musiał dodać file-loader :

 npm install file-loader --save

I dodaj file-loader pliki dla typów plików czcionek w webpack.config.js :

 module: { loaders: [ { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file', }], },

Wynik wygląda całkiem nieźle:

Możesz uczynić go jeszcze bardziej wyrafinowanym, jeśli chcesz, z efektem wypukłości, używając podwójnego text-shadow i półprzezroczystości w color tekstu:

 .card-input { color: rgba(84,110,122,0.5); text-shadow: -0.75px -0.75px white, 0.75px 0.75px 0 black; font-family: Halter, monospace; } 

Wreszcie, możesz mile zaskoczyć klientów, dodając do formularza funkcję kolorowania. Każdy bank ma swój własny kolor marki, który zazwyczaj dominuje na karcie tego banku. Aby formularz rozliczeniowy był jeszcze bardziej przyjazny dla użytkownika, możemy użyć tego koloru i wydrukować nazwę banku nad polami formularza (odpowiadającą miejscu, w którym widnieje na prawdziwej karcie). Pomoże to również użytkownikowi uniknąć literówki w numerze i upewnić się, że wybrał właściwą kartę.

Bank karty każdego użytkownika możemy zidentyfikować po pierwszych sześciu cyfrach, które zawierają numer identyfikacyjny wystawcy (IIN) lub numer identyfikacyjny banku (BIN). Banks DB by Ramoona to baza danych, która pobiera nazwę banku i kolor marki z tego prefiksu. Autor założył demo Banks DB.

Ta baza danych jest oparta na społeczności, więc nie zawiera całego banku na świecie. Jeśli bank użytkownika nie jest reprezentowany, miejsce na nazwę banku będzie puste, a tło będzie miało domyślny kolor ( #fafafa ).

Banks DB zakłada jeden z dwóch sposobów jego wykorzystania: za pomocą PostCSS lub CSS w JavaScript. Używamy go z PostCSS. Jeśli jesteś nowy w PostCSS, jest to dobry powód, aby zacząć z niego korzystać. Możesz dowiedzieć się więcej o PostCSS w oficjalnej dokumentacji lub w artykule Drew Minnsa „An Introduction to PostCSS”.

Musimy zainstalować wtyczkę PostCSS Banks DB, aby ustawić szablon CSS dla Banks DB i zainstalować wtyczkę PostCSS Contrast, aby poprawić czytelność nazwy banku:

 npm install banks-db postcss-banks-db postcss-contrast --save

Następnie dodamy te nowe wtyczki do naszego procesu PostCSS zgodnie z pakietem modułów i konfiguracją ładowania używaną w naszym projekcie. Na przykład za pomocą Webpack i postcss-load-config, po prostu dodaj nowe wtyczki do pliku .postcssrc .

Następnie w naszym pliku style.css musimy dodać nowy szablon reguł klasy dla Banks DB z wtyczką postcss-contrast:

 @banks-db-template { .card_bank-%code% { background-color: %color%; color: contrast(%color%); } }

Moglibyśmy również ustawić długie transition w całej klasie .card , aby płynnie pojawiać się i zanikać kolor tła i tekstu, aby nie zaskoczyć użytkowników nagłą zmianą:

 .card { … transition: background 0.6s, color 0.6s; }

Teraz zaimportuj Banks DB w index.js i użyj go w detektorze zdarzeń input . Jeśli BIN jest reprezentowany w bazie, dodamy do formularza klasę zawierającą nazwę banku, aby wstawić nazwę i zmienić tło formularza.

 import banksDB from 'banks-db'; const billingForm = document.querySelector('.card'); const bankName = document.querySelector('.card__bank-name'); const cardNumber = document.getElementById('card__input_number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; const bank = banksDB(number); if (bank.code) { billingForm.classList.add(`card_bank-${(bank.code || 'other')}`); bankName.innerText = bank.country === 'ru' ? bank.localTitle : bank.engTitle; } else { billingForm.className = 'card'; bankName.innerText = ''; } });

Jeśli używasz webpacka, dodaj json-loader dla rozszerzenia pliku .json do konfiguracji webpacka, aby poprawnie wprowadzić bazę danych do pakietu.

Oto działający przykład Banks DB:

Jeśli nie widzisz żadnego efektu z kartą bankową, możesz otworzyć sprawę lub dodać swój bank do bazy danych.

Wniosek

Udoskonalenie formularza rozliczeniowego może sprawić, że korzystanie z niego stanie się znacznie bardziej intuicyjne, a co za tym idzie, zapewnić wygodę użytkowania i zwiększyć zaufanie do Twojego produktu. To ważna część aplikacji internetowych. Możemy to szybko i łatwo poprawić, korzystając z tych prostych funkcji:

• odpowiednie atrybuty autocomplete i name do autouzupełniania,
• atrybut placeholder informujący użytkownika o formacie wejściowym,
• pattern i require atrybutów, aby zapobiec nieprawidłowemu przesłaniu formularza,
• VanillaMasker do oddzielenia cyfr karty,
• fast-luhn w celu weryfikacji numeru karty,
• Czcionka Halter ułatwiająca porównanie,
• Banki DB dla ładniejszej prezentacji kolorów.

Zauważ, że tylko Banks DB wymaga pakietu modułów; możesz użyć innych w prostym skrypcie. Dodanie wszystkich tych funkcji do strony kasy najprawdopodobniej zajęłoby mniej niż jeden dzień.