Formulargestaltung

Regeln für nutzerfreundliche Formulare: so kurz wie möglich, einspaltig, klar beschriftete und ausreichend grosse Felder, gekennzeichnete Pflichtfelder, Prüfung schon während der Eingabe und hilfreiche Fehlermeldungen direkt beim Feld. Formulare entscheiden über Bestellungen, Anmeldungen und Anfragen.

Einsatz und Feldtypen

Formulare dienen Transaktionen (Bestellung, Überweisung), Login und Registrierung, Kontakt und Support, Datensammlung (Newsletter, Gewinnspiel, Umfrage) und Beiträgen (Kommentare, Posts) (Quelle - Praxisbuch Usability und UX, S. 398).

Feldtypen: ein- und mehrzeiliges Textfeld, Passwortfeld, Auswahlliste (Dropdown), Radiobuttons (eine Option), Checkboxen (mehrere), Datei-Upload, dazu Spezialfelder für Zahlen, E-Mail-Adressen und Datum.

Struktur

• So kurz wie möglich: Jedes Feld auf seinen Nutzen prüfen. Optionales lieber später abfragen, etwa beim Newsletter erst nur die E-Mail-Adresse, dann auf einer Folgeseite den Namen (S. 403).
• Einspaltig, Felder untereinander. Ausnahmen nur für Paare wie PLZ und Ort oder Vor- und Nachname.
• Gruppieren mit Weissraum nach den Gestaltgesetzen (Wahrnehmungspsychologie).
• Feldgrösse passend zur Eingabe, Nachnamen können lang sein; Touch-Elemente mindestens 7 mm bzw. 48 px mit etwa 5 mm Abstand (S. 406).
• Richtiges Element: bis vier feste Optionen als Radiobuttons oder Buttons, mehr als vier als Dropdown, sehr lange Listen als Suchfeld mit Vorschlägen (Beispiel Flughafen) (S. 406–407).
• Pflichtfelder mit Sternchen und Legende kennzeichnen. Sind die meisten Felder Pflicht, lieber die optionalen markieren (S. 407).
• Nur nötige Felder zeigen: Das Kindesalter bei der Hotelsuche erscheint erst, wenn Kinder ausgewählt sind (S. 410).

Labels

Fünf mögliche Positionen; kein klarer Sieger in Tests (Kap. 37):

Nach Tabelle 37.1 (S. 420). Label im Feld (Platzhalter) ist am wenigsten zu empfehlen: Es verschwindet beim Tippen, man kann die Eingabe nicht mehr mit der Frage vergleichen, und bei schwarzer Farbe wirkt das Feld schon ausgefüllt. Ausweg: das Label schrumpft beim Tippen und rückt nach oben („Floating Label“, Beispiel Klarna; S. 419).

Formulierung: einzelne, geläufige Wörter, nie durchgehend Grossbuchstaben, ohne Kontext verständlich. Formatangaben (TT.MM.JJJJ) zusätzlich zum Label, nicht statt dessen.

Fehler vermeiden und melden

• Programmatisch abfangen: Leerzeichen in Telefonnummern entfernen, „83“ als 1983 lesen, Datum per Kalender wählen lassen (S. 409, 427).
• Inline-Validierung: schon beim Verlassen eines Feldes prüfen und Rückmeldung geben, etwa ob der Benutzername frei und das Passwort sicher genug ist. Erhöht die Abschlussquote, senkt Fehler und Zeit. Nicht bei Standardangaben wie dem Vornamen, das verwirrt (S. 423–424).
• Position: Die Meldung gehört direkt zum Feld, nicht nur oben ans Formular, wo das Feld nicht mehr sichtbar ist. Oben höchstens eine Zusammenfassung mit Sprungmarken (S. 425).
• Gestaltung: Feld rot umranden, Text rot, eventuell ein Warnsymbol; korrekte Felder mit grünem Häkchen.
• Formulierung: sagen, ob etwas fehlt oder im falschen Format ist, und wie es richtig aussieht; konkrete Vorschläge (freie Benutzernamen); in der Sprache des Nutzers; keine technischen Codes, keine Vorwürfe, nicht von „Fehler“ sprechen.
• Nie bereits eingegebene Daten löschen (S. 414).

Abschicken

• Primärer Button links, bündig zu den Feldern, klar beschriftet („Anfrage absenden“, „Kostenpflichtig bestellen“ statt „OK“). Abbrechen und Zurücksetzen verwirren eher; wenn nötig rechts daneben und schwächer (S. 412).
• Fortschrittsanzeige bei mehrseitigen Formularen oben (S. 413).

Verwandt

• Angular-Formular – technische Umsetzung mit Validierung
• UI-Richtlinien – Buttons, Checkboxen, Radiobuttons
• Usability – Grundsatz „fehlertolerant“
• Usability-Review – Heuristiken 5 und 9 zu Fehlern