Formular Design
Moderne Formulargestaltung

Formulare – Wichtigste Schnittstelle zum USer

Formular Design

In den vergangenen zehn Jahren haben sich Webformulare im Vergleich zur Navigation und zur übrigen Optik von Websites nur wenig verändert. Lange Zeit lag das daran, dass die Optik von Formularelementen komplett vom Browser vorgegeben war. So sah und sieht man in diversen Werbekampagnen Schaltflächen mit Mac-typischen Rundungen, während die meisten Nutzer sich mit eckiger Kost begnügen müssen. Heute gibt es mit CSS und natürlich den schon lange verwendbaren Schaltflächen mit Grafik wesentlich mehr Möglichkeiten, Formularelemente ansprechend zu formatieren. Aber gibt es diese Möglichkeiten wirklich erst seit kurzem? Ein paar Jahre ist das in den diversen Browsern eigentlich schon möglich. Dennoch schreckten viele Webdesigner lange davor zurück, weil die Nutzer an das Standardaussehen der Formularelemente gewöhnt sind. Und bekanntlich wirkt sich Gewöhnung ja ausgesprochen positiv auf die Usability aus.

Im Zuge von Web 2.0 und moderneren Web-Anwendungen ist nun erstmals der Trend zu erkennen, Formularelemente anders zu formatieren. Aber nicht nur bei der Optik gibt es Veränderungen. Auch in Sachen Eingabe und Fehlerbenachrichtigung macht sich der Trend zu mehr Javascript bemerkbar. Und die Usability-Diskussionen erhalten mit neuen Gedankenanstößen zur Platzierung und Gruppierung von Formularelementen und ihren Beschriftungen neue Nahrung.

Formularelemente

Sieht man sich die CSS-Spezifikation an, finden sich dort einige Formatierungen, die potenziell auch auf Formularelemente anwendbar sein sollten. In der Realität ist das leider nur teilweise so. Beispielsweise lassen sich Rahmen für Textfelder, Auswahllisten und Textareas gut anpassen, bei Kontrollkästchen und Radiobuttons scheitert die Anpassung aber in einigen Browsern weitgehend. Bevor man also mit der optischen Gestaltung loslegt, ist es wichtig zu wissen, welche Möglichkeiten überhaupt vorhanden sind. Eine gute Übersicht liefert die Seite 456 Bereastreet. Hier sind diverse Tests mit Formularelementen versammelt, die unterschiedliche CSS-Formatierungen in verschiedenen Browsern zeigen.

Dabei zeigt sich, dass Textfelder recht gut formatierbar sind. Sie lassen sich über die diversen border-Befehle mit Rahmen versehen, und auch der Wechsel der Hintergrundfarbe ist mit background-color möglich. Schaltflächen sprechen ebenfalls ganz gut auf CSS an. Allerdings ist die Wirkungsweise vor allem beim Rahmen und der Form sehr unterschiedlich. Wer hier ein absolut individuelles Design haben möchte, muss einen Schaltflächen-Button verwenden().

Ein Problem in der Gestaltung macht das Formularelement für den Datei-Upload (). Es akzeptiert in den meisten Browsern nur sehr wenig Gestaltung. Für das Textfeld können Sie meist einen Hintergrund angeben, und die Größe lässt sich ändern. Im Internet Explorer wird dagegen auch die Schaltfläche mit verändert, wenn Sie beispielsweise den Rahmen mit 3D-Optik versehen.

Ähnlich problematisch sind Kontrollkästchen und Radiobuttons. Hier ist allerdings auch aus Usability-Sicht fraglich, wie viel Anpassung ein Nutzer überhaupt verkraften würde. Wer beispielsweise bei Radiobuttons mehr Optik möchte, kann wie bei der Registrierung von Traineo auf der zweiten Seite Grafikicons für die Optionen wählen. Dies erfordert allerdings Javascript, um die jeweils richtige Option zu setzen und an den Server zu übermitteln.

