Formulare im Internet sind der Schlüssel zur Kommunikation und Interaktion. Kaum eine Webseite kommt ohne sie aus, und nicht selten werden Formulare zur ersten Kontaktaufnahme genutzt. Es ist jedoch so, dass die Internetnutzer eigentlich keine Lust haben, Formulare auszufüllen. Es wird als lästig empfunden, und die Aufgabe eines Webdesigners sollte es sein, das Formular so einfach und ansprechend wie möglich zu halten. Doch wie erstellt man ein gutes Formular? Was sollte vermieden werden? Wie machen wir es dem Benutzer so leicht wie möglich?

1. Auf Grafik-Captchas verzichten

Jedem meiner Kunden rate ich dies. Es ist schon nervig genug, Formulare auszufüllen, da möchte sich am Ende niemand mehr mit der Entzifferung kryptischer Hyroglyphen beschäftigen. In einem früheren Artikel habe ich genau erklärt, warum auf diese Form von Captchas verzichtet werden sollte und warum es bessere Wege gibt, Bots abzufangen.

2. Nur die nötigsten Informationen erfragen

Keep it simple – und das gilt auch für Formulare. Je mehr Eingabefelder der Benutzer sieht, desto höher ist die Chance, dass der Benutzer die Seite verlässt. Selbst wenn nicht alle Felder als Pflichtfeld markiert sind, so erzeugt die Ansammlung vieler Eingabefelder trotzdem unnötigen Stress beim User. Beim Erstellen der Formulare bzw. der dazugehörigen Schnittstellen sollte man sich also über jedes Feld noch einmal genaue Gedanken machen: “Ist die Eingabe des Geburtsdatums wirklich wichtig? Könnte die Wahl der Anrede nicht fallen gelassen werden? Ist diese Checkbox nicht vielleicht doch überflüssig?”

3. Interessante Felder nach oben

Um die Abbruchrate gering zu halten, empfiehlt es sich, die für den Benutzer interessanten Felder an den Anfang zu setzen. Wenn der Benutzer das Gefühl hat, sein Anliegen findet ein Ohr, ist er auch eher bereit, lästige Felder auszufüllen.

Als Beispiel hier ein Anfrageformular für den Verleih von Bohrmaschinen. In dem Formular muss Name, E-Mail und der Typ der Bohrmaschine festgehalten werden. Der Benutzer steuert das Formular mit dem  Ziel an, eine Bohrmaschine zu leihen. Daher sollte diese Frage auch zuerst gestellt werden – erst danach wird nach dem Namen und der E-Mail-Adresse des Interessenten gefragt.

4. Use White Space!

Oft wird das Formular nur gering formatiert, was dazu führt dass sämtliche Elemente recht eng aneinanderliegen. Auch ist der Abstand vom Rahmen eines Eingabefeldes zu dem eingegebenen Text standardmäßig sehr klein. Mit ein wenig CSS lässt sich das Formular so auseinanderziehen, so dass es einen optisch aufgeräumten Eindruck macht.

5. Elemente gruppieren

Wenn sich umfangreichere Formulare nicht verhindern lassen, so sollte zumindest sichergestellt werden dass der Benutzer nicht den Überblick verliert. Dazu empfiehlt es sich, ähnliche Eingabefelder zu gruppieren.

6. Genaue Erklärungen abliefern

Nicht immer hat der Benutzer volles Verständnis für bestimmte Formularfelder. Erklärt ihm also kurz, aber präzise, warum dieses Formularfeld ausgefüllt werden muss.

7. Fehlermeldungen freundlich und transparent formulieren

Bei dem “perfekt designten Formular” darf es eigentlich keine Fehlermeldungen nach dem Absenden des Formulares geben – denn das “perfekte Formular” hat den Benutzer hinreichend über alle Felder aufgeklärt. Doch da es das “perfekte Formular” wohl niemals geben wird, müssen wir Fehlermeldungen ausgeben, wenn der Benutzer die Felder nicht korrekt ausgefüllt hat.

Ein Beispiel für das Feld “Ihre Strasse”: Oft sehe ich als Fehlermeldung “Fehler! Hausnummer fehlt!”. Schon die beiden Ausrufezeichen haben überspitzt gesagt etwas Bedrohliches oder Strenges an sich, aber auch an der Formulierung lässt sich viel tun: “Bitte geben Sie hier auch Ihre Hausnummer ein” klingt freundlicher und hilfsbereiter.

