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.