Maximieren Sie die Anzahl der Conversions, indem Sie Nutzern das Ausfüllen von Adress- und Zahlungsformularen so schnell und einfach wie möglich machen.
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
- Verwenden Sie aussagekräftige HTML-Elemente:
<form>
,<input>
,<label>
und<button>
. - Beschriften Sie jedes Formularfeld mit einem
<label>
. - Verwenden Sie HTML-Elementattribute, um auf integrierte Browserfunktionen zuzugreifen, insbesondere
type
undautocomplete
mit geeigneten Werten. - Verwenden Sie
type="number"
nicht für Zahlen, die nicht inkrementiert werden sollen, z. B. Zahlungskartennummern. Verwenden Sie stattdessentype="text"
undinputmode="numeric"
. - Wenn für
input
,select
odertextarea
ein entsprechender Autocomplete-Wert verfügbar ist, sollten Sie ihn verwenden. - Damit Browser Formulare automatisch ausfüllen können, geben Sie für die Eingabeattribute
name
undid
stabile Werte an, die sich nicht zwischen Seitenladevorgängen oder Websiteimplementierungen ändern. - Deaktivieren Sie Sendeschaltflächen, nachdem darauf getippt oder geklickt wurde.
- Validieren Sie die Daten bei der Eingabe, nicht nur bei der Formulareinreichung.
- Legen Sie die Option Als Gast bezahlen als Standard fest und vereinfachen Sie die Kontoerstellung nach Abschluss des Bezahlvorgangs.
- Zeigen Sie den Fortschritt durch den Bezahlvorgang in klaren Schritten mit deutlichen Calls-to-Action an.
- Begrenzen Sie potenzielle Ausstiegspunkte an der Kasse, indem Sie unnötige Elemente entfernen und Ablenkungen vermeiden.
- Zeigen Sie an der Kasse die vollständigen Bestelldetails an und ermöglichen Sie einfache Bestellanpassungen.
- Fordern Sie keine Daten an, die Sie nicht benötigen.
- Bitten Sie um Namen mit einer einzigen Eingabe, es sei denn, Sie haben einen triftigen Grund, dies nicht zu tun.
- Erzwingen Sie keine ausschließlich lateinischen Zeichen für Namen und Nutzernamen.
- Verschiedene Adressformate zulassen
- Verwenden Sie einen einzelnen
textarea
für die Adresse. - Verwenden Sie die automatische Vervollständigung für die Rechnungsadresse.
- Internationalisieren und lokalisieren Sie sie nach Bedarf.
- Vermeiden Sie Postleitzahl-Adressabfragen.
- Verwenden Sie entsprechende Werte für die automatische Vervollständigung von Zahlungskarten.
- Verwenden Sie einen einzigen Eingabebereich für Kartennummern.
- Verwenden Sie keine benutzerdefinierten Elemente, wenn sie die Autofill-Funktion beeinträchtigen.
- Testen Sie im Feld und im Lab: Seitenanalysen, Interaktionsanalysen und Leistungsmessung mit echten Nutzern.
- Testen Sie in verschiedenen Browsern, auf verschiedenen Geräten und Plattformen.
Aussagekräftigen HTML-Code verwenden
Verwenden Sie die für den Job erstellten Elemente und Attribute:
<form>
,<input>
,<label>
und<button>
type
,autocomplete
undinputmode
Sie ermöglichen integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen Ihrem Markup mehr Bedeutung.
HTML-Elemente ordnungsgemäß verwenden
Fügen Sie das Formular in ein <form> ein.
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 in jeweils eigenen <form>
-Elementen.
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. 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, das als Schaltfläche dient. 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 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 die Kasse 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.
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.
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.
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.
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, 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.
Sie können die Kontoregistrierung nach dem Bezahlvorgang anbieten. An diesem Punkt 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.
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.
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.
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.
Konzentrieren Sie sich auf den Kaufprozess. Jetzt ist nicht der richtige Moment, Nutzer zu etwas anderem zu verleiten.
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.
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 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 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.
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. --> <input pattern="[\w \-]+" ...>
<!-- Accepts Unicode letters. --> <input pattern="[\p{L} \-]+" ...>
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 flexibel gestalten
Zwingende Nutzer nicht dazu, 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 kein County, aber viele Websites zwingen Nutzer trotzdem dazu, eines 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 „ausreichend gut“ 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.
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.
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, Zahlungskartendetails auf einem physischen Datenträger aufzubewahren oder Zahlungskartendaten 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.
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 die automatische Ausfüllung von Formularen in Browsern. Das Gleiche gilt für andere numerische Daten wie PINs und Bankcodes.
Prüfen Sie die Daten sorgfältig.
Sie sollten die Dateneingabe sowohl in Echtzeit als auch vor dem Senden 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.
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
- Best Practices für Anmeldeformulare
- Best Practices für Anmeldeformulare
- Telefonnummern im Web mit der WebOTP API bestätigen
- Hervorragende Formulare erstellen
- Best Practices für das Design von Formularen für Mobilgeräte
- Leistungsstärkere Formularsteuerelemente
- Barrierefreie Formulare erstellen
- Registrierungsvorgang mit der Credential Management API vereinfachen
- Frank's Compulsive Guide to Postal Addresses enthält nützliche Links und umfangreiche Informationen zu Adressformaten in über 200 Ländern.
- Countries Lists bietet ein Tool zum Herunterladen von Ländercodes und -namen in mehreren Sprachen und Formaten.