Darstellung von Formularen im Checkout

Der Checkout-Prozess ist ein sensibler Punkt im Online-Shopping: Eine Vielzahl an Kunden stöbert im Shop, fügt dem Warenkorb mit echter Kaufabsicht Artikel hinzu und geht doch anschließend im Checkout verloren.

Dieser Praxisguide hilft Ihnen dabei, das Layout und die Darstellung von Formularen im Checkout zu optimieren. Der erste Eindruck zählt schließlich auch bei Formularen im Checkout. Allein der Blick auf eine Formularseite löst beim Nutzer eine Reihe von Überlegungen aus. Er bewertet reflexartig anhand des optischen Bildes den zu erwartenden zeitlichen Arbeitsaufwand und die Komplexität der Aufgabe.

Ein günstiges Formulardesign ist jedoch in der Lage, die Wahrnehmung positiv zu beeinflussen. Wir stellen diese Grundsätze zur Darstellung von Formularen vor.

• Formularfelder sinnvoll gruppieren und ordnen (siehe 2. Kapitel)
• Das Ausfüllen einfach erscheinen lassen (siehe 3. Kapitel)
• Beschriftungen von Formularfeldern richtig platzieren (siehe 4. Kapitel)
• Felder mit der richtigen Länge darstellen (siehe 5. Kapitel)
• Gewisse Formularfelder standardmäßig ausblenden (siehe 6. Kapitel)
• So wenige Felder wie möglich darstellen (siehe 7. Kapitel)

Für viele Anwendungsfälle hat der erfahrene Online-Shopper bereits eine Vorstellung im Kopf, wie diese ablaufen und wie sie aufgebaut sind. Basis für das Bild im Kopf des angehenden Käufers sind in der Regel bekannte Standards für die jeweilige Datenerfassung. Formulare, die sich gegen die Erwartungshaltung des Nutzers stellen, sorgen für Irritationen, Ablehnung oder einen erhöhten kognitiven Aufwand für den Checkout-Prozess. Kurz: Sie erzeugen Stress beim Käufer.

Eine Gegenmaßnahme besteht darin, Abfragen logisch zu gruppieren und die Gruppen intern ebenfalls logisch aufzubauen. Die Gruppenblöcke sind wiederum in einer vom Kunden nachvollziehbaren Reihenfolge anzuordnen. Wichtig ist die optische Abgrenzung der Blöcke. Dies ermöglicht eine schnelle Erfassung der Aufgaben und lässt den Prozess leichter erscheinen.

Ein Beispiel. In der Formularfeld-Gruppe 1 fragen Sie Adressdaten ab. Dabei halten Sie sich an den allgemeingültigen Aufbau aus Anrede, Vorname, Nachname, Straße, Postleitzahl und Ort. In Formularfeld-Gruppe 2 widmen Sie sich der optionalen Lieferadresse. Fragen für die Marktforschung oder personalisierte Angebote kommen – wenn nötig – in der dritten Gruppe.

In diesem Beispiel von cyberport erfolgt die Anzeige der Formularfelder in sinnvoller Reihenfolge und segmentiert. Die Trennlinien helfen dabei.

Formulare müssen benutzerfreundlich sein. Formulare müssen jedoch auch einfach aussehen. Sobald ein Besucher ein Formular wahrnimmt, wird schließlich reflexartig anhand des optischen Erscheinungsbildes der zu erwartende Arbeitsaufwand bewertet.

Als extremes Beispiel kann hier die EUROPA-Versicherung dienen. Auf den ersten Blick sieht dieses Formular nach sehr viel Arbeit aus!

Denken Sie an diese Empfehlungen bei der Gestaltung von Formularen

• Verwenden Sie eine lesbare Schriftart und Schriftgröße.
• Lassen Sie genug Abstand zwischen den Formularfeldern.
• Setzen Sie keine dicken Rahmen ein.
• Flatternde Formulare, die rechtsseitig mal kürzer und mal länger auslaufen, wirken unruhig. Ordnung und Ruhe sorgen auch beim Formular für günstigere Wahrnehmung.  Passen Sie die Größe der Felder und deren Anordnung deshalb so an, dass diese ruhig und gleichmäßig wirken.

Bei OTTO sehen die Formulare beispielsweise sehr viel einladender aus:

Beschriftung von Formularfeldern sollten entweder über dem Eingabefeld oder links davon platziert werden.

In der Praxis hängt die Wahl der Beschriftungsvariante mit dem Umfang des Formulars zusammen.

• Kurze Formulare werden mit einer Beschriftung über dem Eingabefeld versehen.
• Die Beschriftung über dem Eingabefeld bläht umfangreiche Formulare zusätzlich auf. Diese wirken dadurch lang und kompliziert. Daher ist dort die linksseitige und rechtsbündige Beschriftung zu wählen.

Vermeiden Sie Beschriftungen in das Formularfeld zu platzieren. Das lässt das Formular auf den ersten Blick zwar kompakter erscheinen, macht es aber schwieriger zu bedienen.

Sobald ein Feld ausgewählt wird, wird die Beschriftung entfernt. Dann ist dem Besucher nicht mehr klar, was in das Feld eingetragen werden soll.

5. Feldlängen richtig wählen

Die Länge eines Formularfeldes vermittelt impliziert, welche Eingabe im Formularfeld erwartet wird. Ist ein Feld zu lang, vermuten unerfahrene Besucher möglicherweise, dass ihre Eingabe zu kurz ist

