BrandMySharePointBrandMySharePointBrandMySharePointBrandMySharePoint
  • Intranet Design
  • SharePoint Development
  • SharePoint und Office 365 News
  • Schreib uns!

Die häufigsten Fehler im Formular Design

21. April 2017Ronny EnzenbergIntranet Design1 Kommentar

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.

 

1. Mehrspaltige Formulare

Mehrspaltige Formulare vs. einspaltige Formulare

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.

 

2. Links positionierte Labels

Labels: 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

Formular Design: 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

Formular Design: Labels - 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

Platzhalter als Labels

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

 

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

Formular Design: Fehlermeldungen gehören ans Eingabefeld

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.

 

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

Actionbuttons in Formularen

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.

 

12. Gleich breite Inputfelder

Formular Design: Breite von Inputfeldern

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

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

Hilfetexte und Beschreibungen zu einem Eingabefeld

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 auf einer Seite

Formular Design: Lange Formulare in Einzelschritte unterteilen.

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.

Formular Design: kleine Änderungen, großer Impact

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

 

Tags: Design, Fehler, Forms, Formulare, Mistakes, UI, Usability, UX
Ronny Enzenberg
Ronny Enzenberg
Vorheriger Beitrag itacs design talk – Warum Design die wichtigste Zutat für dein Intranet ist

1 Kommentar. Hinterlasse eine Antwort

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

BrandMySharePoint – Ein Blog der itacs GmbH

Die itacs GmbH ist ein deutschlandweit tätiges IT-Beratungsunternehmen mit Hauptsitz in Berlin, das sich auf IT-Lösungen auf Basis von Microsoft Technologien spezialisiert hat.

Letzte Beiträge

  • Bis zu „Seite hinzufügen“ und noch viel weiter…
  • Die häufigsten Fehler im Formular Design
  • itacs design talk – Warum Design die wichtigste Zutat für dein Intranet ist

Durchsuche BrandMySharePoint

  • Impressum
  • Haftungsausschluß
  • Datenschutz
  • Schreib uns!
  • login
© 2016 itacs.de