Vorsicht bei CSS-Gestaltung von Formularen

Die Betriebssysteme und ihre Skins/Themes

Die drei großen Betriebssysteme Windows, Mac OS und Linux sind die Bekanntesten mit grafischer Benutzeroberfläche. Dass heisst, sie unterstützen Informationen und Inhalte mit visuellen Hilfsmitteln, wie z.B. Fenster, Dialoge, Symbole/Icons und Leisten/Docks.

Mit unter den visuellen Hilfmitteln sind auch gestaltete interaktive Kommunikationsmittel - Formulare. Sie bieten dem Nutzer die Möglichkeit, Eingaben und Einstellungen vorzunehmen.

Interfaces und Benutzererfahrungen

Grundsätzlich geht man davon aus, dass ein Benutzer eine Benutzeroberfläche verwendet. Er gewöhnt sich an das Betriebssystem und dessen Look & Feel. Heutzutage bieten die meisten Betriebssysteme Möglichkeiten zur Anpassung der visuellen Gestaltung der Oberfläche an - die Skins oder Themes.

Bei computer-unerfahrenen Menschen ist eine Abweichung des Skins/Themes schon eine schwerwiegende Komplikation. Bei der Umstellung auf ein anderes Betriebssystem (OS) kommen noch mehr Probleme auf. Bestes Beispiel: Setzt man einen einen Windows-Benutzer vor einem Apple-Rechner mit dem Betriebssystem Mac OS X, ist dieser anfangs total verwirrt und sucht vergebens am unteren Bildschirmrand die Taskleiste mit dem Start-Button. Kurzum: Die Interface-Philosophien von Apple und Microsoft unterscheiden sich sehr, bei Linux-Distributionen mit Gnome oder KDE ist es nicht anders.

Formulare im Internet

Im Grunde sind Formulare im Internet nichts anderes als Formulare vom Betriebssystem oder installierten Anwendungen. Sie bieten dem Benutzer die Möglichkeit, mit der Website zu interagieren. Jedoch sollten Formulare auf Websites als solche erkannt werden. Genau da liegt das Problem. Der Einsatz von CSS bei Eingabefeldern (input), Textbereichen (textarea) und dem Rest der Formularelemente verändert sozusagen die grafische Oberfläche des Benutzers ohne dessen Zustimmung. Der Benutzer hat sich im Normalfall an die Gestaltung der Formulare, die durch den aktuellen Skin/Theme (ob Standard oder abstrakt) bestimmt wird, gewöhnt.

Warum sollte man ihn dazu zwingen sich für eine Interaktion mit einer Website umzustellen? Eigentlich unbegründet, jedoch sprechen für einige Gründe dafür und es wird in etwa soargumentiert:

• Ästhetik

  Ein Argument für die Gestaltung von Formularen wäre die Ästhetik. Es gibt unendlich viele Möglichkeiten, ein Formular einfach schön zu gestalten und so von der Masse hervorzuheben.

• Gestaltungslinie

  Man kann sich einfach nicht vorstellen, dass jedes Aussehen eines Formulars in die Gestaltung vom Rest der Website passt. Man möchte eine möglichst gerade Gestaltungslinie auf der gesamten Website umsetzen.

• CSS im Allgemeinen

  CSS als solches gibt dem Webdesigner die Möglichkeit jedes Element beliebig zu positionieren, zu skalieren und einzufärben. Es gibt nicht wirklich Gründe sich dieser Vielfalt von Möglichkeiten zu versperren.

Was ist erlaubt?

In der Einleitung dieses Artikels habe ich angedeutet, dass minimale Änderungen - meiner Meinung nach - erlaubt sind. Einige Optionen der Gestaltung können getrost genutzt werden, ohne dabei die Usability oder Accessibility einzuschränken. Vielleicht sind sie auch ein Pluspunkt für diese Eigenschaften einer Website. Nun, die folgenden Optionen entsprechen meiner Vorstellung für Optionen der CSS-Gestaltung von Formularen:

• Abstände: margin und padding

  CRAP greift hier wohl als Stichwort. Das label eines Eingabefeldes (input) oder Textbereiches (textarea) sollte nahe bei ihm stehen, verschiedene label - input Paare sollten etwas von einander getrennt werden. Dabei können margin und padding am besten eingesetzt werden.

  Durch gut gewählte Werte können auch label und input/textarea nebeneinander stehen. So kann eine bessere Übersichtlichkeit und deutlichere Zugehörigkeit erreicht werden.

• Maße: Höhe und Breite

  Für bessere Lesbarkeit und leichtere Fokussierung der Eingabeelemente können eine optimale Höhe und Breite der Elemente angegeben werden.

Verbesserte Übersichtlichkeit durch Einsatz von CSS

Dazu können beitragen: zusätzliche Elemente, wie fieldset und legend. fieldset kann dabei helfen, ein Formular als Einheit darzustellen. Ein Rahmen (border) oder ein besonderer Hintergrund (background) lassen das Formular als Ganzes zusammenfassen. legend kann den Benutzer aufklären, wofür das Formular da ist. Es kann wie eine Art Überschrift gestaltet werden.

Bei umfangreichen Formularen kann die Verwendung von inhaltlichen Trennungen durch das Element hr in Betracht gezogen werden. Diese Trennung kann als leichte Linie oder als großer Abstand angezeigt werden.

Fazit

Dieser Artikel spiegelt nur meine Meinung zu diesem Thema wieder und kann also nicht als Richtlinie betrachtet werden. Redlounge (der jetzige Look dieser Website) erfüllt noch nicht meine Ratschläge, ich weiß. Trotzdem rate ich zum vorsichtigen und sparsamen Einsatz von CSS, wenn es um echte Formular-Elemente geht. Dazu gehören:

• Diverse Eingabefelder: input (checkbox, text, radio, submit oder password)
• Textbereiche: textarea

Nicht wirkliche Bestandteile von Formularen, also Elemente die getrost mit CSS-Regeln versehen werden können wären zum Beispiel:

• Bezeichnungen: label oder legend
• Zusammenfassungen bzw. inhaltliche Trennungen: fieldset, div, hr