Formular Design – Die 16 häufigsten Fehler und wie du sie vermeidest

Ich hasse sie.

Und sie lauern überall.

Sie treiben mich in den Wahnsinn.

Wovon ich rede?

Formulare.

Ich meine diese Formular-Monster. Bestückt mit tausenden Eingabefeldern, die wie Horden kleiner Gremlins nur darauf warten, meine Lebenszeit zu fressen.

Die, bei denen ich nie weiß, wann ich endlich mit dem Ausfüllen fertig bin.

Die mir nichtssagende Fehlermeldungen an den Kopf spucken.

Die, bei denen durch einen falschen Klick sämtliche Daten, die ich in den letzten 13 Stunden eingegeben habe, einfach weg sind. Wie von einem schwarzen Loch aufgesaugt.

Ich habe einen Entschluss gefasst: Ich werde die Menschheit befreien!

Und zwar von fiesen Formularen. Und mit deiner Hilfe schaffe ich das auch.

Um dir das nötige Rüstzeug zu geben, sie für immer in die Hölle zu verbannen, habe ich dir die 16 häufigsten (und zugegebenermaßen nervigsten) Fehler im Formular Design zusammen gestellt.

Damit du Fehler der Vergangenheit nicht wiederholst und in Zukunft Formulare erstellst, die Menschen nicht in den Wahnsinn treiben.

Los geht’s. Ich zähl auf dich.

1. Mehrspaltige Formulare

Formular Design: Mehrspaltige Formulare vs. einspaltige Formulare

Formular Design: Mehrspaltige Formulare vs. einspaltige Formulare

 

Eine der effektivsten Regeln im Formular Design lautet: 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.

 

2. Links positionierte Labels

Labels in Formularen: Horizontal vs. vertikal

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.

 

3. Gleiche Abstände von Label zu Input und umgekehrt

Labels gehören zu ihren Eingabefeldern

Labels gehören zu ihren Eingabefeldern

Zwischen Label und Inputfeld muss eine visuelle Verbindung bestehen. Damit sind wir in der Lage die Zugehörigkeit zwischen Titel und Eingabefeld schneller zu erkennen.

4. Nur Großbuchstaben bei Labels

Label Styling: uppercase oder normal?

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.

 

5. Dropdowns bei weniger als 5 Optionen

Formular Design: Dropdown Alternative

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.

 

6. Platzhalter als Label oder Hinweistext nutzen

Formular Design: Dropdown Alternative

Formular Design: Dropdown Alternative

 

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? 😉

 

7. Unklare “Call to actions”

Unklare Call-To-Actions

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.

 

8. Fehlermeldung am Ende oder Anfang des Formulars

Fehlermeldungen gehören ans Eingabefeld

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.

 

9. Validierung während der Eingabe

Validierung während der Eingabe kann zu ungewünschten Fehlermeldungen führen

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.

 

10. Versteckte Hilfetexte und Beschreibungen

Hilfetexte sollten wir so platzieren, dass sie immer sichtbar sind

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.

 

11. Optisch undifferenzierte Action Buttons

Verschieden priorisierte Handlungsmöglichkeiten sollten visuell unterschieden werden

Verschieden priorisierte Handlungsmöglichkeiten sollten visuell unterschieden werden

 

Dies ist einer der häufigsten Fauxpas im Formular Design. Sobald du mehrere Handlungsoptionen hast, solltest du sie visuell unterschiedlich priorisieren. Gibt es zum Beispiel einen “Reset”-Button und einen “Weiter”-Button, solltest du die Primärhandlung (weiter) optisch hervorheben. Damit verhinderst du ungewollte Fehlklicks.

 

12. Gleich breite Inputfelder

Die Breite von Eingabefeldern kann kontextabhängig unterschiedlich ausfallen

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”.

 

13. Markierung von Pflichtfeldern vs. Optionalfeldern

Pflichtfelder vs. Optionalfelder

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.

 

14. Inhaltlich ungruppierte Eingabefelder

Ungruppierte Eingabefelder verschlechtern das Nutzererlebnis – gerade bei längeren Formularen

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.

 

15. Helfertexte unterhalb des Inputfeldes

Die Position von Hilfe- und Beschreibungstexten hat einen Einfluss auf das Nutzererlebnis.

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.

 

16. Lange Formulare ohne Fortschrittsanzeige

Lange Formulare sollten wir immer auf mehrere Seiten aufsplitten. Hierbei ist eine Aufsplittung nach Themengruppen sinnvoll.

In langen Formularen solltest du immer eine Fortschrittsanzeige visualisieren

 

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. Um dem Nutzer klar zu machen, an welchem Schritt er sich gerade befindet, bietet es sich an, eine Fortschrittsanzeige des Eingabeprozesses darzustellen. Die bisherigen Eingaben solltest du außerdem zwischengespeichern, um dem Nutzer die Möglichkeit für nachträgliche Änderungen der Eingaben zu geben.

[ult_sticky_section sticky_gutter=”140″]

Weitere Beiträge

[/ult_sticky_section]

Formular Design: kleine Änderungen, großer Impact

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. 😉

Das Design eines Formulars spielt also 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.

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.

Du brauchst Unterstützung von einem UX Experten bei der Entwicklung einer Software oder eines Intranet Designs? Dann melde dich gern bei mir.

+49 30 399 784 47

Ronny Enzenberg, itacs GmbH
Menü