Gestaltung von Formularen anhand eines Grundrasters

Es ist wichtig, nicht nur beim groben Layout (sprich Kopf, Inhalt, Marginalie), sondern auch bei Details, wie z.B. Formularen das »Grid« im Auge zu behalten, damit ein Grundraster-basiertes Design auch wirklich „rund“ wird.

Wir (unser Designer Uli und ich) haben bei der Gestaltung eines aktuellen Projektes besonders bei Formularen Wert darauf gelegt, dass diese dem Grundraster gerecht werden. Ein Formular ist in jenem Projekt ein sehr oft auftauchendes Element. Es folgen die grundlegende Theorie über Gestaltungsraster und die Ergebnisse für ein einfaches Eingabefeld und eine Datumauswahl.

Text- und Blockelemente in einem Raster

Bilder und andere Blockelemente (nicht verwechseln mit Block-Level-Elementen aus HTML) werden in Gestaltungsrastern anders behandelt als Text. Texte können möglicherweise in einem solchen Blockelement auftauchen und müssen daher etwas eingerückt werden. Auch Texte, die sich nicht in einem solchen Blockelement befinden sollten eingerückt werden, damit alle Texte, die an einer Raster-Einheit ausgerichtet wurden, sich auf einer Linie befinden. In der folgenden Grafik veranschauliche ich das einmal:

Ein hellroter Streifen ist eine Einheit (engl. Unit). Der Raum zwischen den Einheiten wird Steg (engl. Gutter) genannt. Das Blockelement beginnt in der Grafik korrekt an der Einheit. Der Text über dem blauen Blockelement fängt links genau da an, wo auch der weiße Text in dem Blockelement beginnt. Beide sind also etwas eingerückt worden. Der etwas dunklere rote Streifen verdeutlicht das. Es hat sich als praktisch erwiesen, Text um die Hälfte des Maßes eines Steges einzurücken.

Der Urzustand

Die Gestaltung des Urzustandes war recht einfach. Wir haben die eigentlichen Eingabeelemente nicht verziert oder einfärbt, damit sie immer schnell als solche erkannt werden können. Eine ausführlichere Begründung für diese Entscheidung kann man im Artikel »Vorsicht bei CSS-Gestaltung von Formularen« nachlesen. Das Label steht in einer eigenen Zeile. Ein unterstützender Hilfetext steht - wenn unbedingt notwendig - unter dem Eingabeelement. Schlicht und leicht verständlich.

Man beachte, dass die Eingabeelemente bis ganz ans Ende der letzten Einheit gehen. Erst einmal nichts Besonderes ...

Fehler nach Absenden

Nachdem das Formular abgesendet wurde und Felder nicht wie gefordert ausgefüllt worden sind, muss der Benutzer auf die/den Fehler aufmerksam gemacht werden. Hierzu haben wir einen auffälligen Hinweis über dem Formular vorgesehen. Das Formular enthält wieder die Daten, die vor dem Absenden eingegeben wurden, damit der Benutzer korrekte Eingaben nicht wiederholen muss. Die gesamte obere Fehlermeldung ist so breit wie ein Eingebefeld.

In den folgenden Grafiken sieht man die Hervorhebung der falsch oder nicht ausgefüllten Eingabeelemente. Das Label und die Fehlerbeschreibung sind rot. Das Eingabeelement selbst ist dick (2px) und rot umrandet, hat aber auch noch einen kleinen Abstand (1px) zwischen sich und Rand.

Im Urzustand sind die Eingabeelemente noch ganz breit gewesen. Nun sind sie aber etwas schmaler. Erst mit der Umrandung füllen sie wieder die ganzen Einheiten des Rasters aus:

Feedback einer Direkt-Validierung

Eine optionale Direkt-Validierung (mittels AJAX) kann den Benutzer Zeit und dem Websitebetreiber Traffic ersparen. Sie hat daher auch bei uns eine Verwendung gefunden. Wir haben uns gedacht, dass ein einfacher Haken als Meldung für „Alles in Ordnung“ reicht. Mehr Feedback würde nur nerven. Bei negativem Feedback der Validierung ist besteht aber Erklärungsbedarf, d.h. eine kurze Fehlermeldung ist nötig. So haben wir es letztendlich gelöst:

Wie in der folgenden Rasteransicht zu sehen ist, geht eine solche Meldung in diesem Fall bis knapp vor das Einheitenende. Wäre die Meldung länger, würde eine neue Zeile beginnen.

Eine Kombination aus einer normalen Fehlermeldung und der Rückmeldung der Direkt-Validierung wäre bei dieser Gestaltung möglich. Praktisch würde Sie auftauchen, wenn ein Formular trotz Meldung der Direkt-Meldung abgeschickt wurde und dass Feld ein weiteres Mal auf eine Verbesserung wartet.

Fazit

Die Gestaltung von Formularen ist manchmal doch umfangreicher als zunächst vermutet. Wenn man jedoch bei der Gestaltungsphase eines Grundraster-basierten Layouts auf solche Details achtet, erhält man ein klares und strukturiertes Ergebnis.