Online-Formulare finden Anwendung zur Registrierung von Newslettern, persönlichen Bereichen, Checkout-Prozessen oder anderen Formularstrecken bei denen Nutzer ihre Daten eingeben. Die Kollegin Chui Chui Tan von cxpartners untersuchte verschiedene Online-Formulare in einer Eyetracking-Studie mit dem Ziel bestehende Erkenntnisse zu validieren und Guidelines zur Gestaltung von Online-Formularen zu definieren. Im diesem Beitrag stelle ich die ersten 5 Guidelines von Chui Chui Tan vor. Guideline 6-10 folgt im zweiten Beitrag.
Guideline 1: vertikal, nicht horizontal
Formulare sollten vertikal, einspaltig und nach Möglichkeit mit vertikal ausgerichteten Formularfeldbezeichnungen (Label) gestaltet sein.
Guideline 2: Links ausgerichtete Label sind eindeutiger
Falls vertikale Label nicht möglich sind, sollten diese horizontal links ausgerichtet angeboten werden. So können sie schnell erfasst und gelesen werden. Fett ausgezeichnete Label können die Lesbarkeit nochmals erhöhen.
Guideline 3: Abfragesets als eine Information darstellen
Für bestimmte Abfragen wie z. B. Name, Datum, Uhrzeit machen Formularfelder in einer Zeile durchaus Sinn. Bei der Gestaltung sollte darauf geachtet werden, dass die einzelnen Abfragen als eine Information verstanden werden, bspw. umgesetzt durch ein gemeinsames Label, räumliche Nähe der Formularfelder oder durch ein primäres Label vor dem ersten Feld und Labels zu den einzelnen Feldern als Hinweis direkt in den Feldern, die bei Klick in das Formularfeld verschwinden. Beispiel: Geburtstag [Tag] [Monat] [Jahr]
Guideline 4: Formularfelder gruppieren, jedoch Hervorhebungen für Gruppenüberschriften sparsam einsetzen
Generell sollten zusammengehörige Formularfelder gruppiert werden, um die Anzahl der Felder visuell zu reduzieren. Überschriften zu solchen Formularfeldgruppen sollten dann hervorgehoben werden (z. B. durch Schriftfarbe oder farblich, schattierten Hintergrund), wenn sie unbedingt gelesen werden müssen. Stellen Sie sich also die Frage, ob es relevant ist die Überschrift einer bestimmten Formularfeldgruppe zu lesen. Falls nicht, sollte eine Ablenkung des Nutzers durch eine zu aufmerksamkeitsstarke Gestaltung der Überschrift nicht erfolgen.
Guideline 5: Auf * verzichten und optionale Formularfelder verständlich machen
Auf den Einsatz von Sternchen (*) zur Kennzeichnung von Pflichtfeldern oder optionalen Feldern sollte verzichtet werden. Anstelle dessen sollten aus Nutzersicht nur die unbedingt notwendigen Informationen abgefragt werden. Falls optionale Abfragen erforderlich sind, sollten sie verständlich gemacht werden anstatt ein * zu verwenden, bspw. durch eine entsprechende Benennung, Zusatzinformationen (optional) oder die Kennzeichnung direkt als Standardwert im Formularfeld: „optional“ oder „freiwillig“.
Wie ist Ihre Meinung zu den beschriebenen Guidelines? Welche Erfahrungen haben Sie mit der Gestaltung von Online-Formularen gemacht?
Gute und einleuchtende Ergebnisse und Guidelines. Ich bin gespannt auf die nächsten Tipps.
Hallo,
vielen Dank für Ihren Beitrag, der kam für uns gerade zur richtigen Zeit. Wir stylen grad unseren Shop neu und werden die neuen Richtlinien gleich ins Design mit einbeziehen. Dass z.B. Sternchen für Pflichtfelder ungeeignet sind hab ich mir irgendwie schon immer gedacht – manche nutzen die nämlich auch um optionale Felder auszuzeichnen. Überrascht hat mich jedoch, dass die Labels am besten über dem Feld stehen sollten – ich hätte auf horizontale, rechtsbündige Ausrichtung getippt.
P.S. Vielleicht wäre es angebracht, auch Ihr Kommentar-Formular unter diesen Gesichtspunkten zu betrachten, die Labels rechts vom Eingabefeld anzuordnen ist meiner Meinung nach keine gute Lösung.
Gruß
A.Hupe
Vielen Dank für den Hinweis auf die Original-Studie. Erst eben ist mir aufgefallen, dass der Artikel schon über ein Jahr alt ist.
Leider muss ich sagen, dass die deutsche Übersetzung nicht sonderlich einleuchtend gelungen ist. Ohne Abbildungen ist leider in vielen Fällen nicht klar zu verstehen, was genau gemeint ist. Und es kommt eben sehr auf die Details an.
Meine Empfehlung lautet daher: Lieber den Original-Beitrag lesen.