Formulardesign

Der wichtige erste Eindruck – Die optische Gestaltung

Auch bei Formularen ist der erste Eindruck entscheidend. Der Erfolg eines einzelnen Formulars oder einer ganzen Formular-basierten Anwendung hängt stark von diesem ersten Eindruck ab. Erschlagen Sie Ihre Nutzer mit einer Vielzahl unübersichtlicher Optionen, werden Sie diese Nutzer so schnell nicht wieder sehen. Das Formular sollte intuitiv zu bedienen sein und und bei den klassischen Usability-Messgrößen Effektivität, Effizienz und Zufriedenheit gut abschneiden. Dadurch steigt einerseits der Anreiz, das Formular vollständig auszufüllen, auf der anderen Seite wird es weniger Abbrüche und fehlerhafte Eingaben geben.

Der erste Eindruck ist vor allem optisch: sind Farbgestaltung und Schrift stimmig, ist das Formular übersichtlich und unterstützt die Gestaltung beim Ausfüllen? Viele praktische Beispiele zeigen, dass auch komplexe Formulare nicht so aussehen müssen wie eine Steuererklärung – lassen Sie sich inspirieren. Je wichtiger das Formular für die Website ist, desto mehr Zeit sollten in seine Optimierung gesteckt werden. Dafür kann auch ein Experte herangezogen werden.

Die allgemeinen Gestaltgesetze wie Prägnanz, Nähe, Ähnlichkeit, Kontinuität, Geschlossenheit gelten auch für das Design von Formularen. Inhaltlich zusammen gehörende Elemente sollten gemeinsam gruppiert werden. Logisch getrennte Einheiten sollten auch optisch getrennt werden.

Stabile Achsen

Visuell werden Formulare durch Achsen gestaltet. Achsen werden durch die Ausrichtung der Beschriftungen und der Eingabefelder zueinander erzeugt. Anwender können diese visuellen Achsen nutzen, um Informationen über die einzelnen Formularbestandteile zu ermitteln:

• Was wird genau verlangt?
• Ist dies ein Pflichtfeld?
• Schliessen sich Optionen gegenseitig aus oder ergänzt ein Feld die Eingaben in einem anderen Feld?
• Wo stehen die Fehlermeldungen?

Achsen entstehen durch Leerräume zwischen oder vor und nach den einzelnen Bestandteilen des Formulars. Diese Leerräume oder whitespaces können und sollten großzügig bemessen sein. Die Achsen werden einheitlich gestaltet, damit kein unruhiger Eindruck entsteht. Beschriftungen und Eingabefelder sollten einheitlich ausgerichtet sein und eine vergleichbare Länge aufweisen.

Im folgenden Screenshot sehen Sie ein Formular mit fünf unterschiedlichen Breiten der Eingabefelder. Da sich Nutzer in unserem Kulturkreis zeilenweise von links oben nach rechts unten durch ein Formular bewegen, entsteht durch die unterschiedlichen Zeilenlängen ein äusserst unruhiger Eindruck.

Wohin mit den Beschriftungen?

Die Beschriftung von Eingabefeldern sollte immer mit label vorgenommen werden, weil label Beschriftung und Eingabefeld eindeutig verknüpft. Schon die Positionierung der Beschriftungen der Kontroll- und Eingabeelemente hat große Auswirkungen auf die Gebrauchstauglichkeit Ihres Angebotes. Ob Beschriftungen nun zeilenweise neben den Formularelementen oder mehrzeilig über den Formularelementen angeordnet werden sollten, ist Gegenstand langer Debatten. Nach Erkenntnissen aus Nutzertests hat sich die Variante der seitlichen Beschriftungen bei längeren Formularen bewährt, während die mehrzeilige Variante eher für kurze, wenig komplexe Formulare geeignet scheint.

Wie die Elemente am besten angeordnet werden sollten, hängt von den jeweiligen Aufgaben des Formulars ab. Es gibt nur wenige allgemeine Empfehlungen.

Wichtige Anhaltspunkte bilden die Human Interface Guidelines der Betriebssysteme Windows, Mac OS und Linux.

