Fast nirgendwo kommt es bei Webseiten und in Webshops so sehr auf die Benutzerfreundlichkeit (Usability) an wie bei der Gestaltung von Online Formularen. Ist ein Kontakt- oder Bestellformular umständlich aufgebaut, steigt die Wahrscheinlichkeit, dass der Nutzer es nicht zu Ende ausfüllt und seine Kontaktdaten nicht hinterlässt oder die Bestellung nicht abschließt. Schlecht gestaltete Formulare schaden daher vor allem dem Betreiber einer Webseite oder eines Webshops. Wie es richtig geht, erfahren Sie hier.

Nils Harder | | 1 Kommentar(e) | Lesezeit: 3 Minuten, 54 Sekunden
Usability-Tipps für conversionstarke Online-Formulare

Niemand füllt gerne Formulare aus

Für die Betreiber von Webseiten und Webshops sind Web-Formulare essenziell wichtig, für Nutzer dagegen eine lästige Pflichtübung. Es ist daher kein Wunder, dass die Abbruchrate beim Ausfüllen von Web-Formularen hoch ist. Als Gründe dafür, ein Kontakt- oder Bestellformular nicht oder nicht bis zu Ende ausgefüllt zu haben, nennen Nutzer regelmäßig vor allem zwei Gründe: Erstens, dass das Formular unübersichtlich aufgebaut war – und zweitens, dass es unverständlich war. Besonders bemerkenswert ist, dass es nicht in erster Linie die Sorge um die Sicherheit ihrer Daten ist, die Nutzer veranlasst, ein Kontakt- oder Bestellformular nicht auszufüllen, sondern seine geringe Benutzerfreundlichkeit. Doch in dieser niederschmetternden Erkenntnis steckt auch eine gute Nachricht – denn die Benutzerfreundlichkeit von Web-Formularen lässt sich mit gutem Webdesign erhöhen.

Gutes Design, hohe Conversion Rate

Ist die Benutzfreundlichkeit niedrig, ist auch die Conversion Rate niedrig – und die Anbieter von Kontakt- oder Bestellformularen erhalten nicht die gewünschten Kontaktdaten oder die beinahe schon abgeschlossene Bestellung. Im Ergebnis zahlen Betreiber von Webseiten und Webshops für die geringe Usability ihrer Web-Formulare daher mit sinkenden Umsätzen.

Platzierung und Gestaltung des Online-Formulars

Für die Nutzerfreundlichkeit eines Formulars kommt es zunächst auf seine äußere Gestaltung an.

Formular im sichtbaren Bereich der Webseite platzieren

Wer möchte, dass sein Kontakt- oder Bestellformular nicht übersehen wird, sollte es so platzieren, dass es ohne Scrollen gefunden werden kann, also „above the fold“. Dabei ist auch auf die Kompatibilität des Formulars mit allen gängigen Browsern zu achten, damit nicht einzelne Elemente (wie zum Beispiel der „Weiter“-Button) bei einigen Nutzern unter dem sogenannten Scrollbalken angezeigt werden.

Übersichtliche Gestaltung und einfache Navigation

Auch bei Web-Formularen zählt der erste Eindruck. Kontakt- und Bestellformulare sollten daher übersichtlich gestaltet sein und dem Nutzer dadurch signalisieren, dass sie mit geringem Aufwand ausgefüllt werden können.

Es sollten immer nur die Informationen abgefragt werden, die wirklich benötigt werden, und das auch nur einmal: Wenn die Rechnungsadresse dieselbe wie die Lieferadresse ist, sollte dies mit einem einfachen Häkchen bestätigt werden können.

Ebenfalls sinnvoll ist es, umfangreiche Formulare in Themenblöcke einzuteilen (zum Beispiel persönliche Angaben, Adresse, Kontoverbindung usw.) – das erleichtert dem Nutzer, den Überblick zu behalten.

