Best Practices für Zahlungs- und Adressformulare

Sie können die Anzahl der Conversions maximieren, indem Sie Ihren Nutzern helfen, Adress- und Zahlungsformulare so schnell und einfach wie möglich auszufüllen.

Sam Dutton

Gut gestaltete Formulare helfen Nutzern und steigern die Conversion-Raten. Eine kleine Korrektur kann einen großen Unterschied machen!

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

Hier sehen Sie 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

Diese ermöglichen integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen Ihrem Markup eine Bedeutung.

HTML-Elemente wie vorgesehen verwenden

Formular in ein <form>-Element einfügen

Sie könnten versucht sein, Ihre <input>-Elemente nicht in eine <form> zu packen und die Dateneinreichung ausschließlich mit JavaScript zu verarbeiten.

Machen Sie das nicht!

Mit <form>-HTML-Tags erhalten Sie Zugriff auf eine Reihe leistungsstarker integrierter Funktionen in allen modernen Browsern und können dazu beitragen, Ihre Website für Screenreader und andere Hilfsgeräte zugänglich zu machen. Ein <form> vereinfacht auch das Erstellen grundlegender Funktionen für ältere Browser mit eingeschränkter JavaScript-Unterstützung und das Senden von Formularen, selbst wenn es im Code eine Störung gibt – und für die geringe Anzahl von Nutzern, die JavaScript tatsächlich deaktivieren.

Wenn du mehr als eine Seitenkomponente für die Nutzereingabe hast, musst du jede in ein eigenes <form>-Element einfügen. Wenn sich beispielsweise Suche und Registrierung auf derselben Seite befinden, fügen Sie für beide Seiten jeweils eine eigene <form> ein.

<label> verwenden, um Elemente zu beschriften

Wenn Sie einem <input>, <select> oder <textarea> ein Label hinzufügen möchten, verwenden Sie eine <label>.

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

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

Verwenden Sie für eine einzelne Eingabe ein einzelnes Label: Versuchen Sie nicht, mehrere Eingaben mit nur einem Label mit einem Label zu versehen. Dies funktioniert am besten für Browser und am besten für Screenreader. Durch Tippen oder Klicken auf ein Label wird der Fokus auf die zugehörige Eingabe verschoben. Screenreader lesen den Labeltext vor, wenn das Label oder die Eingabe des Labels hervorgehoben wird.

Schaltflächen hilfreich gestalten

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

Weisen Sie jeder Schaltfläche zum Senden eines Formulars einen Wert zu, der den Zweck angibt. Verwenden Sie für jeden Schritt auf dem Weg zum Bezahlvorgang einen beschreibenden Call-to-Action, der den Fortschritt zeigt und den nächsten Schritt offensichtlich macht. Fügen Sie beispielsweise in Ihrem Formular für die Lieferadresse das Label Weiter zur Zahlung hinzu, anstatt Weiter oder Speichern.

Es kann sinnvoll sein, eine Senden-Schaltfläche zu deaktivieren, nachdem der Nutzer darauf getippt oder angeklickt hat. Das gilt insbesondere, wenn der Nutzer eine Zahlung tätigt oder eine Bestellung aufgibt. Viele Nutzer klicken wiederholt auf Schaltflächen, auch wenn sie einwandfrei funktionieren. Das kann den Bezahlvorgang durcheinanderbringen und die Serverlast erhöhen.

Andererseits sollten Sie eine Schaltfläche zum Senden, die auf vollständige und gültige Nutzereingaben warten, nicht deaktivieren. Lassen Sie beispielsweise die Schaltfläche Adresse speichern nicht einfach deaktiviert, da etwas fehlt oder ungültig ist. Das hilft den Nutzenden nicht, da sie möglicherweise weiterhin auf die Schaltfläche tippen oder klicken und annehmen, dass sie defekt ist. Wenn Nutzer ein Formular mit ungültigen Daten senden möchten, erklären Sie ihnen stattdessen, was schiefgelaufen ist und wie Sie das Problem beheben können. Dies ist besonders wichtig auf Mobilgeräten, wo die Dateneingabe 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

Erleichtern Sie den Nutzenden die Eingabe von Daten.

Verwenden Sie das entsprechende Eingabeattribut type, um auf Mobilgeräten die richtige Tastatur festzulegen und eine einfache 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 mit einer Tastatur, über die eine E-Mail-Adresse mit „type=email“ und eine Telefonnummer (mit „type=tel“) eingegeben werden kann.
Für E-Mail und Telefon geeignete Tastaturen

