Praxisguide

Usability von Formularen im Checkout

Dieser Praxisguide zeigt Ihnen Formulare im Checkout benutzerfreundlich und intuitiv bedienbar gestaltet werden können.

1. Einleitung

Formulare ausfüllen ist lästig. Dieser Praxisguide zeigt Ihnen deshalb Schritt für Schritt, wie Formulare im Checkout benutzerfreundlich und intuitiv bedienbar gestaltet werden können. Fast alle Empfehlungen sind mit recht wenig Aufwand umzusetzen. Sprechen Sie mit Ihren Kollegen aus der IT oder Webentwicklung!

Wir haben diese Anforderungen an benutzerfreundliche Formulare zusammengestellt

  • Pflichtfelder markieren (siehe 2. Kapitel)
  • Benötigte Informationen erläutern (siehe 3. Kapitel)
  • Richtige Eingabefelder verwenden (siehe 4. Kapitel)
  • Automatische Vervollständigung ermöglichen (siehe 5. Kapitel)
  • Reihenfolge bei Tabs intuitiv gestalten (siehe 6. Kapitel)
  • Aktives Formularfeld markieren (siehe 7. Kapitel)

2. Kenntlichmachen von Pflichtfeldern

Kennzeichnen Sie Eingaben, die der Nutzer zwingend vornehmen muss als Pflichtfelder. Dazu hat sich der Einsatz von Sternchen entweder am Label oder hinter dem Eingabefeld bewährt. Oberhalb des Formulars sollten dann mit dem Hinweis „* Pflichtfeld“ die Sternchen erklärt werden.

Denken Sie auch daran, Besucher darauf hinzuweisen, falls alle Felder Pflichtfelder darstellen.

Statt auf Sternchen setzt Conrad auf Fettmarkierungen. Statt eine neue Markierung einzuführen, verwenden Sie besser erprobte Markierungen wie Sternchen:

3. Benötigte Informationen erläutern und rechtfertigen

Bei manchen Feldern ist es sinnvoll, Besuchern zu erklären, was sie genau dort eintragen sollen. Bieten Sie konkrete Tipps, welche die Eingabe erleichtern.

Außerdem ist es empfehlenswert, zu rechtfertigen, weshalb bestimmte persönliche Daten abgefragt werden. Wenn ein triftiger Grund präsentiert wird, steigt die Bereitschaft, persönliche Daten einzugeben.

3.1 Verschiedene Darstellungsmöglichkeiten

Es gibt drei grundsätzliche Wege, wie diese Erläuterungen aussehen können.

(1) Innerhalb des Formularfeldes kann die gewünschte Eingabe durch Beispielangaben in einer helleren Schrift angezeigt werden:

Diese Funktion kann mit einfachen Mitteln per JavaScript oder bei HTML 5 mit dem „placeholder“-Attribut implementiert werden. Hier der Quelltext des obigen Beispiels:

(2) Neben oder unter dem Formularfeld:

Statt das Feld zu erklären, wäre es in diesem Fall jedoch besser, Benutzernamen komplett abzuschaffen und stattdessen immer E-Mail-Adresse zu verwenden.

(3) In einem JS-Layer. Fällt die Beschreibung eines Feldes umfangreich aus, sollten die Informationen in einem kleinen JavaScript-Layer (auch „Tool Tip“ genannt) dargestellt werden.

Im Praxisguide „Validierung und Fehlermeldungen in Formularen im Checkout“ zeigen wir, wie die Darstellung der Anforderungen in solchen Layern gekonnt mit der Validierung kombiniert werden kann.

Weiterbildung per eLearning.

Werde zum Spezialisten für eCommerce-Optimierung
  • Branchenbekanntes Zertifikat
  • Zeitlich unlimitierter Zugang zu allen Lerninhalten
  • Zu jeder Zeit und an jedem Ort lernen

3.2 Zu erläuternde Felder

Welche Formularfelder sollten erläutert werden? Zusätzlich zu den oben beschriebenen Beispielen sind noch diese Felder erläuterungswürdig.

3.2.1 Nicht-Standardfelder

Insbesondere Felder, die nicht sowieso bekannt (wie zum Beispiel der Name) sind, sollten erklärt werden.

Beim Beck-Shop, einem Versender von Fachbüchern, wird man zum Beispiel aufgefordert, seinen Beruf anzugeben. Hier wäre ein Hinweis sinnvoll, wieso diese Information benötigt wird und ob die Angabe Besuchern irgendwelche Vorteile verschafft.

Generell gilt: Erklären Sie alle Felder, die Besucher überraschen könnten. Bei OTTO muss beispielsweise die Postleitzahl beim Einloggen angegeben werden.

Bei smava.de wird erklärt, wann vorige Adressen eingegeben werden müssen.

3.2.2 Telefonnummer

