Usability-Tipps für Formulare

Gestern schon verwies der OnlineShopBerater auf einen Artikel von eResult mit Usability-Tipps zur Formulargestaltung. Schön das, aber einige Anmerkungen habe ich dazu schon noch, denn die Tipps erschöpfen sich in zwei Hauptregeln – und unterschlagen dabei auch noch einen Hinweis in Sachen Barrierefreiheit…

eResult hatte beispielhaft drei Internet-Formulare verglichen und dabei folgende zwei Hauptregeln gefunden:

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

Beide Hinweise klingen auf den ersten Blick trivial. Wer sie jedoch versucht mit Leben zu füllen, merkt schnell, dass dies gar nicht so simpel ist, wie gedacht.

Für Regel 1, "Markierung von Pflichtfeldern" beispielsweise favorisiert Carsten Rehmann in seinem eResult-Artikel den Asterisk (*). Auch ich verwende den gern, denn dieses Zeichen ist weit verbreitet zu diesem Zweck und damit schon fast eine Art Standard. Zudem ist er klein genug, um bei den Feldbeschriftungen integriert zu werden, ohne ein Formulardesign zu sprengen.

Doch der Asterisk hat unter dem Vorzeichen der Barrierefreiheit auch Nachteile, denn er gehört zu den Interpunktionszeichen. Das Praxishandbuch "Barrierefreies Webdesign" weist darauf hin, dass Interpunktionszeichen von Screenreader-Nutzern oft ausgeblendet werden – diese erfahren somit nix von der Pflicht-Kennzeichnung. Wer also für den Asterisk wirbt, sollte auch dazu sagen, dass die Beschreibungen der so gekennzeichneten Felder dringend auch einen Hinweis wie ‚Pflichtfeld‘ o.ä. enthalten sollten.

Den Empfehlungen für Regel 2 " Fehlermeldungen aufmerksamkeitsstark und verständlich anzeigen" kann ich mich anschließen. Aber auch hier gibt es mittlerweile eigentlich noch interessantere Entwicklungen. Denn die im Artikel aufgezeigten Beispiele machen keinen Gebrauch von modernen Techniken wie Rich Internet Applications oder AJAX, mittels derer Eingabefehler bereits in ‚gefühlter Echtzeit‘ behandelt werden können. Und selbst ohne diese Technologien finden Shopbetreiber heute (beispielsweise auf Javascript basierende) Input-Assistenten, wie beispielsweise diesen hier.

Die wichtigste Regel für ihn, bemerkt der OnlineShopBerater in seinem Hinweis, sei übrigens

• "Auf unnötige Abfragefelder verzichten!".

Das mag ich auch sofort unterschreiben. Aber ich habe noch drei weitere Usability-Tipps bzw. Wünsche, die ich persönlich an Formulare habe:

• Für oft verwendete Felder (Adresse…) bitte nicht immer individuelle Namen erfinden. Dann kann nämlich mein Browser meine Standardwerte nicht automatisch voreintragen (oder zum Eintrag anbieten) und ich muss so langweilige Sachen, wie meine Straße etc. immer wieder von Hand reintippen. Ich hasse das!
  (Randnotiz: Zwar sind die Bemühungen, hierfür einen Standard zu etablieren alt und kaum noch auffindbar, doch auch in Zeiten von P3P immerhin noch nicht ganz vergessen…)

• Bitte achtet auf eine vernünftige Tab-Reihenfolge bei den Feldern. Wenn ich schon Eingaben tippen muss, möchte ich nicht ständig wieder zur Maus greifen müssen. Bei manchen Formularen aber springt bei Verwendung der Tab-Taste das ganze Formular völlig wirr hin und her – gräßlich!

• Und schließlich noch: Bitte die Beschriftungen mit den jeweiligen Eingabefeldern verknüpfen.
  In manchen Formularen navigiere auch ich lieber per Maus. Dann freue ich micht, wenn ein Klick auf den Beschriftungstext reicht, um beispielsweise
  Checkboxen "zu schalten". Ich habe treffsichere Hände, aber finde dies
  dennoch viel bequemer, als die kleinen Felder selbst treffen zu müssen. Und die Technik dafür ist dank des "label for"-Elementes wirklich ganz simpel!

Herzlich aus Hürth
Nicola Straub