Formularvalildierung
Was macht eine gute Website aus? Da gehören sicherlich viele Punkte dazu, aber eine sehr gute Website unterscheidet sich vom guten Durchschnitt oft in den kleinen Details, durch die sich eine Website bei der Bedienung gut “anfühlt”. Dazu gehört auch eine exzellente Formularvalidierung. Aber welche Unterschiede und Qualitätsfaktoren gibt es bei den Datenüberprüfungen?
Wann sollen die Daten überprüft werden?
Am Besten und meiner Meinung nach nutzerfreundlichsten ist eine Überprüfung direkt bei der Eingabe des Users. Also eine Inline Form Validation. Zu diesem Zeitpunkt konzentriert sich der Benutzer auf den Inhalt des Feldes. Genau zu diesem Zeitpunkt sollte man auf Fehler bei der Eingabe aufmerksam gemacht werden. Wird der User erst später auf unkorrekte Eingaben hingewiesen muss dieser im schlimmsten Fall erst wieder zum entsprechenden Feld scrollen und sich wieder mit den nötigen Daten beschäftigen. Daher sollte die primäre Validierung der Daten direkt nach der Eingabe erfolgen. Um auch bei deaktiviertem Javascript korrekte Eingaben zu erhalten muss eine sekundäre Überprüfung serverseitig geschehen.
Achtung: Bei Fehlern unbedingt sicherstellen, dass die Eingaben des Benutzers erhalten bleiben.
Zu ähnlichen Ergebnissen kommt auch Luke Wroblewski in seiner Testreihe. In diesen Tests wurde eine Steigerung der Conversionrate und der benötigten Zeit um ein Formular erfolgreich abzusenden belegt.
Bei meinen Recherchen zu diesem Beitrag wurde mir wieder einmal vor Augen geführt, dass diese Methode der Formularüberprüfung auch auf vielen großen Websites nicht eingesetzt wird. Das seltsame hierbei ist, dass viele Websites von Firmen deren Umsatz bzw. Geschäftsmodell sehr stark an den Formularen auf der Website hängen. Doch unverständlicher Weise scheinen genau diese Formulare stiefmütterlich behandelt zu werden. So war Fehlermeldungen erst nach dem Absenden des Buttons sichtbar und dann noch dazu optisch nicht hervorgehoben, die Felder mit fehlerhaften Eingaben wurden nicht gekennzeichnet und in einigen Fällen gingen sogar die Eingaben des vorigen Versuchs verloren. Wenn man sich jetzt überlegt, dass beispielsweise jeder zwanzigste Besucher das Formular nicht erfolgreich absendet, kann man sich leicht vorstellen, dass sich kleine Optimierungen sehr schnell bezahlt machen können.
Die Kür
Mit einer Überprüfung in nahezu Echtzeit bei der Eingabe hat man schon viel erreicht. Aber es geht noch besser. Warum sollte man sich damit begnügen die Fehler möglichst rasch anzuzeigen? Viel schöner wäre es doch eine große Zahl an Fehlern schon im Vorfeld zu vermeiden. Dazu empfiehlt es sich bei Feldern die nicht ganz eindeutig sind einen kurzen Hilfetext einzublenden. Das kann beispielsweise in ähnlicher Form wie die Fehelrmeldungen gesche, farblich halt etwas dezenter. Wichtig ist hierbei allerdings, dass man nicht zuviele Hilfetexte anbietet. Daher empfehle ich entsprechende Hilfen erst darzustellen wenn das Feld den focus erhält. So wird beim Click in das Textfeld eine erläuternde Info angezeigt. Nachdem der Benutzer zum nächsten Feld gesprungen ist wird der Hinweis wieder ausgeblendet.
Als i-Tüpfelchen bietet es sich dann noch an korrekt befüllte Felder mit einem Symbol zu kennzeichnen. Ein gutes Beispiel für diese Punkte bietet Yahoo (siehe Showcase).
Scripts zur Inline Form Validation
Um das Ganze umzusetzen gibt es einige Javascript Bibliotheken die einem das Leben erleichtern.
Ketchup Plugin – jQuery Formularvalidierung
Position Absolute Form Validation – jQuery Formvalidierung mit optionaler AJAX Unterstützung
Leigeber Form Validation – Javascript Formularvalidierung beim Submit
bassistance.de Validation – jQuery Formularvalidierung
jQuery Live Form Validation
LiveValidation – Formularvalidierung in 2 Versionen: Prototype und Standalone
Mootools Form Validation – Formularvalidierung mit Mootools
jVal Form Field Validation
Showcase
Schone Beispiele zur Gestaltung von Formularen und den entsprechenden Fehlerhinweisen.
Formularvalidierung Yahoo
Formularvalidierung bei Twitter
Formvalidation omgpop.com
Formularvalidierung brightkite.com
Formularvalildierung: Position Absolute Demo
jVal Formolarüberprüfung Demo
Ähnnliche Beiträge:
Christoph
25. Mai 2010 at 19:24
Wir benützen schon seit ein paar Projekten nur position absolute, – perfekt zu stylen, super Handhabung für den User und außerdem haben wirs in eine PHP-Klasse gekapselt, die automatisch die passenden AJAX-Responses für Calls im CMS bereitstellt. Einfacher gehts für die nachhaltige Formularerstellung kaum. Mir gefällt ausserdem der Syntax für die Parameter-Übergae gut, da er leicht zu parsen ist.
netz-informant.de
25. Januar 2011 at 09:12
Ich persönlich finde ja Ajax echt gut. Aber ich nutze es leider nicht so gerne im Internet. Ist es bei einem User deaktiviert, kommt das Choas. Es gibt eben Leute die es nicht aktiviert haben. Ich mußte dies immer wieder merken, wenn ich mal für Kunden eine Seite aufgesetzt habe.