Eine Telefonnummer scheint für eine Bestellung im Online-Shop nicht notwendig. Wenn ein solches Feld trotzdem vorhanden ist, erläutern Sie weshalb. Ein Beispiel von Cyberport:

3.2.3 Geburtsdatum

Auch das Geburtsdatum scheint keine relevante Angabe zu sein. Auch hier ist eine Erklärung sinnvoll:

Erklärung bei beck-shop.de

Erklärung bei mytoys.de

3.2.4 Passwort

Anforderungen an Passwörter sind oft unterschiedlich. Erläutern Sie deshalb Ihre Anforderungen.

Erläuterung der Anforderung bei OTTO

Ausführlichere Informationen bei OTTO

Cyberport bietet im JavaScript-Layer zusätzlich noch die Möglichkeit, ein Passwort zu generieren, das die Sicherheitsanforderungen erfüllt:

4. Die richtigen Eingabefelder verwenden

Um das Ausfüllen von Formularen besonders einfach zu machen, wählen Sie die richtigen Arten von Eingabefeldern. Besonders mobilen Nutzern machen Sie die Eingabe so sehr viel einfacher. Für diese wird die passende Tastatur angezeigt.

Das Standard-Formularfeld ist das „text“-Feld: <input type=“text“ name=“beispiel-name“>. Dieses ist für viele Eingaben, wie Name und Adresse die richtige Wahl. Im  Folgenden beschreiben wir, wann von diesem Feld abgewichen werden sollte, das heißt, wann ein anderes Feld eingesetzt werden soll.

4.1 E-Mail-Adressen

E-Mail-Adressen enthalten zwangsläufig ein @-Zeichen. Um dieses Zeichen zu erreichen, muss auf mobilen Geräten ein zusätzlicher Button geklickt werden. Ersparen Sie Besuchern diese Arbeit und verwenden Sie diesen Eingabetyp:

<input type=“email“>

Auf dem iPad sieht die Tastatur dann so aus:

4.2 Telefonnummern

Telefonnummer bestehen nur aus Ziffern und einigen wenigen Sonderzeichen. Wenn dieses Formularfeld verwendet wird, werden diese auf mobilen Tastaturen direkt angezeigt:

<input type=’tel‘>

Wieder die Ansicht auf dem iPad:

ConversionBoosting ANALYZE.

Wandle Deine Besucher in mehr Leads & Sales
  • Konkrete Optimierungsvorschläge für mehr Leads & Sales
  • Innovatives Online-Tool zur Conversion-Optimierung
  • Individuelle Analyse Deiner Website

4.3 Checkboxen

Checkboxen sind für zwei Szenarien sinnvoll. Erstens dort, wo Besucher aus einer Liste keinen, einen oder mehrere Punkte selektieren sollen.

Auswahl von Interessensgebieten für Newsletter

Natürlich kommen Checklisten auch bei Fragen nach Zustimmung oder Ablehnung zum Einsatz:

Stellen Sie sicher, dass Checkboxen auch dann ausgewählt werden, wenn Besucher auf den passenden Text klicken. Dies macht das Auswählen von Checkboxen komfortabler.

Technisch umgesetzt wird dies mit dem „for“-Attribut. Dieses hat den gleichen Wert wie die ID der Checkbox:

<input id=“beispiel“ type=“checkbox“>
<label for=“ beispiel“>Hier die Beschreibung</label>

4.4 Radiobuttons

Radio-Buttons sind für die Auswahl aus einer Liste mit ungefähr zwei bis vier Einträgen geeignet.

Die beiden prominentesten Beispiels ist die Wahl zwischen einer privaten und geschäftlichen Bestellung, sowie die Auswahl der Anrede.

Verwenden Sie keine Dropdowns. Statt einem Klick (in den Radiobutton) sind hier zwei Klicks (Dropdown öffnen, Auswahl treffen) notwendig:

Fall mehr als vier Möglichkeiten zur Auswahl stehen und nur eine Auswahl möglich ist, dann eigenen sich Dropdowns (siehe nächstes Unterkapitel) besser. Dann bläht sich das Formular auf und erscheint dem potenziellen Käufer umfangreicher und schwieriger.

Wieder gilt: Bei einem Klick auf die Bezeichnung des Radiobuttons, sollte der Button aktiviert werden.

4.5 Dropdowns

Dropdowns sind für die eindeutige Auswahl bei vier oder mehr Optionen sinnvoll. Hier ein Beispiel von heine.de zur Auswahl der telefonischen Erreichbarkeit:

Nachteil dieses Elementes ist, dass der Nutzer seine Optionen erst mit Aktivierung des Eingabefeldes erfährt. Diese Intransparenz macht das Element für kleine Auswahllisten ungünstig. Radio-Buttons sind dann eine Alternative.

