Best Practices für Zahlungs- und Adressformulare

Sie können die Conversions maximieren, indem Sie Ihren Nutzern das Ausfüllen von Adress- und Zahlungsformularen so schnell und einfach wie möglich machen.

Sam Dutton

Gut gestaltete Formulare helfen Nutzern und erhöhen die Conversion-Raten. Eine kleine Änderung kann einen großen Unterschied machen.

Hier ist ein Beispiel für ein einfaches Zahlungsformular, das alle Best Practices veranschaulicht:

Hier ist ein Beispiel für ein einfaches Adressformular, das alle Best Practices veranschaulicht:

Checkliste

Aussagekräftigen HTML-Code verwenden

Verwenden Sie die für die Aufgabe vorgesehenen Elemente und Attribute:

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

Sie ermöglichen integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen Ihrem Markup mehr Bedeutung.

HTML-Elemente wie vorgesehen verwenden

Formular in ein <form>-Element einfügen

Vielleicht bist du versucht, deine <input>-Elemente nicht in ein <form>-Element einzubinden und die Datenübermittlung ausschließlich mit JavaScript zu verarbeiten.

Machen Sie das nicht!

Ein HTML-<form> bietet Ihnen Zugriff auf eine Reihe leistungsstarker integrierter Funktionen in allen modernen Browsern und kann dazu beitragen, dass Ihre Website für Screenreader und andere Hilfsmittel zugänglich ist. Ein <form> erleichtert auch die Erstellung grundlegender Funktionen für ältere Browser mit eingeschränkter JavaScript-Unterstützung und ermöglicht das Senden von Formularen, selbst wenn ein Fehler in Ihrem Code vorliegt – und für die kleine Anzahl von Nutzern, die JavaScript tatsächlich deaktivieren.

Wenn Sie mehr als eine Seitenkomponente für Nutzereingaben haben, müssen Sie jede in ein eigenes <form>-Element einfügen. Wenn Sie beispielsweise die Suche und die Anmeldung auf derselben Seite haben, platzieren Sie beide in einem eigenen <form>.

<label> zum Labeln von Elementen verwenden

Verwenden Sie zum Labeln von <input>, <select> oder <textarea> ein <label>.

Verknüpfe ein Label mit einer Eingabe, indem du dem Attribut for des Labels denselben Wert wie dem Attribut id der Eingabe zuweist.

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

Verwenden Sie ein einzelnes Label für eine einzelne Eingabe: Versuchen Sie nicht, mehrere Eingaben mit nur einem Label zu kennzeichnen. Dies funktioniert am besten für Browser und Screenreader. Wenn Sie auf ein Label tippen oder klicken, wird der Fokus auf die zugehörige Eingabe verschoben. Screenreader sagen den Labeltext an, wenn das Label oder die Eingabe des Labels den Fokus erhält.

Hilfreiche Schaltflächen

Verwenden Sie <button> für Schaltflächen. Du kannst auch <input type="submit"> verwenden, aber kein div oder ein anderes zufälliges Element, das als Schaltfläche fungiert. Schaltflächenelemente bieten barrierefreies Verhalten, integrierte Funktionen zum Senden von Formularen und können einfach gestaltet werden.

Geben Sie jeder Schaltfläche zum Senden eines Formulars einen Wert, der beschreibt, was sie tut. Verwenden Sie für jeden Schritt bis zur Kasse einen aussagekräftigen Call-to-Action, der den Fortschritt zeigt und den nächsten Schritt deutlich macht. Beispielsweise kannst du die Schaltfläche zum Senden im Formular für die Lieferadresse mit Weiter zur Zahlung statt mit Weiter oder Speichern beschriften.

Deaktivieren Sie die Schaltfläche zum Senden, nachdem der Nutzer darauf getippt oder geklickt hat, insbesondere wenn der Nutzer eine Zahlung vornimmt oder eine Bestellung aufgibt. Viele Nutzer klicken wiederholt auf Schaltflächen, auch wenn sie einwandfrei funktionieren. Das kann den Bezahlvorgang beeinträchtigen und die Serverlast erhöhen.

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

