Best Practices für Zahlungs- und Adressformulare

Maximieren Sie die Conversions, 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. Schon eine kleine Korrektur kann viel bewirken.

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

Hier ist ein Beispiel für ein einfaches Adressformular, in dem alle Best Practices berücksichtigt werden:

Checkliste

Sinnvolles HTML 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 Bedeutung.

HTML-Elemente wie vorgesehen verwenden

Formular in <form>-Tag einfügen

Vielleicht sind Sie versucht, die <input>-Elemente nicht in ein <form>-Element einzuschließen und die Datenübermittlung ausschließlich mit JavaScript zu verarbeiten.

Machen Sie das nicht!

Mit einem HTML-<form> haben Sie in allen modernen Browsern Zugriff auf eine Reihe leistungsstarker integrierter Funktionen. Außerdem kann es dazu beitragen, dass Ihre Website für Screenreader und andere unterstützende Technologien zugänglich ist. Ein <form> erleichtert auch die Entwicklung grundlegender Funktionen für ältere Browser mit eingeschränkter JavaScript-Unterstützung und ermöglicht das Senden von Formularen, selbst wenn es Probleme mit Ihrem Code gibt – und für die wenigen Nutzer, die JavaScript tatsächlich deaktivieren.

Wenn Sie mehrere Seitenkomponenten für die Nutzereingabe haben, müssen Sie jede in ein eigenes <form>-Element einfügen. Wenn Sie beispielsweise die Suche und die Registrierung auf derselben Seite haben, sollten Sie für jede ein eigenes <form> verwenden.

<label> zum Labeln von Elementen verwenden

Um ein <input>, <select> oder <textarea> zu kennzeichnen, verwenden Sie ein <label>.

Weisen Sie einem Eingabefeld ein Label zu, indem Sie dem for-Attribut des Labels denselben Wert wie dem id-Attribut des Eingabefelds geben.

<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. Diese Vorgehensweise eignet sich 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 geben den Labeltext aus, wenn das Label oder die Eingabe des Labels den Fokus erhält.

Schaltflächen hilfreich gestalten

Verwende <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ächen bieten barrierefreies Verhalten, eine integrierte Funktion zum Senden von Formularen und lassen sich einfach gestalten.

Geben Sie jeder Schaltfläche zum Senden eines Formulars einen Wert, der beschreibt, was sie tut. Verwenden Sie für jeden Schritt zum Abschluss des Bezahlvorgangs einen aussagekräftigen Call-to-Action, der den Fortschritt zeigt und den nächsten Schritt deutlich macht. Beschriften Sie beispielsweise die Schaltfläche zum Senden des Formulars für die Lieferadresse mit Zur Zahlung anstatt mit Weiter oder Speichern.

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

Deaktivieren Sie die Schaltfläche „Senden“ jedoch nicht, wenn noch vollständige und gültige Nutzereingaben ausstehen. Lassen Sie beispielsweise die Schaltfläche Adresse speichern nicht einfach deaktiviert, weil etwas fehlt oder ungültig ist. Das hilft dem Nutzer nicht. Er tippt oder klickt möglicherweise weiter auf die Schaltfläche und geht davon aus, dass sie defekt ist. Wenn Nutzer versuchen, ein Formular mit ungültigen Daten zu senden, sollten Sie ihnen stattdessen erklären, was schiefgelaufen ist und was sie tun müssen, um das Problem zu beheben. Das 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 angezeigt werden, wenn er versucht, ein Formular zu senden.

HTML-Attribute optimal nutzen

Nutzern die Dateneingabe erleichtern

Verwenden Sie das entsprechende type-Attribut für die Eingabe, um die richtige Tastatur auf Mobilgeräten bereitzustellen und die 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 einer Telefonnummer (mit type=tel) angezeigt wird.
Tastaturen, die für E-Mails und Telefon geeignet sind.

Vermeiden Sie bei Datumsangaben die Verwendung benutzerdefinierter select-Elemente. Sie beeinträchtigen die Autofill-Funktion, wenn sie nicht richtig implementiert werden, und funktionieren nicht in älteren Browsern. Für Zahlen wie das Geburtsjahr sollten Sie ein input-Element anstelle eines select-Elements verwenden, da die manuelle Eingabe von Ziffern einfacher und weniger fehleranfällig ist als die Auswahl aus einer langen Drop-down-Liste – insbesondere auf Mobilgeräten. Verwenden Sie inputmode="numeric", um die richtige Tastatur auf Mobilgeräten zu gewährleisten, und fügen Sie Validierungs- und Formathinweise mit Text oder einem Platzhalter hinzu, damit der Nutzer Daten im richtigen Format eingibt.

