So verbessern Sie die UX Ihres Abrechnungsformulars an einem Tag

Die Checkout-Seite ist die letzte Seite, die ein Benutzer besucht, bevor er sich endgültig entscheidet, einen Kauf auf Ihrer Website abzuschließen. Hier werden aus Schaufensterbummeln zahlende Kunden. Wer einen guten Eindruck hinterlassen möchte, sollte für eine optimale Usability des Abrechnungsformulars sorgen und es wo immer möglich verbessern.

In weniger als einem Tag können Sie Ihrem Projekt einige einfache und nützliche Funktionen hinzufügen, um Ihr Abrechnungsformular benutzerfreundlich und einfach auszufüllen. Eine Demo mit allen unten beschriebenen Funktionen ist verfügbar. Den Code finden Sie im GitHub-Repository.

Weiterführende Literatur zu SmashingMag:

• Abgebrochene Warenkörbe im E-Commerce reduzieren
• Formularfeldvalidierung: Der Nur-Fehler-Ansatz
• Grundlegende Richtlinien für das E-Commerce-Checkout-Design
• Ein umfassender Leitfaden zur Benutzerfreundlichkeit von Webformularen

Kreditkartendaten gehören zu den am häufigsten korrigierten Feldern in Formularen. Glücklicherweise verfügt heutzutage fast jeder gängige Browser über eine Autofill-Funktion, mit der die Benutzer ihre Kartendaten im Browser speichern und Formularfelder schneller ausfüllen können. Außerdem können mobile Safari-Benutzer seit iOS 8 die Informationen ihrer Karte mit der Kamera des iPhones scannen und die Kartennummer, das Ablaufdatum und die Namensfelder ihrer Karte automatisch ausfüllen. Die automatische Vervollständigung ist einfach, klar und in HTML5 integriert, also fügen wir sie zuerst unserem Formular hinzu.

Sowohl das automatische Ausfüllen als auch das Scannen von Karten funktionieren nur mit Formularen mit speziellen Attributen: autocomplete für moderne Browser (im HTML5-Standard aufgeführt) und name für Browser ohne HTML5-Unterstützung.

Hinweis : Eine Demo mit allen unten beschriebenen Funktionen ist verfügbar. Den Code finden Sie im GitHub-Repository .

Kreditkarten haben bestimmte Autofill-Attribute. Für autocomplete :

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

Zum name :

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

Um das automatische Ausfüllen zu verwenden, sollten Sie die relevanten autocomplete und name für die Eingabeelemente in Ihrer index.html -Datei hinzufügen:

 <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">

Vergessen Sie nicht, placeholder in Eingabefeldern zu verwenden, um Benutzern das Verständnis der erforderlichen Datenformate zu erleichtern. Wir können eine Eingabevalidierung mit HTML5-Attributen bereitstellen: pattern (basierend auf regulären JavaScript-Ausdrücken) und required . Beispielsweise kann der Benutzer mit den pattern=”[0-9\s]{14,23}” required in einem Feld das Formular nicht absenden, wenn das Feld leer ist, einen nicht-numerischen oder keinen enthält -Leerzeichen oder ist kürzer als 14 Symbole oder länger als 23 Symbole.

Sobald der Benutzer seine Kartendaten im Browser gespeichert hat, können wir sehen, wie es funktioniert:

Beachten Sie, dass die Verwendung eines einzigen Felds für das Ablaufdatum ( MM/YYYY ) nicht empfohlen wird, da Safari für die automatische Vervollständigung separate Monats- und Jahresfelder benötigt.

Natürlich werden Autocomplete- und Autofill-Attribute nicht nur für Rechnungsformulare, sondern auch für Namen, E-Mail- und Postadressen und Passwörter verwendet. Sie können dem Benutzer Zeit sparen und ihn noch glücklicher machen, indem Sie diese Attribute in Ihren Formularen richtig verwenden.

Obwohl wir jetzt Autovervollständigung, Google Payments und Apple Wallet haben, ziehen es viele Benutzer immer noch vor, ihre Kreditkartendaten manuell einzugeben, und niemand ist vor einem Tippfehler mit einer 16-stelligen Nummer sicher. Lange Zahlen sind schwer zu lesen, noch schmerzhafter zu schreiben und fast unmöglich zu überprüfen.

Damit sich die Benutzer mit ihrer langen Kartennummer wohlfühlen, können wir sie in vierstellige Gruppen unterteilen, indem wir unserem Projekt die einfache VanillaMasker-Bibliothek von BankFacil hinzufügen. Eingegebene Daten werden in einen maskierten String umgewandelt. So können wir ein benutzerdefiniertes Muster mit Leerzeichen nach jeder vierten Ziffer einer Kartennummer, ein zweistelliges Muster für den Ablaufmonat und ein vierstelliges Muster für das Ablaufjahr hinzufügen. VanillaMasker kann auch Datenformate verifizieren: Wenn wir an die ID nur „9“ (die Standardzahl für den Masker) übergeben haben, werden alle nicht numerischen Zeichen nach der Eingabe gelöscht.

 npm install vanilla-masker --save

