Optimierung von Webformularen mit Inline-Validierung

inline-validation a list apart

Quelle: http://www.alistapart.com/articles/ inline-validation-in-web-forms/

Die Fehlertoleranz bei der Dateneingabe (ganz gleich ob Checkout eines Online-Shops oder Antragstrecke einer Direktversicherung) ist einer der wichtigsten Faktoren bei der Erfolgsoptimierung von Webformularen. Interessante Lösungsansätze bietet hierbei die sog. Inline-Validierung, die in Echtzeit die Eingabe(n) überprüft und dem Nutzer direktes Feedback gibt.

Zu meiner Überraschung musste ich im Rahmen eines vor kurzem durchgeführten Kundenprojektes feststellen: diese nutzerfreundliche Technik wird zumindest in Deutschland recht spärlich eingesetzt. Grund genug für mich, das Potential und die best practices noch einmal zusammenzufassen.

Inline-Validierung?

inline-validation smashing ux

Quelle: http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/

Inline-Validierungen geben den Nutzern unterschiedliche Arten von Feedback in Echtzeit am jeweiligen Feld selbst. So kann der Nutzer zu einer Bestätigung aufgefordert werden, es können Vorschläge gemacht oder auch Hinweise für das korrekte Ausfüllen gegeben werden. Diese Informationen werden vor, während und nach der Eingabe des Nutzers angezeigt und nicht erst nachdem er alle Datenfelder ausgefüllt und den Submit-Button gedrückt hat. Voraussetzung dafür ist natürlich, dass die Logik die bei manchen Prüfprozessen dahintersteckt dies auch leisten kann; in einer angemessenen Zeit!

Das Optimierungspotential

Eine von Luke Wroblewski durchgeführte und bereits oft zitierte Usability-Studie zur Erforschung von best practices zum Thema Online-Validierung (siehe: Inline Validation in Web Forms) weist eindeutige Erfolge beim Einsatz von Inline-Validierung im Vergleich zur den klassischen Submit+Refresh-Fehlermeldungen über dem Formularfeld nach. Auch wenn die Studie schon 3 Jahre alt ist, decken sich die Erkenntnisse auch mit unseren aktuellen Beobachtungen in 2012.

Mit Inline-Validierung lässt sich bei Webformularen (die %-Angaben sind das Ergebnis von Wroblewskis Studie)

  • die Conversion der Abschlüsse steigern (22%).
  • die Fehlerrate senken (22%).
  • die Zufriedenheit der Nutzer erhöhen (31%).
  • die Zeit zum Ausfüllen des Formularssenken (42%).

Best practices: worauf ist zu achten?

  1. Bei welche Feldern sollte Inline-Validierung verwendet werden / bei welchen nicht?
    Inline-Validierung sollte insbesondere dann eingesetzt werden, wenn die Eingaben der Nutzer nicht auf Anhieb korrekt sein könnten. Eingabefelder wie „Passwörter“, „Nutzernamen“ etc. haben meist sehr unterschiedliche Anforderungen. Hier macht es Sinn zu prüfen, ob z. B. das Passwort sicher genug ist oder ob die Emailadresse/der Nutzername schon vergeben ist. Natürlich tauchen auch Standard Eingabefelder auf wie „Name“ und „Vorname“, die jeder Nutzer sofort eindeutig ausfüllen kann. Hier sollten Sie keine Echzeit-Validierung anbieten. Dies erwartet der Nutzer nicht und ist gar irritiert, wenn hier ein „grünes Häkchen“ erscheint.
    Weiterführende Informationen gibt dieser Artikel: When to use inline validation
  2. Wann sollte das Feedback angezeigt werden?
    Grundsätzlich gibt es 3 Möglichkeiten:

    • Anzeige der Meldung nach der Eingabe des Nutzers und nachdem er ins nächste Feld wechselt („on blur).
    • Anzeige der Meldung während der Eingabe des Nutzers („on key press“) und direkte Aktualisierung der Meldung – je nach Eingabe
    • Anzeige der Meldung vor der Eingabe: d.h. sobald der Nutzer ein Feld fokussiert hat und während seiner Eingabe („on blur/ on key press“).
    • Die Anzeige der Meldung nach der Eingabe hat sich als am effektivsten erwiesen. Sie unterstützt den Nutzer am besten und hilft dabei, das Ausfüllen zu beschleunigen. Sollten Sie während der Eingabe Feedback geben wollen, dann bitte nur minimal (z. B. in Form einer Formatangabe wie TT.MM.JJJJ).

  3. Wie sieht die bestmögliche Gestaltung des Feedbacks aus?
    • Zeigen Sie die Fehlerhinweise bzw. Bestätigungen permanent an und blenden Sie sie nicht nach einer kurzen Zeit aus. Teilweise scannen Nutzer am Ende eines Formulars noch einmal alle Angaben. Wenn dann die Hinweise nicht mehr angezeigt werden, kann dies zu Verunsicherungen führen.
    • Die Hinweise sollten prominent, rechtsbündig und außerhalb der Tabelle angezeigt werden. Die deutliche Darstellung ist besonders wichtig für Tastatur-Profis, die die Tab-Taste nutzen und selten auf den Bildschirm schauen. Die reine Anzeige von grünen Häkchen und roten „Xen“ ist meist nicht ausreichend. Erläutern Sie, beispielsweise warum das Format/die Länge einer Kreditkartennummer nicht korrekt ist und wie dies zu beheben ist.
    • Zeigen Sie an, wenn die Validierung ein wenig Zeit in Anspruch nimmt (z. B. über ein Lade-/Aktualisierungsicon).

Fazit

Der Einsatz von Inline-Validierung ist eine interessante Lösung zur Verbesserung von Webformularen indem Sie Ihren Nutzern adhoc Feedback geben und sie aktiv beim Ausfüllen unterstützen. Natürlich ist die Inline-Validierung – wie bei allen Dingen – kein Allheilmittel. Denn: nebenher gilt es auch andere Aspekte bei der Gestaltung von Formularen oder gar Formularstrecken zu beachten (Fortschrittsanzeige, Wording, Reihenfolge der Abfragen, etc.).

Weiterführende Links & Quellen:

http://www.userplus.com/blog/design-patterns/form-design-inline-validation/
http://www.getelastic.com/real-time-inline-validation/
http://www.formsthatwork.com/Conversation-Creating-a-flow-through-the-form
http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/

6 Gedanken zu „Optimierung von Webformularen mit Inline-Validierung

  1. Jonas Wendler

    Hallo Martin!

    Generell ist die Inline-Validierung eine echte Bereicherung, sowohl für Kunden als auch das Unternehmen selbst. Es muss nur auch darauf geachtet werden, dass diese auch, wie du schon im Punkt Eins unter Best practices gut beschrieben hattest, richtig verwendet bzw. eingesetzt werden. Denn wie oft wurde bei mir schon eine Fehlermeldung wegen einer angeblich invaliden Telefonnummer angezeigt, obwohl diese korrekt war. Hilfreich ist hier, speziell auch bei internationalen Seiten, eine Beschreibung wie das Feld auszufüllen ist. Quasi eine Formatvorlage bieten. Und bzw.oder auch bei der Telefonnummer die internationale Vorwahl separat anführen.

    Beste Grüße und ein schönes Wochenende!
    Jonas Wendler

    Antworten
  2. Caroline Jarrett

    Very nice article.

    In our book, we recommended that designers think about the conversation, and the turns taken by the computer and the user, when they are designing validations. Same advice as yours, really, and it’s great to know that it’s still correct in 2012.

    Thanks for mentioning our web site as a resource. (Your link goes to the home page, not to the page about validations).

    Best regards
    Caroline

    Antworten
  3. Pingback: Monatsrückblick – Top-Themen im August | Usabilityblog.de

  4. Pingback: Was erwartet uns 2013? Was waren die Trends 2012? Und womit hebt sich ein Online-Shop sinnvoll ab? Linktipps zum Jahreswechsel von Anja Weitemeyer | Usabilityblog.de

  5. Pingback: Die 4 Faktoren für perfekte Fehlermeldungen in Formularen – so steigern Sie Usability und Conversion Rate | Usabilityblog.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.