Formulare - Fehlermeldungen

Gestern bin ich via Twitter gleich doppelt auf das Thema Fehlermeldungen in Formularen gestoßen. Zum einen ging es um die Frage, wo man Fehlermeldungen am Besten platziert, zum anderen um die Formulierung der Fehlermeldung. Beides interessante Themen, die ich auch gleich aufgreifen möchte.

Wohin mit der Fehlermeldung?

Wo ist die Fehlermeldung am Besten platziert? Oben? Unten? Links oder rechts, beziehungsweise dort, wo das Label eben gerade nicht steht? Gar keine so einfache Frage. Ich persönlich bevorzuge sie unterhalb, aber das ist meine ganz persönliche Einschätzung - und ganz abgesehen davon, ärgere ich mich jedesmal, wenn ich ein Feld übersehen habe, das eigentlich Pflichtfeld war (warum meine Telefonnummer bei einer Online-Bestellung als Pflichtfeld?) oder die Zwangsformatierung übersehen habe (warum die Telefonnummer mit Bindestrich - übrigens ist das Login von Blau hier ein gutes Beispiel, ich mache es jedesmal falsch und ahne es bereits im Vorfeld…)

Meine erste Recherche: Herr Wroblewski “Web Form Design”. Für mich eines der Standardwerke, wenn es um die Usability von Formularen geht.  Er macht  einige interessante Vorschläge zum Design von Fehlermeldungen und wenn irgendwas bei mir ankommt, dann ist es das Highlighten von Fehler-Information und fehlerhaftem Objekt und die räumliche Nähe zwischen diesen beiden Objekten. Sprich: die Fehlermeldung muss optisch dort positioniert werden, wo sie eindeutig dem fehlerhaften Objekt zugeordnet werden kann.
Alles, was oberhalb steht, entspricht wohl im Wesentlichen der Erwartung, weil es der Lesrichtung entspricht und damit klarer zugeordnet und auch in Reihenfolge erfasst und bearbeitet werden kann.

Daneben: eine ganz globale Meldung: “Hier ist etwas schief gelaufen!” Mit etwas Aufwand kann man an dieser Stelle beispielsweise Sprungmarken einbauen (”zur ersten Fehlermeldung…” etc. oder besser noch ein beschreibender Link wie “Bitte überprüfen Sie Ihre E-Mail Adresse”…). Vorteil: dann wirds auch zugänglich.

Meine zweite Recherche: Google. Ist ja klar. Dort bin ich dann auf einen interessanten Artikel gestoßen, der eigentlich alles zusammenzufassen scheint, was es dazu zu sagen gibt. Leider nur englischsprachig, trotzdem jedem zur Lektüre empfohlen: 4 rules for displaying error messages from a user experience perspective.

Wie formuliert man eine Fehlermeldung?

Tja, hier wird es tricky und hier wird es auch mit der Lektüre etwas schwierig. Ganz klar: Hilfestellung. Nur wie sieht die aus? Es ist klar, wenn ein Pflichtfeld nicht ausgefüllt wurde. Es ist weniger klar, sobald der Nutzer ein vorgegebenes Muster nicht eingehalten hat. Jeder weiß zwar, wie eine gültige Email Adresse aussieht, aber was ist mit Telefonnummern? Mit einem Geburtsdatum? Die Klassiker. Vollkommen klar scheint:

  • es muss angezeigt werden, ob eine Information fehlt
  • es muss klar sein, ob eine Information einem Muster nicht entspricht
  • es muss deutlich gemacht werden, wie eine richtige Eingabe beispielhaft aussehen könnte

Damit ist auch eindeutig klar: Der Benutzer muss die Information verstehen können, also muss man sich auch sprachlich anpassen, indem man in jeglicher Hinsicht die Sprache des Benutzers spricht. Dazu gehört nicht nur Deutsch für deutschsprachige Websites oder Englisch für englischsprachige sondern auch Erklärungen, die ganz normal verständlich und nicht zu technisch gehalten sind. Es ist egal, ob es sich um Eingabemuster handelt. Der Benutzer will nur wissen wie. Die Fehlermeldung muss also informativ gehalten sein.

Im Grunde natürlich wissen wir, dass eigentlich das Programm die Formatierung weitestgehend übernehmen müsste und nicht der User. Wir wissen auch, dass schon das Design eines Formulars so angelegt sein sollte, dass es zu möglichst wenigen Fehlern kommt (Eingabehilfen etc.).

Dazu kommt aber noch etwas anderes: Freundlichkeit!

“Sie haben keine E-Mail Adresse angegeben!” - fast erschlagend, oder? Besser ist da doch sicher “Bitte geben Sie Ihre E-Mail Adresse ein” und noch ein bisschen freundlicher “Bitte überprüfen Sie, ob Sie Ihre E-Mail Adresse korrekt eingegeben haben”.

Hier noch ein paar, ebenfalls englischsprachige Tipps: User-friendly error messages: 7 tips

Hilfestellungen und Fehlermeldungen sind also:

  • eindeutig
  • vollständig
  • informativ
  • verständlich
  • freundlich

Aber… ich kann da doch gar nicht aus…?

So, nun haben Sie ein Problem, stimmt’s?
Wer bastelt seine Formulare heute schon selbst?
Sie finden das alles richtig und wichtig, nur verwenden Sie leider ein Content Management System, das Ihnen die Fehlermeldungen bereits vorgibt.
Das erledigt seine Arbeit zwar gut (in dem Fall müssen Sie nämlich nicht mehr denken), Sie erkennen aber Schwächen. In der Summe der zu erledigenden Aufgaben ist die Frage nach der Fehlermeldung zwar ein kleiner Baustein. Passiert der Fehler dann aber wirklich, kann das ja durchaus Folgen haben: keine Kontaktaufnahme, kein Einkauf im Online-Shop. Die Konkurrenz liegt ja immer nur einen Klick entfernt.

Ein weiteres Thema. Demnächst hier auf medamind.

 

Auch was dazu sagen?