Vermeiden Sie für Datumsangaben die Verwendung benutzerdefinierter select-Elemente. Sie funktionieren bei falscher Implementierung nicht richtig und funktionieren in älteren Browsern nicht. Für Zahlen wie das Geburtsjahr sollten Sie ein input-Element statt eines select verwenden, da die manuelle Eingabe von Ziffern einfacher und weniger fehleranfällig ist als die Auswahl aus einer langen Drop-down-Liste. Dies gilt insbesondere auf Mobilgeräten. Verwende inputmode="numeric", damit auf Mobilgeräten die richtige Tastatur verwendet wird. Füge Validierungs- und Formatierungshinweise 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 zu vermeiden, dass Daten noch einmal eingegeben werden müssen

Mit geeigneten autocomplete-Werten können Browser Nutzern helfen, indem sie Daten sicher speichern und input-, select- und textarea-Werte automatisch ausfüllen lassen. Das ist besonders für Mobilgeräte wichtig und wichtig, um hohe Ausstiegsraten zu vermeiden. Die automatische Vervollständigung bietet mehrere Vorteile der Barrierefreiheit.

Wenn ein geeigneter Wert für die automatische Vervollständigung für ein Formularfeld verfügbar ist, sollten Sie ihn verwenden. MDN Web Docs enthält eine vollständige Liste von Werten und Erklärungen zu deren korrekter Verwendung.

Stabile Werte

Rechnungsadresse

