Best Practices für Zahlungs- und Adressformulare

Sie können Ihre Conversions maximieren, indem Sie Nutzern helfen, Adressen und Zahlungsformulare so schnell und einfach wie möglich auszufüllen.

Sam Dutton

Gut gestaltete Formulare unterstützen die Nutzer und steigern die Conversion-Raten. Schon eine kleine Änderung kann einen großen Unterschied machen.

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

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

Checkliste

Aussagekräftigen HTML-Code verwenden

Verwenden Sie die für den Job erstellten 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

Setzen Sie das Formular in ein <form>

Sie könnten versucht sein, die <input>-Elemente nicht in <form> zu verpacken, sondern die Datenübermittlung ausschließlich mit JavaScript abzuwickeln.

Machen Sie das nicht!

Mit einem HTML-<form> erhalten Sie Zugriff auf leistungsstarke integrierte Funktionen in allen modernen Browsern und können Ihre Website für Screenreader und andere Hilfsgeräte zugänglich machen. Mit einem <form> lassen sich auch einfacher grundlegende Funktionen für ältere Browser mit eingeschränkter JavaScript-Unterstützung erstellen und das Senden von Formularen auch dann ermöglichen, wenn ein Fehler in Ihrem Code vorliegt. Außerdem ist es für die kleine Anzahl von Nutzern, die JavaScript tatsächlich deaktivieren, hilfreich.

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

<label> zum Beschriften von Elementen verwenden

Wenn Sie ein <input>-, <select>- oder <textarea>-Label verwenden möchten, verwenden Sie ein <label>.

Verknüpfen Sie ein Label mit einer Eingabe, indem Sie dem for-Attribut des Labels denselben Wert wie dem id-Attribut der Eingabe zuweisen.

<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 versehen. 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 gelegt. Screenreader sprechen den Labeltext an, wenn der Fokus auf das Label oder die Eingabe des Labels gelegt wird.

Schaltflächen hilfreich gestalten

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

Geben Sie jeder Schaltfläche zum Senden des Formulars einen Wert, der ihre Funktion beschreibt. Verwenden Sie für jeden Schritt bis zum Bezahlvorgang einen beschreibenden Call-to-Action, der den Fortschritt zeigt und den nächsten Schritt klar macht. Benennen Sie die Schaltfläche zum Senden im Formular für die Lieferadresse beispielsweise Weiter zur Zahlung statt Weiter oder Speichern.

Deaktivieren Sie eine Schaltfläche zum Senden, nachdem der Nutzer darauf getippt oder geklickt hat, insbesondere wenn er eine Zahlung ausführt 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.

Deaktivieren Sie die Schaltfläche „Senden“ jedoch nicht, wenn noch eine vollständige und gültige Nutzereingabe erforderlich ist. Lassen Sie beispielsweise die Schaltfläche Adresse speichern nicht deaktiviert, weil etwas fehlt oder ungültig ist. Das hilft den Nutzern nicht weiter – sie tippen oder klicken möglicherweise weiter auf die Schaltfläche und gehen davon aus, dass sie kaputt ist. Wenn Nutzer versuchen, ein Formular mit ungültigen Daten einzureichen, erklären Sie ihnen stattdessen, was schiefgelaufen ist und wie sie das Problem beheben können. Das ist besonders auf Mobilgeräten wichtig, wo die Dateneingabe schwieriger ist und fehlende oder ungültige Formulardaten möglicherweise nicht auf dem Bildschirm des Nutzers zu sehen sind, wenn er versucht, ein Formular einzureichen.

HTML-Attribute optimal nutzen

Erleichtern Sie Nutzern die Eingabe von Daten.

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

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 zu sehen ist, die zur Eingabe einer E-Mail-Adresse (mit type=email) und zur Eingabe einer Telefonnummer (mit type=tel) geeignet ist.
Für E-Mail und Telefon geeignete Tastaturen.

Verwenden Sie für Datumsangaben möglichst keine benutzerdefinierten select-Elemente. Wenn sie nicht richtig implementiert sind, beeinträchtigen sie die Autofill-Funktion und funktionieren nicht in älteren Browsern. Verwenden Sie für Zahlen wie das Geburtsjahr ein input-Element anstelle eines select-Elements. Die manuelle Eingabe von Ziffern kann einfacher und weniger fehleranfällig sein als die Auswahl aus einer langen Drop-down-Liste, insbesondere auf Mobilgeräten. Verwenden Sie inputmode="numeric", um auf Mobilgeräten die richtige Tastatur zu verwenden, und fügen Sie Validierungs- und Formatierungshinweise mit Text oder einem Platzhalter hinzu, damit Nutzer Daten im richtigen Format eingeben.

