Inhaltverzeichnis
Formular-Optimierung ist nicht zu unterschätzen denn Formulare sind ein wichtiger Bestandteil im Onlinehandel. Leider sind sie aber auch einer der häufigsten Gründe für Bestellabbrüche. Im Checkout-Prozess eines OnlineShops werden sie so zu den reinsten Konversionskillern.
Das unterschätzte Potential von Formularen
Durchdachte Formulare – sei es die Kundenregistrierung im OnlineShop, die Newsletteranmeldung oder das Kontaktformular – bringen Konversionen, denn durch sie treten die Besucher mit dem Anbieter in Kontakt und zeigen so, ihr Interesse an der Ware, der Firma oder der Dienstleistung.
Eyetracking-Analysen zeigen, dass neben der Wahl von Schrift und Farbe oder Anzahl der Felder noch weitere Aspekte beachtet werden sollten. Platzierung oder Ausrichtung der Feldbezeichner (Labels) oder die Länge der Eingabefelder können eine nicht unerhebliche Rolle spielen.
Gutes Formular-Design sollte klar und einfach gehalten sein. Ein Patentrezept gibt es bei der Formular-Optimierung leider nicht, aber vorab ausgeführte Analysen und Tests können Geldbeutel und Nerven schonen.
7 Tipps zur Formular-Optimierung
1. Struktur & Anordnung der Formularfelder (Relevanz)
Der Nutzer sollte nicht durch unnötig viele Felder und endlos lange Formulare verschreckt werden (siehe auch Punkt 2).
Zusammengehörige Felder können gruppiert angeordnet sein (PLZ Ort), zudem helfen visuelle Hierarchien, da sie ein Formular aufgeräumter aussehen lassen und der Nutzer sich häppchenweise durcharbeiten kann.
Alle Felder sollten sowohl mit der Maus als auch mit der Tastatur (Tab-Taste) erreicht werden können.
Übersichtlich ist z. B. der Gast-Account auf gartenxxl.de (leider nicht mehr online).
2. Pflichtfelder / optionale Felder
Zu viele Felder können den Nutzer schnell „erschlagen“, optionale Felder hingegen werden häufig nicht als solche wahrgenommen. Man sollte sich also gut überlegen, welche Informationen man für den jeweiligen Zweck wirklich vom Kunden benötigt. Viele Nutzer brechen den Vorgang ab, wenn sie aufgefordert werden, sensible Daten anzugeben. Möchte man dennoch möglichst viel über seinen Kunden erfahren, sollten Pflichtfelder deutlich gekennzeichnet sein (hier hat sich das Sternchen * etabliert).
3. Feldbezeichner-Positionierung (Label)
Die Positionierung der Feldbezeichner wirkt sich auf die Benutzbarkeit des Formulars aus, wobei es auch hier keine allgemeingültige Formel gibt. Bei längeren Formularen z. B. sollten die Label links neben dem Formularfeld platziert werden, bei Auswahlmenüs (Herr, Frau), Check- oder Radio-Boxen allerdings besser rechts.
4 Varianten und deren Vor-/Nachteile.
- Linksbündig
Feldbezeichner auf der linken Seite des Feldes ensprechen zwar der Leserichtung, allerdings kann es linksbündig ausgerichtet sehr große Abstände geben.
- Rechtsbündig
Auf der linken Seite des Feldes aber rechtsbündig ausgerichtet wirken Feldbezeichner evtl. unruhiger, allerdings ist die Verknüpfung von Feld und Eingabe deutlicher.
- In den Feldern
Die Variante mit der Bezeichnung im Eingabefeld ist besonders platzsparend.
- Über den Feldern
Studien zufolge ist die Bezeichnung über dem Eingabefeld für einige Nutzer die einfachste Variante.
4. Größe der Formularfelder
Auch die Größe der einzelnen Felder kann den Nutzer bei der Eingabe unterstützen. Bestimmte Standards ist er von je her gewohnt – von Formularvordrucken für Ämter oder Behörden, von Adressen auf Briefumschlägen etc.. Nutzt man diese Routine (PLZ in Deutschland 5 Ziffern, Ort hingegen deutlich mehr …) kann der Nutzer zügig, auch per Tab-Taste, von Feld zu Feld springen. Zudem ist sofort erkennbar, wie der Anbieter die Daten wünscht.
Beispiel: Eingabefelder für ein Geburtsdatum
5. Erklärungen in Formularfeldern
Oft werden Beispielantworten als grauer Text in den Formularfeldern hinterlegt (ghosttext). Der Nutzer weiß so auf den ersten Blick, was er eintragen muss und auch in welchem Format. Eingabefehler und die damit verbundenen nachträglichen Korrekturen können dadurch vermieden werden.
Einen weiteren Mehrwert bieten Info- oder Hilfe-Buttons mit kurzen Erläuterungen. Diese Texte sollten aber niemals vom Formular weg auf andere Seiten führen.
6. Direktes Feedback / optische Hilfen
Mit einem Feedback direkt während der Eingabe – der Inline-Validierung – kann man den Nutzer aktiv unterstützen, somit die Konversion der Abschlüsse steigern und gleichzeitig die Fehlerrate senken.
Solch ein Feedback muss nicht nur bei einer falschen Eingabe ausgegeben werden, auch wenn ein Feld richtig ausgefüllt wurde, kann man dies dem Nutzer zeigen – z. B. durch ein Häkchen.
7. Individueller Submit-Button
Auch die Beschriftung eines Buttons kann bei der Formular-Optimierung eine Rolle spielen. Bei der Suche haben sich individuelle Beschriftungen bereits bewährt (siehe auch Shopsuche als Erfolgsfaktor) – warum sollten nicht auch Buttons, die auf eine spezielle Zielgruppe ausgerichtet sind, besser konvertieren? Mit Hilfe von A/B-Tests kann man herausfinden, was bei den Besuchern besser ankommt.
Beispiel eines individuellen Buttons. Quelle: http://www.kinder-papeterie.de
Fazit: Formular-Optimierung
- Formulare sind ein enorm wichtiger Bestandteil insbesondere im eCommerce und sollten nicht stiefmütterlich behandelt werden.
- Aussagekräftige Analysen, genaue Auswertungen (von Zielgruppe, Verhalten und Abbruchstellen) sowie gute Usability- und A/B-Tests sparen Zeit und Geld bei der Optimierung.
- Unbedingt auf Nutzerfreundlichkeit auch für mobile Endgeräte achten.
- Gute Formulare bringen nachweislich mehr Konversionen.
Oft hat es leider den Anschein, als würden Website- und Shop-Betreiber es einem Besucher absichtlich schwer machen, mit ihnen in Kontakt zu treten. Dabei ist das Kunden-Feedback ein extrem wichtiger Faktor bei der Kundenbindung. Selbst Beschwerde-Mails sollten positiv bewertet werden, denn sie bieten die Chance, Kunden (wieder) zu gewinnen und langfristig zu binden. Nur zufriedene Kunden kommen wieder – und nicht umsonst heißt es:
„Sind Sie zufrieden, dann sagen Sie es weiter. Sind Sie unzufrieden, dann sagen Sie es uns …“