Die Betriebssysteme selbst sind nach diesen Leitlinien aufgebaut und die Nutzer sind daran gewöhnt, dass auch Anwendungen im Web sich an diesen Leitlinien orientieren. Bei allen Unterschieden zwischen den einzelnen Leitlinien sind sie sich in folgenden Punkten einig:

• Beschriftungen von Textfeldern und Auswahlfeldern stehen grundsätzlich links neben oder über dem Feld,
• Beschriftungen von Radiobuttons und Checkboxen stehen grundsätzlich rechts neben den Kontrollelementen.

Wenn Sie sich an diese Konventionen halten, helfen Sie den Nutzern beim Ausfüllen des Formulars, weil die Platzierung den Sehgewohnheiten entspricht und so vorhersagbar wird.

Variante 1: Beschriftung seitlich, linksbündig ausgerichtet

• Die Texte der Beschriftungen sind hier gut zu erfassen, weil sie linksbündig ausgerichtet sind. Die Gestaltung wirkt jedoch wegen der zusätzlichen optischen Achse unruhiger. Diese Variante ist am besten geeignet für Formulare mit ungewöhnlichen Eingaben, weil sich die Nutzer stärker mit den Beschriftungen beschäftigen müssen.
• Für dieses Formular-Layout müssen Sie bei der Umsetzung eine sehr stabile float-Umgebung wie YAML, YUI CSS Grids oder ein spezialisiertes Formular-Framework wie Formee einsetzen. Entwickler setzen in diesem Bereich häufig noch auf Layouttabellen, weil viele Browser die nötigen CSS-Eigenschaften nur unzureichend unterstützen
• Ein Vorteil liegt darin, dass diese Variante weniger vertikalen Platz benötigt. Sie kommt damit dem Trend entgegen, dass Monitore immer breiter werden (16:9 statt 4:3).
• Ein Nachteil ist die schlechte Internationalisierbarkeit. Bei längeren Beschriftungen oder vergrößertem Text kommt es schnell zu unerwünschten Umbrüchen wodurch sämtliche Elemente verschoben werden.

Bei kurzen Beschriftungen entstehen große Lücken zwischen Beschriftungen und Eingabefeldern. Vor allem für Sehbehinderte wird es schwierig, zusammengehörende Elemente korrekt zuzuordnen, wie im folgenden Bild zu sehen ist:

Im nächsten Bild sehen Sie ein Designbeispiel mit gestreiften Label/Control-Paaren, das diese Assoziation zwar wiederherstellt, durch die enormen horizontalen Abstände jedoch weiterhin sehr ermüdend für das Auge des Nutzers ist:

Variante 2: Beschriftungen seitlich, rechtsbündig ausgerichtet

• Diese Variante verknüpft Beschriftung und das zugehörige Feld durch die Nähe zueinander. Dadurch kann sich der Nutzer schnell im formular orientieren. Dies mag einer der Gründe sein, warum die rechtsbündige Ausrichtung in Normen wie der ISO 9241-17 empfohlen wird.
• Diese Variante benötigt weniger vertikalen, dafür mehr horizontalen Platz – problematisch wird dies bei mehrspaltigen Formularen etwa durch <fieldset> neben <fieldset>.
• Wie in Beispiel 1 beschrieben ist diese Variante schwierig in CSS umzusetzen.
• Durch die Orientierung an der Mittelachse gibt es keinen einheitlichen Zeilenanfang. Dadurch sind Optik und Umbrüche kaum kontrollierbar. Die Beschriftungen sind somit für Nutzer schwieriger zu überfliegen, weil sie links »flattern«.
• Allerdings ist das schnelle Überfliegen zur Orientierung ein nachrangiges Problem bei Formularen (im Gegensatz zu Fließtexten): wir wollen ja gerade, dass sich die Nutzer mit den Feldbeschriftungen beschäftigen und die Eingaben sequentiell in der Reihenfolge ihres Auftretens bearbeiten.
• Problematisch im Sinne der Barrierefreiheit ist diese Variante für stark sehbehinderte Nutzer mit einem brauchbaren Sehrest, die sich mittels Lupenprogrammen visuell orientieren. Bei den teils enormen Vergrößerungsfaktoren kann es dazu kommen, dass der Nutzer unter der Legende (hier: »Überschrift«) lediglich einen großen weißen Bereich wahrnimmt und das erste Formularfeld nicht findet.