Mit der automatischen Vervollständigung die Barrierefreiheit verbessern und Nutzern helfen, Daten nicht noch einmal eingeben zu müssen

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

Wenn für ein Formularfeld ein geeigneter Autocomplete-Wert verfügbar ist, sollten Sie ihn verwenden. In den MDN Web Docs finden Sie eine vollständige Liste der Werte und eine Erklärung ihrer korrekten Verwendung.

Stabile Werte

Rechnungsadresse

Legen Sie die Rechnungsadresse standardmäßig so fest, dass sie mit der Lieferadresse übereinstimmt. Vermeiden Sie visuelle Unruhe, indem Sie einen Link zum Bearbeiten der Rechnungsadresse angeben (oder die summary- und details-Elemente verwenden), anstatt die Rechnungsadresse in einem Formular anzuzeigen.

Beispiel für eine Zahlungsseite mit einem Link zum Ändern der Rechnungsadresse
Fügen Sie einen Link zur Abrechnung hinzu.

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

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

Nutzern helfen, die richtigen Daten einzugeben

Kunden nicht wegen eines „Fehlers“ zurechtweisen Helfen Sie Nutzern stattdessen, Formulare schneller und einfacher auszufüllen, indem Sie ihnen helfen, Probleme sofort zu beheben. Beim Bezahlvorgang versuchen Kunden, Ihrem Unternehmen Geld für ein Produkt oder eine Dienstleistung zu geben. Ihre Aufgabe besteht darin, ihnen zu helfen, nicht, sie zu bestrafen.

Sie können Einschränkungsattribute hinzufügen, um Elemente zu bilden, mit denen zulässige Werte angegeben werden, z. B. 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 eine Eingabe für ein Geburtsjahr zwischen 1900 und 2020 angegeben. Bei Verwendung von type="number" werden Eingabewerte nur auf Zahlen innerhalb des durch min und max angegebenen Bereichs beschränkt. Wenn Sie versuchen, eine Zahl außerhalb des Bereichs einzugeben, wird die Eingabe auf einen ungültigen Status gesetzt.

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

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

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

Screenshot eines Anmeldeformulars in der Chrome-Desktopversion mit Browseraufforderung und Fokus für einen ungültigen E-Mail-Wert
Einfache integrierte Validierung durch den Browser.

Validieren Sie die Eingaben inline und geben Sie dem Nutzer Feedback, während er Daten eingibt, anstatt ihm eine Liste mit Fehlern zu präsentieren, wenn er auf die Schaltfläche „Senden“ klickt. Wenn Sie Daten nach dem Senden des Formulars auf Ihrem Server validieren müssen, listen Sie alle gefundenen Probleme auf und kennzeichnen Sie alle Formularfelder mit ungültigen Werten deutlich. Außerdem sollte neben jedem problematischen Feld eine Nachricht eingeblendet werden, in der erklärt wird, was korrigiert werden muss. Prüfen Sie die Serverprotokolle und Analysedaten auf häufige Fehler. Möglicherweise müssen Sie Ihr Formular neu gestalten.

Sie sollten auch JavaScript verwenden, um eine robustere Validierung durchzuführen, während Nutzer Daten eingeben und das Formular senden. Verwenden Sie die Constraint Validation API (weitgehend unterstützt), um benutzerdefinierte Validierungen mithilfe der integrierten Browser-Benutzeroberfläche hinzuzufügen, um den Fokus festzulegen und Aufforderungen anzuzeigen.

Weitere Informationen finden Sie unter JavaScript für komplexere Echtzeitprüfungen verwenden.

Helfen Sie Nutzern, zu vermeiden, dass erforderliche Daten fehlen

Verwenden Sie bei Eingaben das Attribut required für obligatorische Werte.

Wenn ein Formular gesendet wird, werden in modernen Browsern automatisch required-Felder mit fehlenden Daten angezeigt und der Fokus darauf gesetzt. 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, in dem Sie erklären, was das Sternchen bedeutet.

Bezahlvorgang vereinfachen

Achten Sie auf die Lücke beim mobilen Handel!