Besonders umfangreiche Formulare sollten in Schritte unterteilt werden, die jeweils auf einer eigenen Seite angezeigt werden. Eine Fortschrittsanzeige gibt dem Nutzer zusätzliche Orientierung, und Vor- und Zurück-Buttons Erlauben das Überprüfen und Korrigieren von Angaben.

Ganz wichtig: Eingaben sollten zwischengespeichert werden, damit sie beim Vor- und Zurückspringen zwischen den Formularseiten nicht verloren gehen!

Erwartungskonformes Design

Die Gestaltung des Formulars sollte den Erwartungen des Nutzers entsprechen – sowohl hinsichtlich der Reihenfolge der abgefragten Angaben, als auch ihrer Anordnung. Besonders wichtige Angaben (in der Regel Name und Anschrift) sollten daher zuerst abgefragt werden, weniger relevante (etwa Lieferoptionen) danach. Auch die Anordnung und Größe der Eingabefelder sollten erwartungskonform sein. Es empfiehlt sich daher zum Beispiel, Felder für Vor- und Nachnamen nebeneinander zu platzieren und das Feld für den Namen des Wohnorts länger zu gestalten als das für die Postleitzahl.

Mobile Optimierung

Immer häufiger werden Online Formulare von mobilen Endgeräten aus ausgefüllt. Sie sollten daher so einfach wie möglich gestaltet sein, damit ihre mobilen Ladezeiten möglichst gering sind. Zudem sollten die einzelnen Elemente der Formulare groß genug sein, so dass sie auch auf mobilen Endgeräten gut lesbar angezeigt werden.

Praktische Hilfe beim Ausfüllen

Die Benutzerfreundlichkeit eines Formulars wird nicht nur durch seine übersichtliche Gestaltung erhöht, sondern ebenso sehr dadurch, dass dem Nutzer praktische Hilfe beim Ausfüllen angeboten wird.

Anzeige von Pflichtfeldern

Dazu gehört zunächst die Kennzeichnung aller Pflichtfelder. Nicht alle abgefragten Informationen sind für das Abonnement eines Newsletters oder für eine Bestellung im Webshop zwingend erforderlich. Durch die Kennzeichnung der unbedingt auszufüllenden Felder geben Sie dem Nutzer die Gelegenheit, seine Angaben möglichst knapp zu halten und das Ausfüllen des Formulars schnell zu erledigen.

Erläuterungen und Hilfestellungen

Die Eingabe von Daten in ein Formular ist Vertrauenssache. Immer dann, wenn sich der Sinn einer abgefragten Angabe für den Nutzer nicht auf den ersten Blick erschließt, sollte sie erläutert werden. Wenn etwa bei einer Bestellung auch die E-Mail-Adresse angefragt wird, sollte erwähnt werden, dass sie für die Zusendung der Bestätigung benötigt wird.

Erläuterungen für häufig abgefragte oder besonders wichtige Fragen sollten sich direkt unter oder neben dem jeweiligen Formularfeld befinden. Dazu gehört unter anderem die Erklärung, was der Sicherheitscode einer Kreditkarte ist und wo er auf der Kreditkarte angezeigt wird. Antworten auf weniger häufige Fragen können mit einem Info-Button zur Anzeige angeboten werden: Wird der Button geklickt, erscheint die Antwort in einem Overlay.

Neben diesen Erläuterungen kann das Formular auch praktische Hilfestellungen enthalten – etwa einen IBAN-Umrechner, der bei Eingabe von Kontonummer und Bankleitzahl sekundenschnell die passende IBAN ermittelt.

Schnelle Fehlermeldungen mit der Inline-Validierung

Nichts ist für den Nutzer frustrierender, als erst am Ende des Ausfüllens auf Fehler oder fehlende Abgaben hingewiesen zu werden. Das kann mit der sogenannten Inline-Validierung verhindert werden. Bei ihr wird dem Nutzer bereits unmittelbar beim Ausfüllen eines Formularfeldes angezeigt, ob die Eingabe korrekt ist oder nicht – etwa in Form eines grünen Häkchens am Ende des Eingabefeldes.