Kathleen Linke

Einige gestalterische Aspekte hab ich bereits im ersten Teil erwähnt. Gestaltung und Technik sind halt doch nicht so einfach zu trennen wie ich es mir dachte.

Aber worauf sollte man aus gestalterischer Sicht sonst noch achten?

1. CSS – Formular ans Design anpassen
Bei der Gestaltung von Formularen ist man oft etwas begrenzt und es ist schwer das Formular optisch passend für seine Webseite zu gestalten. Dennoch gibt es mit CSS einige Möglichkeiten sein Formular anschaulich zu gestalten.
So ist es zum Beispiel von Vorteil das aktuelle Formularfeld hervorzuheben. Hier für sind lediglich ein paar Eigenschaften für die Elemente von Nöten.

2. Anordnung der Felder
Wie sollte man sein Formular am Besten aufbauen. Darüber scheiden sich glaub ich die Geister, einige meinen, dass die Beschreibung für das was man ins Feld eintragen soll drüber stehen soll (s. Beispiel).
Andere meinen hingegen wieder, man sollte die Beschreibung und das Eingabefeld nebeneinander setzen. Wenn ihr euch für diese Methode entscheidet, dann achtet bitte auf die Ausrichtung eurer Felder! Das man vor allem hier optische Linien einhält ist wichtig. (s. Beispiel)
Egal für was ihr euch entscheidet, wichtig ist meiner Meinung nach auch, dass Zusammengehörigkeit erkennbar ist. Soll heißen, wenn ihr die Labels untereinander anordnet, lass genug Platz dazwischen. Sonst kann es halt vorkommen, dass das Auge des Nutzer zu sehr irriert wird und er nicht weiß was er jetzt wohin schreiben soll.

3. Mit Tab-Taste navigieren
Für mich gibt es nichts besseres, als mich durch ein Formular mit der Tab-Taste zu navigieren. Hierfür sollte man vor allem auf seine Anordnung der Eingabefelder und deren logischen Zusammenhang achten.

4. Pflichtfelder kennzeichnen
Ein wichtiger Punkt in der Gestaltung ist auch oft, wie kennzeichne ich was Pflichtfelder sind und was kann bzw. muss aber nicht ausgefüllt werden. Ob ihr dies mit Sternchen macht oder anderen Symbolen ist eigentlich egal, es sollte nur deutlich werden was ein Pflichtfeld ist und somit ausgefüllt werden muss.

An dieser Stelle sei noch erwähnt, dass man auf die Begrenzung der Zeichen für die Eingabe achten sollten. Denn Postleitzahlen haben in Deutschland immer nur 5 Zeichen – nicht mehr und nicht weniger!

5. Fehlermeldungen kennzeichnen
Fehlermeldungen an sich sind schon ziemlich ärgerlich, von daher ist es gut, wenn fehlenden oder falschen Angaben direkt kennzeichnet werden. Ein ganz gutes Beispiel hierfür liefert die Website web-spirit.de.

Quellen:
http://www.paul-kroening.de/tutorials-css/formulare-mit-css-gestalten-teil-1
http://www.webmaster-crashkurs.de/formulare-ueber-css-gestalten.htm
http://www.web-spirit.de/webdesign-tutorial/8/HTML-Formulare-effektiv-gestalten
http://www.akademie.de/programmierung-administration/html-und-css/tipps/css-stylesheet-praxis/html-formulare-gestalten-per-css.html

Gern hätte ich euch an dieser Stelle einmal mein Anmeldeformular von der Zwischenprüfung gezeigt. Allerdings darf ich diese noch nicht veröffentlichen, da der ein oder andere im Okt./Nov. seine Zwischenprüfung macht. Ich hoffe sehr, das ich mein Ergebnis der Zwischenprüfung in den nächsten Wochen online stellen kann.

Wenn euch noch wichtige Sachen zum Thema Formulare einfallen, dann ruhig her damit.

P.S. Ich übernehme keine Garantie auf Vollständigkeit und Richtigkeit des von mir geschriebenen Beitrages. Hierbei handelt es sich um eine Art Zusammenfassung in Hinsicht auf meine Abschlussprüfung.

Ähnliche Beiträge:
Online-Formulare und deren Gestaltung… Teil 1
Layout-Frameworks… Was ist das eigentlich?
Zwischenprüfung 2009 – Druckmuseum Bremen
Neues Grafikportal online
Abschluss-Prüfung steht vor der Tür…