Standardmäßig muss die Rechnungsadresse dieselbe sein wie die Lieferadresse. Damit es übersichtlicher wird, sollten Sie einen Link zum Bearbeiten der Rechnungsadresse bereitstellen (oder die Elemente summary und details 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 hinzu, um die Abrechnung zu prüfen.

Verwenden Sie die entsprechenden Werte für die automatische Vervollständigung für die Rechnungsadresse wie für die Versandadresse, damit der Nutzer Daten nur einmal eingeben muss. Fügen Sie den Attributen zur automatischen 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 bei der Eingabe der richtigen Daten helfen

Vermeiden Sie es, Kunden nur abzuwarten, weil sie etwas falsch gemacht haben. 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 ist es, sie zu unterstützen, nicht sie zu bestrafen.

Sie können Formularelementen Einschränkungsattribute hinzufügen, um zulässige Werte wie min, max und pattern anzugeben. Der Gültigkeitsstatus des Elements wird automatisch festgelegt, je nachdem, ob der Wert des Elements gültig ist. Dies gilt auch für die CSS-Pseudoklassen :valid und :invalid, die zum Gestalten von Elementen mit gültigen oder ungültigen Werten verwendet werden können.

Beispielsweise gibt der folgende HTML-Code eine Eingabe für ein Geburtsjahr zwischen 1900 und 2020 an. Bei Verwendung von type="number" werden Eingabewerte auf Zahlen innerhalb des durch min und max angegebenen Bereichs beschränkt. Wenn Sie versuchen, eine Zahl außerhalb des Bereichs einzugeben, wird der Eingabestatus auf einen ungültigen Status gesetzt.

Im folgenden Beispiel wird pattern="[\d ]{10,30}" verwendet, um eine gültige Zahlungskartennummer sicherzustellen und Leerzeichen zuzulassen:

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

Bei der Formularübermittlung wird vom Browser automatisch der Fokus auf Felder mit problematischen oder fehlenden erforderlichen Werten gesetzt. JavaScript ist nicht erforderlich.

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

Die Inline-Validierung vornehmen und dem Nutzer Feedback geben, während er Daten eingibt, anstatt eine Liste mit Fehlern bereitzustellen, wenn er auf „Senden“ klickt. Wenn Sie Daten auf Ihrem Server nach dem Senden des Formulars validieren müssen, listen Sie alle gefundenen Probleme auf und markieren Sie alle Formularfelder mit ungültigen Werten deutlich. Außerdem wird neben jedem problematischen Feld eine Nachricht angezeigt, in der erläutert wird, was behoben werden muss. Überprüfen Sie Serverprotokolle und Analysedaten auf häufige Fehler. Möglicherweise müssen Sie Ihr Formular neu gestalten.

Außerdem sollten Sie JavaScript verwenden, um eine zuverlässigere Validierung durchzuführen, wenn Nutzer Daten eingeben oder Formulare senden. Mit der allgemein unterstützten Constraint Validation API können Sie über die integrierte Browser-UI eine benutzerdefinierte Validierung hinzufügen, um den Fokus festzulegen und Aufforderungen anzuzeigen.

Weitere Informationen finden Sie unter JavaScript für eine komplexere Echtzeitvalidierung verwenden.

Nutzern helfen, nicht erforderliche Daten zu verpassen

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

Wenn ein Formular gesendet wird, werden Sie in modernen Browsern automatisch gefragt und konzentrieren sich auf required-Felder mit fehlenden Daten. Mit der Pseudoklasse :required können Sie Pflichtfelder hervorheben. JavaScript ist nicht erforderlich.

Fügen Sie der Beschriftung für jedes Pflichtfeld ein Sternchen hinzu und fügen Sie zu Beginn des Formulars einen Hinweis zur Bedeutung des Sternchens hinzu.

Bezahlvorgang vereinfachen

Denken Sie an die Lücke im mobilen Handel!

Stellen Sie sich vor, Ihre Nutzer hätten zu einem Erschöpfungsbudget. Wenn du sie aufbrauchst, verlassen deine Nutzer die Website.

Besonders auf mobilen Seiten ist es wichtig, Reibungspunkte zu vermeiden und den Fokus zu wahren. Viele Websites erhalten mehr Zugriffe auf Mobilgeräten, aber mehr Conversions auf Computern – ein Phänomen, das als Lücke im Handel auf Mobilgeräten bezeichnet wird. Kunden ziehen es vielleicht vor, einen Kauf auf einem Computer abzuschließen, aber niedrigere mobile Conversion-Raten sind auch auf eine schlechte Nutzererfahrung zurückzuführen. Ihre Aufgabe ist es, verlorene Conversions auf Mobilgeräten zu minimieren und Conversions auf Computern zu maximieren. Studien haben gezeigt, dass es enorme Chancen gibt, die Nutzerfreundlichkeit von mobilen Formularen zu verbessern.

Vor allem aber verlassen Nutzer Formulare, die lang aussehen, komplex sind und keine Orientierung haben. Dies gilt insbesondere für kleinere Bildschirme, abgelenkt oder in Eile. Bitten Sie um so wenig Daten wie möglich.

Als Standard bezahlen

Die einfachste Möglichkeit, das Formular für einen Onlineshop zu optimieren, ist die Option „Als Gast bezahlen“ als Standardmethode festzulegen. Sie sollten Nutzer nicht dazu zwingen, vor dem Kauf ein Konto zu erstellen. Als Hauptgrund für das Verlassen des Einkaufswagens wird die Option „Als Gast bezahlen“ genannt.

Gründe für das Verlassen des Einkaufswagens an der Kasse.
Von baymard.com/checkout-usability

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

Bezahlvorgang anzeigen

Sie können den Bezahlvorgang weniger komplex gestalten, indem Sie den Fortschritt zeigen und deutlich machen, was als Nächstes zu tun ist. Das folgende Video zeigt, wie der britische Einzelhändler johnlewis.com dieses Ziel erreicht.

Bezahlvorgang anzeigen

Du musst die Dynamik beibehalten! Verwende für jeden Schritt auf dem Weg zur Zahlung Seitenüberschriften und beschreibende Schaltflächenwerte, die deutlich machen, was jetzt getan werden muss und welcher Bezahlschritt als Nächstes kommt.

Geben Sie Formularschaltflächen aussagekräftige Namen, um den nächsten Schritt zu verdeutlichen.

Verwenden Sie das Attribut enterkeyhint bei Formulareingaben, um das Label der 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 für die Eingabetaste das Symbol der Eingabetaste ändert.
Auf Android-Geräten die wichtigsten Schaltflächen eingeben: „Weiter“ und „Fertig“.

Das Attribut enterkeyhint wird unter Android und iOS unterstützt. Weitere Informationen findest du in der Erläuterung zur Funktion „enterkeyhint“.

Machen Sie es Nutzenden leicht, während des Bezahlvorgangs hin- und herzuspringen und ihre Reihenfolge zu ändern, selbst wenn sie sich am letzten Zahlungsschritt befinden. Zeigen Sie alle Details der Bestellung, nicht nur eine begrenzte Zusammenfassung. Ermöglichen Sie es Nutzern, die Artikelmenge ganz einfach auf der Zahlungsseite anzupassen. An der Kasse ist es für Sie höchste Priorität, Unterbrechungen auf dem Weg zur Conversion zu vermeiden.

Störende Elemente entfernen

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

Zwei Screenshots auf einem Mobilgerät, die den Fortschritt beim Bezahlvorgang auf johnlewis.com zeigen. Die Suche, die Navigation und andere störende Elemente werden entfernt.
Keine Beeinträchtigung der Suche, der Navigation und anderer störender Elemente beim Bezahlvorgang.

Bleiben Sie konzentriert. Dies ist nicht der richtige Zeitpunkt, um Nutzende zu einer anderen Aktion zu verleiten!

Screenshot der Zahlungsseite auf einem Mobilgerät mit ablenkender Werbung für KOSTENLOSE STICKER.
Lenke Kunden nicht vom Abschluss des Kaufs ab.

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 Nur-Text-Format (nicht in einem Formular) angezeigt und Nutzer können sie über einen Link ändern.

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

Einfache Eingabe des Namens und der Adresse

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

Bevor Sie mit dem Codieren Ihrer Namens- und Adressformulare beginnen, sollten Sie wissen, welche Daten erforderlich sind. Fragen Sie nicht nach Daten, die Sie nicht benötigen! Die einfachste Möglichkeit, die Formularkomplexität zu reduzieren, besteht darin, unnötige Felder zu entfernen. Dies ist auch gut für den Datenschutz der Kundschaft und kann die Kosten und die Verbindlichkeit im Back-End-Daten reduzieren.

Nur einen Namen eingeben

Erlauben Sie Nutzern, ihren Namen in einer einzigen Eingabe einzugeben, es sei denn, es gibt einen guten Grund, Vornamen, Familiennamen, Ehrungen oder andere Namensbestandteile separat zu speichern. Die Verwendung eines einzigen Namens macht Formulare weniger komplex, ermöglicht Ausschneiden und Einfügen und vereinfacht das automatische Ausfüllen.

Vor allem, es sei denn, Sie haben guten Grund, dies nicht zu tun, fügen Sie keine separate Eingabe für ein Präfix oder einen Titel hinzu (z. B. „Frau“, „Dr.“ oder „Herr“). Wenn Nutzer möchten, können sie das zusammen mit ihrem Namen eingeben. Außerdem funktioniert die automatische Vervollständigung von honorific-prefix derzeit in den meisten Browsern nicht. Wenn also ein Feld für das Namenspräfix oder -titel hinzugefügt wird, funktioniert das automatische Ausfüllen von Adressformularen 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, achten Sie darauf, die entsprechenden Werte für die Vervollständigung zu verwenden:

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

Internationale Namen zulassen

Sie können Ihre Namenseingaben validieren oder die für Namensdaten zulässigen Zeichen beschränken. Sie müssen Alphabete jedoch so uneingeschränkt wie möglich verwenden. Es ist unhöflich, zu erfahren, dass dein Name „ungültig“ ist!

Vermeiden Sie für die Validierung die Verwendung regulärer Ausdrücke, die ausschließlich lateinischen Zeichen entsprechen. Nur lateinische Buchstaben schließen Nutzer aus, deren Namen oder Adressen Zeichen enthalten, die nicht zum lateinischen Alphabet gehören. Lassen Sie stattdessen den Unicode-Buchstabenabgleich zu und achten Sie darauf, dass Ihr Back-End Unicode sowohl als Eingabe als auch als 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 \-]+" ...>
Das sollten Sie tun:
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>
Unicode-Buchstaben im Vergleich zu nur lateinischen Buchstaben.

