Gruppierung

Formular Design

Sammelt ein Formular Daten zu verschiedenen Theme
ngebieten, sollten die einzelnen Themen logisch und optisch gruppiert werden. Aus technischer Sicht bietet sich zur Gruppierung das fieldset-Tag an. Optisch kann die Gruppierung beispielsweise mit farbigen Hintergrundflächen oder Rahmen vorgenommen werden. Wichtig ist, dass Sie die jeweils logischen Einheiten finden und in die richtige Reihenfolge bringen. Hier unterscheidet sich das Web ein wenig vom klassischen Formular. Im Web gibt man beispielsweise zuerst seine Adressdaten an, bevor dann der eigentliche Text folgt.

Bei sehr komplexen Formularen stellt sich die Frage, ob sich die Inhalte in Einzelschritte aufteilen lassen. Dies geschieht beispielsweise beim Bestellprozess in einem Shop oder bei einer umfangreichen Registrierung. Hier gilt prinzipiell auch eine bereits gewohnte Reihenfolge. Bei Shops macht die Registrierung meist den Anfang, dann folgen Zahlungsweise und Liefermethode. Bei der Registrierung stehen die entscheidenden Daten am Anfang. Weniger wichtige Informationen werden im Anschluss abgefragt.

Sollte Ihr Formular recht umfangreich sein oder sollten Sie mit verschiedenen Farben und breiten Maßen arbeiten, bietet es sich unter Umständen an, zusätzlich noch eine Druckversion des Formulars anzubieten. Diese sollte dann in Schwarz-Weiß gehalten sein und natürlich problemlos auf die Breite des Druckformats passen.

Funktionalität

Die Validierung von Formularinhalten ist schon länger üblich. Rein technisch unterscheidet man hier zwischen serverseitiger Validierung, zum Beispiel mit PHP, und Validierung auf Client-Seite mit Javascript. Die Validierung ersetzt natürlich nicht das serverseitige Filtern aller Benutzereingaben, um Sicherheitslücken zu vermeiden. Sie ist als Dienst am Nutzer zu verstehen. Sprich: Den Donald Duck aus Entenhausen wird man kaum verhindern, wohl aber kann man den Nutzer davor bewahren, einen Tippfehler beim Passwort zu machen oder seine E-Mail-Adresse falsch anzugeben.

Bei der Live-Validierung hat sich aus optischer Sicht rote Farbe und ein erklärender Text bewährt. Wie man beispielsweise bei eventful.com/register sieht, lassen sich die Hinweise sehr nützlich gestalten. Allerdings sollten die Nutzer mit deaktiviertem Javascript nicht vergessen werden. Für sie sollte die Validierung noch einmal serverseitig erfolgen, und selbstverständlich muss auch ein Versenden des Formulars ohne Javascript gewährleistet werden. Das heißt vor allem, dass der Versand per submit()-Methode nicht die einzige Alternative sein darf, sondern dass auch eine Versende-Schaltfläche vorhanden sein muss.

Besonders wichtig ist eine saubere Definition von Pflichtfeldern. Hier hat sich das Sternchen als Symbol eingebürgert, sollte aber auch noch per Legende erklärt werden. Auch eine gesonderte Hervorhebung ist denkbar. Und selbstverständlich sollte der Nutzer nach dem Versand des Formulars eine Bestätigung erhalten, damit er weiß, dass die Daten erfolgreich verschickt wurden.

Fazit

Beobachtet man das Formulardesign im Verlauf der Jahre, so hat sich doch mehr getan, als man rein aus Sicht von HTML und CSS denken würde. Auf Details wird mehr Wert gelegt. Dies macht sich optisch bei Schriftgrößen und -farben und funktional bei der Validierung bemerkbar. Mit dem nötigen Grundwissen zu Positionierung und Layout kann man gute von schlechten Formularen unterscheiden und realisiert dann hoffentlich in Zukunft nur noch gute. Es bleibt die letzte Hürde, die nur ein Usability-Test ausräumen kann: Der Nutzer muss mit Ihren Formularen zurechtkommen.