Deaktivieren Sie die Schaltfläche „Senden“ nicht, wenn Sie auf eine vollständige und gültige Nutzereingabe warten. Lassen Sie beispielsweise die Schaltfläche Adresse speichern nicht einfach deaktiviert, weil etwas fehlt oder ungültig ist. Das hilft dem Nutzer nicht weiter. Er tippt oder klickt möglicherweise weiter auf die Schaltfläche und geht davon aus, dass sie nicht funktioniert. Wenn Nutzer versuchen, ein Formular mit ungültigen Daten zu senden, sollten Sie ihnen stattdessen erklären, was schiefgelaufen ist und wie sie das Problem beheben können. Das ist besonders auf Mobilgeräten wichtig, da die Dateneingabe dort schwieriger ist und fehlende oder ungültige Formulardaten möglicherweise nicht auf dem Bildschirm des Nutzers sichtbar sind, wenn er versucht, ein Formular zu senden.

HTML-Attribute optimal nutzen

Dateneingabe für Nutzer vereinfachen

Verwenden Sie das entsprechende Eingabeattribut type, um auf Mobilgeräten die richtige Tastatur bereitzustellen und eine grundlegende integrierte Validierung durch den Browser zu ermöglichen.

Verwenden Sie beispielsweise type="email" für E‑Mail-Adressen und type="tel" für Telefonnummern.

Zwei Screenshots von Android-Smartphones, auf denen eine Tastatur für die Eingabe einer E-Mail-Adresse (mit type=email) und für die Eingabe einer Telefonnummer (mit type=tel) zu sehen ist.
Tastaturen, die für E‑Mails und Telefonate geeignet sind.

Vermeiden Sie bei Datumsangaben benutzerdefinierte select-Elemente. Wenn sie nicht richtig implementiert sind, unterbrechen sie das Autofill-Erlebnis und funktionieren nicht in älteren Browsern. Für Zahlen wie das Geburtsjahr solltest du ein input-Element anstelle eines select-Elements verwenden, da die manuelle Eingabe von Ziffern einfacher und weniger fehleranfällig sein kann als die Auswahl aus einer langen Drop-down-Liste – insbesondere auf Mobilgeräten. Verwende inputmode="numeric", um die richtige Tastatur auf Mobilgeräten zu verwenden, und füge Validierungs- und Formathinweise mit Text oder einem Platzhalter hinzu, damit der Nutzer Daten im richtigen Format eingibt.

Verwenden Sie die automatische Vervollständigung, um die Barrierefreiheit zu verbessern und Nutzern die erneute Eingabe von Daten zu ersparen.

Wenn Sie die richtigen autocomplete-Werte verwenden, können Browser Nutzern helfen, indem sie Daten sicher speichern und Werte für input, select und textarea automatisch ausfüllen. Das ist besonders auf Mobilgeräten wichtig und entscheidend, um hohe Abbruchraten bei Formularen zu vermeiden. Die automatische Vervollständigung bietet außerdem mehrere Vorteile für die Barrierefreiheit im Internet.

Wenn für ein Formularfeld ein geeigneter Wert für die automatische Vervollständigung verfügbar ist, sollten Sie ihn verwenden. In den MDN Web Docs finden Sie eine vollständige Liste der Werte und Erläuterungen zu ihrer korrekten Verwendung.

Stabile Werte

Rechnungsadresse

Standardmäßig ist die Rechnungsadresse mit der Lieferadresse identisch. Sorgen Sie für ein übersichtliches Design, indem Sie einen Link zum Bearbeiten der Rechnungsadresse bereitstellen (oder summary- und details-Elemente verwenden), anstatt die Rechnungsadresse in einem Formular anzuzeigen.

Beispiel für eine Zahlungsseite mit einem Link zum Ändern der Rechnungsadresse.
Link zum Überprüfen der Abrechnung hinzufügen.

Verwenden Sie für die Rechnungsadresse geeignete Werte für die automatische Vervollständigung, genau wie für die Versandadresse, damit der Nutzer die Daten nicht mehrmals eingeben muss. Fügen Sie den Attributen für die automatische Vervollständigung ein Präfixwort hinzu, wenn Sie unterschiedliche Werte für Eingaben mit demselben Namen in verschiedenen Abschnitten haben.

