MuC14: Interaktive Formulare

Martin Schrepp (SAP) hat sich in seinem Tutorial zu interaktiven Formularen mit der Frage ” Wie gestaltet man diese einfach, schön und barrierefrei?” beschäftigt. Zu Beginn seines Vortrags gab er einen Hinweis zur Erwartungshaltung von UX Designern, was sie mit einer guten Formulargestaltung erreichen können:

Formulare können nicht wirklich Begeisterung auslösen, weil sie dazu dienen notwendige Informationen zu erfassen.

Das größte Lob, was man laut Martin Schrepp erreichen kann, ist ein “Ja, war ok.”.

Er zitierte die drei Ebenen von Formularen nach Jarrett als Orientierungshilfe für wichtige Aspekte zur Gestaltung von Formularen: Wahrnehmung, Dialog und Beziehung. Die Ebene “Wahrnehmung” bezieht sich auf die visuelle Gestaltung also die visuelle Erfassbarkeit des Formulars. Die Ebene “Dialog” bezieht sich auf die Verständlichkeit des Formulars. Die Ebene “Beziehung” betrachtet die Beziehung zwischen Anwender und Organisation, welche das Formular anbietet. Ein wichtiger Aspekt dieser Ebene ist das Vertrauen des Anwenders gegenüber der Organisation.

Er ging dann auf die Grundlagen der Formulargestaltung und häufig gestellte Fragen bei der Formulargestaltung ein. Ein paar seiner Tipps und Hinweise möchte ich an dieser Stelle herausgreifen:

Zum Thema Ausrichtung der Labels gab er folgende Tipps: bei einfachen Formularen ist die Ausrichtung der Labels fast egal, so lange sie nicht linksbündig ist. Eine linksbündige Ausrichtung ist für die Interaktion mit Bildschirmvergrößerungstechniken ungünstig, da die Labels dabei leicht aus dem Blickfeld geraten. Bei komplexen Formularen empfiehlt er eine rechtsbündige Ausrichtung am Feld. Ein linksbündige Ausrichtung beschleunigt laut einer Blickbewegungsstudie von Penzo (2006) – entgegen der weitverbreiteten Meinung – das Scannen eines Formulars nicht. Die rechtsbündige Ausrichtung spart vertikalen Platz und unterstützt durch die Nähe von Feld und Label die Verständlichkeit.

Zur Kennzeichnung der Pflichtfelder empfiehlt er auf Basis einer Studie von Pauwels, Hübscher, Leuthold, Bargas-Avila & Opwis aus dem Jahr 2009 eine deutliche visuelle Kennzeichnung beispielsweise mit einer farblichen Hinterlegung der Felder. Ein allgemeingültiges Kennzeichen gibt es aus seiner Erfahrung heraus nicht. Diese Erkenntnis deckt sich auch mit meinen Erfahrungen.

Der typische Web-Standard mit den Sternchen hinter dem Label ist vermutlich nicht die optimale Wahl.

Bezüglich des Gestaltungsrasters für Formulare empfiehlt er bei einfachen Formularen eine einspaltige Gestaltung. Bei betriebswirtschaftlichen Formularen ist seiner Erfahrung nach ein zweispaltiges Gestaltungsraster empfehlenswert.

Wenn sie ein Formular gestalten, ist es extrem wichtig, möglichst wenige Linien zu verwenden, an denen Sie das Formular ausrichten.

Fehlermeldungen sollten im Rahmen des Dialogs zwischen Anwender und Formular am besten möglichst nah an der Stelle erscheinen, an welcher der Fehler aufgetreten ist, und visuell deutlich hervorgehoben sein. Die höchste Zufriedenheit erreicht man laut einer Studie von Bargas-Avila, Oberholzer, Schmutz, de Vito & Opwis (2007) wenn man Fehlermeldungen erst nach der Eingabe aller Daten anzeigt. Dies kann ich aus meiner Erfahrung heraus nicht bestätigen. Gerade in Nutzungskontexten in denen umfangreiche Formulare unter Zeitdruck ausgefüllt werden (z.B. Erfassung im Akkord) ist eine späte Anzeige der Fehler erst nach der kompletten Eingabe des Formulars ungünstig. Hier empfiehlt sich eine Validierung direkt bei der Eingabe – entweder auf Ebene der einzelnen Felder oder Gruppen von logisch zusammenhängender Felder.

Hinsichtlich der barrierefreien Gestaltung von Formularen empfiehlt er die Berücksichtigung der Anforderungen von blinden Nutzern, Nutzern mit Sehschwächen (Nutzung von Vergrößerungsmechnismen), farbenblinden Nutzern und Nutzern mit motorischen Einschränkungen.

Seine Empfehlungen für barrierefreie Formulare sind:

  • Die Formulare müssen vollständig tastaturbedienbar sein. Bei umfangreichen Formularen sollten ShortCuts angeboten werden, mit denen man gezielt im Formular springen kann. Beispielsweise ist ein ShortCut zum Überspringen ganzer Abschnitte bzw. Gruppen sinnvoll
  • Labels müssen dem Feld technisch so zugeordnet werden, dass sie durch Screenreader lesbar sind.
  • Beziehungen zwischen Elementen darf nicht nur über räumliche Nahe vermittelt werden, da auch das von Screenreadern nicht wiedergegeben wird. Die Beziehung zwischen den Elementen eines Formulars muss daher auch textuell beschrieben werden.
  • Grafiken (z.B. Häkchen, welche anzeigen, dass eine Eingabe richtig war) müssen immer auch textuell beschrieben werden.
  • Wichtige Informationen dürfen nicht nur durch Farben hervorgehoben werden, da Screenreader Farben in der Regel nicht wiedergeben.
  • Der Kontrast zwischen Vorder- und Hintergrund muss ausreichend hoch sein. Dies betrifft beispielsweise das Verhältnis der Hintergrundfarbe eines Formulars zur Farbe der Rahmen von Eingabefeldern oder zur Hintergrundfarbe von Eingabefeldern.
  • Fehlermeldungen müssen gerade für blinde Anwender in einem Bereich ausgegeben, der mittels ARIA-Tag als Live-Region gekennzeichnet ist oder als Pop-Up gestaltet werden.

Für weitere Informationen zur barrierefreien Gestaltung von Formularen empfiehlt sich die Lektüre des ARIA-Standards sowie die WCAG-Leitlinien.

Zur Messung der Effizienz von Formularen im betrieblichen Umfeld empfiehlt er die Evaluation von gestalterischen Entwürfen mittels der kognitiven Modellierung aus Basis von GOMS. Das GOMS-Verfahren lässt sich relativ leicht mit dem CogTool anwenden. Bei diesem Verfahren wird der Zeitbedarf ermittelt, den ein geübter Anwender, mit dem notwendigen fachlichen Wissen und ohne beim Ausfüllen gestört zu werden, benötigt, um das Formular auszufüllen. Dieser Zeitbedarf wird zur Einschätzung der Effizienz herangezogen.

War dieser Artikel hilfreich für Dich?

Nach oben scrollen