Ein Problem ist bei den Formularelementen das Selektieren. Der Tag-Selektor input eignet sich nur sehr bedingt, da er sowohl für Schaltflächen als auch für Textfelder, Radiobuttons und Kontrollkästchen gilt. Deswegen wird in Formularen recht oft mit Klassen gearbeitet. Dabei lohnt es sich unter Umständen, zentrale Formatierungen und Breitenangaben zu trennen.

Platzierung

Formular Design

Bei der Platzierung von Formularelementen muss vor allem ein Kompromiss zwischen Usability und Optik gefunden werden. Dies beginnt bei der Textfeldlänge. Rein optisch bieten sich einheitliche Längen an. Diese sind prinzipiell auch aus Usability-Gründen sinnvoll, da das Formular so nicht unruhig wirkt. Allerdings wäre es aus Usability-Sicht auch denkbar, bestimmte Informationen mit weniger Raum ? etwa eine Postleitzahl ? in einem kürzeren Feld darzustellen. Als Kompromiss können Sie beispielsweise Felder mit 30 Prozent Breite und Felder mit 60 Prozent Breite anlegen, in denen dann Postleitzahl und Stadt abgefragt werden.

Für andere Elemente gilt ebenfalls, dass sie sich gut in Bild und Ordnung einfügen müssen. Auswahllisten mit select-Tag sollten beispielsweise ähnlich groß sein wie die Textfelder. Die exakt selbe Größe ist hier schwer zu erreichen. Je nach Browser gibt es unterschiedliche Abmessungen. Eine Auswahlliste ist bei gleicher CSS-Breitenangabe etwas weniger breit.

Ein drittes Thema neben der Länge der Felder und der Spaltenzahl ist die Position der Beschriftung. HTML-technisch gilt natürlich die grundlegende Empfehlung, für Beschriftungen immer das label-Tag zu verwenden. Auch aus CSS-Sicht ist das sinnvoll, denn so lassen sich die Beschriftungen einfach und ohne separate Klasse formatieren. Die Ausrichtung der label-Tags zu den Formularelementen kann dann beispielsweise mit float oder im normalen HTML-Fluss erfolgen. Die Frage ist nur, welche Position optimal ist. Luke Wroblewski hat hierzu einige Überlegungen angestellt. Er analysiert Vor- und Nachteile der diversen Anordnungsalternativen. Eine rein vertikale Anordnung mit der Beschriftung jeweils über den Formularelementen sieht er vor allem in Hinblick auf die Zuordnung zwischen Element und Beschriftung als sehr positiv an. Allerdings sollte man hier betonen, dass die Abstände zwischen den einzelnen Beschriftungs-Formularelement-Einheiten groß genug sein müssen, damit der Nutzer klare Zuordnungen erkennen kann.

Bei linksbündig auf der linken Seite neben dem Formularelement ausgerichteten Beschriftungen fallen vor allem unterschiedliche Längen der Beschriftungen negativ ins Gewicht. Dadurch wird die Zuordnung zum Formularelement erschwert. Die rechtsbündige Ausrichtung auf der linken Seite hat dagegen den Nachteil, dass die Beschriftungen unterschiedlich weit eingerückt sind. Das erschwert den Lesefluss und ist deswegen nicht zu empfehlen. Außerdem weiß diese Lösung auch optisch nicht zu überzeugen.

Zu guter Letzt gibt es natürlich noch Beschriftungen auf der rechten Seite der Formularelemente. Diese Variante kann aus gestalterischer Sicht bei kürzeren Formularen durchaus spannend sein. Sie entspricht allerdings nicht den gängigen Gepflogenheiten, da man im Lesefluss von rechts nach links springen muss, und ist deswegen auch nicht optimal.

Luke Wroblewskis Thesen wurden in der Folge auch wissenschaftlich untersucht. Interessant sind die Ergebnisse, die hier mittels Eyetracking erreicht werden konnten. Beim Eyetracking werden die Augenbewegungen der Versuchspersonen beobachtet und Blicke sowie Blickreihenfolge optisch dargestellt. So lässt sich gut nachvollziehen, dass die vertikale Anordnung aus Sicht der Lese-Effizienz am besten funktioniert, dass die anderen Alternativen aber ebenfalls durchaus anwendbar sind.

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.