Außerdem sollten Sie sicherstellen, dass Besucher ihre komplette Eingabe auf einen Blick sehen können, ohne im Feld zu „scrollen“.

Wählen Sie die Länge der einzelnen Felder also mit Bedacht.  Doch wie lang sollen die Eingabefelder bei der Adresseingabe sein?

Betrachtet man lange und häufige Nachnamen in Deutschland, finden sich Namen wie Hammerschmidt, Zimmermann oder Schuhmacher. Viele Tausend Menschen in Deutschland tragen diese Namen, die auf 10 Zeichen oder mehr kommen. Doppelnamen liegen so schnell bei über 20 Zeichen. Kurz gesagt: Lassen Sie für Vor- und Nachnamen genug Platz.

„Hellschen-Heringsand-Unterschaar“, „Fredersdorf-Vogelsdorf“ oder „Krausnick-Groß Wasserburg“ – Ortsnamen können so lang oder länger sein. Lange Felder mit 35 oder besser mehr Zeichen sind also empfehlenswert.

Postleitzahlen haben in Deutschland fünf Stellen und in Österreich und der Schweiz vier Stellen.

Bei Straßennamen gilt ähnliches wie für Städte. Die Bischöflich-Geistlicher-Rat-Josef-Zinnbauer-Straße gilt mit 50 Zeichen als längster Straßenname Deutschlands. Bei Eingabefeldern mit einer Länge von 50 Zeichen sind Shop-Betreiber im Adressformular wohl auf der sicheren Seite.

Nicht alle Adressen haben einen Straßennamen. Ein prominentes Beispiel ist die Mannheimer Innenstadt. Viele Straßen kommen dort ohne einen Straßennamen aus. Eine Eingabe in diesem Feld zu erzwingen kann den User also vor ein Problem stellen.

Hausnummern sind nur ein paar Zahlen – oder auch nicht. Neben Hausnummern mit einem Zusatz wie zum Beispiel Musterstraße 2a gibt es auch Bruchteilhausnummern. Diese sehen beispielhaft so aus: Musterstraße 2½.  Zudem sollte bei Hausnummern nicht zu klein gedacht werden. Hausnummern in Großstädten gehen bis in die Tausende – plus Zusatz wie a oder ½.

Conrad setzt diese Empfehlungen nicht um:

Lassen Sie Formulare schlanker wirken und somit nach weniger Arbeit aussehen, indem Sie manche oder alle optionalen Felder standardmäßig ausblenden. Diese können dann bei Bedarf per AJAX eingeblendet werden.

Einige Beispiele:

• Felder für unterschiedliche Liefer- und Rechnungsadressen sollten erst dann eingeblendet werden, wenn auch unterschiedliche Adressen per Radio-Button ausgewählt wurden.
• Blenden Sie Formularfelder wie „Weitere Informationen, die Sie uns mitteilen möchten.“ erst ein, wenn eine entsprechende Checkbox ausgewählt wurde.

Falls Sie sowohl an Privat- als auch Geschäftskunden verkaufen, dann bauen Sie bei Formularen oben eine entsprechende Auswahl ein.

Bei Cyberport erfolgt die Anzeige von Eingabefeldern wie Firma oder Steuernummer erst nach Auswahl von „Privatkunde“ oder „Geschäftskunde“:

Besucher möchten

• so wenige persönliche Informationen wie möglich von sich preisgeben und
• so wenige lästige Formularfelder wie möglich auszufüllen.

Entfernen deshalb so viele Felder wie möglich oder verschieben deren Abfrage auf einen späteren Zeitpunkt. Eigentlich eine Selbstverständlichkeit, trotzdem wird dies aber immer noch nicht von allen Checkouts beachtet.

Die einfachste Strategie besteht darin, bestimmte Formularfelder einfach zu entfernen. Überlegen Sie sich deshalb, welche Daten wirklich von den Besuchern benötigt werden. Wird zum Beispiel die E-Mail-Adresse, Postanschrift und die Telefonnummer benötigt, oder wird der Interessent sowieso nur per E-Mail kontaktiert und das Paket per Post zugestellt?

Einige Felder, die in den meisten Fällen nicht gebraucht werden, sind:

• doppelte Eingabe der E-Mail-Adresse. Stattdessen kann auf der Vielen-Dank-Seite die Möglichkeit angegeben werden, die E-Mail-Adresse zu korrigieren.
• Captchas

Unnötige doppelte Eingabe der von E-Mail-Adresse und Passwort.

Manchen Informationen müssen nicht sofort im Checkout abgefragt werden. Dazu gehören unter anderem diese Daten:

• Passwort wählen (vor allem strenge Anforderungen an Passwörter führen oft zu großer Frustration)
• Benutzername
• Geburtstag
• Interessengebiete für CRM oder Newsletter

Diese Informationen können abgefragt werden, nachdem ein Benutzer den Kauf abgeschlossen hat. Verlegen Sie die Abfrage also entweder auf die Vielen-Dank-Seite oder auf die Bestätigungsseite des Double-Opt-Ins

Statt Besucher Passwörter aussuchen zu lassen, können diese auch einfach zufällig vergeben werden.

Passend zu diesem Thema

• ConversionBoosting.com
• Wissensdatenbank
• Darstellung von Formularen im Checkout

Formular-Analyse zur Conversion-Optimierung

Warenkorb und Merkliste für mobile Online-Shops

Fortschrittsanzeige und Navigation durch den Checkout