8. Labels richtig nutzen und platzieren

Auch sehe ich immer wieder Bezeichnungen für Textfelder (Labels), die auf einen Klick nicht reagieren. Der Anwender erwartet, dass das passende Textfeld aktiviert bzw. fokussiert wird, sobald man auf das dazugehörige Label klickt. Dabei ist die Implementierung so einfach:

<label for="username">Ihr Benutzername</label>
<input type="text" id="username" name="username" />

Auch besteht oft Verbesserungsbedarf bei der Ausrichtung der Labels. Befindet sich das Label links vom Eingabefeld, so empfiehlt es sich, die Labels rechtsbündig anzuordnen, so dass sie in gleichmässigem Abstand zum Textfeld positioniert werden.

9. Ablenkung des Benutzers verhindern

Das Formular sollte in den Fokus des Benutzers gerückt werden. Ein Newsticker in der daneben befindlichen Sidebar oder ein Querverweis zu einem Sonderangebot würde den User sicherlich ablenken. Hier sollte darauf geachtet werden, die Formularseite so stark wie möglich in den Vordergrund zu rücken.

10. Doppelte Bestätigungen behutsam verlangen

Zu Recht sieht man oft das Feld “Bitte bestätigen Sie Ihr Passwort” – welches den Zweck hat, Vertipper des Benutzers auszuschließen. Besonders beim Passwort, welches maskiert auf dem Bildschirm erscheint, ist das meines Erachtens nach eine gute Methode. Immer öfter aber scheint die Bestätigung auch bei den E-Mail-Adressen Zuspruch zu finden, den ich allerdings nicht teile. Man unterstellt dem Benutzer hier

1. einen Vertipper und
2. dass der er nicht in der Lage ist, seine Eingaben auf dem Bildschirm zu kontrollieren

Getreu dem 2. Tipp plädiere ich daher nicht für eine doppelte Eingabe der E-Mail-Adresse. Nach dem Absenden des Formulares sollte auch eine Bestätigung der kritischen Felder angezeigt werden (“Ihre Registrierungsdaten wurden an muster@example.org gesendet”).

11. Ausfüllarbeit abnehmen und intelligente Vorschläge bereitstellen

Typisches Szenario: Der Benutzer muss seine Postleitzahl und seinen Ort angeben. Hier könnte man dem Benutzer Arbeit abnehmen, in dem (mit ein wenig Ajax-Zauberei) der Ort nach der Eingabe der Postleitzahl automatisch ausgefüllt wird. In diesem Zusammenhang sollten auch sog. Auto-Suggests nicht unerwähnt bleiben – während des Tippens bekommt der Benutzer hier Vorschläge, die der bisherigen Eingabe entsprechen.

12. Tab-Reihenfolge und Accesskeys vergeben

Nicht nur ich navigiere gerne durch Formulare mit der Tabulator-Taste. Dann ist es ärgerlich, wenn die Reihenfolge nicht mit dem optischen Erscheinungsbild übereinstimmt. Dafür kann der Entwickler das tabindex-Attribut vergeben:

<input type="text" name="username" tabindex="2" />
<input type="email" name="email" tabindex="1" />

Ein weiteres nützliches Attribut ist der Accesskey – die Angabe eines solchen ermöglicht es dem Benutzer, mit einer Tastenkombination direkt zu diesem Feld zu springen. Jeder Browser hält dafür leicht andere Tastenkombinationen bereit, trotzdem ist der Vorteil dieser nicht zu verachten. Wichtig ist hierbei jedoch, den Benutzer über die zu aktivierende Taste zu informieren. Hier hat es sich eingebürgert, die betroffene Taste zu unterstreichen:

<label for="email">E-<span class="accesskey">M</span>ail</label>
<input type="email" name="email" accesskey="m" />

13. Gadgets sinnvoll nutzen

JavaScript bzw. JavaScript-Frameworks wie jQuery tragen mittlerweile enorm zur Verbesserung der Usability bei – auch bei Formularen sollte man die Vorteile von clientseitigen Scripts nicht verachten. Ist die maximale Zeichenzahl einer Textarea beispielsweise begrenzt, empfiehlt es sich dem Benutzer die noch verbleibende Anzahl der Zeichen anzuzeigen. Auch besonders praktisch: Das Passwort-Feld standardmäßig maskieren und erst auf Wunsch des Benutzers unmaskiert anzeigen. Für beide Beispiele gibt es entsprechende Plugins, die im Nu eingebunden sind.