Variante 3: Beschriftungen oben, linksbündig ausgerichtet

• Diese Variante verknüpft eindeutig Beschriftung und Eingabefeld. Sie eignet sich nach unserer Erfahrung besonders für sehr einfache Abfragen, wenn die erhobenen Daten dem Nutzer vertraut sind. Die sind zum Beispiel einfache Formulare mit der üblichen Kombination aus Vorname, Nachname, E-Mail, PLZ, Ort, etc. oder Benutzername/Passwort.
• Ausreichende Abstände und Kontraste sind hier besonders wichtig, um ein effizientes Scannen der Beschriftungen zu ermöglichen.
• Diese Variante ist die flexibelste Lösung für Internationalisierungen und variierende Anordnungen, da sie den Labels sehr viel horizontalen Platz lässt und somit auch längere Texte möglich sind. Sie benötigt allerdings mehr vertikalen Platz.
• In vielen Studien (z.B. von Matteo Penzo, der die Effizienz der Anordnung untersucht, oder cxpartners »Web forms design guidelines: an eyetracking study«, wo die Zufriedenheit der Anwender untersucht wurde), schneidet diese Version am besten ab, wenn es um den minimalen Zeitaufwand zum Ausfüllen geht. Wie im Artikel »Why Users Fill Out Forms Faster with Top Aligned Labels« schlüssig argumentiert wird, liegt der Vorteil hier an der wesentlich geringeren Anzahl an Punkten, die das menschliche Auge anzuspringen hat, da die visuelle Orientierung entlang des natürlichen Leseflusses von oben nach unten entlang einer einzigen Achse verläuft.
  
• Einziger Nachteil: das Formular benötigt mehr Platz in der Höhe und nutzt die in der Regel zur Verfügung stehende Breite von Desktop-Monitoren nicht aus.

Keine Variante: Labels in das Eingabefeld

Sie sollten auf keinen Fall die Beschriftungen in das Eingabefeld schreiben. Es existieren eine ganze Reihe Skripte, die Beschriftungen ausblenden und den Text der Beschriftungen als Platzhalter-Text in die input- oder textarea-Felder schreiben.

Was passiert wenn der Nutzer ein solches Feld ansteuert und fokussiert? Entweder verschwindet der Text und damit der einzige Hinweis, um was es in diesem Feld geht. Oder der Text bleibt stehen und der Nutzer muss ihn überschreiben. Dabei wird es passieren, dass viele Nutzer den Platzhaltertext abschicken, wie Untersuchungen zeigen. Damit dieser Platzhaltertext überhaupt von echten Eingaben unterscheidbar ist, muss der Designer ihn so hell anlegen, dass Sehbehinderte ihn nicht mehr erkennen können.

Vorhersagbare Platzierungen

Es ist eine Unsitte, Formularfelder aus reinen Platzgründen nebeneinander zu präsentieren, auch wenn diese in keinem inhaltlichen Zusammenhang zueinander stehen. Berechtigte Ausnahmen gibt es zwar bei natürlichen Kombinationen wie PLZ/Ort, Straße/Hausnummer oder Vorname/Nachname; allen anderen Daten sollten Sie jedoch eine eigene Zeile zugestehen. Nutzer lernen beim ersten Betrachten eines Formulars dessen Aufbau und orientieren sich an diesem Gelernten. Wenn Sie dann mitten im Formular auf einmal von dieser Achse abweichen und rechts aussen zusätzliche Felder präsentieren, werden sie vom Nutzer leicht übersehen. Wenn es sich auch noch um Pflichtfelder handelt, führt dies auch zu einer Fehlermeldung und Frustration bei den Nutzern.