<input autocomplete="shipping address-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

Nutzern bei der Eingabe der richtigen Daten helfen

Vermeiden Sie es, Kunden zu „belehren“, weil sie „etwas falsch gemacht haben“. Helfen Sie Nutzern stattdessen, Formulare schneller und einfacher auszufüllen, indem Sie ihnen helfen, Probleme sofort zu beheben. Während des Bezahlvorgangs versuchen Kunden, Ihrem Unternehmen Geld für ein Produkt oder eine Dienstleistung zu geben. Ihre Aufgabe ist es, ihnen dabei zu helfen, nicht sie zu bestrafen!

Sie können Formularelementen Einschränkungsattribute hinzufügen, um zulässige Werte anzugeben, einschließlich min, max und pattern. Der Gültigkeitsstatus des Elements wird automatisch festgelegt, je nachdem, ob der Wert des Elements gültig ist. Das gilt auch für die CSS-Pseudoklassen :valid und :invalid, mit denen Elemente mit gültigen oder ungültigen Werten formatiert werden können.

Im folgenden HTML-Code wird beispielsweise die Eingabe eines Geburtsjahres zwischen 1900 und 2020 angegeben. Wenn Sie type="number" verwenden, werden die Eingabewerte auf Zahlen im Bereich von min bis max beschränkt. Wenn Sie versuchen, eine Zahl außerhalb des Bereichs einzugeben, wird die Eingabe als ungültig gekennzeichnet.

Im folgenden Beispiel wird pattern="[\d ]{10,30}" verwendet, um eine gültige Zahlungskartennummer zu gewährleisten, wobei Leerzeichen zulässig sind:

Moderne Browser führen auch eine grundlegende Validierung für Eingaben mit dem Typ email oder url durch.

Beim Senden des Formulars legen Browser den Fokus automatisch auf Felder mit problematischen oder fehlenden erforderlichen Werten. Kein JavaScript erforderlich.

Ein Anmeldeformular in Chrome auf dem Computer mit einer Browseraufforderung und dem Fokus auf einem ungültigen E‑Mail-Wert.
Einfache integrierte Validierung durch den Browser.

Überprüfe die Eingaben inline und gib dem Nutzer Feedback, während er Daten eingibt, anstatt eine Liste von Fehlern anzuzeigen, wenn er auf die Schaltfläche zum Senden klickt. Wenn du Daten auf deinem Server nach dem Absenden des Formulars validieren musst, liste alle gefundenen Probleme auf und markiere alle Formularfelder mit ungültigen Werten deutlich. Zeige außerdem neben jedem problematischen Feld eine Nachricht an, in der erklärt wird, was korrigiert werden muss. Prüfen Sie die Server-Logs und Analysedaten auf häufige Fehler. Möglicherweise müssen Sie Ihr Formular neu gestalten.

Außerdem sollten Sie JavaScript verwenden, um eine robustere Validierung während der Dateneingabe und beim Senden des Formulars durchzuführen. Verwenden Sie die Constraint Validation API (die weitgehend unterstützt wird), um eine benutzerdefinierte Validierung mit der integrierten Browser-UI hinzuzufügen, um den Fokus festzulegen und Aufforderungen anzuzeigen.

Weitere Informationen finden Sie unter Clientseitige Formularvalidierung.

Nutzern helfen, fehlende erforderliche Daten zu vermeiden

Verwenden Sie das Attribut required für Eingaben mit Pflichtwerten.

Wenn ein Formular gesendet wird, werden moderne Browser automatisch die required-Felder mit fehlenden Daten hervorheben und den Fokus darauf setzen. Mit der Pseudoklasse :required können Sie Pflichtfelder hervorheben. Kein JavaScript erforderlich!

Fügen Sie dem Label für jedes Pflichtfeld ein Sternchen hinzu und fügen Sie am Anfang des Formulars einen Hinweis hinzu, um zu erklären, was das Sternchen bedeutet.

Bezahlvorgang vereinfachen

Lücke beim Mobile Commerce schließen

Stellen Sie sich vor, Ihre Nutzer haben ein Ermüdungsbudget. Wenn Sie es aufbrauchen, werden Ihre Nutzer abwandern.

Sie müssen Reibungspunkte reduzieren und den Fokus beibehalten, insbesondere auf Mobilgeräten. Viele Websites verzeichnen auf Mobilgeräten mehr Traffic, aber auf Computern mehr Conversions. Dieses Phänomen wird als Mobile Commerce Gap bezeichnet. Kunden bevorzugen möglicherweise einfach den Kauf auf dem Computer, aber niedrigere mobile Conversion-Raten sind auch das Ergebnis einer schlechten Nutzererfahrung. Ihre Aufgabe ist es, entgangene Conversions auf Mobilgeräten zu minimieren und Conversions auf Computern zu maximieren. Untersuchungen haben gezeigt, dass es ein großes Potenzial gibt, die Nutzerfreundlichkeit von Formularen auf Mobilgeräten zu verbessern.

Vor allem aber brechen Nutzer Formulare eher ab, die lang, komplex und unübersichtlich sind. Das gilt insbesondere, wenn Nutzer kleinere Bildschirme verwenden, abgelenkt sind oder es eilig haben. Fragen Sie nach so wenigen Daten wie möglich.

„Als Gast bezahlen“ als Standard festlegen

In einem Onlineshop ist die einfachste Möglichkeit, die Reibung bei Formularen zu reduzieren, die Option „Als Gast bezahlen“ als Standard festzulegen. Zwingen Sie Nutzer nicht, ein Konto zu erstellen, bevor sie einen Kauf tätigen können. Das Fehlen einer Option zum Bezahlen als Gast wird als Hauptgrund für den Abbruch des Bezahlvorgangs genannt.

Gründe für den Abbruch des Einkaufsvorgangs an der Kasse
Quelle: baymard.com/checkout-usability

Sie können die Kontoregistrierung nach dem Bezahlen anbieten. Zu diesem Zeitpunkt haben Sie bereits die meisten Daten, die Sie zum Einrichten eines Kontos benötigen. Die Kontoerstellung sollte für den Nutzer also schnell und einfach sein.

Fortschritt des Bezahlvorgangs anzeigen

Sie können den Bezahlvorgang weniger komplex gestalten, indem Sie den Fortschritt anzeigen und deutlich machen, was als Nächstes zu tun ist. Im folgenden Video wird gezeigt, wie der britische Einzelhändler johnlewis.com dies erreicht.

Fortschritt des Bezahlvorgangs anzeigen.

Du musst am Ball bleiben! Verwendet für jeden Schritt des Bezahlvorgangs Seitenüberschriften und aussagekräftige Schaltflächenwerte, die deutlich machen, was jetzt zu tun ist und welcher Schritt als Nächstes folgt.

Geben Sie Formularschaltflächen aussagekräftige Namen, die zeigen, was als Nächstes passiert.

Verwenden Sie das Attribut enterkeyhint für Formulareingaben, um das Label für die Eingabetaste auf der mobilen Tastatur festzulegen. Verwenden Sie beispielsweise enterkeyhint="previous" und enterkeyhint="next" in einem mehrseitigen Formular, enterkeyhint="done" für die letzte Eingabe im Formular und enterkeyhint="search" für eine Sucheingabe.

Zwei Screenshots eines Adressformulars auf Android, die zeigen, wie das Eingabeattribut „enterkeyhint“ das Symbol der Eingabetaste ändert.
Eingabetasten auf Android-Geräten: „Weiter“ und „Fertig“.

Das Attribut enterkeyhint wird unter Android und iOS unterstützt. Weitere Informationen finden Sie in der Erläuterung zu enterkeyhint.

Machen Sie es Nutzern leicht, im Bezahlvorgang vor- und zurückzugehen, um ihre Bestellung einfach anzupassen, auch wenn sie sich im letzten Zahlungsschritt befinden. Vollständige Details der Bestellung anzeigen, nicht nur eine eingeschränkte Zusammenfassung. Nutzern die Möglichkeit geben, die Artikelmengen auf der Zahlungsseite einfach anzupassen. Ihre Priorität beim Bezahlen ist es, Unterbrechungen auf dem Weg zur Conversion zu vermeiden.