Verschiedene Adressformate zulassen

Beachten Sie beim Entwerfen eines Adressformulars die erstaunliche Vielfalt von Adressformaten, selbst innerhalb eines einzelnen Landes. Achten Sie darauf, keine Annahmen über "normale" Adressen zu treffen. Wenn Sie sich nicht sicher sind, sehen Sie sich die Seltsamkeit der britischen Adresse an.

Adressformulare flexibel gestalten

Sie sollten Nutzer nicht dazu zwingen, ihre Adresse in Formularfelder zu drücken, die nicht passen.

Bestehen Sie beispielsweise nicht auf einer Hausnummer und einem Straßennamen in separaten Eingaben, da dieses Format bei vielen Adressen nicht verwendet wird und unvollständige Daten die Autofill-Funktion des Browsers beschädigen können.

Seien Sie besonders vorsichtig bei required-Adressfeldern. Adressen in Großstädten im Vereinigten Königreich haben beispielsweise keinen County, aber auf vielen Websites müssen Nutzer trotzdem einen angeben.

Die Verwendung von zwei flexiblen Adresszeilen ist für eine Vielzahl von Adressformaten ausreichend.

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

Labels hinzufügen, die ü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" ...>

Du kannst das ausprobieren, indem du die eingebettete Demo unten remixen und bearbeitest.