Angenommen, Ihre Nutzer haben ein Ermüdungsbudget. Wenn Sie das tun, werden Ihre Nutzer Ihre Website verlassen.

Sie müssen die Abläufe reibungslos gestalten und den Fokus beibehalten, insbesondere auf Mobilgeräten. Viele Websites erhalten mehr Zugriffe auf Mobilgeräten, aber mehr Conversions auf Computern. Dieses Phänomen wird als Mobile Commerce Gap bezeichnet. Kunden kaufen vielleicht einfach lieber auf dem Computer, aber niedrigere Conversion-Raten auf Mobilgeräten sind auch auf eine schlechte Nutzerfreundlichkeit zurückzuführen. Ihre Aufgabe ist es, entgangene Conversions auf Mobilgeräten zu minimieren und Conversions auf Computern zu maximieren. Studien haben gezeigt, dass es eine große Chance gibt, die Nutzerfreundlichkeit von Formularen auf Mobilgeräten zu verbessern.

Vor allem aber brechen die Nutzer eher Formulare ab, die lang aussehen, komplex sind und keine Orientierungshilfe geben. Dies gilt insbesondere, wenn Nutzende auf kleineren Bildschirmen arbeiten, abgelenkt sind oder es eilig haben. Fordern Sie so wenige Daten wie möglich an.

„Als Gast bezahlen“ als Standard festlegen

Für einen Onlineshop ist die einfachste Möglichkeit, die Formularabwicklung zu vereinfachen, die Option „Als Gast bezahlen“ als Standard festzulegen. Nutzer dürfen nicht gezwungen werden, vor einem Kauf ein Konto zu erstellen. Wenn der Bezahlvorgang als Gast nicht möglich ist, ist dies einer der Hauptgründe für den Kaufabbruch.

Gründe für den Abbruch des Einkaufswagens an der Kasse
Aus baymard.com/checkout-usability

Du kannst nach dem Bezahlvorgang eine Kontoregistrierung anbieten. Zu diesem Zeitpunkt haben Sie bereits die meisten Daten, die Sie zum Einrichten eines Kontos benötigen. Daher sollte die Kontoerstellung für den Nutzer schnell und einfach sein.

Bezahlvorgang anzeigen

Du kannst den Bezahlvorgang weniger komplex gestalten, indem du den Fortschritt aufzeigt und deutlich machst, was als Nächstes zu tun ist. Im folgenden Video sehen Sie, wie der britische Einzelhändler johnlewis.com dies erreicht.

Den Fortschritt des Bezahlvorgangs anzeigen.

Sie müssen den Schwung aufrechterhalten. Verwende für jeden Schritt bis zur Zahlung Seitenüberschriften und beschreibende Schaltflächenwerte, die deutlich machen, was jetzt getan werden muss und welcher Bezahlschritt als Nächstes erfolgt.

Geben Sie den 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 der mobilen Tastatur festzulegen. Verwenden Sie beispielsweise enterkeyhint="previous" und enterkeyhint="next" in einem mehrseitigen Formular, enterkeyhint="done" für die endgültige Eingabe im Formular und enterkeyhint="search" für eine Suchanfrage.

Zwei Screenshots eines Adressformulars unter Android, auf dem zu sehen ist, wie das Eingabeattribut „enterkeyhint“ das Symbol für die Schaltfläche „Eingabetaste“ ändert.
Auf Android-Geräten die wichtigsten Schaltflächen „Weiter“ und „Fertig“ eingeben.

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

Bieten Sie Nutzern die Möglichkeit, während des Bezahlvorgangs jederzeit zurückzugehen und ihre Bestellung anzupassen, auch wenn sie sich im letzten Zahlungsschritt befinden. Die vollständigen Details der Bestellung anzeigen, nicht nur eine begrenzte Zusammenfassung. Nutzer können die Bestellmengen einfach auf der Zahlungsseite ändern. Ihre Priorität beim Bezahlvorgang besteht darin, den Fortschritt zur Conversion nicht zu unterbrechen.

Störende Elemente entfernen

Begrenzen Sie potenzielle Ausstiegspunkte, indem Sie visuelle Unruhe 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. Suchfunktionen, Navigation und andere Ablenkungen werden entfernt.
Suche, Navigation und andere Ablenkungen wurden für den Bezahlvorgang entfernt.

Konzentrieren Sie sich auf den Kaufprozess. Jetzt ist nicht der richtige Moment, Nutzer zu etwas anderem zu verleiten.