Störende Elemente entfernen

Begrenzen Sie potenzielle Ausstiegspunkte, indem Sie visuelle Unordnung und Ablenkungen wie Produktwerbung entfernen. Viele erfolgreiche Einzelhändler entfernen sogar die Navigation und die Suche aus dem Bezahlvorgang.

Zwei Screenshots auf einem Mobilgerät, die den Fortschritt beim Bezahlvorgang auf johnlewis.com zeigen. Such- und Navigationsfunktionen sowie andere Ablenkungen werden entfernt.
Suche, Navigation und andere Ablenkungen wurden für den Bezahlvorgang entfernt.

Konzentrieren Sie sich auf das Wesentliche. Jetzt ist nicht der richtige Zeitpunkt, um Nutzer zu etwas anderem zu verleiten.

Eine Zahlungsseite auf einem Mobilgerät mit einer ablenkenden Werbung für KOSTENLOSE STICKER.
Lenken Sie Kunden nicht vom Kaufabschluss ab.

Für wiederkehrende Nutzer können Sie den Bezahlvorgang noch weiter vereinfachen, indem Sie Daten ausblenden, die sie nicht sehen müssen. Beispiel: Zeigen Sie die Lieferadresse als Nur-Text (nicht in einem Formular) an und ermöglichen Sie Nutzern, sie über einen Link zu ändern.

Der Bereich „Bestellung prüfen“ einer Zahlungsseite mit Nur-Text und Links zum Ändern der Lieferadresse, der Zahlungsmethode und der Rechnungsadresse, die nicht angezeigt werden.
Daten ausblenden, die Kunden nicht sehen müssen.

Eingabe von Name und Adresse vereinfachen

Fragen Sie nur nach den Daten, die Sie benötigen.

Bevor Sie mit dem Programmieren Ihrer Formulare für Namen und Adressen beginnen, sollten Sie sich darüber im Klaren sein, welche Daten erforderlich sind. Fragen Sie nicht nach Daten, die Sie nicht benötigen. Die einfachste Möglichkeit, die Komplexität von Formularen zu reduzieren, besteht darin, unnötige Felder zu entfernen. Das ist auch gut für den Datenschutz und kann die Kosten für Backend-Daten und die Haftung reduzieren.

Verwenden Sie ein einzelnes Namenseingabefeld.

Ermögliche es Nutzern, ihren Namen in einem einzigen Eingabefeld einzugeben, es sei denn, du hast einen guten Grund, Vornamen, Nachnamen, Anreden oder andere Namensteile separat zu speichern. Durch die Verwendung eines einzigen Namenseingabefelds werden Formulare weniger komplex, Ausschneiden und Einfügen wird ermöglicht und Autofill wird vereinfacht.

Sofern es keinen guten Grund gibt, solltest du keine separate Eingabe für ein Präfix oder einen Titel (z. B. Frau, Dr. oder Lord) hinzufügen. Nutzer können diese Information zusammen mit ihrem Namen eingeben, wenn sie möchten. Außerdem funktioniert die automatische Vervollständigung von honorific-prefix derzeit in den meisten Browsern nicht. Wenn Sie also ein Feld für den Namenspräfix oder Titel hinzufügen, wird die automatische Vervollständigung des Adressformulars für die meisten Nutzer nicht funktionieren.

Automatisches Ausfüllen von Namen aktivieren

Verwenden Sie name für einen vollständigen Namen:

<input autocomplete="name" ...>

Wenn Sie einen guten Grund haben, Namensteile aufzuteilen, verwenden Sie die entsprechenden Werte für die automatische Vervollständigung:

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

Internationale Namen zulassen

Sie können die Namenseingaben validieren oder die für Namensdaten zulässigen Zeichen einschränken. Sie müssen jedoch bei Alphabeten so wenig Einschränkungen wie möglich vornehmen. Es ist unhöflich, wenn einem gesagt wird, dass der eigene Name „ungültig“ ist.

