it-swarm-eu.dev

Was ist eine bessere Benutzererfahrung: Markieren Sie Fehler oder blockieren Sie falsche Tastenanschläge?

Ich muss einige Informationen in ein Textfeld eingeben. Die Daten sind strukturiert und nur einige Sequenzen sind gültig. Für eine Telefonnummer ist beispielsweise ein Buchstabe wie A ungültig.

Sollte ich also Tastaturereignisse abfangen und verhindern, dass getippte Buchstaben das Textfeld erreichen, oder sollte ich einige rote, schnörkellose Linien (oder einen anderen visuellen Hinweis) zeichnen, um meinen Benutzer wissen zu lassen, dass der Buchstabe nicht akzeptabel ist? Welches ist eine bessere Benutzererfahrung?

20
louisgab

Das Überschreiben der Kontrolle eines Benutzers über seinen Computer ist immer eine Unterbrechung des Workflows dieses Benutzers und wird häufig als Invasion angesehen. Die Website soll "keine Kontrolle" über unsere Computer haben, daher ist es zumindest ein wenig alarmierend, eine solche Kontrolle auszuüben.

Das heißt, Sie sprechen ein wirklich wichtiges Thema an, da es wichtig ist, einen Benutzer wissen zu lassen, dass sein Eintrag ungültig ist, bevor er eine ganze Reihe von Feldern ausfüllt und sie übermittelt.

Der Ansatz, den ich als am wenigsten aufdringlich empfunden habe, der jedoch die schnellste Abwicklungsreaktion bietet, ist der folgende Fluss.

alt text

Warten Sie im Wesentlichen, bis sie ihr erstes Feld ausgefüllt haben, und überprüfen Sie dann beim Klicken/Tabulator auf ein neues Feld (oder ein ungültig gemachtes Feld) das gerade ausgefüllte Feld. Wenn das gerade ausgefüllte Feld gültig ist, drucken Sie ein unauffälliges "gutes" Symbol daneben (grün, Häkchen, glückliches Gesicht, Sie haben die Idee). Wenn die Validierungsregeln nicht eingehalten werden, drucken Sie diskret ein "schlechtes" Symbol (rot, "X" usw.) und eine kurze Zeile darüber, was fehlgeschlagen ist.

Aber denken Sie daran, unterbrechen Sie nicht ihren Workflow:

  • Keine Popups
  • keine Überlagerungen

Wenn sie mit dem Feld fertig sind, in das sie verschoben wurden, kehren sie entweder zum ungültigen Feld zurück oder gehen weiter und gehen später zurück. In jedem Fall werden sie sehen, dass sie eine Bearbeitung vornehmen müssen, dies aber in ihrer eigenen Zeit tun können.

Am Ende haben sie ein vollständig gültiges Formular, bevor sie es einreichen, was bedeutet

  1. Sie müssen nur einmal einreichen
  2. Sie verbringen keine Zeit damit, wütend oder frustriert zu werden, wenn ihre Einreichung "fehlschlägt".
  3. Sie werden Ihre Website mehr mögen
  4. Jeder wird Kuchen haben
17
Matt

Da ich an beiden Enden eines Formulars bin, sind hier einige Richtlinien, die ich bevorzuge:

  • Benutzereingaben sollten kaum jemals verhindert werden. Das heißt, wenn ich den Buchstaben "A" in ein Telefonnummernfeld eingebe, würde ich erwarten, dass "A" angezeigt wird.
  • Ich beginne meine Textfeldvalidierung mit einem onBlur() -Ereignis und nicht früher. Dies gibt dem Benutzer die Möglichkeit, das falsch eingegebene "A" zu beheben, bevor eine Fehlermeldung angezeigt wird. Wenn Sie dem Benutzer erlauben, einen Fehler zu korrigieren, während er sich noch im Eingabefeld befindet, besteht eine geringere Wahrscheinlichkeit für eine aufdringliche Meldung "Hey, Sie haben es vermasselt, Alter".
8
wnathanlee

Wenn Sie während der Eingabe ungültige Zeichen verhindern, könnte dies möglicherweise zu einer Fehlfunktion der Tastatur führen. Benutzer möchten, dass die Dinge so funktionieren, wie sie es erwarten. Wenn Sie bestimmte Zeichen beim Tastendruck verhindern möchten, sollten Sie zumindest gleichzeitig eine Fehlermeldung in der Nähe der Eingabe anzeigen. Auf diese Weise wissen sie, warum nicht getippt wird.

Eine andere Sache, die ärgerlich werden kann, ist, wenn Sie gerade ein langes Formular ausgefüllt haben und die Site die serverseitige Validierung verwendet, sodass Sie das Formular erneut durchgehen müssen, um herauszufinden, was falsch ist. Ich verwende hauptsächlich die clientseitige Validierung, greife aber auf die Serverseite zurück. Ich werde einen Fehler anzeigen, entweder während sie tippen oder wenn die Eingabe den Fokus verliert. Auf diese Weise weiß der Benutzer sofort, dass ein Problem vorliegt, und weiß genau, wo das Problem liegt.

5
LoganGoesPlaces

Ich finde, dass es immer 10x schwieriger ist, Benutzer daran zu hindern, Fehler zu machen, als ich ursprünglich gedacht hatte. Beispiel: Jemandes Telefonnummer hat möglicherweise eine Nebenstelle wie x2333. Ich habe das jQuery-Eingabemasken-Plugin für Kreditkarten verwendet und das hat gut funktioniert. Ich benutze Auto-Suggestion, wann immer es möglich ist.

