Checkliste für das optimale Formular

Formulare mag niemand. Und doch sind sie die Stelle, an der sich auf Websites meist alles entscheidet. Kauft der Kunde unser Produkt? Abonniert der Interessent meinen Newsletter?
Deshalb sollte man alle seine Formulare regelmäßig auf den Prüfstand stellen, ob sie technisch noch zeitgemäß sind, ob sie die neuesten Erkenntnisse der Usability berücksichtigen und ob sie die aktuellen Erwartungen der Nutzer entsprechen.

1. Je weniger Felder, je besserIllustration Checkliste Formular

Bei der Anzahl der Felder gilt: Bleiben Sie bescheiden. Unzählige Untersuchungen haben belegt: Je weniger Sie fragen, desto wahrscheinlicher bekommen Sie korrekte Antworten und desto wahrscheinlicher wird das Formular überhaupt ausgefüllt.

Wenn Sie Formulare mit mehr als 10 Feldern haben, überlegen Sie, diese auf mehrere Seiten zu verteilen. So hat der Nutzer nicht den Eindruck, überwältigt von einem großen Formular zu sein.

Sehen Sie dann eine klare Fortschrittsanzeige vor, damit der Nutzer immer weiß, wo er gerade steht (z.B. „Schritt 2 von 3“).

2. Sinneinheiten bilden

Gruppieren Sie Elemente, die logisch zusammengehören. Etwa, indem Sie die Abstände anpassen, sie in gemeinsame Kästen setzen, oder sie mit Linien einfassen.

So ist das Formular leichter verständlich und der Nutzer kann es schneller ausfüllen.

3. Das Wichtigste zuerst

Stellen Sie die Fragen an den Anfang, die Sie aus technischen oder rechtlichen Gründen unbedingt beantwortet bekommen müssen.

Wenn möglich, speichern Sie dann und sehen Sie die Möglichkeit vor die Beantwortung später fortzusetzen. Konkret heißt das, dass Sie z.B. zuerst den Nutzeraccount anlegen oder das Newsletterabo abschließen.

4. Nutzen kommunizieren

Ist dem Nutzer immer völlig klar, was er gerade ausfüllt, und vor allem, warum er das tut?

Diese Frage klingt trivial, und doch ist genau das ein Problem bei vielen Seiten. Besonders wenn ein Formular sich über die Jahre geändert hat, wird nicht selten vergessen, Überschrift und Erklärung so anzupassen, dass der Nutzer immer genau weiß, was von ihm gefordert ist.

Und er sollte immer auch wissen, warum er das tut. Auf der Anmeldeseite zum Newsletter könnte also über dem Formular etwas stehen wie „Jetzt anmelden und jede Woche exklusive Sonderangebote bekommen“.

5. Klare Beschriftung

Jedes einzelne Feld braucht eine klare Beschriftung. Und diese sollte entweder direkt über dem jeweiligen Feld sitzen oder links daneben.

In Usability-Tests ist herausgekommen, dass Nutzer immer wieder Probleme haben, wenn die Beschriftung ausschließlich im Feld selbst sitzt und verschwindet, sobald dieses aktiv ist.

Das kann man verwenden, um etwa einen Beispieltext anzuzeigen, aber als alleinige Erklärung ist das nicht ausreichend. Wird der Nutzer etwa unterbrochen, weiß er nicht, wenn er die Bearbeitung wieder aufnimmt, was in das aktuell aktive Feld hineingehört.

6. Klare Anordnung

Ebenfalls aus Nutzertests weiß man: Mehrspaltige Formulare machen immer wieder unnötig Probleme.

Dazu gibt es ganz wenige Ausnahmen – das Feld für die Hausnummer etwa, was direkt neben dem für den Straßennamen sitzen sollte. (Oder Sie nehmen die Hausnummer mit in das Feld mit dem Straßenamen, was die meisten Nutzer besser finden.)

Aber ansonsten gilt: Alle Felder gehören einspaltig untereinander. Mehrspaltige Felder sind nicht mehr zeitgemäß. Natürlich wird die Seite dadurch länger, aber Sie erweisen dem Nutzer einen Bärendienst, wenn Sie meinen, die Komplexität vor ihm verstecken zu können. Er wird schon merken, wenn Ihr Formular zu lang ist – und das Ausfüllen genauso abbrechen, wenn Sie alle Felder auf dem Screen dicht zusammendrängen.

7. Pflichtfelder hervorheben

Der Nutzer sollte auf einen Blick erkennen, welche Felder Pflichtfelder sind. Üblich ist das Sternchen als Markierung neben dem Beschriftungstext.
Aber auch farbliche Umrandungen sind denkbar – Sie sollten diese aber zusätzlich mit einer Beschriftung kombinieren, damit auch Menschen mit Farbsehschwäche oder Smartphone-Nutzer, die in der hellen Sonne stehen, keine Probleme bekommen.

8. Eingaben sofort prüfen

Prüfen Sie jedes einzelne Feld sofort, wenn der Nutzer dieses verlässt. So können Sie z.B. auf Tippfehler in der Mailadresse sofort hinweisen (fehlt ein @? Steht davor kein Zeichen? Gibt es die Top-Level-Domain nicht?).

Bekommt der Nutzer die Rückmeldung, wenn er das Feld gerade ausgefüllt hat, muss er nicht umständlich scrollen und ist vor allem gedanklich noch ganz dabei. Die Bearbeitung macht ihm so wesentlich zufriedener und geht auch deutlich schneller.

9. Hilfreiche & freundliche Fehlermeldungen

Der Text, den Sie bei einem Fehler anzeigen soll es dem Nutzer erlauben, seinen Fehler zu korrigieren. Dazu ist es unerlässlich, dass er überhaupt versteht, was Sie meinen.

Das ist häufiger nicht der Fall, als man denkt. Ein Grund für solche schlechten Fehlermeldungen ist, dass diese oft bei der Umsetzung vergessen werden. Der Programmierer muss diese ganz am Ende, wenn sowieso schon Zeitdruck ist, selbst schreiben – was eigentlich gar nicht seine Aufgabe ist. Dementsprechend sind die Texte dann oft auch.

Formulieren Sie die Texte auch möglichst freundlich. Geben Sie dem Nutzer nicht das Gefühl, dass er sich blöd angestellt hat – die Wahrscheinlichkeit, dass er abbricht, ist hoch, wenn er das Gefühl hat, dass er das Formular nicht verseht.

10. Gratulation nicht vergessen

Wer sich durch ein Formular gekämpft hat, hat eine Bestätigung verdient. Sie müssen keine motivierenden Fotos zeigen oder ein virtuelles Feuerwerk abbrennen. Aber ein freundlicher Satz, der dem Nutzer dankt und/oder im gratuliert, dass er diesen Schritt geschafft hat, wirkt Wunder. Die Zufriedenheit mit dem Formular steigt durch solche Kleinigkeiten enorm.

Und als Abschlusstipp: Tragen Sie sich einen wiederkehrenden Termin ein, an dem Sie Ihre wichtigsten Formulare komplett einmal selbst durchgehen – Sie werden überrascht sein, wie oft Sie dabei feststellen, dass einer der eben genannten 10 Tipps nicht eingehalten ist.