Verwenden Sie zur Validierung keine regulären Ausdrücke, die nur mit lateinischen Zeichen übereinstimmen. „Nur lateinische Zeichen“ schließt Nutzer mit Namen oder Adressen aus, die Zeichen enthalten, die nicht im lateinischen Alphabet enthalten sind. Lassen Sie stattdessen den Abgleich von Unicode-Buchstaben zu und sorgen Sie dafür, dass Ihr Backend Unicode sowohl als Eingabe als auch als Ausgabe sicher unterstützt. Unicode in regulären Ausdrücken wird von modernen Browsern gut unterstützt.

Was Sie nicht tun sollten
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>
Das sollten Sie tun:
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>
Unicode-Buchstabenabgleich im Vergleich zum Abgleich nur mit lateinischen Buchstaben.

Verschiedene Adressformate zulassen

Wenn Sie ein Adressformular entwerfen, sollten Sie die verwirrende Vielfalt an Adressformaten berücksichtigen, die es sogar innerhalb eines einzelnen Landes gibt. Achten Sie darauf, keine Annahmen über „normale“ Adressen zu treffen. (Wenn Sie nicht überzeugt sind, werfen Sie einen Blick auf UK Address Oddities!.)

Adressformulare flexibel gestalten

Zwingen Sie Nutzer nicht dazu, ihre Adresse in Formularfelder zu quetschen, die nicht passen.

Verlange beispielsweise nicht, dass Hausnummer und Straßenname in separaten Eingabefeldern eingegeben werden, da viele Adressen dieses Format nicht verwenden und unvollständige Daten das automatische Ausfüllen im Browser beeinträchtigen können.

Seien Sie bei required-Adressfeldern besonders vorsichtig. Beispielsweise haben Adressen in großen Städten im Vereinigten Königreich keinen Bezirk, aber auf vielen Websites müssen Nutzer trotzdem einen eingeben.

Zwei flexible Adresszeilen können für eine Vielzahl von Adressformaten gut funktionieren.

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

Fügen Sie Labels hinzu, die mit Folgendem übereinstimmen:

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

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

Verwenden Sie für die Adresse ein einzelnes Textfeld.

Die flexibelste Option für Adressen ist die Angabe einer einzelnen textarea.

Der Ansatz textarea eignet sich für jedes Adressformat und ist ideal zum Ausschneiden und Einfügen. Beachten Sie jedoch, dass er möglicherweise nicht Ihren Datenanforderungen entspricht und Nutzer die Funktion „Automatisches Ausfüllen“ möglicherweise nicht verwenden können, wenn sie zuvor nur Formulare mit address-line1 und address-line2 verwendet haben.

Verwenden Sie für ein Textfeld street-address als Wert für die automatische Vervollständigung.

Hier ist ein Beispiel für ein Formular, in dem ein einzelnes textarea-Element für die Adresse verwendet wird:

Adressformulare internationalisieren und lokalisieren

Bei Adressformularen ist es besonders wichtig, die Internationalisierung und Lokalisierung zu berücksichtigen, je nachdem, wo sich Ihre Nutzer befinden.

Beachten Sie, dass die Benennung von Adressteilen und die Adressformate auch innerhalb derselben Sprache variieren.

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

Es kann irritierend oder verwirrend sein, wenn ein Formular nicht zu Ihrer Adresse passt oder nicht die erwarteten Begriffe verwendet.

Es kann erforderlich sein, Adressformulare für mehrere Sprachen anzupassen. Es kann aber auch ausreichen, Techniken zur Maximierung der Formularflexibilität zu verwenden (wie oben beschrieben). Wenn du deine Adressformulare nicht lokalisierst, solltest du die wichtigsten Prioritäten kennen, um mit einer Reihe von Adressformaten umzugehen:

  • Vermeiden Sie es, zu spezifisch auf Adressbestandteile einzugehen, z. B. auf einen Straßennamen oder eine Hausnummer zu bestehen.
  • Vermeiden Sie nach Möglichkeit, Felder als required zu deklarieren. In vielen Ländern gibt es beispielsweise keine Postleitzahlen und in ländlichen Gebieten möglicherweise keine Straßennamen.
  • Verwenden Sie inklusive Bezeichnungen: „Land/Region“ statt „Land“; „Postleitzahl“ statt „PLZ“.

