it-swarm.com.de

Wo kann man Validierungs- / Fehlermeldungen am besten in einem Formular anzeigen?

Wo kann man Validierungs-/Fehlermeldungen am besten in einem Formular anzeigen?

  1. Neben einem Feld?
  2. unter einem Feld?
  3. Reservieren Sie einen Bereich oben/unten auf der Seite und zeigen Sie dort eine Fehler-/Erfolgsmeldung an?
10
June

Es gibt keine richtige Antwort darauf, es hängt stark vom Kontext ab.

Bei größeren Formularen ist es sinnvoll, eine Zusammenfassung der Fehler sowie in der Nähe des zu korrigierenden Felds zu haben. Dies ist ideal, wenn ein Benutzer ein Formular einreicht und die Seite neu geladen wird. Er sieht dies oben und kann Maßnahmen ergreifen.

Hier ist ein gutes Beispiel dafür: enter image description here

Als Bonus können diese mit dem Bereich verknüpft werden, in dem das Validierungsproblem behoben werden muss, damit ein Benutzer länger über längere Formulare springen kann.

Wenn Sie jedoch kleinere Formulare hätten, wäre eine Inline-Validierung (um das Eingabefeld herum) vollkommen in Ordnung. Dies hält die Seite weniger beschäftigt und lenkt ab und bringt den Fokus auf den Bereich, der Aufmerksamkeit benötigt.

enter image description here

16

Markieren Sie das fehlerhafte Feld und geben Sie Anweisungen für die Felder, bevor sie ausgefüllt werden. Dies sind zwei Gründe. Erstens kann der Benutzer vermeiden, dass der Fehler angezeigt wird, wenn er weiß, wie er richtig ausgefüllt werden muss, und zweitens müssen Sie keinen Platz schaffen, damit die Fehlermeldung sichtbar wird - nur die Fehlerhervorhebung auf dem Feld.

Große Fehlermeldungen können Benutzer erschrecken oder nur nerven. Es ist eine bessere Erfahrung, Ihren Benutzern zu erklären, wie sie das Formular zuerst verwenden, als dass sie sich schlecht fühlen, nachdem sie mit dem Absenden des Formulars begonnen haben.

3
pcridesagain

Der schlechteste Ort, an dem ein Formularfehler angezeigt wird, befindet sich oben oder unten auf der Seite. Warum? Es trennt die Nachricht/Lösung vom Problem. Ziel jeder Fehlermeldung ist es, zu kommunizieren, wie ein Benutzer seinen Fehler so schnell wie möglich beheben kann, um so viel Arbeit wie möglich zu erhalten. Die visuelle Trennung der Problemmeldung vom Problembereich verwirrt und frustriert die Benutzer. Es erhöht auch die mentale Arbeitsbelastung, mit der sich ein Benutzer beschäftigen muss, manchmal nur, um einfache Informationen (wie Datum, Alter oder Adresse) einzugeben.

Der beste Ort, um Validierungserfolge und/oder Fehlermeldungen anzuzeigen, liegt in der Nähe des Problems. Ob die Nachricht über oder neben einem Feld angezeigt wird, ist weitgehend eine Frage der Präferenz. Wichtig ist, dass die Nachricht genau und explizit angibt, was in einer höflichen, von Menschen lesbaren Sprache schief gelaufen ist und kommuniziert konstruktive Anweisungen , wie dieses Problem behoben werden kann. ( Angepasst an Jakon Neilsen 's "Richtlinien für Fehlermeldungen")

Zusammenfassung: Nach allgemeiner Weisheit sind gute Fehlermeldungen höflich, präzise und konstruktiv. Das Web enthält einige neue Richtlinien: Machen Sie Fehlermeldungen deutlich sichtbar, reduzieren Sie den Arbeitsaufwand zur Behebung des Problems und schulen Sie die Benutzer auf diesem Weg.

2
Hynes

Ich möchte alle Fehler oben auflisten, damit der Benutzer sie leicht sehen und sie dann anklickbar machen kann. Der Hyperlink springt dann zu einem passenden HTML-Anker. Hier ist ein einfaches HTML-Beispiel:

Die Fehler :

<h2>There was an error with your submission</h2>
<ul>
   <li><a href="#jobtitle">Enter Job Title</a></li>
   <li><a href="#emailaddress">E-mail address must be valid</a></li>
   <li><a href="#state">Select your state</a></li>
</ul>

Die Felder

<a name="jobtitle"></a>
<label for="jobtitle">Job Title</label>
<input type="text" name="jobtitle" id="jobtitle" />

<a name="emailaddress"></a>
<label for="emailaddress">Email Address</label>
<input type="text" name="emailaddress" id="emailaddress" />

<a name="state"></a>
<label for="state">State</label>
<select name="state" id="state">
    <option value="AZ">Arizona</option>
    <option value="NY">New York</option>
    <option value="OH">Ohio</option>
    ...
</select>

Auf diese Weise wird beim Klicken auf den Fehler selbst automatisch zur richtigen Stelle auf der Seite gescrollt.

Hoffe das hilft!

2
CharleyDC5

Es gibt keine einheitliche Antwort, da sich der beste Ansatz je nach Layout und Komplexität Ihres Formulars ändern kann.

Für ein gutes Design der Benutzeroberfläche sind Elemente erforderlich, die klar, offensichtlich und intuitiv sind. Der Benutzer sollte auf einen Blick wissen, was er falsch gemacht hat, wo das Problem liegt und wie es behoben werden kann.

Mein frustrierendstes persönliches Beispiel für eine schlechte Validierung war die Zeit, als ich versuchte, mein Passwort bei Sallie Mae auf ein neues komplexes Passwort mit 18 Zeichen zurückzusetzen. Ich habe ungefähr eine halbe Stunde lang versucht, mein Passwort festzulegen, aber diese Fehlermeldung wurde immer wieder angezeigt.

Ungültiges Passwort. Passwörter müssen zwischen 8 und 32 Zeichen lang sein, mindestens eine Zahl und mindestens einen Buchstaben enthalten und dürfen weder das Word-Passwort noch Ihren Benutzernamen enthalten.

Mein Problem war, dass die Software keine Sonderzeichen akzeptierte, aber ich konnte das anhand der bereitgestellten Nachricht nicht erkennen.

Nur die Farbe des ungültigen Formularfelds zu ändern oder ein rotes Sternchen daneben zu setzen, ohne zu erklären, warum es ungültig ist, ist nicht klar oder offensichtlich. Ich finde, dass der Versuch, die Erklärung zu finden, warum das Feld ungültig ist, möglicherweise nicht neben das Feld passt.

In einigen meiner Formulare (asp.net mit JQuery) setze ich die Validierungsfehler oben in das Formular, flashe es, gebe eine Nachricht aus, die genau angibt, warum das Feld ungültig ist, und daneben einen Link, der sie zurücknimmt auf das Feld.

1
Andrew Neely