Formulare befüllen und Elemente anordnen

Hier finden sich wichtige Regeln und Beispiele zum Befüllen von Formularen.

Formulare in Content Management Systemen können eventuell individuell befüllt werden und die Komponenten vom Redakteur beliebig ausgewählt. Hier muss auf eine logische Reihenfolge geachtet werden. Ein Upload-Feld zwischen Name und Telefonnummer zu platzieren ist z.B. nicht sinnvoll, da eine solche Anordnung von persönlichen Informationen zu einem anderen Themenbereich und zurück springt. Zusammengehörige Formularfelder sollten gruppiert werden.

Alle Elemente eines Formulars sollten ein klares kurzes Label (nicht mehr als 3 Worte) bekommen. Sie sollten gut sichtbar und in einfacher Sprache über dem Eingabefeld stehen und nicht als Satz mit Verb formuliert sein, sondern mit einem Substantiv (nicht „Bitte Ort eingeben“, sondern „Ort“). Eine beliebte Technik ist der Verzicht auf Labels, die stattdessen mit Placeholdern im Eingabefeld ersetzt werden. Dies macht das gesamte Formular zwar kompakter, allerdings leidet die Bedienbarkeit stark darunter. Beim Fokussieren des Feldes verschwindet der Placeholder und man hat keinen Hinweis mehr darauf, was gefordert ist. Ein Screenreader hat mit solchen Formularfeldern starke Probleme, da nicht erkennbar ist, was für ein Feld gerade ausgewählt ist. Bei Feldern, bei denen mehr Hilfe erforderlich ist, sollte ein kurzer, prägnanter Info-Text unter dem Feld stehen. Dies muss vom Entwickler aber schon so vorgesehen sein, damit der Infotext mit dem jeweiligen Feld verknüpft ist.

Gute Fehlermeldungen sind ebenfalls wichtig, damit die Nutzer die ausreichendes und konstruktives Feedback bekommen, was schief geangen ist und wo evtl. noch Information fehlt. Genauso ist es wichtig, eine Rückmeldung zu geben, wenn das Formular erfolgreich abgeschickt worden ist.

Wenn das Formular fertig ist, sollte es getestet werden: mit der Maus und mit der Tab-Taste, mit einem Screenreader und in einer mobilen Umgebung. Desweiteren sollte man sie Fehlermeldungen ausgeben lassen und überprüfen, ob sie weiterhelfen und ob auch Screenreader-Nutzer verstehen werden, wo der Fehler im Formular ist und wie er behoben werden kann.

Mehr Infos finden sich in den anderen Blog-Artikeln zu Formularen in den Bereichen Formulare planen, Formulare designen und Formulare entwickeln.

nach oben