• Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt
Youitive
  • Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt

Konzepten

  • Home
  • Blog
  • Konzepten
  • Validierung in Formularen – 5 Tipps wie du es richtig machst

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

Die Abbildung zeigt eine automatische Korrektur eine IBAN in dein gewünschtes Datenformat. Dadurch hilfst du dem Nutzer bei der Eingabe von validen Daten in ein Formular.

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.

Bitte geben Sie eine gültige Postleitzahl (10000 - 99999) ein.

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.

Die Länge der Felder in deinen Formularen sollte so lang sein, wie der zu erwartende Wert. Dies hilf bei der Validierung von Formularen in dem es Fehler und Missverständnisse mit deinem Nutzer verhindert.
Wenn alle Felder gleich lang sind fehlt deinem Nutzer die visuelle Unterstützung, welchen Wert du gerade von ihm erwartest. Dies macht die Validierung deiner Formulare für dich aufwändiger und für den Nutzer schwerer.

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


Der Benutzername wird bereits verwendet. Bitte versuche einen anderen Benutzernamen
Bitte gib deine E-Mail-Adresse ein.
Bitte gib dein Passwort ein

Beispiel indirekte Validierung


Der Benutzername wird bereits verwendet. Bitte versuche einen anderen Benutzernamen
Bitte gib deine E-Mail-Adresse ein.
Bitte gib dein Passwort ein

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.

Deine Fehlermeldungen müssen immer an dem betreffenden Feld stehen und dürfen dabei keine anderen Felder verdecken.
Wenn deine Fehlermeldungen immer nur am Ende des Formulars stehen, muss der Nutzer unter Umständen das betreffende Feld suchen. Bei Tooltipps kann es sein, dass diese andere Felder verdecken.

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.

Unterstütze deinen Nutzer bei der Validierung von Formularen. Das Erstellen eines Passworts kannst du dabei in Besonderem Maße unterstützen.

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.

Tag:Fehlermeldungen, forhappyusers, ISO Norm 9241, Konzept, Konzepten, Usability, UX, UX Tipps, Validierung

  • Teilen:
author avatar
Björn Frieling

Previous post

Asynchroner Remote Usability Test – How to und Tipps
1. März 2020

Next post

10 typische User Research Biases
22. März 2020

You may also like

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25 Juli, 2021
Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23 Mai, 2021
Das Bild zeigt die Startseite von https://www.youitive.de wie sie ein Farbenblinder wahrnehmen würde
12 Tipps für Barrierefreiheit in deinem Konzept
29 November, 2020

Search

Kategorien

  • Agile
  • Allgemein
  • Konzepten
  • Nutzungskontextanalyse
  • Strategie
  • User Research

Neuste Artikel

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25Jul2021

Was ist die 7 ± 2 Regel? Bei der 7 ± 2 Regel spricht man bei User Experience und Usability davon, dass deinem Nutzer nur 7 Items ± 2 gleichzeitig präsentiert werden sollten. Diese Regel findet vor allem häufig Anwendung …

Die Abbildung zeigt einen Standardaufbau der Priorisierungsmatrix mit den 4 Quadranten und deren Beudeutung. Alle Funktionen welche rechts oben sind, sollte höhere priorisiert werden. Links oben und rechts unten werden Funktionen eingetragen, welche dann vielleicht später umgesetzt werden sollten. Funktionen welche links unten stehen, sollte nicht umgesetzt werden.
Priorisierungsmatrix – Im Team UX Entscheidungen treffen
26Jun2021

Eine Priorisierungsmatrix hilft dir und deinem Team UX Entscheidungen für neue Funktionen zu treffen. In agilen Teams ist die Priorisierung meist Aufgabe des Product Owners, allerdings kannst du ihn dabei gut unterstützen. Sollte dein Team nicht konstant von außen priorisiert …

Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23Mai2021

Was ist Dark UX - Definition Unter Dark UX versteht man, das Ausnutzen bestimmter Patterns und Richtlinien, um aktiv die Kunden- und Nutzerentscheidung zu sabotieren. Dabei verwendest du für dein Interaktionsdesign die gleichen Prinzipien, Gesetze, Richtlinien und Inidikatoren wie bei …

UX Online Kurs

Du willst mehr über UX lernen? Dann kannst du über folgenden Link an meinem Online Kurs teilnehmen.

Zum Udemy Kurs

  • AGB
  • Impressum
  • Datenschutzerklärung

+49 176 848 592 65
info@youitive.de

Wir nutzen Cookies um dein Nutzererlebnis zu steigern. Bitte klicke auf 'Akzeptieren' um den vollen Funktionsumfang der Website zu nutzen. Ohne Cookies kann es zu Funktionseinschränkungen (längere Ladezeiten kommen).
Akzeptieren Ablehnen

Weitere Informationen
Datenschutz

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
immer aktiv
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SPEICHERN & AKZEPTIEREN