Automatische Vervollständigung verwenden, um die Barrierefreiheit zu verbessern und Nutzern zu helfen, die erneute Eingabe von Daten zu vermeiden

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 wichtig auf Mobilgeräten, um hohe Abbruchraten bei Formularen zu vermeiden. Die automatische Vervollständigung bietet auch mehrere Vorteile in Bezug auf die Barrierefreiheit.

Wenn für ein Formularfeld ein geeigneter Autocomplete-Wert verfügbar ist, sollten Sie ihn verwenden. Eine vollständige Liste der Werte und Erläuterungen zur korrekten Verwendung finden Sie in den MDN Web Docs.

Stabile Werte

Rechnungsadresse

Standardmäßig ist die Rechnungsadresse mit der Lieferadresse identisch. Reduzieren Sie die visuelle Unordnung, indem Sie einen Link zum Bearbeiten der Rechnungsadresse angeben (oder summary- und details-Elemente verwenden), anstatt die Rechnungsadresse in einem Formular anzuzeigen.

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

Verwenden Sie für die Rechnungsadresse die entsprechenden Werte für die automatische Vervollständigung, genau wie für die Versandadresse, damit der Nutzer Daten nicht mehr als einmal eingeben muss. Fügen Sie ein Präfixwort hinzu, um Attribute automatisch zu vervollständigen, 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

Vermeiden Sie es, Kunden zu „beschimpfen“, weil sie „etwas falsch gemacht“ haben. Helfen Sie Nutzern stattdessen, Formulare schneller und einfacher auszufüllen, indem Sie ihnen helfen, Probleme zu beheben, sobald sie auftreten. 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, darunter 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 Geburtsjahrs zwischen 1900 und 2020 festgelegt. Mit type="number" werden Eingabewerte auf Zahlen im Bereich zwischen min und max 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 gleichzeitig Leerzeichen zuzulassen:

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

Wenn ein Formular gesendet wird, wird der Fokus in Browsern automatisch auf Felder mit problematischen oder fehlenden erforderlichen Werten gesetzt. Kein JavaScript erforderlich.

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

Validieren Sie die Daten inline und geben Sie dem Nutzer Feedback, während er Daten eingibt, anstatt eine Liste von Fehlern zu präsentieren, wenn er auf die Schaltfläche „Senden“ klickt. Wenn Sie Daten auf Ihrem Server nach dem Absenden des Formulars validieren müssen, listen Sie alle gefundenen Probleme auf und heben Sie alle Formularfelder mit ungültigen Werten deutlich hervor. Außerdem sollte neben jedem problematischen Feld eine Inline-Meldung angezeigt werden, in der erklärt wird, was behoben werden muss. Prü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 die Validierung zu verbessern, während Nutzer Daten eingeben und wenn das Formular gesendet wird. Verwenden Sie die Constraint Validation API (die weitgehend unterstützt wird), um benutzerdefinierte Validierungen mit der integrierten Browser-UI hinzuzufügen, um den Fokus festzulegen und Aufforderungen anzuzeigen.

Weitere Informationen

Nutzer dabei unterstützen, fehlende erforderliche Daten zu vermeiden

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

Wenn ein Formular gesendet wird, fordern moderne Browser automatisch zur Eingabe fehlender Daten in required-Feldern auf und setzen den Fokus darauf. Mit der :required-Pseudoklasse können Sie Pflichtfelder hervorheben. Kein JavaScript erforderlich!

Fügen Sie für jedes Pflichtfeld ein Sternchen zum Label hinzu und fügen Sie am Anfang des Formulars einen Hinweis ein, in dem erklärt wird, was das Sternchen bedeutet.

Einfache Zahlung

Die Lücke im mobilen Handel schließen

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

Sie müssen Reibungsverluste reduzieren und den Fokus beibehalten, insbesondere auf Mobilgeräten. Viele Websites verzeichnen mehr Zugriffe über Mobilgeräte, aber mehr Conversions über Computer. Dieses Phänomen wird als Mobile Commerce Gap bezeichnet. Kunden ziehen es möglicherweise einfach vor, einen Kauf auf einem Computer abzuschließen. Niedrigere mobile Conversion-Raten sind aber 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 ein großes Potenzial gibt, die Nutzerfreundlichkeit von Formularen auf Mobilgeräten zu verbessern.