Gerade für Nutzer von Bildschirmlupen sind solche, je nach Vergrößerungsfaktor weit ausserhalb des sichtbaren Bereichs platzierte Formularfelder kaum zu finden, da niemand wohl nur »auf Verdacht« ganz nach rechts scrollen wird um nachzusehen, ob da vielleicht noch was ist.

Die horizontale Anordnung von Eingaben birgt auch weitere Gefahren in sich: durch die Abfolge von »Beschriftung/Eingabefeld, Beschriftung/Eingabefeld, Beschriftung/Eingabefeld …« wird es praktisch unmöglich, Beschriftung und zugehöriges Eingabefeld korrekt zuzuordnen, wie im folgenden Screenshot deutlich wird.

Der vermeintliche Platzgewinn wird hier also durch ein Weniger an Eindeutigkeit erkauft. Nutzer werden gezwungen, per »Trial and Error« herauszufinden, welche Option zu welchem Label-Text gehört. Die bessere Lösung wäre auch hier gewesen, die Optionen zeilenweise zu präsentieren.

Konventionen für Beschriftungstexte

Die meisten modernen Webbrowser bieten mittlerweile die Funktion, immer wiederkehrende Eingaben wie Vor- und Nachname oder Adresse zu speichern oder greifen auf das lokale Adressbuch des Nutzers zu. So kann der Nutzer dann per Knopfdruck entsprechende Felder automatisch ausfüllen lassen und erspart sich damit immer wiederkehrende Eingaben – für Nutzer mit motorischer Behinderung sicher eine große Hilfe.

Damit das funktioniert, müssen sich die Beschriftungen in den Formularen an bestimmte Konventionen halten. Daher sollten Sie die Beschriftungen so texten, wie die entsprechenden Einträge in Adressbüchern wie Outlook und ähnlichen lauten. Bewährt hat sich bei Adressen die Aufteilung in Vorname, Nachname, Firma, Straße, Hausnummer, Postleitzahl (bzw. PLZ), Ort (bzw. Stadt) und Land. Wenn Sie statt »E-Mail« »email« oder »Elektropost« als Beschriftungstext benutzen, dann mag das vielleicht witzig sein, aber kein Browser wird dieses Feld korrekt ausfüllen können.

Für die Schreibweisen und die Reihenfolge von Adressangaben gibt es sogar eine DIN-Norm (DIN 5008) – so kommt die Postleitzahl grundsätzlich vor dem Ort. Gerade eingedeutschte Anwendungen aus dem englischen oder amerikanischen Raum platzieren die Postleitzahl nach dem Ort und verstoßen damit gegen die Erwartung der Nutzer.

Ob Texte in Formularen und insbesondere in Labels fett gesetzt werden sollten, ist ebenfalls nicht eindeutig zu beantworten: Es gibt ernstzunehmende Hinweise, dass Nutzer fette Beschriftungen bevorzugen, weil sie einfacher zu scannen sind; allerdings gibt es auch Hinweise darauf, dass gefettete Texte schlechter lesbar sind:

»In their test, Penzo concluded that bold labels should be avoided if possible, as they are more difficult to read. However, our findings show a contradictory result. It conforms to Luke's recommendations where bold fonts can emphasis the labels from the foreground of the layout. Our participants found forms with bold labels easier to fill in.«

Wie so oft hängt die Entscheidung hierüber vom konkreten Einzelfall ab, bei dem auch andere Aspekte wie die Auswahl des Zeichensatzes, das Farbschema oder die Abstände in Betracht gezogen werden müssen.

Konventionen für Pflichtfelder

Die Frage, ob optionale Felder oder Pflichtfelder gekennzeichnet werden sollten, lässt sich mit einer einfachen Regel beantworten: die Felder mit der geringeren Anzahl werden gekennzeichnet. Wenn Sie überwiegend Pflichtfelder haben, sollten Sie die wenigen optionalen Felder kennzeichnen. Umgekehrt gilt das gleiche: bei einer Vielzahl von Feldern oder bei komplexen Formularen, in denen aber nur wenige Pflichtfelder sind, ist eine Kennzeichnung der Pflichtfelder vorzuziehen. So verhindern Sie visuellen Lärm, überfrachten Ihr Formular nicht mit vielen einzelnen Informationen und die Inhalte werden dadurch für den Nutzer einfacher zu erfassen.