Importieren wir in unserer index.js -Datei die Bibliothek und verwenden Sie sie mit einer Zeichenfolge für jedes Feld:

 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');

Daher werden die Ziffern der Kartennummer in unserem Formular wie auf einer echten Karte getrennt:

Der Masker löscht Zeichen mit einem falschen Werttyp oder einer falschen Länge, obwohl unsere HTML-Validierung den Benutzer erst nach dem Absenden des Formulars über ungültige Daten informiert. Wir können aber auch die Richtigkeit einer Kartennummer beim Ausfüllen prüfen. Wussten Sie, dass alle Plastik-Kreditkartennummern nach dem einfachen und effektiven Luhn-Algorithmus generiert werden? Es wurde 1954 von Hans Peter Luhn geschaffen und in der Folge als internationaler Standard gesetzt. Wir können den Luhn-Algorithmus einbinden, um das Eingabefeld der Kartennummer vorab zu validieren und den Benutzer vor einem Tippfehler zu warnen.

Dazu können wir das winzige fast-luhn npm-Paket verwenden, das aus dem Kern von Shirtless Kirk übernommen wurde. Wir müssen es zu den Abhängigkeiten unseres Projekts hinzufügen:

 npm install fast-luhn --save

Um schnell-luhn zu verwenden, importieren wir es in ein Modul und rufen einfach luhn(number) für das Eingabeereignis auf, um zu prüfen, ob die Zahl korrekt ist. Fügen wir beispielsweise die Klasse card__input_invalid hinzu, um die outline und card__input_invalid zu ändern color wenn der Benutzer versehentlich einen Fehler gemacht hat und eine Prüfung nicht bestanden wurde. Beachten Sie, dass VanillaMasker nach jeder vierstelligen Gruppe ein Leerzeichen hinzufügt, daher müssen wir den eingegebenen Wert mit den split und join -Methoden in eine einfache Zahl ohne Leerzeichen umwandeln, bevor lunh aufrufen.

Das Ergebnis ist Code, der so aussieht:

 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'); } });

Um zu verhindern, dass luhn aufgerufen wird, während der Benutzer tippt, rufen wir es nur auf, wenn die eingegebene Nummer so lang wie die Mindestlänge mit Leerzeichen (14 Zeichen, einschließlich 12 Ziffern) oder länger ist, oder entfernen Sie andernfalls die Klasse card__input_invalid .

Hier sind die Validierungsbeispiele in Aktion:

Der Luhn-Algorithmus wird auch für einige Rabattkartennummern, IMEI-Nummern, National Provider Identifier-Nummern in den USA und Sozialversicherungsnummern in Kanada verwendet. Dieses Paket ist also nicht auf Kreditkarten beschränkt.

Viele Benutzer möchten ihre Kartendaten mit eigenen Augen überprüfen, auch wenn sie wissen, dass das Formular validiert wird. Aber Menschen nehmen die Dinge auf eine Weise wahr, die den Vergleich unterschiedlich gestalteter Zahlen ein wenig verwirrend macht. Da wir möchten, dass die Benutzeroberfläche einfach und intuitiv ist, können wir den Benutzern helfen, indem wir eine Schriftart anzeigen, die derjenigen ähnelt, die sie auf einer echten Karte finden würden. Außerdem wird die Schriftart unser kartenähnliches Eingabeformular realistischer und angemessener aussehen lassen.

Mehrere kostenlose Kreditkarten-Schriftarten sind verfügbar:

• Halter, Apostrophic Labs
• Kredit, typodermische Schriftarten
• Kreditkarte, Typ K (kostenlos für den persönlichen Gebrauch)

Wir verwenden Halter. Laden Sie zuerst die Schriftart herunter, platzieren Sie sie im Projektordner und erstellen Sie eine CSS3 @font-face Regel in style.css :

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

Fügen Sie es dann einfach zur font-family für die .card-input Klasse hinzu:

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

Vergessen Sie nicht, dass Sie, wenn Sie das CSS in eine JavaScript- file-loader mit dem Webpack-Bundle eingeben, den Dateilader hinzufügen müssen:

 npm install file-loader --save

Und fügen Sie den file-loader für die Schriftartdateitypen in webpack.config.js :

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

Das Ergebnis sieht ganz gut aus:

