Formulare richtig gestalten

Formulare gehören bereits seit geraumer Zeit zum Standard Repertoire von Websites. Sie sind der Kern der Kommunikation zwischen den Usern und Ihnen. Es lohnt sich daher, auf seit Jahren aufgebautes Wissen zurückzugreifen und sich vor Augen zu führen, welche Entwurfsmuster sich etabliert haben und was diese so erfolgreich macht. In diesem Artikel geben wir gleichzeitig Einblick in unsere langjährige Arbeit im Bereich UI/UX sowie Barrierefreiheit und versuchen gleichzeitig eine Vermittlung unserer wichtigsten Erkenntnisse.

Die Grundregeln für alle Formulare im Web bilden für uns folgende 4 Prinzipien:

1. Es gilt, den physischen und kognitiven Aufwand für Nutzer zu minimieren
2. Die Benutzung muss so barrierefrei wie möglich erfolgen können
3. Formulare müssen einem visuellen "roten Faden" folgen
4. Kommunikation mit dem Nutzer muss klar und deutlich erfolgen in Form von Fehler- und Erfolgsmeldungen sowie Hilfestellungen

Um deutlicher zu machen, wie diese Regeln in einem Formular umgesetzt werden schauen wir uns verschiedenen Aspekte des Formulardesign an.

Damit Ihr Formular für jeden Nutzer auf jeder Plattform zugänglich ist gibt es Einiges zu beachten. Mit der sogenannten Barrierefreiheit (engl. Accessibility) möchte man besonders Personen mit eingeschränkten Sinnen die Verwendung von Websites erleichtern. Schlecht umgesetzte Formulare stellen für diese Zielgruppe eine teils unüberwindbare Hürde dar. Dank gut definierter Web-Standards kann Barrierefreiheit sehr einfach durch semantischen Quellcode vermieden werden. Konkret ist damit der Einsatz bestimmter Elemente für ihren definierten Zweck gemeint: Eine ja/nein Frage sollte sich beispielsweise immer durch eine Checkbox beantworten lassen. So können Screen-Reader, die den Nutzern die Website basierend auf eben dieser Struktur „vorlesen“, Zusammenhänge erkennen und den Nutzern diese entsprechend wiedergeben. Ganz nebenbei verbessert sich durch diese Erwägungen auch immer die Nutzbarkeit für alle Nutzergruppen und damit auch der Erfolg Ihrer Maßnahmen.

Ebenso wichtig ist die physische Bedienbarkeit des Formulars. Wird zum Beispiel ausschließlich die Tastatur zum Navigieren einer Website genutzt, ist die Reihenfolge, in der die Elemente angesprungen werden, entscheidend. Die durch den Code vorgegebene Reihenfolge kann vom Ersteller verändert und der jeweiligen Situation entsprechend angepasst werden.

Darüber hinaus sollte innerhalb eines Formulars immer erkennbar sein, welches Feld aktuell vom Nutzer beschrieben wird. Dieser sogenannte Fokus-Style ist vor allem für Nutzer von Tastaturnavigation die einzige Möglichkeit, eine leichte navigation zwischen einzelnen Feldern zu ermöglichen.

Sowohl bei der Wahl des Fokus-Styles als auch bei der generellen Farbauswahl der Bedienoberfläche, besonders jedoch bei Texten, ist nach den Web Content Accessibility Guidelines (WCAG) ein Kontrastverhältnis von mindestens 4.5:1 erforderlich, um auch für Personen mit eingeschränktem Farbsehen ausreichend erkennbar zu sein. Um dieses Verhältnis zu überprüfen nutzen sie einen WCAG konformen Kontrast-Check wie diesen: https://webaim.org/resources/contrastchecker/

Generell gilt hierbei: Je weniger Tipps und Hilfetexte Nutzer brauchen, um ein Formular auszufüllen desto geringer ist ihre dafür zu erbringende kognitive Leistung. Ist es dennoch notwendig, einen oder mehrere Eingabefelder genauer zu beschreiben, haben sich Hilfsstellungen, die nahe an ihrem Eingabefeld platziert sind als am nützlichsten erwiesen. Sie erlauben dem Nutzer auf einem Blick ihre Zuordnung zum jeweiligen Eingabefeld.

Um dem Nutzer Zeit zu ersparen ist es hilfreich, sinnvolle Werte vorzugeben. Hat Ihr Shop beispielweise eine standardisierte Versandmethode, welche zudem noch von den meisten Kunden gewählt wird? Zeigen Sie diese als vorausgefüllten Wert und ersparen Sie Ihren Nutzern den unnötigen Klick auf ein „Bitte wählen Sie Ihre Versandart“ Auswahlfeld. Nutzen Sie auch die Möglichkeit zum automatischen Vervollständigen des Formulars durch den Browser des Nutzers - durch sogenannte Autocomplete-Attribute können Entwickler Formularfelder als automatisch ausfüllbar markieren.

