Best Practices für Zahlungs- und Adressformulare

Maximieren Sie die Anzahl der Conversions, indem Sie Nutzern das Ausfüllen von Adress- und Zahlungsformularen so schnell und einfach wie möglich machen.

Sam Dutton

Gut gestaltete Formulare unterstützen Nutzer und erhöhen 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 bestimmungsgemäß verwenden

Setzen Sie das Formular in ein <form>

Sie könnten versucht sein, Ihre <input>-Elemente nicht in einen <form>-Tag einzufügen und die Datenübermittlung ausschließlich mit JavaScript zu verarbeiten.

Machen Sie das nicht!

Mit einer HTML-<form> haben Sie Zugriff auf eine leistungsstarke Reihe von integrierten Funktionen in allen modernen Browsern. So lässt sich Ihre Website für Screenreader und andere Hilfsgeräte barrierefrei gestalten. 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 die Nutzereingaben haben, müssen Sie jede in einem eigenen <form>-Element platzieren. Wenn sich beispielsweise die Suchfunktion und die Registrierung auf derselben Seite befinden, platzieren Sie sie jeweils in einem eigenen <form>.

Elemente mit <label> labeln

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. Das 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 zur Kasse einen beschreibenden Call-to-Action, der den Fortschritt anzeigt und den nächsten Schritt klar macht. Benennen Sie die Schaltfläche zum Senden im Formular für die Lieferadresse beispielsweise 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 ordnungsgemäß 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 einfach 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 richtige 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 mit einer Tastatur, die für die Eingabe einer E-Mail-Adresse (mit „type=email“) und einer Telefonnummer (mit „type=tel“) geeignet ist.
Tastaturen für E-Mails und Telefonieren

Verwenden Sie für Datumsangaben möglichst keine benutzerdefinierten select-Elemente. Wenn sie nicht richtig implementiert sind, funktionieren sie nicht und sie funktionieren auch 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 für die automatische Vervollständigung ein Präfixwort 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. Wenn Sie type="number" verwenden, sind nur Zahlen zulässig, die im Bereich zwischen min und max liegen. Wenn Sie versuchen, eine Zahl außerhalb des Bereichs einzugeben, wird die Eingabe als ungültig festgelegt.

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

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

Beim Senden des Formulars legen Browser automatisch den Fokus auf Felder mit problematischen oder fehlenden Pflichtwerten. 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 markieren 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.

Nutzer dabei unterstützen, fehlende erforderliche Daten zu vermeiden

Verwenden Sie das required-Attribut für Eingaben für Pflichtwerte.

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 möglicherweise einfach lieber auf dem Computer. Niedrigere Conversion-Raten auf Mobilgeräten sind aber auch auf eine schlechte Nutzerfreundlichkeit zurückzuführen. Sie sollten Conversions auf Mobilgeräten minimieren und Conversions auf Computern maximieren. Studien haben gezeigt, dass es eine große Chance gibt, die Nutzerfreundlichkeit von Formularen auf Mobilgeräten zu verbessern.

Vor allem ist die Wahrscheinlichkeit höher, dass Nutzer Formulare abbrechen, die lang, komplex und nicht nutzerfreundlich sind. Das gilt insbesondere, wenn Nutzer kleinere Bildschirme verwenden, 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 Formularabläufe zu optimieren, 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 Warenkorb-Verlust während des Bezahlvorgangs
Aus baymard.com/checkout-usability

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

Bezahlvorgang anzeigen

Sie können den Bezahlvorgang weniger komplex gestalten, indem Sie den Fortschritt anzeigen und klar machen, 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. Verwenden Sie für jeden Schritt zur Zahlung Seitenüberschriften und beschreibende Schaltflächenwerte, die klar machen, was jetzt zu tun ist und welcher Bezahlvorgang als Nächstes folgt.

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 auf Android-Geräten, die zeigen, wie sich das Eingabeattribut „enterkeyhint“ auf das Symbol der Eingabetaste auswirkt
Eingabe der wichtigsten Schaltflächen unter Android: „Weiter“ und „Fertig“.

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. Ermöglichen Sie Nutzern, die Artikelmenge ganz einfach über die Zahlungsseite anzupassen. Ihre Priorität beim Bezahlvorgang besteht darin, den Fortschritt bis 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 können Sie den Bezahlvorgang noch weiter vereinfachen, indem Sie Daten ausblenden, 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

Name und Adresse einfach eingeben

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. Das ist auch gut für den Datenschutz der Kunden und kann die Kosten und Haftung für Back-End-Daten 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, es ist möglich, Text zu kopieren und einzufügen, und die Autofill-Funktion wird einfacher.

Fügen Sie vor allem dann keinen separaten Eingabebereich für einen Präfix oder Titel (z. B. Frau, Dr. oder Lord) hinzu, wenn Sie einen triftigen Grund dafür haben. Nutzer können diesen Code zusammen mit ihrem Namen eingeben. Außerdem funktioniert die honorific-prefix-automatische Vervollständigung derzeit in den meisten Browsern nicht. Wenn Sie also ein Feld für ein Namenspräfix oder einen Titel hinzufügen, funktioniert die Autofill-Funktion für das Adressfeld für die meisten Nutzer nicht.

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 Namenseingaben validieren oder die für Namensdaten zulässigen Zeichen einschränken. Bei Alphabeten sollten Sie jedoch möglichst unbeschränkt sein. Es ist unhöflich, wenn man gesagt bekommt, dass der eigene 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

Nutzer sollten nicht gezwungen werden, ihre Adresse in Formularfelder einzugeben, die nicht passen.

Bestehen Sie beispielsweise nicht darauf, dass Hausnummer und Straßenname in separaten Eingabefeldern eingegeben werden, 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 Elementen ü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, die 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 nach Möglichkeit keine Felder vom Typ required. In vielen Ländern haben Adressen beispielsweise keine Postleitzahl und Adressen auf dem Land haben möglicherweise keinen Straßennamen. * Verwenden Sie inklusive Bezeichnungen: „Land/Region“ statt „Land“ und „Postleitzahl“ statt „PLZ“.

Bleiben Sie flexibel! Das einfache Adressformular oben kann so angepasst werden, dass es für viele Sprachen und Regionen „gut genug“ funktioniert.

Postleitzahlbasierte Adresssuche vermeiden

Einige Websites verwenden einen Dienst, um Adressen anhand 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 unsicher auf ihrem Gerät 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

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 Browsern die automatische Ausfüllung. Das Gleiche gilt für andere numerische Daten wie PINs und Bankcodes.

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

Prüfen Sie die Daten sorgfältig.

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 genau zu verstehen, wie Nutzer Ihre Zahlungs- und Adressformulare wahrnehmen.

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:

  • Seitenanalysen: 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 Messung der Leistung 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.