Einzelnen Textbereich für die Adresse verwenden

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

Der textarea-Ansatz passt zu jedem Adressformat und eignet sich hervorragend zum Ausschneiden und Einfügen. Allerdings entspricht er möglicherweise nicht Ihren Datenanforderungen. Außerdem kann es passieren, dass Nutzer die Funktion „Autofill“ verpassen, wenn sie zuvor nur Formulare mit address-line1 und address-line2 verwendet haben.

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

Hier ist ein Beispiel für ein Formular, das die Verwendung eines einzelnen textarea für eine Adresse veranschaulicht:

Adressformulare internationalisieren und lokalisieren

Bei Adressformularen ist es besonders wichtig, die Internationalisierung und Lokalisierung je nach Standort der Nutzer zu berücksichtigen.

Beachten Sie, dass die Benennung von Adressteilen sowie das Adressformat variieren, selbst innerhalb einer Sprache.

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

Es kann irritierend oder rätselhaft sein, wenn ein Formular angezeigt wird, das nicht zu Ihrer Adresse passt oder in dem nicht die erwarteten Wörter enthalten sind.

Möglicherweise ist es für deine Website erforderlich, Adressformulare für mehrere Sprachen anzupassen, aber die oben beschriebenen Techniken zur Maximierung der Formularflexibilität können angemessen sein. Wenn Sie Ihre Adressformulare nicht lokalisieren, sollten Sie die wichtigsten Prioritäten für die Umsetzung einer Reihe von Adressformaten kennen: * Vermeiden Sie zu genaue Angaben in Bezug auf Adressbestandteile, z. B. das Bestehen auf einem Straßennamen oder einer Hausnummer. * Vermeiden Sie es nach Möglichkeit, Felder auf required zu setzen. Adressen in vielen Ländern haben beispielsweise keine Postleitzahl und ländliche Adressen haben möglicherweise keinen Straßen- oder Straßennamen. * Verwenden Sie inklusive Bezeichnungen: „Land/Region“ nicht „Land“ und „Postleitzahl“ nicht „Postleitzahl“.

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

Nachschlagen von Adressen nach Postleitzahlen vermeiden

Einige Websites nutzen einen Dienst, um Adressen anhand von Postleitzahl oder PLZ abzurufen. Dies kann für einige Anwendungsfälle sinnvoll sein, Sie sollten sich jedoch der potenziellen Nachteile bewusst sein.

Der Vorschlag für eine Postleitzahl funktioniert nicht für alle Länder. Außerdem können Postleitzahlen in einigen Regionen eine große Anzahl potenzieller Adressen enthalten.

Die Postleitzahlen können sehr viele Adressen enthalten.

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

Durch die Eingabe eines einzelnen Namens ist die Adresseingabe mit nur einem Klick möglich.

Zahlungsformulare vereinfachen

Zahlungsformulare sind der wichtigste Teil des Bezahlvorgangs. Eine schlechte Form des Zahlungsformulars ist eine häufige Ursache für das Verlassen eines Einkaufswagens. Der Teufel steckt in den Details: Kleine Pannen können Nutzer dazu verleiten, einen Kauf abzubrechen, vor allem auf Mobilgeräten. Ihre Aufgabe ist es, Formulare so zu gestalten, dass Nutzende Daten so einfach wie möglich eingeben können.

Nutzern helfen, die erneute Eingabe von Zahlungsdaten zu vermeiden

Achte darauf, in den Zahlungskartenformularen die entsprechenden autocomplete-Werte anzugeben, einschließlich der Kartennummer, des Namens auf der Karte sowie des Monats und des Jahres für das Ablaufdatum:

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

Dadurch können Browser Nutzer unterstützen, indem sie Zahlungskartendetails sicher speichern und Formulardaten korrekt eingeben. Ohne die automatische Vervollständigung ist es möglicherweise wahrscheinlicher, dass Nutzer physische Aufzeichnungen der Zahlungskartendetails speichern oder Zahlungskartendaten unsicher auf ihrem Gerät speichern.