Keine der Varianten ist sinnvoll, wenn alle Felder Pflichtfelder sind. Diesen Umstand sollten Sie zu Beginn des Formulars erwähnen; auf keinen Fall erst am Ende des Formulars oder sogar nach dem »Absenden«-Button. Einen umgekehrten Fall gibt es hier nicht – zumindest ist uns bisher noch kein Formular untergekommen, in dem sämtliche Felder optional sind.

Für Anbieter ist es natürlich verführerisch, kurzerhand alle Felder zur Pflicht zu erklären, um an möglichst viele Daten zu gelangen. Dem gegenüber stehen die Ansprüche der Nutzer und des Datenschutzes, möglichst wenige Daten preiszugeben, um ein Ziel zu erreichen, sei es eine Registrierung, ein Einkauf oder eine Meinungsäußerung per Kommentar. Daher könnte man fordern, sämtliche optionalen Felder gleich ganz wegzulassen.

Die Realität liegt aber, wie so oft, zwischen diesen beiden Extremen: aus Sicht eines Anbieters kann es durchaus sinnvoll sein, bestimmte Daten des Nutzers zu erfahren (z.B. wie er zur Website gekommen ist), aber sicher nicht alle Nutzer sind bereit, solche Angaben zu machen. Da würde die Festlegung als Pflichtfeld sicher unnötige Abbrüche provozieren. um hier nicht unnötig Kunden zu verlieren, sollten solche nicht-essentiellen Felder also optional sein.

Zur Erklärung, dass Pflichtfelder enthalten sind, die zwingend ausgefüllt werden müssen, gehört die Erklärung, wie diese gekennzeichnet sind. Die hierfür häufig verwendeten Asterisken (*) haben das Problem, dass diese von Screenreadern je nach Einstellungen des Nutzers als Interpunktionszeichen behandelt und nicht vorgelesen werden. Um auf der sicheren Seite zu sein, benutzen wir hier bei »Einfach für Alle« Grafiken mit einem Sternchen, in denen der Alternativ-Text "Pflichtfeld" hinterlegt ist. Zusätzlich können Sie das Sternchen auch mit einem title-Attribut ausstatten – wegen eines unnötigen Dopplers brauchen Sie sich hier keine Sorgen zu machen, Screenreader lesen immer nur entweder alt oder title vor (Testdatei):

Was geht gar nicht?

Ein immer wieder gern gemachter Fehler ist, Pflichtfelder ausschließlich optisch zu kennzeichnen, z.B. durch farbige Markierungen per CSS (Hintergrundfarben, Ränder etc.). In HTML-Code wie dem Folgendem steht dann für alternative Ausgabeformen nichts, aber auch wirklich gar nichts an verwertbarer Information:

<div class="pflichtfeld"><input … ></div>

Hier bleibt dem Nutzer einer Sprachausgabe nichts anderes übrig als es auf gut Glück zu versuchen.

Wohin mit der Kennzeichnung?

Die Kennzeichnung der Pflichtfelder sollte auf jeden Fall mit den Beschriftungen verknüpft sein bzw. innerhalb des Label-Elements stehen. Ob Sie die Kennzeichnung optisch links oder rechts der Kontroll- und Eingabeelemente platzieren, spielt in Zeiten von CSS keine Rolle mehr: mit dem nötigen Geschick können Sie die Kennzeichnung auch aus einem links stehenden Label herausziehen und rechts neben den Feldern platzieren. Wichtig ist nur, dass die Kennzeichnungen konsistent immer auf einer gemeinsamen erkennbaren Achse und an einer vorhersagbaren Position stehen und somit schneller zu erfassen sind.

Konventionen für Buttons

