Eine Person füllt ein Formular auf ihrem Laptop aus

Formulare richtig gestalten

Effektive Dialoge im Web aufbauen und Conversions erreichen

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 Basics

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.

Eingabefelder - Funktionen und Layout

Durch die generelle Gestalt eines Eingabefeldes wird dem Nutzer bereits ein erster Hinweise darauf gegeben, welche Eingabe von ihm erwartet wird. Ein Feld für eine Hausnummer erhält beispielsweise weniger Platz als das Feld für den Namen einer Straße - Hausnummern sind üblicherweise kürzer als Straßennamen. Hierbei sollte allerdings stets auch die optische Harmonie der Feldgrößen zueinander beachtet werden, da sonst schnell ein unübersichtliches Chaos entsteht.

Um Struktur in ein chaotisches Formular zu bringen eigenen sich einspaltige Layouts besonders gut, denn dadurch entsteht auf einfache Art ein visueller Pfad, an dem sich das Auge orientieren kann. Genau solch ein Pfad hilft dem Nutzer, schneller ans Ziel zu kommen.

Falls eine einheitliche Länge für Eingabefelder nicht vermieden werden kann, muss dabei unbedingt ausreichend Platz für alle erdenklichen Eingaben eingeplant werden.

Visueller Pfad

Gruppierungen

Die kognitive Last der Nutzer zu verringern ist ebenfalls durch das Erstellen von semantisch zusammenhängenden Gruppen möglich. Diese machen die Oberfläche für das Auge überfliegbar und helfen so beim schnellen Erfassen. Sinnvolle Gruppierungen sind beispielsweise eine Kreditkartennummer und ihr Ablaufdatum oder Straßenname und Hausnummer.

Ein nützlicher Tipp ist hierbei keine zusätzlichen grafischen Elemente zu nutzen, um die Gruppen zu trennen. Eine Trennung per Abstand reicht in den meisten Fällen aus und lässt den Fokus des Nutzers ganz natürlich auf die Eingabefelder fallen.

Darstellung eines Online Formulars in dem manche Eingabefelder näher an einander platziert sind, wodurch Gruppen entstehen

Semantische Gruppen bringen Übersichtlichkeit

Primäre und sekundäre Aktionen

Ein weit verbreitetes Entwurfsmuster welches nicht nur in der Gestaltung von Formularen Anwendung findet ist die visuelle Gewichtung von sogenannten primären und sekundären Aktionen. Hierbei wird der stärker gewichteten Aktion auch visuell mehr Ausdruck verliehen als der sekundären Handlung. Es wird auch von positiven und negativen Aktionen gesprochen, da die stärkere, positive Aktion den Nutzer an sein Ziel bringt. Dadurch werden die sekundären, negativen Aktionen optisch abgewertet und die Conversion-Rate - also die Rate der Zielerreichung des Formulars - erhöht.

Um den roten Faden für die Nutzer bis zum Abschicken zu ziehen, richten Sie die primäre Aktion optisch an den Eingabefeldern aus. Primäre Aktionen, die zu entfernt von den Eingabefeldern liegen stören den roten Faden und führen häufiger zu Abbrüchen durch den Nutzer.

Darstellung eines Online Formulars mit einem orangenen und einem grauen Button.

Positive und Negative Aktionen

Barrierefreiheit

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/

Tipps und Hilfestellungen

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.

Auswahl-abhängige Eingabefelder

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.

  1. Tabs, welche sich am Fluss der Seite orientieren, da sie nicht so leicht übersehen werden, wenn sie am Pfad, dem roten Faden des Formulars ausgerichtet werden.
  2. Auswahl Felder, die sich auch einen ganzen Bereich des Formulars beziehen und seinen Inhalt verändern.

Wir bevorzugen diese beiden Methoden, da sie ausschließlich die zusätzlichen Eingabefelder zeigen, die vom Nutzer gewählt wurden. Das Formular wird individueller und übersichtlicher, eine sehr klare Zuordnung zwischen den Überauswahlen und den Detailangaben ist erkennbar.

Falls keine der Vorschläge zu Ihrem Formular passt werfen Sie doch mal einen Blick in Luke Wroblewski’s Präsentation „best practices in Form design“, in der er auf weitere Gestaltungsansätze einschließlich ihrer Vor- und Nachteile eingeht.

Das Entwurfsmuster nach welchem wir hier arbeiten und für die Nutzer anspruchsvolle Aufgaben in ihre Einzelteile zerlegt, wird „Progressive Disclosure“ (engl. für Fortlaufendes Aufdecken) genannt. Dadurch erleben die Nutzer eine Steigerung der Komplexität je nach ihren individuellen Ansprüchen und werden nicht mehr gefordert als für ihren spezifischen Anwendungsfall notwendig ist.

Variante 1: Auswahl der Sektion durch Tabs

Variante 2: Auswahlfeld für eine komplette Sektion

Konsistente Kommunikation

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.

Beschriftungen

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.

Labels neben den Eingabefeldern

Labels über den Eingabefeldern

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.

Keine Platzhaltertexte verwenden

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.

Fazit

  • Geben Sie den Nutzern durch das Layout einen klareren visuellen Pfad vor, an dem sie sich orientieren können. Einspaltige Layouts unterstützen diese Möglichkeit gut.
  • Gruppieren Sie inhaltlich zusammenhängende Inhalte durch Abstände statt durch zusätzliche grafische Elemente.
  • Sorgen Sie für eine visuelle Differenzierung von Primär und Sekundäraktionen.
  • Wenn Tipps für Nutzer benötigt werden, platzieren Sie diese nahe bei den zugehörigen Eingabefeldern und nutzen Sie sinnvolle Standardwerte für Eingabefelder.
  • Bei Inputs, die durch eine Nutzerauswahl erst freigelegt werden (Progressive Disclosure), sind Sprünge der Seite zu vermeiden und eine klare Verdeutlichung der initial vorhandenen Eingabefelder notwendig.
  • Kommunizieren Sie den aktuellen Status mit aussagekräftigen Mitteilungen. Nutzer wollen auf keinen Fall mit Fehlern oder Fragen alleine gelassen werden.
  • Beschriftungen sind über dem jeweiligen Eingabefeld am besten platziert, da so mehrere Elemente auf einen Blick erfasst werden. Stehen sie jedoch neben den Eingabefeldern sollten sie an diesen ausgereichtet werden, um Lücken im Layout zu vermeiden.
  • Nutzen Sie keine Platzhalter. Generell sind sie einfach für jeglichen Informationstransport ungeeignet, weil sie bei Klick in ihr Eingabefeld verschwinden. Wollen Sie die Beschriftung dennoch innerhalb des Inputs haben, lässt sich hierfür auch das Label Element entsprechend anders platzieren.
  • Ihr Formular muss für jede Nutzergruppe zugänglich sein. Achten Sie soweit möglich auf sauberen Code und testen Sie Ihr Formular doch einfach mal selbst mit einem Screen Reader wie NVDA.

Mehr lesen

Ihr Ansprechpartner