Mit heutigem Stand habe ich von meiner Arbeit her eine ganze Menge mit Web-Formularen zu tun gehabt. Um die Handhabe aber noch weiter zu verbessern möchte ich endlich mal ein paar grundlegende Prinzipien für mich begreifen. Wie entwirft bzw. designt man ein gutes Formular und wie kann man sie einfach und gründlich testen, um sowohl Sicherheit als auch eine gute Benutzererfahrung zu garantieren?
Das hier wird ein mehrteiliger Beitrag und folgt meinem Durchackern all der Artikel zu dem Thema. Zuerst geht es um das grundlegende Design eines Web-Formulars. Bevor die erste Zeile Code geschrieben wird müssen bereits Entscheidungen getroffen werden.
Ressourcen
Wie üblich habe ich hier einige für mich nützliche Artikel zusammen gesammelt. Ich freue mich über weitere Empfehlungen in den Kommentaren und werde die Liste auch gerne um deutsche Einträge ergänzen.
„Forms Testing: What It Is and How to Do It“ (von Rebecca Riserbato) gibt eine ausgezeichnete Übersicht über die verschiedenen Problematiken, um die man sich beim Thema Web-Formulare kümmern muss. Die meisten meiner Punkte sind von hier.
46 Form Design Best Practices (von Aytekin Tank) ist ein detaillierter Beitrag über Web-Design und wie man Formulare entwirft, die Benutzer gerne ausfüllen. Er enthält auch viele Verweise auf Psychologie und Statistik.
Ein guter Anfang bieten auch „7 Secrets for Designing Great Forms“ (von Carrie Cousins) um einen Überblick über die wichtigsten Aspekte zu bekommen, genauso wie „Form Design: 13 Empirically Backed Best Practices“ (von Alex Birkett).
Layout
Das Layout ist besonders für große Formulare wichtig. Felder müssen anhand ihres Inhaltes gruppiert werden (z.B. Adresse, Kontodaten), mit Überschriften, Trennern und dem Aufteilen auf mehrere Schritte bekommt der Benutzer das Formular in mundgerechten Happen gereicht. Wenn mehr als eine Seite genutzt wird, sollte immer eine irgendwie geartete Fortschrittsanzeige genutzt werden.
Wenn möglich sollte nur ein Feld pro Zeile angezeigt werden und Dropdowns kommen nur zum Einsatz, wenn sie wirklich nötig sind (lieber Radiobuttons verwenden).
Ich bitte darum, die oben verlinken Artikel zu lesen, für noch mehr Hinweise, Tipps und Tricks.
Farben
Wie es auch für die Webseite insgesamt gilt sollte ein Formular visuell ansprechend sein. Man kann sich lange mit Farbtheorie beschäftigen um herauszufinden, welche Farben besonders geeignet sind. Am besten läuft man mit dem Farbthema der Seite und beachtet weiterhin einige Details.
Keine hellen oder ungewöhnlichen Farben für Text und Bedienelemente verwenden. Das Stichwort hier ist Barrierefreiheit. Mit Seiten wie WhoCanUse.com kann der Kontrast zwischen Hintergrund und Textfarbe analysiert werden.
Wenn Fehler an Feldern angezeigt werden, sollte das nicht nur durch eine farbige Umrandung geschehen, sondern immer mit einem zusätzlichen Fehlertext.
Mobil zuerst
Bitte bitte achtet darauf, wie das Formular mobil aussehen wird. Das bedeutet die Nutzung von Responsive Design, aber auch das Testen auf echten Geräten um zu sehen, wieviel Platz die Tastatur einnimmt, oder ob Autovervollständigung und automatisches Ausfüllen so funktionieren, wie sie sollen.
Einige Browser und Werkzeuge können kleinere Bildschirmgrößen emulieren, aber ein echtes Gerät hält manchmal noch einige unerwartete Tücken bereit (ich spreche da aus Erfahrung).
Mobile Browser haben andere Standards (und Bugs) als die auf dem Desktop und immer daran denken, dass ein Telefon Landschafts- und Portrait-Modus kann.
Feld-Typen und Validatoren
Sogar HTML kann verschiedene Typen von Eingabefeldern unterscheiden. Es gibt z.B. Text, numeral oder eMail – und die sollten definitiv auch benutzt werden. Wieder geht es hier besonders um mobile Geräte, auf denen der Benutzer besser einen Nummernblock angezeigt bekommen sollte, wenn er seine Kartennummer eingeben muss (statt der normalen Tastatur).
Die Benennung von Feldern in HTML wird häufig übersehen. Neben der besseren Syntax sind Funktionen wie automatisches Ausfüllen davon abhängig, dass ein eMail-Feld auch mit „email“ benannt ist (über die id und/oder den Namen des Input-Tags). Wenn wir schon bei dem Thema sind; Label sollten so kurz und selbsterklärend wie möglich sein. Im Zweifelsfall sorgen Info-Icons mit einem Popup für die nötigen Zusatzinformationen.
Dann gibt es Platzhalter und vor-ausgefüllte Felder, die dem Nutzer das Ausfüllen erleichtern.
Alle Frameworks enthalten irgendeine Art von Validatoren für Formular-Felder. Vom überprüfen des korrekten Formats einer eMail-Adresse, über die korrekte Länge einer Nummer bis zur Information mehrerer Felder, die in Kombination eine besondere Voraussetzung erfüllen und so weiter. Trotzdem sollten Validatoren eher zurückhaltend verwendet werden; nur die wirklich notwendigen Felder sollten Pflichtfelder sein (das ist auch eine Frage von Datenschutz) und zu krasse Einschränkungen können auch unerwünschte Effekte haben (z.B. für ungewöhnliche Namen).
Wird ein komplizierter Validator angewandt, dann sollte der Benutzer darüber informiert werden. Das ist z.B. für das Setzen eines Passworts relevant, wenn die Regeln hierfür sonst eher verwirren, als für mehr Sicherheit sorgen.
Navigation
Wenn das Formular mehrere Felder umfasst, dann sollte es seine eigene Seite erhalten. Am besten mit einer kurzen Willkommen-Seite, welche das Formular vorstellt, worum es dabei geht und wie lange der Benutzer zum Ausfüllen voraussichtlich benötigt. Nach dem erfolgreichen Absenden des Formulars muss es noch eine entsprechende Benachrichtigung geben, per eMail und Erfolg-Seite.
Wenn Teile des Formulars optional sind sollten sie besser nur dann angezeigt werden, wenn sie auch relevant sind.
Weitere Design-Prinzipien
- Nutze leicht verständliche Sprache für Fragen und Fehlermeldungen.
- Beachte die Tabulator-Reihenfolge für Barrierefreiheit.
- …
Lasst mich wissen, wenn ich noch fundamentale Design-Grundlagen übersehen habe. Hier nochmal eine klare Empfehlung für die verlinkten Artikel – sie enthalten detaillierte Listen mit Tipps und Fallstricken, wenn es um das entwerfen von Web-Formularen geht.
Checkliste
- Der Farbkontrast zwischen Hintergrund und Text sollte hoch genug sein, um Barrierefreiheit zu ermöglichen (das betrifft Input-Felder und Label).
- Felder sind nach Themen gruppiert und bei Bedarf auf mehrere Seiten verteilt.
- Felder sind programmatisch korrekt mit id, name, label, Platzhalter, Info-Button und Tabulator-Reihenfolge versehen.
- Validatoren werden mit Hilfe von Feld-Typen hinzugefügt, nach dem Prinzip so viel wie nötig.
- Fehler werden am Feld und mit einer für den Benutzer eindeutigen Nachricht angezeigt.
- Das Formular wird mit Willkommen- und Erfolgs-Seite, sowie einer Fortschrittsanzeige eingerahmt.
- Responsive Desing ist wichtig, um das Formular mobil zugänglich zu machen.
- Abhängigkeiten zwischen Feldern (bezüglich Validierung und Sichtbarkeit) müssen eindeutig im Vorfeld definiert werden.