Sortieren Sie die Elemente in einer intuitiven Reihenfolge. Wenn Sie in vielen Ländern verkaufen, ordnen Sie diese Liste alphabetisch. Falls jedoch fast alle Bestellungen aus Deutschland kommen, dann platzieren Sie Deutschland ganz oben.

4.6 Passwörter

Um Besucher vor neugierigen Augen hinter dem Rücken zu schützen, sollten Passwort-Eingaben automatisch mit Sternchen verdeckt werden. Der passende HTML-Code lautet:

<input type=“password“>

Bieten Sie jedoch auch einen Button zum Sichtbarmachen des eingegebenen Passworts an. Diese Funktion ist vielen Besuchern schon auf Windows 8 bekannt:

Möglichkeit bei baur.de

Denken Sie jedoch an die Empfehlung, Passwörter im Checkout erst gar nicht anlegen zu müssen. Stattdessen sollten sie nach der Bestellung erstellt werden (siehe Praxisguide „Darstellung von Formularen im Checkout“).

4.7 Datumsangaben

Für Datumsangaben in der nahen Zukunft oder Vergangenheit eignen sich sogenannte Date Picker. Statt das Datum von Hand einzugeben, kann es per Mausklick ausgewählt werden:

Dieses Feature kann per JavaScript (zum Beispiel mithilfe des bootstrap-Frameworks) umgesetzt werden. Neuere Browser unterstützen folgendes HTML5-Feld auch schon automatisch. Idealerweise implementieren Sie beide Möglichkeiten, wobei die JavaScript-Version als Fallback dient.

<input type=“date“>

Für Geburtstage eigenen sich Date Picker jedoch nicht. Diese liegen weit in der Vergangenheit und entsprechend müsste oft geklickt werden, um das entsprechende Jahr auszuwählen.

Verwenden Sie stattdessen lieber Dropdowns:

5. Auto-Complete ermöglichen

Alle modernen Browser bieten Nutzern die Möglichkeit, eingegebene Daten zu speichern. Diese Daten können dann automatisch in andere Formulare übernommen werden. In Chrome sehen die Vorschläge bei der Eingabe des ersten Buchstabens so aus:

Da nur zuvor gespeicherte Daten in Ihren Checkout eingetragen werden, muss man sich auch nicht sorgen, dass Besucher Datenschutzbedenken haben. Schließlich haben sie dem Speichern der Daten an anderer Stelle zugestimmt.

Die automatische Vervollständigung nimmt Besuchern viel Arbeit ab. Stellen Sie also sicher, dass sie funktioniert. Hierfür müssen zwei Anforderungen erfüllt sein.

Erstens darf die Funktion nicht aktiv deaktiviert worden sein. Falls Formularfelder auf diese Weise gekennzeichnet werden, ist die Funktion in der Tat deaktiviert:

<input type=“text“ name=“ac“ autocomplete=“off“>

Zweitens müssen die Formularfelder richtig markiert sein, damit der Browser erkennt, welche Information dort eingetragen werden soll. Das Attribut „autocomplete“ wird hier mit dem erwarteten Wert befüllt:

<input type=“email“ autocomplete=“email“>

Unter whatwg.org finden Sie eine Liste der von den meisten Browsern erkannten Werte für „autocomplete“. Hier die wichtigsten Werte für den Checkout:

Eingabetyp Wert für „autocomplete“
Vor- und Nachname name
Vorname given-name
Nachname family-name
Geschlecht sex
Geburtstag bday (Format: 1955-06-08)
Firma organization
E-Mail-Adresse email
Telefonnummer tel
Passwort (zum Einloggen) current-password
Straße und Hausnummer street-address
Stadt address-level2
PLZ postal-code
Land country

6. Richtige Reihenfolge bei Verwendung der Tabulator-Taste festlegen

Besucher mit hoher Internetaffininät verwenden oft die Tabulator-Taste statt der Maus, um zwischen Formularfeldern zu springen. Es ist ärgerlich, wenn die Felder nicht in der erwarteten Reihenfolge ausgewählt werden.

Technisch lässt sich dies mit dem Attribut „tabindex“ umsetzen.

<input type=“text“ tabindex=“1″>

Weitere Felder werden aufsteigend nummeriert.

Achten Sie besonders darauf, dass die Reihenfolge intuitiv ist, wenn es Felder in zwei Spalten gibt. Ein häufiger Fall ist eine abweichende Rechnungsadresse bei Kreditkartenzahlungen.

7. Aktives Feld markieren

Signalisieren Sie Besuchern, welches Feld sie gerade ausfüllen. In den meisten Fällen wird ein leichter Rahmen um das Feld gelegt, das sich aktuell im Fokus befindet.

Bei smava.de wird das aktuelle Feld zusätzlich mit einem grauen Rahmen versehen:

ConversionBoosting