Screenshot der Zahlungsseite auf einem Mobilgerät mit ablenkender Werbung für KOSTENLOSE STICKER
Lassen Sie die Kunden nicht vom Kauf ablenken.

Für wiederkehrende Nutzer kannst du den Bezahlvorgang noch weiter vereinfachen, indem du Daten ausblendest, die sie nicht sehen müssen. Beispiel: Die Lieferadresse wird im Klartext (nicht in einem Formular) angezeigt und Nutzer können sie über einen Link ändern.

Screenshot des Bereichs „Bestellung prüfen“ auf der Zahlungsseite mit Text in Nur-Text-Format und Links zum Ändern der Lieferadresse, Zahlungsmethode und Rechnungsadresse, die nicht angezeigt werden.
Daten ausblenden, die Kunden nicht sehen müssen

Vereinfachen Sie die Eingabe des Namens und der Adresse

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

Bevor Sie mit dem Codieren Ihrer Formulare für Name und Adresse beginnen, sollten Sie wissen, welche Daten erforderlich sind. Fordern Sie keine Daten an, die Sie nicht benötigen. Die einfachste Möglichkeit, die Komplexität eines Formulars zu reduzieren, besteht darin, unnötige Felder zu entfernen. Dies trägt auch zum Schutz der Kundendaten bei und kann die Kosten für Backend-Daten sowie die Haftung reduzieren.

Verwenden Sie nur einen Namen

Bieten Sie Ihren Nutzern die Möglichkeit, ihren Namen in einem einzigen Eingabefeld einzugeben, es sei denn, Sie haben einen triftigen Grund, Vor-, Nach-, Ehren- oder andere Namensteile separat zu speichern. Wenn Sie nur eine Eingabe für den Namen verwenden, werden Formulare weniger komplex, Sie können Inhalte kopieren und einfügen und die Autofill-Funktion wird einfacher.

Insbesondere wenn es keinen guten Grund dafür gibt, solltest du keine separate Eingabe für ein Präfix oder Titel hinzufügen (z. B. „Frau, Dr.“ oder „Lord“). Nutzer können diesen Code zusammen mit ihrem Namen eingeben. Außerdem funktioniert die automatische honorific-prefix-Vervollständigung in den meisten Browsern derzeit nicht. Wenn du also ein Feld für das Namenspräfix oder den Titel hinzufügst, funktioniert das automatische Ausfüllen des Adressformulars bei den meisten Nutzern nicht mehr.

Autofill für Namen aktivieren

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

<input autocomplete="name" ...>

Wenn Sie wirklich einen guten Grund haben, Namensteile aufzuteilen, verwenden Sie geeignete 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 Eingaben von Namen validieren oder die zulässigen Zeichen für Namensdaten einschränken. Bei Alphabeten sollten Sie jedoch möglichst unbeschränkt sein. Es ist unhöflich, wenn dein Name „ungültig“ ist.

Verwenden Sie für die Validierung keine regulären Ausdrücke, die nur mit lateinischen Zeichen übereinstimmen. Bei der Option „Nur Lateinisch“ werden Nutzer mit Namen oder Adressen ausgeschlossen, die Zeichen enthalten, die nicht zum lateinischen Alphabet gehören. Erlauben Sie stattdessen die Unicode-Buchstabenübereinstimmung und achten Sie darauf, dass Ihr Back-End Unicode sowohl für die Eingabe als auch für die Ausgabe sicher unterstützt. Unicode in regulären Ausdrücken wird von modernen Browsern gut unterstützt.

Don'ts
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>
Do
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>
Unicode-Buchstabenabgleich im Vergleich zum Abgleich nur lateinischer Buchstaben.

Verschiedene Adressformate zulassen

Denken Sie beim Entwerfen eines Adressformulars an die verwirrende Vielfalt der Adressformate, die es sogar innerhalb eines Landes gibt. Achten Sie darauf, keine Annahmen über „normale“ Adressen zu treffen. (Sehen Sie sich UK Address Oddities an, wenn Sie nicht überzeugt sind!)

Adressformulare flexibler gestalten

Zwingende Nutzer nicht dazu, ihre Adresse in Formularfelder einzufügen, die nicht passen.

Bestehen Sie beispielsweise nicht darauf, dass Hausnummer und Straßenname in separaten Eingabefeldern eingegeben werden müssen, da viele Adressen nicht dieses Format verwenden. Unvollständige Daten können die automatische Vervollständigung im Browser beeinträchtigen.