In jedem komplexen System treten Umstände auf, deren Inline-Erkennung teuer ist, und Sie müssen sie nachträglich mitteilen. Für mich ist die Antwort von Fall zu Fall und stellen Sie sicher, dass Sie jeden Edge-Fall abdecken.

3
Glen Lipka

Ich würde eine Mischung aus beiden Ansätzen vorschlagen, aber nur für streng validierte Felder wie Telefonnummern (SSN, Postleitzahlen usw.). Alles, was muss per Definition numerisch sein).

Verfolgen Sie jeden Tastendruck und zeigen Sie ihn an, wenn der Benutzer ein ungültiges Zeichen eingibt ... aber signalisieren Sie sofort, dass etwas nicht stimmt. Drehen Sie das Eingabefeld möglicherweise rot und zeigen Sie rechts neben dem Feld "Bitte geben Sie nur numerische Zeichen ein" an.

Das Blockieren von Eingaben ist ein Nein-Nein, da es vom Benutzer falsch interpretiert werden kann. Sie könnten ein Problem mit ihrem Computer oder Eingabegerät annehmen, nicht dass sie keinen Buchstaben in ein numerisches Eingabefeld eingeben sollten.

Das Überprüfen von nach Abschluss der Eingabe kann ärgerlich sein. Insbesondere bei Feldern, wie sie bei der Kennworterstellung verwendet werden. Einige Websites erfordern Kennwörter mit 6 Zeichen und nur alphanumerischen Zeichen. Andere erfordern 9-stellige Passwörter und erlauben jedes Zeichen (einschließlich! @ # $% Und so). Wenn Sie ein Passwort eingeben und erst herausfinden, nachdem ich es eingegeben habe, ist dies der nervigste Formulartyp, den ich gefunden habe, und hat mich tatsächlich von mehreren Diensten abgewandt .

Das Bereitstellen von dynamischem Feedback bei der Eingabe von Daten durch den Benutzer hilft ihm dabei

  1. Wissen Sie, welches Feld den Fehler hatte, während sie noch im Feld sind
  2. Korrigieren Sie Eingabefehler proaktiv, bevor Sie Daten senden
  3. Lernen Sie aus der Erfahrung, während sie gehen

Das Blockieren der Eingabe schlägt bei allen drei Konten fehl. Das Hervorheben von Validierungsfehlern nach dem Ausfüllen des Textfelds schlägt auch bei allen 3 fehl.

2
EAMann

Das hängt vom Fall ab. Wenn möglich, verwenden Sie Auto-Suggest. Wenn Sie Benutzereingaben abfangen, ist eine sofortige Rückmeldung von entscheidender Bedeutung. Eine der möglichen Lösungen ist die "Hinweisbox", die unmittelbar nach dem Abfangen des Schlüssels angezeigt wird. Sie können es auf dem Windows-Anmeldebildschirm sehen. Es wird angezeigt, wenn Sie beispielsweise $ sign drücken.

1
Janko

Wie bei den meisten Dingen ... hängt vom Kontext ab. Ich habe eine speziellere Sicht auf das Thema. Die meisten Anwendungen, an denen ich oder meine Gruppe arbeiten, sind technischer Natur und werden nur von angemessen geschulten Personen verwendet. Als solches können wir mehr Verantwortung und Freiheit in die Hände der Benutzer legen als Sie mit der allgemeinen Öffentlichkeit. Kurz gesagt, einige der Richtlinien, die wir verwenden ...

  • Ignorieren Sie ungültige Einträge. Blockieren Sie ungültige Tastenanschläge.
  • Geben Sie ungültige Felder an, ein Zustand, der nach Kontrast und Farbe * so gut wie unmöglich sein sollte.
  • Der Fokus liegt immer unter der Kontrolle des Benutzers. Fangen Sie den Benutzer nicht ein und verhindern Sie keine Änderung des Fokus.
  • Werfen Sie niemals eine modale Warn-/Fehlerbox. Je.
  • Stellen Sie dem Benutzer niemals Fragen. Software ist ein Werkzeug, keine Person. Ja, ich bin sicher.
  • Die Eingabetaste bedeutet immer: Änderungen akzeptieren und weitermachen. Ändern Sie dies nicht, indem Sie den Fokus auf eine Schaltfläche zum Abbrechen/Beenden als Standard für die Eingabetaste verwenden.
  • Die Escape-Taste bedeutet immer: Verwerfen und beenden.
  • Stellen Sie nach Möglichkeit eine automatische Vervollständigung bereit.
  • Geben Sie eine Verknüpfung für Zahlen mit einer Min/Max-Grenze an. z.B. Wenn ein gültiger Wert zwischen 0,12 und 100,387 liegt, werden Einträge größer als 100,387 wie 999 als 100,387 usw. angenommen.
  • Stellen Sie sehr klare Schwarz-Weiß-Verhaltensregeln auf. Regeln, die der Benutzer verstehen kann. Wenn dies zu komplex wird ... überdenken Sie es.

Fast alle Beispiele werden vom Benutzer angefordert und, ja ... die Implementierung ist manchmal ein echter Bär/Albtraum/Killer, aber selten unmöglich.

Vorsichtsmaßnahme: Auch diese Beispiele werden im Zusammenhang mit einem vertikalen System mit einer technischen Benutzerbasis angegeben. Kein allgemeines öffentliches Webformular usw. Ihre Laufleistung kann variieren.

* Außer rot. In unserem Geschäft bedeutet Rot: Gefahr, dass Sie getötet werden ... oder schlimmer.

1
Rusty