Nutzer brechen Formulare eher ab, wenn sie lang und komplex sind und keine klare Struktur haben. Das gilt insbesondere, wenn Nutzer kleinere Bildschirme verwenden, abgelenkt sind oder es eilig haben. Fragen Sie so wenige Daten wie möglich ab.

„Als Gast bezahlen“ als Standard festlegen

Bei einem Onlineshop ist es am einfachsten, die Reibung bei Formularen zu verringern, indem Sie die Gastzahlung zur Standardeinstellung machen. Zwingen Sie Nutzer nicht, ein Konto zu erstellen, bevor sie einen Kauf tätigen. Die fehlende Möglichkeit, als Gast zu bezahlen, ist ein häufiger Grund für abgebrochene Einkäufe.

Gründe für den Abbruch des Kaufs durch den Nutzer.
Quelle: 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 für den Nutzer also schnell und einfach sein.

Fortschritt an der Kasse 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 sehen Sie, wie der britische Einzelhändler johnlewis.com das umsetzt.

Fortschritt des Zahlungsvorgangs anzeigen
:

Sie müssen Schwung beibehalten. Verwenden Sie für jeden Schritt zur Zahlung Seitenüberschriften und beschreibende Schaltflächenwerte, aus denen hervorgeht, was als Nächstes zu tun ist und welcher Checkout-Schritt als Nächstes folgt.

Schaltflächen in Formularen mit aussagekräftigen Namen versehen, die zeigen, was als Nächstes passiert
:

Verwenden Sie das Attribut enterkeyhint für 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 sich das Eingabeattribut „enterkeyhint“ auf das Symbol der Eingabetaste auswirkt.
Schaltflächen für die Eingabetaste unter Android: „Weiter“ und „Fertig“

Das Attribut enterkeyhint wird unter Android und iOS unterstützt. Weitere Informationen

Machen Sie es Nutzern leicht, im Kaufvorgang vor- und zurückzugehen, um ihre Bestellung anzupassen, auch wenn sie sich im letzten Zahlungsschritt befinden. Zeige alle Details der Bestellung an, nicht nur eine kurze Zusammenfassung. Nutzern ermöglichen, die Artikelmengen auf der Zahlungsseite einfach anzupassen Ihre Priorität an der Kasse ist es, den Conversion-Prozess nicht zu unterbrechen.

Störende Elemente entfernen

Entfernen Sie visuelle Unordnung und Ablenkungen wie Produktangebote, um potenzielle Ausstiegspunkte zu begrenzen. Viele erfolgreiche Einzelhändler entfernen sogar die Navigation und die Suche aus dem Checkout.

Zwei Screenshots auf einem Mobilgerät, die den Fortschritt an der Kasse auf johnlewis.com zeigen. Suchanfragen, Navigation und andere Ablenkungen werden entfernt.
Suche, Navigation und andere Ablenkungen wurden für den Check-out entfernt.

Konzentrieren Sie sich auf die Reise. Jetzt ist nicht der richtige Zeitpunkt, Nutzer zu etwas anderem zu verleiten.

Eine Zahlungsseite auf einem Mobilgerät mit einer ablenkenden Werbung für KOSTENLOSE STICKER.
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 als Nur-Text (nicht in einem Formular) angezeigt und Nutzer können sie über einen Link ändern.

Der Bereich „Bestellung überprüfen“ auf einer Checkout-Seite mit Text im Klartext und Links zum Ändern der Lieferadresse, Zahlungsmethode und Rechnungsadresse, die nicht angezeigt werden.
Daten ausblenden, die Kunden nicht sehen müssen
:

Eingabe von Name und Adresse erleichtern

Nur nach den benötigten Daten fragen

Bevor Sie mit dem Programmieren Ihrer Namens- und Adressformulare 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 verringern, besteht darin, unnötige Felder zu entfernen. Das ist auch gut für den Datenschutz und kann die Kosten und Haftung für Backend-Daten reduzieren.

Eingabe eines einzelnen Namens

Ermöglichen Sie Ihren Nutzern, ihren Namen über eine einzige Eingabe einzugeben, es sei denn, Sie haben einen guten Grund, Vornamen, Nachnamen, Anreden oder andere Namensbestandteile separat zu speichern. Wenn nur ein Namensfeld verwendet wird, sind Formulare weniger komplex, es ist möglich, Text zu kopieren und einzufügen, und Autofill wird vereinfacht.