Die Nutzerfreundlichkeit steht bei Formularen im Mittelpunkt, da ein langes und kompliziertes Formular die Benutzererfahrung negativ beeinflussen kann und die korrekte Informationsübermittlung behindert.

Textfeld

Das Textfeld ist das am häufigsten vewendete Element in einem Formular. Daher ist es wichtig, dieses zu Beginn eines Formulars zu erstellen und zu gestalten. Es dient weiterhin als Vorlage für zusätzliche Elemente im Formular.

Zustände

Ein Textfeld kann bei der Interaktion verschiedene Zustände annehmen. Wichtig ist, dass die unterschiedlichen Zustände klar erkennbar und verständlich sind. Der normale Zustand kommt in der Regel am häufigsten vor, da er für variable Antworten am besten geeignet ist. Der aktive Zustand signalisiert dem Nutzer, auf welchem Textfeld er sich befindet. Dies kann bei langen Formularen wichtig sein. Des Weiteren gibt es Textfelder mit vorgegebenem Inhalt, z.B. bei einem Passwortfeld. Hierbei sind die unvollständigen und vollständigen Zustände sehr nützlich. Dem Nutzer wird signalisiert, ob die Eingabe korrekt war oder nicht. Der inaktive Zustand ist für Textfelder, welche nicht bearbeitet werden sollen und können.

Die unvollständigen Zustände sollten sofort und sehr verständlich gekennzeichnet werden, da der Nutzer direkt die Information haben sollte, was der Fehler ist. Durch eine kurze Error Message kann dies noch verständlicher signalisiert werden.

Label

Ein Label gehört immer zu einem Textfeld dazu. Es hat die Funktion, dem Nutzer eine kurze Beschreibung zu geben, was von ihm verlangt wird.

Bei mehr als einem Textfeld ist es wichtig, auf den Abstand zwischen Labels und Textfeldern zu achten, da dieser die Zugehörigkeit visualisiert. Zwischen einem Textfeld und dem dazugehörigen Label sollte man sich an einem Abstand von 1,6x der Versalhöhe orientieren und bei dem Abstand zwischen Textfeld und nächstem Label 2x der Versalhöhe. Diese Abstände können auch variiert werden, dabei sollte man sich aber auf das Gesetz der Nähe verlassen.

Ausrichtung

Bei der Ausrichtung ist die beste Lösung, das Label linksbündig über dem Textfeld zu platzieren. Für breitere Bildschirme kann das Label auch linksbündig neben dem Textfeld stehen. Optional kann das Label auch rechtsbündig neben dem Textfeld platziert werden, wobei dies bei unterschiedlich langen Labels die Lesbarkeit erschwert.

Die Labels sollten außerdem nicht mittig platziert werden, da die Lesbarkeit deutlich verlangsamt wird.

Icons

Ein Label kann auch durch Icons ersetzt werden. Diese müssen jedoch für den Nutzer klar verständlich sein.

Hauptstyles

Für die Input-Felder gibt es drei Hauptstyles. Der Standard Style mit dem umrahmten Rechteck funktioniert am besten, da es am verständlichsten ist. Die beiden Styles des Material-Designs sind für viele schwieriger zu verstehen, da hier das Label den Platzhalter ersetzt. Der Platzhalter ist eine zusätzliche Information im Textfeld, um es dem Nutzer verständlicher zu machen.

Schatten

Die Umrandung des Textfelds kann zusätzlich mit Schatten gestylt werden. Der innere Schatten sorgt hier für eine höhere Verständlichkeit, wobei der äußere Schatten kein Einfluss darauf hat. Wichtig für das Verständnis ist hierbei die Umrandung.

Eckradien

Auch die Eckradien können bei Textfeldern verändert werden. Ein zu runder Eckradius sollte hier allerdings vermieden werden. Außerdem muss, wenn ein Eckradius verwendet wird, das Label entsprechend dem Radius verschoben werden.

Funktionale Styles

Ein Textfeld kann zusätzlich, wenn der Inhalt im voraus klar ist, speziell angepasst werden. Zum Beispiel, wenn die Eingabe nur fünf Ziffern erfordert, muss das Textfeld nicht die komplette Breite einnehmen. Dies sorgt für eine schnellere und verständlichere Nutzung.

Spalten

Einspaltige Formulare sind verständlicher und die Bedienung erfolgt schneller, da die Augen nur einer Richtung folgen müssen.

Dropdown

Das Dropdown Element bietet die Möglichkeit eine große Auswahl an Möglichkeiten auf geringem Raum darzustellen. Es wird verwendet, wenn es mindestens 5 Auswahlmöglichkeiten gibt, aus denen nur eine ausgewählt werden kann. Es hat den gleichen Aufbau wie Textfeld, welches auf der rechten Seite einen nach unten gerichteten Pfeil hat, dieser signalisiert dem Nutzer, dass man das Element ausklappen kann.

Ausgeklappter Zustand

Nach dem Ausklappen sieht der Nutzer die Auswahlmöglichkeiten, dabei ist es wichtig, dass die Auswahl deutlich erkennbar ist. Dies erreicht man durch das Färben des Hintergrundes, da nur die Schriftfarbe zu ändern visuell nicht deutlich genug ist. Außerdem dreht sich der nach unten gerichtete Pfeil auf der rechten Seite nach oben, um dem Nutzer zu verdeutlichen, dass er das Element auch wieder einklappen kann.

Lange Dropdownlisten