Auch für Buttons gibt es Konventionen, an denen sich Ihr Formulardesign orientieren sollte. Die wichtigste: die primäre Aktion, also in den meisten Fällen wohl »Speichern« oder »Abschicken«, steht immer an der prominentesten Stelle – sie ist direkt verantwortlich für die Fertigstellung des Vorgangs und die Präsentation sollte ihrer Wichtigkeit entsprechen. Sekundäre Aktionen wie »Abbrechen«, »Löschen« und »Zurück« sind nur selten sinnvoll, weil sie in der Regel den Zielen des Formulars zuwider laufen. Wenn Sie diese trotzdem einsetzen, dann sollte die optische Gewichtung ihrer (potenziell destruktiven) Funktion entsprechen, wie dies generell in Anwendungen jenseits des Browsers der Fall ist:

Auch wenn das Ziel eines guten Formulardesigns sein sollte, den Nutzer möglichst schnell durch den Prozess zu geleiten – hier sollte der Nutzer gebremst werden. Er soll sich mit der Beschriftung der Buttons befassen, bevor er wahllos etwas drückt, was annähernd so aussieht wie ein Button. Wie Luke Wroblewski im Artikel »Primary & Secondary Actions in Web Forms« anhand von Nutzertests nachweist, führt eine gleichartige Präsentationsform von »Speichern« (<input type="submit">) und »Löschen« (<input type="reset">) zu unvertretbar hohen Fehlerquoten und in Folge zu Frustration bei den Nutzern, die durch diese Verwechslung sämtliche Eingaben verlieren. Eine Möglichkeit, dies zu verhindern ist, die potenziell zerstörerischen Aktionen abweichend zu gestalten und z.B. in der Optik von Links statt von Buttons zu präsentieren und diese nicht, wie im folgenden Screenshot einer Webmail-Anwendung, gleichrangig nebeneinander zu stellen:

Eine gute Zusammenfassung zur Diskussion um die richtige Platzierung und das Aussehen von primären und sekundären Aktionen finden Sie in den Artikeln »The use of buttons in web forms« von Gabriel Svennerberg und »Buttons on Forms – where to put them, and what to call them« von Caroline Jarrett. Wie bei der überwiegenden Anzahl der Experten wird auch hier die Platzierung der primären Aktion auf der linken Seite empfohlen, die sekundären Aktionen sollten rechtsbündig ausgerichtet werden.

Fangen spielen?

Ebenso wichtig wie die Benennung und Platzierung ist, gerade aus Sicht der Barrierefreiheit, die Größe von Interface-Elementen wie Buttons , aber auch Icons und damit der Klickfläche, die ein Nutzer treffen kann. Eines der fundamentalen Gesetze des Interaktionsdesigns ist das nach seinem Entdecker benannte Fitts's Law:

  t = a + b log2 ( D / B + 1 )

- wobei t die Zeit ist, die benötigt wird, um das Ziel zu treffen, D ist die Distanz vom Ausgangspunkt des Cursors und B ist die Breite des Ziels. Oder etwas salopper formuliert: je größer ein Scheunentor ist und je näher man davor steht, desto schneller trifft man das Scheunentor mit einer Schrotflinte. Eine hervorragende Einführung in diese Gesetzmäßigkeiten finden Sie im Artikel »Visualizing Fitts's Law« von Kevin Hale.

Gerade bei der aktuell stark zunehmenden mobilen Nutzung mit Touchscreens gewinnt dieses Gesetz an Relevanz: ein Interface-Element, dass nicht mindestens 40-50px groß ist, kann vom menschlichen Zeigefinger nicht verlässlich getroffen werden – besonders wenn in unmittelbarer Nähe weitere gleich kleine Elemente stehen.

Ergebnisse zählen

In der Konzeption Ihrer Formulare sollten Sie auch den abschließenden Bestätigungs- oder Ergebnisseiten die angemessene Aufmerksamkeit widmen. Gerade bei vertriebsorientierten Seiten bietet sich hier ein Potenzial, den Prozess für den Kunden mit einem angenehmen Erlebnis abzuschließen. Dazu gehört auch die Erstellung einer für den Ausdruck optimierten Fassung der Seite mit einer Zusammenfassung der übermittelten Daten.