15.2.2 Gehen Sie benutzerfreundlich mit Fehlern um

Hintergrund

Formulare sind immer eine häufige Fehlerquelle – auch bei guter Gestaltung. Frei nach Murphy’s Law geht alles schief, was irgendwie schief gehen kann. Gutes Fehlerhandling ist deshalb ein essentieller Faktor im E-Commerce. Zu dezente Fehlermarkierungen werden aufgrund von Change-Blindness leicht übersehen. Unklare oder ineffiziente Fehlermeldungen, wie z.B. Fehlercodes oder Alert-Boxes für jeden einzelnen Fehler, verärgern die User und stören das Einkaufserlebnis.

Maßnahmen

  • Achten Sie auf Fehlertoleranz bei der Eingabe, z.B. beim Format von Telefonnummern, Leerzeichen bei Kreditkartennummern. Jedes strenge Eingabeformat sollte von vornherein kommuniziert werden.
  • Bieten Sie kontextsensitive Hilfe an.
  • Validieren Sie Benutzereingaben bereits clientseitig vor dem Absenden des Formulars. In manchen Fällen ist eine Fehlerprüfung bereits bei oder nach der Eingabe eines Formularfelds sinnvoll und möglich.
  • Gruppieren Sie möglichst Fehlermeldungen am Anfang der Seite oder des Formulars und verlinken Sie sie mit den zugehörigen Inputfeldern (für Screenreader NutzerInnen ideal). Fehlermeldungen sollten immer an der selben Stelle auffindbar sein.
  • Platzieren Sie Fehlermeldungen auch unmittelbar beim betreffenden Eingabefeld, rechts oder oberhalb, am Besten im LABEL-Element, da sie dann auch mit Sicherheit im Screenreader ausgelesen werden.
  • Ideal sind Fehler- oder Erfolgsinformationen auch im Seitentitel (TITLE-Element), da dies mit Screenreadern bereits beim Laden der Seite vorgelesen wird.
  • Formulieren sie Fehlermeldungen verständlich und positiv: z.B. „Bitte geben Sie das Datum im Format 31.12.2009 ein“.
  • Markieren Sie Fehler mehrfach und sehr auffällig, nicht ausschließlich mit Farbe sondern z.B. auch mit einem Icon, Fettdruck, Umrahmung oder Text.
  • Ändern Sie Eingaben nicht automatisch (z.B. bei fehlerhafter Straßeneingabe).

Wer profitiert davon

  • Ältere NutzerInnen
  • Wenig interneterfahrene NutzerInnen
  • Blinde NutzerInnen
  • Sehbehinderte NutzerInnen
  • NutzerInnen mit kognitiven Einschränkungen
  • Alle NutzerInnen von assistiven Technologien

Beispiele

Hausfreund Formularproblem klicken auf nicht Klickbares

hausfreund.at: Formularproblem durch doppelte Inputfelder für Name und Adresse, fehlerhafte Inputfelder sind durch markante Pfeile markiert, die klickbar wirken, es aber nicht sind.

Quelle Formularfehler Enter während des Ausfüllens

quelle.at: Eine Testperson drückte die Eingabe-Taste, nachdem sie das erste Formularfeld ausgefüllt hatte und erhielt dementsprechende Fehlermeldungen. Solche Fehler sind schwer vermeidbar, gut formulierte hilfreiche Fehlermeldungen daher essentiell.