Vermeiden Sie die Verwendung benutzerdefinierter Elemente für Zahlungskartendaten

Wenn benutzerdefinierte Elemente nicht richtig konfiguriert sind, können sie den Zahlungsfluss unterbrechen, indem sie die Autofill-Funktion unterbrechen. Sie funktionieren dann in älteren Browsern nicht. Wenn alle anderen Zahlungskartendetails über die automatische Vervollständigung verfügbar sind, ein Nutzer aber gezwungen ist, seine physische Zahlungskarte nach dem Ablaufdatum zu suchen, weil Autofill für ein benutzerdefiniertes Element nicht funktioniert hat, verlieren Sie wahrscheinlich einen Verkauf. Sie können stattdessen Standard-HTML-Elemente verwenden und sie entsprechend gestalten.

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

Einheitliche Eingabe für Zahlungskarten und Telefonnummern verwenden

Für Zahlungskarten und Telefonnummern wird nur eine Eingabe verwendet: Teilen Sie die Nummer nicht in Teile auf. Das erleichtert Nutzern die Eingabe von Daten, vereinfacht die Validierung und ermöglicht den Browsern das automatische Ausfüllen. Wiederholen Sie diesen Vorgang für andere numerische Daten wie PIN und Bankcodes.

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

Sorgfältig validieren

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

Der reguläre Ausdruck pattern muss jedoch flexibel genug sein, um den Bereich der Länge der Zahlungskartennummern zu verarbeiten: zwischen 14 Ziffern (oder weniger) und 20 Ziffern (oder mehr). Weitere Informationen zur Strukturierung von Zahlungskartennummern findest du auf LDAPwiki.

Erlaube Nutzern, Leerzeichen bei der Eingabe einer neuen Zahlungskartennummer einzufügen, da die Zahlen auf physischen Karten angezeigt werden. Dies ist freundlicher für den Nutzer (Sie müssen ihm nicht sagen, dass er etwas falsch gemacht hat), weniger Unterbrechungen des Conversion-Ablaufs und es ist einfacher, Leerzeichen in Zahlen vor der Verarbeitung zu entfernen.

Tests auf verschiedenen Geräten, Plattformen, Browsern und Versionen

Es ist besonders wichtig, Adress- und Zahlungsformulare auf den Plattformen zu testen, die Ihre Nutzer am häufigsten verwenden, da Funktionalität und Darstellung von Formularelementen variieren können und Unterschiede in der Größe des Darstellungsbereichs zu einer problematischen Positionierung führen können. Mit dem BrowserStack können Sie Open-Source-Projekte auf verschiedenen Geräten und in verschiedenen Browsern kostenlos testen.

Screenshots des Zahlungsformulars payment-form.glitch.me auf dem iPhone 7 und 11. Die Schaltfläche „Zahlung abschließen“ wird auf iPhone 11, aber nicht auf iPhone 7 angezeigt.
Dieselbe Seite auf iPhone 7 und iPhone 11.
Reduziere den Abstand in kleineren Darstellungsbereichen auf Mobilgeräten, damit die Schaltfläche Zahlung abschließen nicht ausgeblendet ist.

Analysen und RUM implementieren

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

Dazu benötigen Sie Analysen und echtes Nutzermonitoring – Daten über das Erlebnis echter Nutzer, z. B. wie lange das Laden von Zahlungsseiten dauert oder wie lange die Zahlung dauert:

  • Seitenanalyse: Seitenaufrufe, Absprungraten und Ausstiege für jede Seite mit einem Formular.
  • Interaktionsanalysen: Zieltrichter und Ereignisse geben an, wo Nutzer den Bezahlvorgang abbrechen und welche Aktionen sie ausführen, wenn sie mit Ihren Formularen interagieren.
  • Websiteleistung: Nutzerorientierte Messwerte geben Aufschluss darüber, ob Ihre Zahlungsseiten langsam geladen werden, und wenn ja, woran dies liegt.

Seitenanalysen, Interaktionsanalysen und Analysen der echten Nutzerleistung sind besonders wertvoll, wenn sie mit Serverlogs, 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.

Dadurch erhalten Sie eine solide Grundlage, um den Aufwand zu priorisieren, Änderungen vorzunehmen und Erfolge zu belohnen.

Weiterlernen

Foto von @rupixen auf Unsplash