Bleib flexibel! Das Beispiel für ein einfaches Adressformular oben kann so angepasst werden, dass es für viele Regionen „gut genug“ funktioniert.

Adresssuche nach Postleitzahl vermeiden

Einige Websites verwenden einen Dienst, um Adressen anhand der Postleitzahl zu ermitteln. Das kann für einige Anwendungsfälle sinnvoll sein, aber Sie sollten sich der potenziellen Nachteile bewusst sein.

Adressvorschläge anhand der Postleitzahl funktionieren nicht für alle Länder. In einigen Regionen können Postleitzahlen eine große Anzahl potenzieller Adressen umfassen.

Postleitzahlen können viele Adressen umfassen.

Es ist für Nutzer schwierig, aus einer langen Liste von Adressen auszuwählen, insbesondere auf Mobilgeräten, wenn sie es eilig haben oder gestresst sind. Es kann einfacher und weniger fehleranfällig sein, Nutzern die Möglichkeit zu geben, die automatische Vervollständigung zu verwenden und ihre vollständige Adresse mit nur einem Tippen oder Klicken einzugeben.

Ein einzelnes Namenseingabefeld ermöglicht die Adresseingabe mit nur einem Tippen (oder Klick).

Zahlungsformulare vereinfachen

Zahlungsformulare sind der wichtigste Teil des Bezahlvorgangs. Ein schlecht gestaltetes Zahlungsformular ist eine häufige Ursache für Kaufabbrüche. Der Teufel steckt im Detail: Kleine Fehler können dazu führen, dass Nutzer einen Kauf abbrechen, insbesondere auf Mobilgeräten. Ihre Aufgabe ist es, Formulare so zu gestalten, dass Nutzer Daten so einfach wie möglich eingeben können.

Nutzer müssen Zahlungsdaten nicht noch einmal eingeben

Fügen Sie in Zahlungskartenformularen die entsprechenden autocomplete-Werte hinzu, einschließlich der Zahlungskartennummer, des Namens auf der Karte, des Ablaufdatums und des Sicherheitscodes:

  • cc-number
  • cc-name
  • cc-exp oder cc-exp-month und cc-exp-year für separate Felder
  • cc-csc

So können Browser Nutzer unterstützen, indem sie Zahlungskartendetails sicher speichern und Formulardaten korrekt eingeben. Ohne die automatische Vervollständigung ist es wahrscheinlicher, dass Nutzer ihre Zahlungskartendaten physisch aufbewahren oder unsicher auf ihrem Gerät speichern.

Verwenden Sie keine benutzerdefinierten Elemente für Zahlungskartendaten.

Wenn benutzerdefinierte Elemente nicht richtig konzipiert sind, können sie den Zahlungsablauf unterbrechen, indem sie das automatische Ausfüllen verhindern. Außerdem funktionieren sie in älteren Browsern nicht. Wenn alle anderen Zahlungskartendetails über die automatische Vervollständigung verfügbar sind, ein Nutzer aber seine physische Zahlungskarte suchen muss, um ein Ablaufdatum nachzuschlagen, weil die automatische Vervollständigung für ein benutzerdefiniertes Element nicht funktioniert hat, verlieren Sie wahrscheinlich einen Verkauf. Verwenden Sie stattdessen Standard-HTML-Elemente und gestalten Sie sie entsprechend.

Zahlungsformular mit benutzerdefinierten Elementen für das Ablaufdatum der Karte, die Autofill unterbrechen.
Die automatische Vervollständigung hat alle Felder ausgefüllt – bis auf das Ablaufdatum.

Einzelne Eingabe für Zahlungskarten- und Telefonnummern verwenden

Verwenden Sie für Zahlungskarten- und Telefonnummern eine einzige Eingabe: Teilen Sie die Nummer nicht in Teile auf. Das erleichtert Nutzern die Dateneingabe, vereinfacht die Validierung und ermöglicht das automatische Ausfüllen durch Browser. Das Gleiche gilt für andere numerische Daten wie PINs und Bankcodes.

