15.2.1 Gestalten Sie Formulare eindeutig, einfach, intuitiv und Konventionen entsprechend

Hintergrund

Die im Bestellablauf geforderte Interaktion soll so unbeschwerlich und einfach wie möglich vor sich gehen können. Formulare sollen sich an Konventionen (auch aus dem Offline-Bereich) orientieren und nicht komplizierter sein, als unbedingt nötig. Sie sollen in der Gestaltung den Bedürfnissen verschiedener Zielgruppen entgegenkommen.

Tutorials zur technisch barrierefreien Programmierung von Formularen finden sich bei Einfach für alle – Barrierefreie Formulare mit HTML, CSS und JavaScript (2007), WebAIM – Creating Accessible Forms und Web Standards Project – Accessible HTML/XHTML Forms (2004).

Maßnahmen

  • Gruppieren Sie zusammengehörige Formulareinheiten optisch und strukturell.
  • Platzieren Sie Labels und Eingabefelder möglichst nahe beieinander (z.B. Label rechtsbündig oder über dem Eingabefeld), damit sie auch in Zoomansicht gut zuordenbar sind
  • Reduzieren Sie möglichst die Eingabefelder (z.B. ein Feld für Straße und Hausnummer sowie ein Feld für die Telefonnummer).
  • Machen Sie bestimmte Eingabeerfordernisse deutlich (spezielle Schreibweisen z.B. bei Datumsangaben, Mindestlänge von Passwörtern etc.).
  • Orientieren Sie sich an Konventionen, z.B. Vorname vor Familienname, Monatsangabe bei Kreditkartenablaufdatum als Zahl.
  • Unterscheiden Sie Formulare für ähnliche Angaben sehr deutlich in der Benennung (z.B. Lieferadresse und Rechnungsadresse).
  • Erklären Sie den Grund für nicht naheliegende Datenabfragen und machen Sie diese wenn möglich optional (z.B. Angabe der Telefonnummer, um KundInnen im Problemfall kontaktieren zu können).
  • Kennzeichnen Sie Pflichtfelder deutlich als solche.
  • Markieren Sie Inputfelder, wenn diese den Fokus erhalten.
  • Machen Sie Interaktionselemente groß und kontrastreich. Gestalten Sie Formulare nicht zu dezent und orientieren Sie sich an typischen Stilen von Formularfeldern, z.B. umrandete Eingabefelder mit hellem Hintergrund.
  • Bieten Sie kontextsensitive Hilfe für nicht selbsterklärende Felder an. Machen Sie diese Hilfe auch für Blinde zugänglich. Erklären Sie nicht zuviel.
  • Passen Sie die Breite von Eingabefeldern der zu erwartenden Datenlänge an. Lassen Sie die Höhe mit der Schriftgröße mitwachsen.
  • Machen Sie Selectboxen für Länderauswahl so überschaubar wie möglich (keine lange Liste aller möglichen Länder).

Wer profitiert davon

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

Beispiel

Quelle Formularfehler Strasse Hausnummer

quelle.at: Eine Testperson gab die Hausnummer beim Straßennamen ein und erhielt eine Fehlermeldung.