Das Design eines Formulars spielt eine ganz wesentliche Rolle, wenn es darum geht, den Nutzer bei der korrekten und effizienten Eingabe von Daten zu unterstützen. Formulare sind ein elementarer Bestandteil in Softwareanwendungen jeglicher Art. Egal ob simple Registrierungsmaske oder komplexe, mehrseitige Formularanwendung. Sie sind überall. Und sie sind unsere Schnittstelle zwischen Mensch und Maschine. Genau deshalb braucht ein Formular Design.
Mensch und Maschine ticken nicht im selben Takt. Genügen dem Computer ein paar Nullen und Einsen, um Daten korrekt zu verarbeiten, so braucht der Mensch deutlich mehr Hilfestellung. Die Eingabe von Daten in Formulare gehört in der Regel nicht zu den beliebtesten Tätigkeiten unserer Spezies. Besonders wenn wir ein mehrseitiges Formularmonster vor uns haben. So eins aus der Hölle, quasi. 😉
Dieser Artikel fokussiert sich auf die häufigsten Fehler, die im Formular Design gemacht werden und schlägt konkrete Darstellungsalternativen vor. In der Regel sind dies minimale Änderungen, die einen großen Einfluss auf das Nutzererlebnis haben. Natürlich gilt auch hier: Ausnahmen bestätigen die Regel – Nicht jeder „Fehler“ ist immer auch ein Fehler. Manche Darstellungen machen in unterschiedlichen Kontexten durchaus Sinn. Ich werde versuchen, darauf einzugehen.
Formular Design: Mehrspaltige Formulare vs. einspaltige Formulare
Formulare sollten einspaltig sein. Das fördert unseren Lesefluss und vermindert Unterbrechungen durch das häufige hin und her wechseln zwischen den Spalten. Auch wenn uns durch unseren Monitor deutlich mehr Platz zur Verfügung steht, sollte das Formular einspaltig sein. Der übrige Weißraum lenkt unseren Fokus auf das Wesentliche, das Ausfüllen des Formulars. Befindet sich das Formular eingebettet in eine Webseite, sollten wir auf zusätzlichen Module zum Beispiel in Marginalspalten verzichten, um eine ablenkungsfreie Eingabe zu ermöglichen. Eine Ausnahme können wir bei einfachen Formularen machen. Haben wir nur zwei Eingabefelder, wie zum Beispiel Name und E-Mail-Adresse bei einer Newsletteranmeldung, können wir diese auch horizontal anordnen.
Labels in Formularen: Horizontal vs. vertikal
Auch hier wird unser Lesefluss behindert, da unsere Augen immer zwischen Label und Inputfeld wechseln müssen. Bei einer Anordnung des Labels oberhalb des Inputfelds lässt sich die Nutzerführung deutlich vereinfachen.
Labels gehören zu ihren Eingabefeldern
Label Styling: uppercase oder normal?
Eine Schreibweise nur in Großbuchstaben ist nicht zu empfehlen. Wir sind es nicht gewohnt, unsere Worte ausschließlich in Großbuchstaben zu schreiben, folglich fällt es uns schwerer den Inhalt zu erfassen, als bei normaler Schreibweise.
Formular Design: Dropdown Alternative
Generell gilt: So wenig Klicks wie möglich. Wenn die Anzahl der Optionen in einem Dropdownfeld überschaubar ist, lassen sie sich auch super nebeneinander darstellen. Somit können wir die Wahlmöglichkeiten deutlich schneller erfassen und sparen zudem noch einen Klick ein.
Platzhalter als Labels
Abhängig vom Browser verschwinden die Platzhalter beim Klick in das Inputfeld. Wenn es sich um ein Formular handelt, welches spezielle Daten abfragt, die über das normale „Name, Vorname,E-Mail“ hinausgehen, wird es noch deutlicher. Hier sind wir noch eher geneigt, das gerade Gelesene prompt zu vergessen. Ein kurzer Moment der Stille. Was wollte ich hier gerade eintragen? 😉
Unklare Call-To-Actions
Buttons wie „Senden“ oder „ok“ sind nicht aussagekräftig genug. Bezeichnungen wie „Daten absenden“ oder „Daten überprüfen“ geben dir ein genaueren Hinweis darauf, was ein klick auf den Button wirklich bewirkt.
Formular Design: Fehlermeldungen gehören ans Eingabefeld
Wenn wir einen Hinweis auf bei der Eingabe gemachte Fehler am Ende des Formulars platzieren, macht das absolut Sinn. Die genaue Fehlerbeschreibung jedoch gehört direkt an das betreffende Eingabefeld. Das hilft uns, den Fehler viel schneller zu identifizieren.
Validierung während der Eingabe kann zu ungewünschten Fehlermeldungen führen
Felder bereits während der Eingabe auf Korrektheit zu prüfen, ist selten sinnvoll. Wenn zum Beispiel direkt bei der Eingabe einer E-Mail Adresse auf das Vorhandensein eines @Zeichens geprüft wird, wirst du schon bevor du überhaupt die Chance hattest, deine Adresse komplett einzugeben mit Fehlermeldungen bombardiert. Das generiert immer Frust. Besser ist es, wenn wir solche Felder, die wir auf Plausibilität prüfen können ( E-Mail, PLZ, Telefon) nach Verlassen des Feldes validieren. Alle anderen Pflichtfelder sollten wir dann beim Absenden auf das Vorhandensein von Daten prüfen.
Hilfetexte sollten wir so platzieren, dass sie immer sichtbar sind
Du solltest immer in der Lage sein, auf einen Blick erfassen zu können, welche Eingabe erwartet wird. Hilfetexte hinter einem Icon zu verstecken, verhindert nicht nur das. Es zwingt dich immer zu einem zusätzlichen Klick. Nicht gut.
Verschieden priorisierte Handlungsmöglichkeiten sollten visuell unterschieden werden
Sobald du mehrere Handlungsoptionen hast, hilft es, diese visuell unterschiedlich zu priorisieren. Gibt es zum Beispiel einen „Reset“-Button und einen „Weiter“-Button, solltest du die Primärhandlung (weiter) optisch hervorheben.
Die Breite von Eingabefeldern kann kontextabhängig unterschiedlich ausfallen
Augenscheinlich wirkt ein Formular aufgeräumter, wenn alle Eingabefelder gleich breit sind. Die Breite eines Inputfeldes kann aber auch als zusätzlicher (zugegebenermaßen subtiler) Hinweis genutzt werden, wieviel Zeichen als Eingabe erwartet werden. So macht es zum Beispiel Sinn das Feld „PLZ“ schmaler zu gestalten, als das Feld „E-Mail“.
Pflichtfelder vs. Optionalfelder
Sobald in einem Formular Pflicht- und Optionalfelder angezeigt werden, ist die gängige Praxis die Pflichtfelder mit einem Stern zu markieren. In der Regel überwiegen aber die Pflichfelder in ihrer Anzahl. Daher macht es mehr Sinn, die optionalen Felder als solche zu kennzeichnen. Dadurch sparst du Kennzeichnungen ein und das Formular wirkt insgesamt aufgeräumter.
Ungruppierte Eingabefelder verschlechtern das Nutzererlebnis – gerade bei längeren Formularen
Bei komplexeren Formularanwendungen ist es unabdingbar die abgefragten Daten inhaltlich zu gruppieren und visuell als zusammengehörig darzustellen. Dir wird damit die inhaltliche Zuordnung der vielen Eingaben erleichtert.
Die Position von Hilfe- und Beschreibungstexten hat einen Einfluss auf das Nutzererlebnis.
Wenn ein Feld nicht selbsterklärend ist und einer Hilfestellung bedarf, so ist eine Positionierung unterhalb eines Eingabefeldes schwierig, da hier auch eventuelle Fehlermeldungen angezeigt werden. Um hier eine klarere Trennung vorzunehmen solltest du Hilfetexte immer oberhalb, Fehlermeldungen unterhalb des Eingabefeldes platzieren.
Lange Formulare sollten wir immer auf mehrere Seiten aufsplitten. Hierbei ist eine Aufsplittung nach Themengruppen sinnvoll.
Wie schon erwähnt, sollten inhaltlich zusammengehörige Eingabefelder gruppiert dargestellt werden. Um dem Nutzer den Eingabeprozess bei langen Formularen ein weiteres Stück zu vereinfachen, sollten Formulare thematisch in einzelne Schritte unterteilt werden, welche auf separaten Seiten angezeigt werden. Dies ermöglicht eine Fortschrittsanzeige des Eingabeprozesses. Die bisherigen Eingaben sollten zwischengespeichert werden, um dem Nutzer die Möglichkeit für nachträgliche Änderungen der Eingaben zu geben.
Formulare haben eine Funktion. Sie geben uns die Möglichkeit Daten zu erfassen und sie an den Computer weiter zu geben. Um die Interaktion zwischen Mensch und Formular zu vereinfachen, bedarf es verhältnismäßig wenig. Kleine Änderungen haben in der Regel erstaunlichen Einfluss auf die Bedienbarkeit.
Die hier aufgezählten Optimierungsvorschläge entsprechen meinen eigenen Learnings aus den vergangenen Jahren. Sie fußen auf Fehlern, die ich selbst gemacht oder bei anderen gesehen habe. Zum Teil auch auf tollen Feedbackgesprächen mit Kollegen und Kunden.
Ich hoffe, du konntest ein paar tolle Inspirationen mitnehmen. Wenn du magst, hinterlasse mir gern einen Kommentar. Vielleicht hast du auch noch ein paar Vorschläge parat? Ich freue mich auf den Austausch. 😉
1 Kommentar. Hinterlasse eine Antwort