Wenn Nutzer im Verlauf des Formulars eine Auswahl treffen, welche andere Eingaben erfordert als die übrigen Optionen, ist es nicht notwendig, dass alle Nutzer diese zusätzlichen Felder im Formular sehen. Wählt der Nutzer beispielsweise den Versand eines Produktes statt der Abholung vor Ort, wird dafür eine Lieferadresse benötigt. Land, Stadt, Postleitzahl, Straße, Hausnummer und ein Versanddienstleister müssen ausgewählt werden. Aber die Nutzer, welche ihr Produkt vor Ort abholen brauchen diese Daten nicht anzugeben, um ihren Prozess abzuschließen. Wir können diesen Nutzern das Ausfüllen des Formulars erleichtern und erhöhen somit auch ganzheitlich die Erfolgsrate des Formulars.

Solche konditionalen Anzeigen von Formularfeldern können beispielsweise mit folgenden Mitteln gelöst werden.

Als Nutzer ist nichts ärgerlicher, als bei einem auftretenden Fehler keine Informationen zur Fehlerbehebung zu erhalten. Daher ist die Kommunikation mit den Nutzern ein wichtiger Punkt, um sie beim Abschluss des Prozesses zu unterstützen.

Bereits während dem Tippen sollte dem Nutzer Feedback zu den eigegebenen Daten gegeben werden. Somit können Probleme auf der Stelle behoben werden und nicht erst bei erneuter Prüfung nach dem Absenden. Dabei ist unbedingt zu beachten verständliche und aussagekräftige Texte zu formulieren die tatsächlich zur Lösung des Problems beitragen und nicht nur darüber informieren, dass ein Fehler aufgetreten ist.

Um die Nutzer anzuspornen sollten auch Erfolgsmeldungen, wie beispielsweiße ein grünes Häkchen bei gültigen Eingaben, verwendet werden. Dazu zählt auch die Schaltfläche zum Versenden auszugrauen, bevor alle erforderlichen Angaben im Formular stehen.

Optionale und verpflichtende Felder müssen deutlich als solche zu erkennen sein, allerdings nie im gleichen Formular: Machen sie immer die Art von Feld besonders kenntlich, von welcher weniger im Formular verwendet wurde. Bei 5 optionalen und 2 Pflichteingaben markieren sie die Pflichtangaben als solche - als Konsequenz sind auch die optionalen Felder als solche zu erkennen.

Bei langen Formularen ist es wichtig, dem Nutzer einen Überblick darüber zu geben, welchen Fortschritt er bisher erreicht hat. Bekommt der Nutzer das Gefühl, ein nicht endendes Formular ausfüllen zu müssen, wird er vermutlich die Eingabe abbrechen.

Matteo Penzo untersuchte mit Hilfe von Eye Tracking seiner Testpersonen, wie sich die Position einer Feldbeschriftung zu ihrem Eingabefeld auf unser Blickverhalten auswirkt und hat dabei sehr nützliche Einblicke erlangt. Die besten Resultate zeigen sich bei der Positionierung der Beschriftungen links oberhalb der Eingabefelder. Hierbei konnten die Nutzer sowohl das Eingabefeld als auch die Beschriftung auf einen Blick erfassen. Dabei wurde auch festgestellt, dass Beschriftungen in fetten Schriftschnitten zu einer etwa 60% längeren Betrachtungszeit führen als solche in normalen Schriftschnitten. Deshalb empfehlen wir, keine fetten Beschriftungen zu verwenden um den Zeitaufwand der Nutzer gering zu halten.

Links vom Feld platzierte und ausgerichtete Beschriftungen haben einen unerwünschten Nebeneffekt: Es kann zu großen Lücken zwischen den beiden Elementen kommen. Nutzer müssen an dieser Stelle nicht nur beides einzeln erfassen, sondern zudem noch eine Zuordnung zum Eingabefeld tätigen. Besser sind die Beschriftungen an den Feldern ausgerichtet.

Die Nutzung von Platzhaltertexten in Formularen ist mit Vorsicht zu genießen, da hier ein großes Fehlerpotential vorhanden ist. Wir sehen häufig, wie vermeintlich aus ästhetischen Gründen die Beschriftungen wegelassen und durch Platzhalter innerhalb der Eingabefelder ersetzt werden. In Folge dessen verschwindet der Beschriftungstext sobald ein Nutzer in das Feld klickt. Besonders problematisch wird es, wenn es in so einem Fall zu einem Fehler kommt, der Nutzer seine Eingaben prüfen möchte und alle Beschriftungen verschwunden sind.

Ein weiteres Problem von Platzhaltertexten ist, dass der Eindruck entstehen kann, das Feld sei bereits ausgefüllt oder möglicherweise gar kein Eingabefeld. Tatsächlich zeigt sich diese Problematik überraschend häufig: Beim Ausfüllen eines Web-Formulars scannen unsere Augen dieses automatisch nach leeren Eingabefeldern, um möglichst schnell ans Ziel zu kommen. Befindet sich bereits Text im Feld wird es jedoch gar nicht in seiner Funktion wahrgenommen.

Eine beliebte Alternative bietet sich beispielsweise in Googles Material Design Guide an. Die Eingabefelder mit den animierten Beschriftungen, die nach oben rutschen sobald sie auswählt sind, sind vielen von uns vertraut und bieten, sofern das HTML Label Element statt des Placeholder-Textes verwendet wird eine visuell ansprechende Option.