Echtzeitvalidierung, gute oder schlechte UX
Ich habe ein Anmeldeformular, in dem ich eine REAL-TIME-Validierung durchgeführt habe, wenn der Benutzer mit der Eingabe beginnt, wie Sie auf dem Bild sehen.
Ich weiß nicht, ob dies die Benutzererfahrung beeinträchtigt oder nicht, und ich habe auch keine Ressource für diese Art der Validierung gefunden.
Antworten
Um von nngroup.com zu zitieren :
7. Do not Validate Felder Bevor die Eingabe abgeschlossen ist
...
Es kann lästig sein , eine Fehlermeldung zu sehen , bevor die Möglichkeit , bis zum Ende der Eingabe gegeben wird.
Die Validierung sollte nicht beginnen, bevor die Eingabe abgeschlossen ist
Wenn der Benutzer einen korrekten Wert eingibt, sollten während der Eingabe keine Fehler auftreten. Die Eingabe gilt als abgeschlossen, wenn
- Der Eingabefokus geht verloren (Navigieren zu einem anderen Feld) oder
- Das Formular wird gesendet (z. B. automatisch senden, wenn Sie die Eingabetaste drücken) oder sogar
- nachdem einige Zeit keine Eingabe empfangen wurde (z. B. 3 Sekunden nach dem letzten Eingabeereignis).
Das sofortige Anzeigen von Eingabefehlern während der Eingabe ist sehr ablenkend ("muss mindestens 3 Zeichen enthalten", wenn mit der Eingabe begonnen wird ) und selten hilfreich.
Validierungsfehler sollten sofort entfernt werden
Sobald das Feld validiert ist und einige Fehler anzeigt, möchte der Benutzer, dass der Fehler verschwindet, sobald der bearbeitete Wert korrekt ist, und nicht, wenn er das Feld verlässt oder das Formular sendet (das wahrscheinlich sowieso deaktiviert wird, solange es Fehler gibt angezeigt).
Dies kann erreicht werden, indem alle Fehler aus dem Feld entfernt werden, wenn es wieder verschmutzt ist (und später bei Übermittlung oder Fokusverlust erneut validiert wird), oder indem das Feld bei jeder Änderung automatisch erneut validiert wird.
Anstatt ständig eine rote Überprüfungsmeldung angezeigt , wenn der Benutzer nicht ein Feldes Anforderungen erfüllt, eine schöne Alternative ist es , (1) zeigt eine Spitze, die den Benutzer sagt , was erwartet wird, und (2) zeigen eine grüne Meldung „Anforderungen erfüllt“ , wenn Der Benutzer hat einen gültigen Wert eingegeben. Sie können grün werden, sobald die Eingabe in Ordnung ist.
Dies hängt von der Art des Eingabefelds ab.
- Für das E-Mail-Feld:
Du willst nicht zu nervös sein. Lassen Sie den Benutzer die Eingabe der E-Mail-Adresse beenden. Wenn das Eingabefeld zu dem Zeitpunkt, an dem der Benutzer mit der Eingabe beginnt, rot mit einem Fehlertext wird, wird der Benutzer gestört.
Der richtige Ansatz wäre, den Benutzer die Eingabe beenden zu lassen. Wenn der Benutzer den Fokus von diesem Feld weg verschiebt, überprüfen Sie, ob er gut aussieht, oder werfen Sie einen Ausnahmetext aus, falls vorhanden.
- Für das Feld Benutzername und Passwort:
Benutzernamen- und Kennwortfelder müssen vor der Übermittlung validiert werden, da sie die strengsten Eingabeanforderungen haben. Zeigen Sie dem Benutzer also deutlich, was akzeptiert wird und was nicht, wenn er mit der Eingabe beginnt.
Link zu den Artikeln:
https://designmodo.com/ux-form-validation/
https://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/
Die Echtzeitvalidierung funktioniert, wenn Sie unvollständige Antworten ordnungsgemäß verarbeiten.
Das angegebene Beispiel ist eine schlechte Benutzeroberfläche, da "reara" eine gültige Methode zum Starten einer E-Mail-Adresse ist. Ein Beispiel, bei dem eine Echtzeitvalidierung eine unvollständige Antwort ablehnen kann, ist "reara @@". In diesem Fall kann die Echtzeitvalidierung sie ablehnen, ohne auf den Abschluss zu warten.
Im Allgemeinen muss eine Fehlermeldung angezeigt werden, wenn keine zusätzliche Eingabe vorhanden ist, die die Antwort gültig machen kann. Wie schwer es ist, dies zu erkennen, ist von Fall zu Fall unterschiedlich. Wenn Sie ein Wörterbuch haben, ist es ziemlich einfach. Mit regulären Ausdrücken weniger.
Es ist natürlich hilfreich, gute Fehlermeldungen zu haben, die im Zusammenhang mit unvollständigen Eingaben angemessen sind. "Eine E-Mail-Adresse sollte genau ein @ -Zeichen enthalten".
Wenn Sie unvollständige Antworten nicht verarbeiten können, z. B. weil es immer möglich ist, ein Suffix einzugeben, um ein bestimmtes Feld legal zu machen, sollten Sie auf die vollständige Eingabe warten, wie in den anderen Antworten vorgeschlagen.
Es ist gut, live zu validieren. Eine solche Validierung muss jedoch zwischen zwei Fällen unterscheiden:
- Eingabe, die durch Hinzufügen von Inhalten am Ende gültig gemacht werden kann, und
- Eingabe, die nicht gültig gemacht werden kann, indem am Ende etwas hinzugefügt wird.
Der letztere Fall sollte die Fehlermeldung sofort anzeigen, während der erstere warten muss, bis die Eingabe abgeschlossen ist.
Aber wie kann man voneinander unterscheiden?
Das ist angesichts der aktuellen Tools etwas schwierig, aber wenn Sie Ihre eigene Engine für reguläre Ausdrücke (oder eine andere Art von Finite-State-Maschine zur Validierung) schreiben, können Sie dies folgendermaßen erreichen:
- Wenn der Motor das Ende des regulären Ausdrucks ( den Zielzustand ) erreicht hat, gab es eine Übereinstimmung.
- wenn der Motor das erreicht Ende des Strings , es könnte später ein Spiel sein.
- Wenn der Motor auch nicht erreichen könnte, würde es nie ein Match geben.
Das Problem ist, dass die meisten Programmiersprachen keinen Hinweis darauf geben, dass das Ende der Zeichenfolge erreicht ist. Auch wenn es sich um eine geringfügige Änderung an einer vorhandenen Regexp-Engine handelt, ist das Rolling Ihrer eigenen für jedes Designprojekt für Benutzeroberflächen mit Sicherheit nicht möglich.
Einfache Antwort Ich denke, es wäre völlig in Ordnung, wenn es sich um eine Anmeldeseite mit 3-4 Feldern handelt, eine Validierung hinzuzufügen, wenn der Benutzer auf Senden klickt
Lange Formulare, die die Validierungsprüfung auslösen sollte, wenn sich die Eingabe in einem anderen Feld als dem genannten Feld befindet.
Dies ist in Javascript möglich
Ich habe einen Artikel über das Problem mit der Live-Validierung geschrieben :
Kurz gesagt: Es gibt entweder zu früh und häufig Feedback, bevor der Benutzer die Möglichkeit hatte, seine Antwort einzugeben, oder es gibt es zu spät, sobald der Benutzer seine Antwort eingegeben hat und sich auf das nächste Feld konzentriert, in dem die nächste Frage beantwortet wird.
Konzentrieren Sie sich stattdessen auf:
- Klare und prägnante Beschriftung, Hinweistext und Fehlermeldungen
- vergib triviale Fehler
- Lassen Sie den Benutzer das Formular senden, wenn er bereit ist
Auf diese Weise sehen Benutzer sehr selten eine Fehlermeldung, und wenn sie dies tun, erwarten sie eine.