Dropdown Elemente mit vielen Auswahlmöglichkeiten haben das Problem, dass sie oft unübersichtlich sind und der Nutzer lange nach seiner Auswahl suchen muss. Dafür gibt es unterschiedliche Lösungsansätze, die eigenständig oder auch in Kombination genutzt werden können. Es gibt die Möglichkeit eine Suchfunktion einzubauen, sodass der Nutzer direkt seine Auswahl findet. Auch eine Auflistung der beliebtesten Auswahlen, vor den eigentlichen Auswahlmöglichkeiten ist ein Weg, dem Nutzer die Suche zu erleichtern. Eine Scrollanzeige an der Seite kann dem Nutzer helfen, den Überblick über die Auswahlmöglichkeiten zu behalten.

Dropdown auf dem Mobilgerät

Auf dem Mobilgerät gelten beim designen des Dropdown Elements andere Regeln. Da der Nutzer an die Systemeigenen Designs gewöhnt ist macht es weniger Sinn ihn durch eigene Designs zu verwirren. Auf dem Mobilgerät wird das Dropdown Element auch oft in Form eines Drehrads benutzt.

Checkbox

Die Checkbox bietet eine Multiple-Choice Auswahl, das bedeutet im Vergleich zum Dropdown können mehrere Möglichkeiten ausgewählt werden. Es gibt dabei drei unterschiedliche Zustände, normal, ausgewählt und unklar. Unklar entsteht, wenn die Checkbox verschachtelt ist, wenn das Eltern-Element ausgewählt ist, dann sind auch alle Kind-Elemente ausgewählt, wenn mindestens ein Kind-Element ausgewählt ist, dann ist das Eltern-Element unklar.

Bei der Gestaltung der Checkbox ist es wichtig, den ausgewählten Zustand deutlich hervorzuheben, dies passiert durch das Färben des Hintergrunds in Grün oder die Akzentfarbe. Zudem bekommt das Feld auch noch einen Haken, der die Bestätigung verdeutlicht. Dieser sollte allerdings nicht zu groß sein, um noch genügend Platz zum Atmen zu haben.

Switch

Mit dem ersten iPhone kam eine neue Version der Checkbox der Switch, dieser kann mit ausgewählt oder nicht ausgewählt belegt werden oder auch zum Auswählen zwischen zwei unterschiedlichen Optionen genutzt werden.

Der Switch hat eine Form, die sich durch das umschalten bewegt und dabei auch die Farbe ändern sollte. Mit der Form kann man aber kreativ sein: Eckig, Abgerundet oder ganz rund, es muss nur einheitlich zu dem restlichen Design des Formulares passen. 

Checkbox und Switches Vergleich

Checkboxen und Switches unterscheiden sich in der Position des Labels, bei der Checkbox ist das Label links und bei der Switch ist es rechts. Switches werden bei einzelnen Zustimmungen oder Aktionen genutzt, bei mehr als 2-3 Optionen sollte dann die Checkbox verwendet werden. Auch beim Ausführen unterscheiden sie sich: Switches werden meist direkt ausgeführt, wobei Checkboxen im Vergleich meist durch den Submit Button am Schluss des Formulars erst ausgeführt werden.

Aktiver Bereich

Die Elemente werden von einem Aktiven Bereich umschlossen. Dieser enthält auch das Label und bietet dem Nutzer eine klickbare Fläche zum Auswählen. Bei Mobilgeräten sollte dieser 44pt groß sein, auf dem Desktop kann er kleiner sein (ca. 30pt).

Radio-Button

Der Radio-Button wird verwendet, wenn die Auswahlmöglichkeiten zu wenig für ein Dropdown sind, da er auch nur eine Auswahl aus mehreren Möglichkeiten zulässt. Durch das Auswählen einer Option werden die andern automatisch aufgehoben. Es gibt die Möglichkeit, die beliebteste Option schon ausgewählt zu haben; der Nutzer kann dies dann bei Bedarf ändern.

Radio-Button und Checkbox - Vergleich

Radio-Buttons und Checkboxen funktionieren vertikal am besten und werden beide durch einen Submit Button am Schluss bestätigt. Radio Buttons sollten allerdings nicht wie Checkboxen verschachtelt werden, da dies nicht funktioniert.

Radio-Button auf dem Mobilgerät

Auf Mobilgeräten kann der Radio-Button inklusive dem aktiven Bereich in einem Button dargestellt werden.

Slider

Der klassische Slider hat einen festen Start und Endpunkt. Der lineare Slider mit Zwischenschritten hingegen ist akkurater und verständlicher, da vorgegebene Zwischenschritte vorhanden sind.

Der Range Slider grenzt einen bestimmten Bereich ein, dieser wird zum Beispiel bei Preisspannen eingesetzt.

Radiale Slider werden eingesetzt, wenn es keinen festen Endpunkt gibt. Zusätzlich gibt es noch weitere Möglichkeiten, wie man die einfachen Slider interessanter gestalten kann.

Einheitliche Styles

Das Wichtigste bei der Gestaltung eines Formulars ist, dass die einzelnen Elemente in einem konstanten Style gestaltet werden. Dies kann durch das Verwenden von systemeigenen Designs oder einem eigenen Design erreicht werden. Dabei ist es besser, die Elemente selber zu designen, da dies unabhängig von dem Gerät (Mac, Windows, Android Tablett) ein einheitliches Aussehen sicherstellt.

Lange Formulare

Bei längeren Formularen ist es sinnvoll, diese in inhaltliche Abschnitte zu unterteilen, damit der Nutzer nicht den Überblick verliert.

Wenn ein Formular auf mehrere Seiten aufgeteilt ist, sollte man dem Nutzer den aktuellen Stand anzeigen.