Formular Design
Moderne Formulargestaltung

Formulare sind die Schnittstelle zwischen Nutzer und Web-Anwendung. Dieser Artikel gibt Tipps zur Gestaltung und stellt neue Design-Ideen vor.

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.