Zahlungsformular mit einem Kreditkartenfeld, das in vier Eingabeelemente unterteilt ist.
Verwenden Sie nicht mehrere Eingabefelder für eine Kreditkartennummer.

Sorgfältig validieren

Sie sollten die Dateneingabe sowohl in Echtzeit als auch vor dem Senden des Formulars validieren. Eine Möglichkeit, dies zu tun, besteht darin, einer Zahlungskarteneingabe ein pattern-Attribut hinzuzufügen. Wenn der Nutzer versucht, das Zahlungsformular mit einem ungültigen Wert einzureichen, zeigt der Browser eine Warnmeldung an und setzt den Fokus auf die Eingabe. Kein JavaScript erforderlich!

Ihr regulärer Ausdruck pattern muss jedoch flexibel genug sein, um die verschiedenen Längen von Zahlungskartennummern zu verarbeiten: von 14 Ziffern (oder möglicherweise weniger) bis zu 20 (oder mehr). Weitere Informationen zur Strukturierung von Zahlungskartennummern finden Sie im LDAPwiki.

Erlaube Nutzern, Leerzeichen einzugeben, wenn sie eine neue Zahlungskartennummer eingeben, da die Nummern auf physischen Karten so angezeigt werden. Das ist nutzerfreundlicher (Sie müssen ihnen nicht sagen, dass sie etwas falsch gemacht haben), unterbricht den Conversion-Fluss weniger wahrscheinlich und es ist einfach, Leerzeichen in Zahlen vor der Verarbeitung zu entfernen.

Auf verschiedenen Geräten, Plattformen, Browsern und Versionen testen

Es ist besonders wichtig, Adress- und Zahlungsformulare auf den Plattformen zu testen, die von Ihren Nutzern am häufigsten verwendet werden, da die Funktionalität und das Erscheinungsbild von Formularelementen variieren können und Unterschiede in der Größe des Darstellungsbereichs zu einer problematischen Positionierung führen können. BrowserStack ermöglicht kostenlose Tests für Open-Source-Projekte auf einer Reihe von Geräten und Browsern.

Ein Zahlungsformular auf einem iPhone 7 und einem iPhone 11. Die Schaltfläche „Zahlung abschließen“ wird auf dem iPhone 11 angezeigt, aber nicht auf dem iPhone 7
Dieselbe Seite auf dem iPhone 7 und dem iPhone 11.
Verringere das Padding für kleinere mobile Darstellungsbereiche, damit die Schaltfläche Zahlung abschließen nicht ausgeblendet wird.

Analysen und RUM implementieren

Es kann hilfreich sein, die Nutzerfreundlichkeit und Leistung lokal zu testen. Sie benötigen jedoch reale Daten, um richtig zu verstehen, wie Nutzer Ihre Zahlungs- und Adressformulare erleben.

Dafür benötigen Sie Analysen und Real User Monitoring – Daten zur Erfahrung tatsächlicher Nutzer, z. B. wie lange das Laden von Zahlungsseiten oder die Zahlungsabwicklung dauert:

  • Seitenanalysen: Seitenaufrufe, Absprungraten und Ausstiege für jede Seite mit einem Formular.
  • Interaktionsanalysen: Zieltrichter und Ereignisse zeigen, wo Nutzer den Bezahlvorgang abbrechen und welche Aktionen sie bei der Interaktion mit Ihren Formularen ausführen.
  • Websiteleistung: Anhand von nutzerorientierten Messwerten können Sie feststellen, ob Ihre Zahlungsseiten langsam geladen werden, und wenn ja, was die Ursache ist.

Seitenanalysen, Interaktionsanalysen und die Leistungsmessung echter Nutzer sind besonders wertvoll, wenn sie mit Server-Logs, Conversion-Daten und A/B-Tests kombiniert werden. So können Sie Fragen beantworten, z. B. ob Rabattcodes den Umsatz steigern oder ob eine Änderung des Formularlayouts die Conversions verbessert.

Das wiederum bietet Ihnen eine solide Grundlage, um Prioritäten zu setzen, Änderungen vorzunehmen und Erfolge zu belohnen.

Weiterlernen

Foto von @rupixen auf Unsplash.