Nutzergerechte Formulargestaltung

Formulare – z. B. im Rahmen von Bestell- oder Anmeldeprozessen – entscheiden über den Erfolg einer Website. Zufriedenstellende Conversion Rates lassen sich nur mit „guten“ Formularen erzielen. In diesem Beitrag erfahren Sie, wie nutzerfreundliche Formulare gestaltet werden können.

Anhand ausgewählter Beispiele werden zwei allgemeingültige Erfolgsregeln für „gebrauchstaugliche“ Online-Formulare dargestellt.

Nutzergerechte und einfach auszufüllende Anmelde-, Kontakt- oder Bestellformulare entscheiden über den Erfolg eines Internet-Angebots!
Es ist schwer genug, Besucher eines Internet-Angebots zu einer Anfrage, Anmeldung, Teilnahme an einer Online-Befragung oder gar Bestellung zu „motiviert“. Ist dies gelungen, dann sollten bei der Gestaltung der Formulare keine Fehler mehr unterlaufen.

  • Regel 1:     Pflichtfelder deutlich kennzeichnen!
  • Regel 2:     Fehlermeldungen aufmerksamkeitsstark und verständlich anzeigen!

Regel 1: Pflichtfelder deutlich kennzeichnen!
Das Ausfüllen von Formularen bereitet auch „online“ keine Freude – hier ist der akzeptierte zeitliche Aufwand erfahrungsgemäß noch geringer als beim Ausfüllen eines gedruckten Formulars. Daher sollten nur die absolut notwendigen Abfragen vorgenommen werden – z.B. nur die E-Mail Adresse beim Abonnieren eines nicht personalisierten Online-Newsletters. Aus Sicht der Site-Betreiber stellen Formulare jedoch eine sehr gute Gelegenheit dar, Daten über die Site-Besucher zu sammeln.

Mangelnde Transparenz bei FormularenWie lässt sich dieser Interessenkonflikt – Nutzer: möglichst kurze Formulare, Site-Betreiber: möglichst viele Abfragen – lösen?

Indem alle aus Sicht der Site-Betreiber wichtigen Abfragen (z.B. die Bezeichnung der Firma beim Abonnieren eines E-Mail Newsletter) aufgenommen, zugleich jedoch zwingend notwendige Abfragen und Eingabefelder (sog. Pflicht(eingabe)felder) gekennzeichnet werden.

Werden Pflichtfelder nicht ausgewiesen, so gehen potentielle Interessenten bzw. gar Kunden verloren: Die Fülle an Abfragen wirkt abschreckend und führt zu hohen Abbruchquoten (siehe Abbildung rechts).

Deutliche Kennzeichnung von Pflichfeldern (klein)Wie sollte die Kennzeichnung von Pflichtfeldern auf Online-Formularen erfolgen?

Idealerweise durch ein hochgestelltes Stern-Symbol, das unmittelbar im Umfeld der auszufüllenden Abfragen und Eingabefelder erscheint.

Derzeit noch erforderlich: Eine Erläuterung bzw. Erklärung der Bedeutung des „Sternchens“, und zwar vor der ersten Abfrage bzw. dem ersten Eingabefeld (siehe dazu Abbildung rechts)!

Kennzeichnung der Pflichfelder durch *Fast perfekt: „mit * gekennzeichnete Abfragen und Eingabefelder bitte ausfüllen“ – ist verständlicher und klingt freundlicher als: „mit * sind Pflichtfeldeingaben“.

Unübliche Verwendung der *-KennzeichnungGerade unerfahrene Nutzer haben die Bedeutung des Sternchens im Umfeld von Formularen noch nicht gelernt.

Hinzu kommt, dass leider immer noch einige Internet-Angebote das Stern-Symbol verwenden, um optional Abfragen und Eingabefelder zu kennzeichnen. Dies verwirrt nicht nur unerfahrene Nutzer (siehe Abbildung rechts)!


Regel 2: Fehlermeldungen aufmerksamkeitsstark und verständlich anzeigen!
Auch bei „perfekt“ gestalteten Formularen kommt es vor, dass beim Ausfüllen Fehler unterlaufen, z.B. ein Pflichtfeld übersehen wird, bei der Eingabe der Adresse keine Hausnummer angegeben wird oder an Stelle des „@“ ein „q“ eingegeben wird (doppelte Tastenbelegung).
Das ist „menschlich“ und lässt sich nun mal nicht verhindern.
Da fehlende bzw. fehlerhafte Eingaben nicht absichtlich erfolgen, müssen die Nutzer auf den/die aufgetretenen „Fehler“ hingewiesen werden.

Wie sollten diese Fehlerhinweise formal und inhaltlich gestaltet werden, so dass der Fehlerhinweis wahrgenommen und verstanden wird?
Hier gibt es vier eindeutige Erfolgsfaktoren, deren „Tauglichkeit“ in zahlreichen Nutzertests belegt wurde:

  1. Oberhalb des Formulars kurz aber aufmerksamkeitsstark anzeigen, dass das Formular nicht korrekt ausgefüllt wurde. Hierbei gilt: In der Kürze liegt die Würze! Schön, aber nicht zwingend: Neben einem verbalen Hinweis auch ein geeignetes Icon verwenden (z.B. Ausrufezeichen, Stop-Schild mit der Aufschrift „Achtung“).
  2. Fehlerhinweise im Umfeld der fehlenden bzw. fehlerhaft vorgenommenen Eingabe anzeigen – nicht in Form einer Liste am Anfang des Formulars und schon gar nicht in einem separaten Browserfenster/Pop-Up (siehe Abbildung unten)!
  3. Fehlerhinweise stets in roter Schriftfarbe (=Signalfarbe) darstellen.
  4. Den Fehler nicht nur „anzeigen“, sondern auch erläutern. D.h.: Einen hilfreichen Tipp zur Behebung des Fehlers unterbreiten (siehe dazu folgende Abbildungen).

Beispiel für gute Fehlermeldung (klein)Gut gelöst: Hilfreiche Erläuterung des Fehlers im Umfeld des nicht korrekt ausgefüllten Eingabefeldes

Beispiel für nicht empfehlenswerte Fehlermeldung (klein)Fehlerhinweis im Pop-Up – nicht empfehlenswert:

  • Ist umständlich, da der Pop-Up zunächst geschlossen werden muss.
  • Die Erläuterung des Fehlers erscheint nicht im Umfeld des betreffenden Eingabefeldes.

(Untersucht wurden die Online-Formulare von Measurement Valley e. V., Wilh. Lambrecht GmbH und derNanofilm Technologie GmbH)

Ein Gedanke zu „Nutzergerechte Formulargestaltung

  1. Thorsten Wilhelm

    Einleuchtende Empfehlungen und Anmerkungen zur Gestaltung von Formularen – wie ich finde. Und dennoch: Es gibt immer noch Formulare, die dies nicht beachten. Woran liegt das? Ist das Wissen nicht bei allen vorhanden? Oder fehlen vielleicht Studien, die belegen, wie relevant diese Empfehlungen und Richtlinien sind?

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *