Validierung in Formularen – 5 Tipps wie du es richtig machst
- Autor Björn Frieling
- Kategorien Konzepten
- Date 1. März 2020
Validierungen in Formularen sind immer wieder ein Thema. Selbst bei den kleinsten Kontaktformularen oder beim Login spielen diese Validierungen immer eine Rolle. Im Weiteren zeige ich dir Best Practices wie du Formulare nutzerfreundlich validieren kannst.
Fehlertoleranz – Wie du Fehler verhindern kannst
Eines der 7 Dialogprinzipien der Usability ist die Fehlertoleranz. Dabei geht es nicht nur darum Fehlermeldungen zu geben, sondern diese auch gut zu formulieren. Aber auch wie du Fehler direkt verhindern kannst.
Das Format sollte bei der Validierung keine Rolle spielen
Wann immer es dir möglich ist, solltest du nicht auf ein bestimmtes Format der Dateneingabe bestehen. Und falls diese notwendig ist, dann korrigiere das Format automatisch. Ein Beispiel aus der Praxis das jeder von uns kennt, ist die Eingabe eine IBAN bei der Bank. Diese alphanumerische Zahl ist nicht gerade Nutzerfreundlich. Dennoch wird sie benötigt. Diese Zahl hat immer ein bestimmtes Format. Sie besteht in Deutschland aus exakt 22 Stellen. Beginnend mit 2 Buchstaben. Die Darstellung ist oft sehr ähnlich: DE12 3456 7890 1234 5678 90 oder aber DE12345678901234567890.
Wie die meisten kopierst du die Zahl nur und setzt diese irgendwo ein. Für eine gute Usability musst du sicherstellen, dass egal welches Format der Nutzer eingibt, dein Format herauskommt. Ein Beispiel
Andere Formate die häufig validiert werden, sind Datumsangaben, Auch hier gibt es praktische Lösungen. Statt einem Feld könntest du ein Datepicker verwenden, oder eben 3 Dropdown Felder. Auch Automatische Korrekturen wie beim obigen IBAN Beispiel kannst du hier vornehmen.
Validerung von Zahlen und Zeichen
Es empfiehlt sich, wenn du wirklich nur eine Zahl erwartest, auch nur diese zuzulassen. Du hast dadurch den Vorteil, dass der Nutzer wirklich nur den Datentyp eingibt, den du erwartest. Das macht es technisch wesentlich einfacher. Wenn du also von deinem Nutzer forderst, dass er einen Betrag oder eine Postleitzahl eingeben muss, dann beschränke dieses Format wirklich auf Zahlen. Du kannst für diese Zahlen auch eine Spannweite angeben. Zum Beispiel für Postleitzahlen: 10000 – 99999.
Richtige Bezeichnung
Nicht nur das Format spielt oft eine Rolle, sondern auch der Inhalt. Um dafür zu sorgen, dass deine Nutzer korrekte Daten eingeben, achte auf die richtige Bezeichnung des Felds. Dein Label muss dafür sorgen, dass der Nutzer sofort versteht welche Daten du von ihm benötigst. Vermeide lange Labels oder ganze Sätze. Diese werden häufig missverstanden und führen zu inkorrekten Daten. Ob du eine gute Bezeichnung hast, kannst du durch einen Usability Test schnell und gut herausfinden.
Layout von Feldern
Für eine sehr gute Usability bei der Validierung von Formularen bzw. Formularfeldern, empfehle ich dir, die Größe der Felder genau so groß zu machen, wie der erwarteter Wert. Das bedeutet, falls du nur zwei Zahlen erwartest, dann ist dieses Feld kleiner, als zum Beispiel für einen Straßennamen.
Direkte Validierung von Formularen vs. Validierung am Ende des Formulars
Für die Validierung in Formularen gibt es meist zwei Möglichkeiten. Entweder du validierst jedes Feld direkt nach der Eingabe oder sogar während der Eingabe oder aber erst, wenn der Nutzer den sog. Submit – Button betätigt. Diese Fehlermeldungen sind sehr wichtig für das Feedback an den Nutzer. Dies steiger die Lernfähigkeit, als auch die Steuerbarkeit deines Formular.
Direkte Validierung des Formulars
Prinzipiell bevorzuge ich eine direkte Validierung. Dein Nutzer hat somit ein unmittelbares Feedback wie zum Beispiel bei einer ToDo - Liste. Ein Feedback noch während des Tippens würde ich nicht empfehlen. Denn wenn wir zum Beispiel eine bestimmte Länge erwarten, dann wird das Feld solange fehlerhaft angezeigt, bis der Nutzer die Länge notwendige erreicht hat. Das kann gerade bei langen Formularen sehr frustrierend und verwirrend für den Nutzer werden. Deine Validierung sollte eher dann passieren, wenn der Nutzer ein Feld verlässt. Sozusagen auf den FocusOut – Status.
Validierung am Ende des Formulars
Viele Formulare werden erst am Ende des Formulars validiert. Der Nutzer erhält dann eine gesamte Fehlerliste, welche dieser abarbeiten muss. Das ist nervig und führt zur Frustration. Auch ist der Nutzer je nach Länge schon wieder gedanklich in einem anderen Kontext. Diese Methode solltest du nur bei kleinen Formularen, wie zum Beispiel einem Kontaktformular anwenden. Nicht aber bei großen Formularen. Das könnte schnell zu einem Abbruchverhalten des Nutzers führen.
Falls dein Produkt dennoch nach dieser Methode arbeitet, weil es meist ein geringerer technischer Aufwand ist, dann sorge dafür, dass der Nutzer eine Liste mit Fehler erhält. Gerade wenn dein Formular über mehrere Seiten geht, solltest du dafür sorgen, dass er eine Übersicht über seine Fehler hat. Auch kannst du deinen Nutzer durch ein Autoscroll auf diese Übersicht anleiten. Wenn dein Formular über mehrere Seiten geht, solltest du zumindest am Ende jeder einzelnen Seite eine Validierung machen und nicht erst auf der letzten Seite.
Beispiel direkte Validierung
Beispiel indirekte Validierung
Darstellung von Fehlermeldungen
Die Darstellung von Fehlern ist bei der Validierung von Formularen elementar aber auch recht einfach. Sie hängt im Endeffekt von deinem Layout ab.
Wichtig ist, dass deine Fehlermeldung immer direkt an der Eingabe angezeigt wird. Des Weiteren musst du darauf achten, dass eine Fehlermeldung kein anderes Feld überdeckt. Tooltipps verdecken oft andere Labels oder Eingabefelder. Vor allem wenn diese unterhalb angebracht werden. Je nachdem welches Layout du nutzt, kannst du Tooltipps auch rechts vom Eingabefeld anbringen.
Allerdings haben Tooltips den Nachteil das diese erst aktiviert werden, wenn dein Nutzer schon auf dem fehlerhaften Feld ist. Ein statischer Text unterhalb oder rechts des Feldes ist für den Nutzer immer sichtbar. Daher würde ich dir empfehlen eine solche Darstellung zu nutzen.
Aber nicht nur der Fehlertext sollte für den Nutzer ersichtlich sein, sondern auch das Feld an sich. Ein etablierter Standard ist es, den Rahmen des Eingabefeldes rot zu markieren. Diese Darstellung kennen die meisten Nutzer und verstehen diese auch. Gerade bei langen Formularen, solltest du davon nicht abweichen. Eine reine farbliche Kennzeichnung reicht allerdings nicht aus, da diese nicht barrierefrei ist und damit dem Dialogprinzip der Accessibility nicht genügt. Du kannst durchaus auch noch ein kleines Icon zum Beispiel ein ‚!‘ anbringen, um es deinem Nutzer verständlicher zu machen.
Autocomplete Funktionen
Autocomplete Funktionen sind sehr nützlich, um den Nutzer an Fehleingaben zu hindern. Nutze Sie allerdings nur dann, wenn sie wirklich einen Mehrwert bieten. Wenn es nur eine beschränkte Auswahl an Möglichkeiten gibt, würde ich dir je nach Anzahl eher zu Checkboxen oder Dropdown Menüs raten. Du kannst je nach Kontext aber auch einen Hybriden aus Dropdown und Autocomplete nutzen.
Achte darauf, dass du dein Markup korrekt verwendest, denn die meisten Browser bieten für einige Eingabefelder automatische Autocomplete Funktionen an. Mache dir das zu Nutze. Ein Beispiel dafür sind die typischen:
Vorname, Name, Straße + Hausnummer, Postleitzahl und Stadt.
Unterstütze diese Funktion, es erleichtert deinen Entwicklern und dem Nutzer die Bedienung. Und die Validierung deines Formulars wird dadurch auch wesentlich einfacher.
Pflichtfelder
Pflichtfelder müssen markiert werden. Normalerweise und das ist ein Standard im Internet, solltest du das mit * machen. Wenn du unter dem Formular noch etwas Kleingedrucktes hast (was ich als UX – Professional nicht empfehlen kann), dann markiere die Pflichtfelder mit * und die anderen Felder mit hochgestellten Zahlen, wie zum Beispiel: 1.
Optionale Felder solltest du normalerweise nicht mit in deinem Formular haben. Abgesehen von einer Kommentarfunktion ist dies auch nicht notwendig. Solltest du dennoch welche nutzen, kannst du diese mit (optional) markieren. Du solltest dies allerdings dann in einem A/B Test testen. Denn meiner Erfahrung nach hängt das (optional) stark vom Kontext ab, ob dies korrekt wahrgenommen wird. Die NN-Group sagt zwar, dass dies den Cognitive Load verringert, ich habe allerdings im Rahmen von behördlichen Formularen auch schon die Erfahrung gemacht, dass dies den Nutzer mehr verwirrt, als dass es hilfreich ist.
Auch wenn der * ein Standard im Internet ist, solltest du eine Legende anfügen. Am besten machst du dies oberhalb des Formulars. Das liegt im Lesefluss des Nutzers und schließlich ist diese Legende wichtig für das Bearbeiten des restlichen Formulars.
Extra: Registrierung
Nach wie vor ist die Registrierung eine der größten Hürden für Nutzer auf einer Seite. Daher solltest du diese so angenehm und einfach wie möglich gestalten. Viele Seiten haben schon Registrierungen via Facebook, via Google usw. Für den Nutzer ist dies angenehm, denn die Registrierung erfolgt über wenige Klicks und er muss sich auch kein neues Passwort merken.
Falls du so etwas nicht anbietest, oder nicht anbieten kannst, dann solltest du für die Registrierung eine extra Seite anlegen. Auf dieser kannst du eine besondere Validierung einfügen.
Sollte der Nutzer einen gesonderten Nutzernamen anlegen, zeig ihm bitte sofort an, wenn dieser schon vergeben wurde. Du kannst ihm darunter auch Vorschläge zu neuen ähnlichen Nutzernamen machen.
Das Passwort hingegen sollte sicher sein. Um den Nutzer bei einem sicheren Passwort zu unterstützen, gibt es einige sehr geeignete Patterns. Hier empfehle ich dir, eine direkte Validierung durchzuführen. Falls das Passwort aus bestimmten Zeichen bestehen muss, dann zeig dem Nutzer direkt an, welche Zeichen er schon verwendet hat und welche noch offen sind.
Fazit
Die Validierung von Formularen ist nicht allzu schwer, aber sehr wichtig für deinen Nutzer. Durch eine gute Fehlertoleranz und sinnvolle Fehlermeldungen hilfst du diesem, korrekte Daten einzugeben und das Formular schnell auszufüllen.
You may also like
Usability Richtlinie: Die 7 ± 2 Regel
Dark UX und Dark Patterns