Achten Sie dabei besonders auf die required-Adressfelder. Adressen in großen Städten im Vereinigten Königreich haben beispielsweise keinen Landkreis, aber viele Websites zwingen Nutzer trotzdem, einen anzugeben.

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

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

Fügen Sie Labels hinzu, die mit folgenden Kriterien übereinstimmen:

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

Probiere es aus, indem du die unten eingebettete Demo remixt und bearbeitest.

Verwenden Sie für die Adresse ein einzelnes Textfeld.

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

Der Ansatz mit textarea passt zu jedem Adressformat und eignet sich hervorragend zum Kopieren und Einfügen. Beachten Sie jedoch, dass er möglicherweise nicht Ihren Datenanforderungen entspricht und Nutzer möglicherweise nicht von der automatischen Vervollständigung profitieren, wenn sie zuvor nur Formulare mit address-line1 und address-line2 verwendet haben.

Verwenden Sie für ein Textfeld street-address als Autocomplete-Wert.

Hier ein Beispiel für ein Formular, in dem eine einzelne textarea für die Adresse verwendet wird:

Adressformulare internationalisieren und lokalisieren

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

Die Benennung der Adressteile und die Adressformate können sich sogar innerhalb derselben Sprache unterscheiden.

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

Es kann ärgerlich oder verwirrend sein, wenn ein Formular nicht zu Ihrer Adresse passt oder nicht die erwarteten Wörter verwendet.

Es kann sein, dass Sie die Adressformulare für mehrere Sprachen anpassen müssen. Es reicht aber oft aus, die Flexibilität des Formulars wie oben beschrieben zu maximieren. Wenn Sie Ihre Adressformulare nicht lokalisieren, sollten Sie die wichtigsten Prioritäten kennen, um mit verschiedenen Adressformaten zurechtzukommen: * Achten Sie darauf, bei den Adressteilen nicht zu spezifisch zu sein, z. B. auf einen Straßennamen oder eine Hausnummer zu bestehen. * Verwenden Sie die Felder nach Möglichkeit nicht als required. In vielen Ländern haben Adressen beispielsweise keine Postleitzahl und Adressen auf dem Land haben möglicherweise keinen Straßennamen. * Verwenden Sie eine inklusive Bezeichnung: „Land/Region“ und nicht „Land“. „Postleitzahl“ und nicht „Postleitzahl“.

Bleiben Sie flexibel! Das Beispiel für ein einfaches Adressformular oben kann so angepasst werden, dass es für viele Sprachen gut funktioniert.

Postleitzahlabfrage vermeiden

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

Die Vorschläge für Postleitzahlen funktionieren nicht in allen Ländern. In einigen Regionen können Postleitzahlen eine große Anzahl potenzieller Adressen umfassen.

Postleitzahlen können viele Adressen umfassen.

Es ist schwierig für Nutzer, aus einer langen Liste von Adressen auszuwählen – insbesondere auf Mobilgeräten, wenn sie in Eile oder gestresst sind. Es kann einfacher und weniger fehleranfällig sein, wenn Nutzer die Funktion „Autofill“ nutzen und ihre vollständige Adresse mit nur einem Tippen oder Klick eingeben können.

Die Eingabe eines einzelnen Namens ermöglicht die Eingabe einer Adresse mit nur einem Tippen (einem Klick).

Zahlungsformulare vereinfachen

Zahlungsformulare sind der wichtigste Teil des Bezahlvorgangs. Ein schlechtes Design des Zahlungsformulars ist eine häufige Ursache für Kaufabbrüche. Der Teufel steckt im Detail: Kleine Fehler können Nutzer dazu veranlassen, einen Kauf abzuschließen, insbesondere auf Mobilgeräten. Ihre Aufgabe besteht darin, Formulare so zu gestalten, dass Nutzer Daten so einfach wie möglich eingeben können.

Nutzern helfen, Zahlungsdaten nicht noch einmal eingeben zu müssen

Achten Sie darauf, in Zahlungskartenformularen die entsprechenden autocomplete-Werte anzugeben, einschließlich der Zahlungskartennummer, des Namens auf der Karte sowie des Ablaufmonats und -jahres:

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

