Planung
- Wichtiger, oft übergangener Punkt
- Ziel des Formulars feststellen
- Wie werden die Daten im Unternehmen verarbeitet?
- Zugriff und Prozess des Formulars
Entwurf
- Wireframing, Grid
- Anordnung der Elemente
- Farbe und Typographie
- Beschriftung der Felder
- Anleitungen, Fehlermeldungen und Hinweistexte
Erscheinungsbild
- Formulare sind manchmal tricky mit CSS zu stylen (Radio, Checkboxen, etc.) Nichts destso trotz: Es geht!
- Bestimmte browsereigene Styles lassen sich überschreiben (z.B.
bordereinertextarea) andere aber nicht (@select@s,input type=checkboxoderinput type=radio) - Ein „Problem“: es gibt viele verschiedene Eingabeelemente, die alle sinnvoll in das Design passen sollen.
- Tiefe durch Verläufe in Feldern und viele Gestaltungsmöglichkeiten (z.B. Icons in Feldern)
Progressive Verbesserung (progressiv enhancement)
- Mit JavaScript (jQuery etc.) Funktionalität hinzufügen. Muss aber natürlich auch ohne funktioneren!
- Mit JavaScript lassen die Eingabeelemente stylen, die eigentlich nicht per CSS stylebar sind. Selects, Radiobuttons, Checkboxen.
- Einbindung von optionalen/sich ausschließenden Abschnitten.
- Datums- oder Farbwähler
- Passwortssicherheitsanzeige (password strength indicator)
- Autovervollständigung (autocomplete) für Suchfelder z.B.
- Browserseitige Validierung (on-the-fly)
Tests (Usability tests)
- Tests mit Benutzern (5 reichen meist) bringt viel!
- Am besten so früh wie möglich testen (Planungsphase/Entwurfsphase). Je früher Probleme entdeckt werden destso billiger ist es, sie zu beheben.
Lesetipps
- Luke Wroblewski: Web Form Design, Rosenfeld Media 2008 (Webseite, Amazon – Buch als PDF und/oder Paperback erhältlich)
- Caroline Jarrett, Gerry Gaffney: Forms that work, Morgan Kaufmann 2008 (Webseite, Bezugsquellen, Amazon)
- Derek Featherstone, Tim Connell, Jina Bolton: Fancy Form Design, Sitepoint 2009 (Webseite –Â Buch als PDF und/oder Paperback erhältlich)
Gewinnspiel
Wir verlosen zwei Exemplare des Buchs Forms that work! (Einmal im Originalzustand und einmal verbessert) Alles was Du tun musst, um an der Verlosung teilzunehmen, ist uns hier ein Kommentar zu hinterlassen, der ein Link zu einer guten Quelle im Netz enthält. Sei es ein Artikel, der eines der Themen genauer beleuchtet oder ein Formular, das Deiner Meinung nach gut gemacht ist: alles ist willkommen!
Bitte beachte: Es kann sein, dass unser Anti-Spam-System dein Kommentar fälschlicherweise als Spam klassifiziert, wenn er mehrere Links enthält. Wir schalten Dein Kommentar dann manuell frei, er wird also nicht direkt erscheinen.
Der Rechtsweg ist ausgeschlossen. Technikwürzemoderatoren und ihre Angehörigen können leider nicht an der Verlosung teilnehmen.