Wenn Sie möchten, können Sie es noch schicker machen, indem Sie einen Prägeeffekt mit einem doppelten text-shadow und einer Halbtransparenz in der color des Textes verwenden:

 .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; } 

Zu guter Letzt können Sie Kunden angenehm überraschen, indem Sie dem Formular eine Farbfunktion hinzufügen. Jede Bank hat ihre eigene Markenfarbe, die normalerweise die Karte dieser Bank dominiert. Um ein Rechnungsformular noch benutzerfreundlicher zu gestalten, können wir diese Farbe verwenden und den Namen der Bank über den Formularfeldern drucken (entsprechend der Stelle, an der er auf einer echten Karte erscheint). Dies hilft dem Benutzer auch, Tippfehler in der Nummer zu vermeiden und sicherzustellen, dass er die richtige Karte ausgewählt hat.

Wir können die Bank jeder Benutzerkarte anhand der ersten sechs Ziffern identifizieren, die die Issuer Identification Number (IIN) oder Bank Identification Number (BIN) enthalten. Banks DB von Ramoona ist eine Datenbank, die den Namen und die Markenfarbe einer Bank aus diesem Präfix erhält. Der Autor hat eine Demo von Banks DB eingerichtet.

Diese Datenbank wird von der Community betrieben und enthält daher nicht alle Banken der Welt. Wenn die Bank eines Benutzers nicht dargestellt wird, bleibt das Feld für den Namen der Bank leer und der Hintergrund zeigt die Standardfarbe ( #fafafa ).

Banks DB setzt eine von zwei Verwendungsmöglichkeiten voraus: mit PostCSS oder mit CSS in JavaScript. Wir verwenden es mit PostCSS. Wenn Sie neu bei PostCSS sind, ist dies ein guter Grund, damit zu beginnen, es zu verwenden. Mehr über PostCSS erfahren Sie in der offiziellen Dokumentation oder in Drew Minns Artikel „An Introduction to PostCSS“.

Wir müssen das PostCSS Banks DB-Plugin installieren, um die CSS-Vorlage für Banks DB festzulegen, und das PostCSS Contrast-Plugin installieren, um die Lesbarkeit des Banknamens zu verbessern:

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

Danach fügen wir diese neuen Plugins gemäß dem in unserem Projekt verwendeten Modul-Bundler und der Ladekonfiguration zu unserem PostCSS-Prozess hinzu. Fügen Sie beispielsweise bei Webpack und postcss-load-config einfach die neuen Plugins zur .postcssrc -Datei hinzu.

Dann müssen wir in unserer style.css -Datei eine neue Klassenregelvorlage für Banks DB mit dem postcss-contrast-Plugin hinzufügen:

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

Wir könnten auch einen langen transition für die gesamte .card -Klasse festlegen, um die Hintergrund- und Textfarbe sanft ein- und auszublenden, um Benutzer nicht mit einer abrupten Änderung zu erschrecken:

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

Importieren Sie nun Banks DB in index.js und verwenden Sie es im input Listener. Wenn die BIN in der Datenbank dargestellt wird, fügen wir die Klasse, die den Namen der Bank enthält, dem Formular hinzu, um den Namen einzufügen und den Hintergrund des Formulars zu ändern.

 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 = ''; } });

Wenn Sie Webpack verwenden, fügen Sie json-loader für die .json zur Konfiguration von Webpack hinzu, um die Datenbank korrekt in das Bundle einzugeben.

Hier ist ein funktionierendes Beispiel für Banks DB:

Falls Sie mit Ihrer Bankkarte keine Wirkung sehen, können Sie ein Problem eröffnen oder Ihre Bank zur Datenbank hinzufügen.

Fazit

Die Verbesserung Ihres Abrechnungsformulars kann die Benutzererfahrung viel intuitiver machen und dadurch die Benutzerfreundlichkeit gewährleisten und das Vertrauen in Ihr Produkt stärken. Es ist ein wichtiger Bestandteil von Webanwendungen. Mit diesen einfachen Funktionen können wir es schnell und einfach verbessern:

• passende autocomplete und name zum Autofilling,
• placeholder , um den Benutzer über das Eingabeformat zu informieren,
• pattern und Anforderungsattribute, um require fehlerhafte Übermittlung des Formulars zu verhindern,
• VanillaMasker zum Trennen von Kartenziffern,
• fast-luhn, um die Kartennummer zu überprüfen,
• Halfterschrift zum einfachen Vergleich,
• Banks DB für eine schönere Farbdarstellung.

Beachten Sie, dass nur Banks DB einen Modul-Bundler benötigt; Sie können die anderen innerhalb des einfachen Skripts verwenden. Das Hinzufügen all dieser Funktionen zu Ihrer Checkout-Seite würde höchstwahrscheinlich weniger als einen Tag dauern.