So können Browser Nutzern helfen, Zahlungskartendetails sicher zu speichern und Formulardaten korrekt einzugeben. Ohne automatische Vervollständigung sind Nutzer eher dazu bereit, Zahlungskartendaten auf einem physischen Dokument aufzubewahren oder auf ihrem Gerät unsicher zu speichern.

Verwenden Sie keine benutzerdefinierten Elemente für Zahlungskartendaten.

Wenn benutzerdefinierte Elemente nicht richtig gestaltet sind, können sie den Zahlungsvorgang unterbrechen, da das automatische Ausfüllen nicht funktioniert. 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 finden muss, um ein Ablaufdatum abzurufen, weil die automatische Vervollständigung für ein benutzerdefiniertes Element nicht funktioniert hat, verlieren Sie wahrscheinlich einen Verkauf. Verwenden Sie stattdessen standardmäßige HTML-Elemente und gestalten Sie sie entsprechend.

Screenshot eines Zahlungsformulars mit benutzerdefinierten Elementen für das Ablaufdatum der Karte, die das automatische Ausfüllen unterbrechen
Die automatische Vervollständigung hat alle Felder ausgefüllt – mit Ausnahme des Ablaufdatums.

Für Zahlungskarten und Telefonnummern eine einzige Eingabe verwenden

Für Zahlungskarten und Telefonnummern gilt nur eine Eingabe: Teilen Sie die Nummer nicht in einzelne Teile auf. Das erleichtert Nutzern die Dateneingabe, vereinfacht die Validierung und ermöglicht Browsern die automatische Vervollständigung. Das Gleiche gilt für andere numerische Daten wie PINs und Bankcodes.

Screenshot eines Zahlungsformulars mit einem Kreditkartenfeld, das in vier Eingabeelemente aufgeteilt ist.
Verwenden Sie nicht mehrere Eingaben für eine Kreditkartennummer.

Sorgfältig validieren

Sie sollten die Dateneingabe sowohl in Echtzeit als auch vor dem Einreichen des Formulars validieren. Dazu können Sie beispielsweise einem Eingabefeld für Zahlungskarten das Attribut pattern hinzufügen. Wenn der Nutzer versucht, das Zahlungsformular mit einem ungültigen Wert einzureichen, zeigt der Browser eine Warnmeldung an und legt den Fokus auf die Eingabe. Kein JavaScript erforderlich

Der reguläre Ausdruck für pattern muss jedoch flexibel genug sein, um die verschiedenen Längen von Zahlungskartennummern zu verarbeiten: von 14 Ziffern (oder weniger) bis 20 Ziffern (oder mehr). Weitere Informationen zur Strukturierung von Zahlungskartennummern finden Sie im LDAPwiki.

Nutzer dürfen beim Eingeben einer neuen Zahlungskartennummer Leerzeichen eingeben, da Zahlen auf physischen Karten so angezeigt werden. Das ist für Nutzer angenehmer (Sie müssen ihnen nicht sagen, dass sie etwas falsch gemacht haben), der Conversion-Vorgang wird seltener unterbrochen und es ist ganz 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 für Ihre Nutzer 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 Vielzahl von Geräten und Browsern.

Screenshots eines Zahlungsformulars, payment-form.glitch.me, auf einem iPhone 7 und 11 Die Schaltfläche „Zahlung abschließen“ wird auf dem iPhone 11 angezeigt, aber nicht auf dem iPhone 7
Die gleiche Seite auf dem iPhone 7 und dem iPhone 11.
Verringern Sie den Abstand für kleinere mobile Ansichten, 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 zu verstehen, wie Nutzer Ihre Zahlungs- und Adressformulare verwenden.

Dazu benötigen Sie Analysen und Real User Monitoring – Daten zur Nutzererfahrung, z. B. wie lange es dauert, bis Zahlungsseiten geladen werden oder wie lange die Zahlung abgeschlossen wird:

  • Seitenanalyse: Seitenaufrufe, Absprungraten und Ausstiege für jede Seite mit einem Formular.
  • Interaktionsanalysen: Ziel-Trichter und Ereignisse geben Aufschluss darüber, 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, falls ja, was die Ursache dafür ist.

Seitenanalysen, Interaktionsanalysen und die Leistungsmessung echter Nutzer sind besonders wertvoll, wenn sie mit Serverprotokollen, 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 Anstrengungen zu priorisieren, Änderungen vorzunehmen und Erfolg zu belohnen.

Weiter lernen

Foto von @rupixen auf Unsplash.