Erforderliche Feldvalidierung
Wie soll die erforderliche Feldvalidierung visuell gehandhabt werden?
Hinweis: Angenommen, das Sternchen ist rot
*Name:[_______________]
oder
Name:*[_______________]
oder
Name: [_______________]*
oder
Name: [____red bg____ ]oder
Name(<- font color red): [_______________]oder
Du sagst mir einen besseren Weg!
Es gibt nie eine richtige oder falsche Antwort auf diese Art von Fragen und vieles hängt von den Personas Ihrer Benutzer (Ingenieure vs. Power-User vs. Tante Alice, die nie einen Computer benutzt haben) und dem Kontext ab.
Eine allgemeine Regel ist zu verwenden
label [input ] [validation ]
Verwenden des Validierungsbereichs für ein rotes Sternchen zur Angabe eines erforderlichen Felds oder einer Fehlermeldung nach der Validierung des Formulars (oder beider).
Auf der Simply Accessible-Website finden Sie eine gute und präzise Beschreibung der erforderlichen Formularfelder: http://simplyaccessible.com/article/required-form-fields
Es hängt sehr von verschiedenen Faktoren ab.
- In der Regel: Es sollte ein Textanzeige (Sternchen) und eine visuelle Anzeige vorhanden sein, z. B. nur einen Blick von 1 Sekunde auf das Formular. Sie müssen verstehen können, welche Felder erforderlich sind. Sie können beispielsweise ein Sternchen an der Seite des Etiketts hinzufügen (besser, wenn es etwas anders formatiert ist als das Etikett selbst) und den obligatorischen Feldern einen intensiveren Rand hinzufügen.
- Versuchen Sie als zweite allgemeine Regel sehr genau, ob Sie vereinfachen ein Formular können: Sehr oft gibt es Möglichkeiten, Formulare zu minimieren und alle optionalen Felder zu vermeiden. Zum Beispiel könnten minimalistische Registrierungsformulare nur die E-Mail-Adresse abfragen und alles andere Follow-ups und Widgets wie "Ihr Profil ist zu 90% vollständig" überlassen.
- Seien Sie konsistent auf der gesamten Website, das ist wirklich wichtig, da es den Benutzer nicht jedes Mal zum Lernen zwingt.
- Beachten Sie, dass wenn das Sternchen ausgerichtet zusammen in derselben Spalte ist, es etwas besser ist (aber etwas, es wird normalerweise vermieden, das Formular schöner zu machen, Schöne Formulare haben eine bessere Leistung als schlechtere).
- Wenn die meisten Elemente im Formular obligatorisch sind, ist es wahrscheinlich besser, die optional zu markieren.
Fallstricke:
- Verlassen Sie sich nicht nur auf Farben (problematisch, wenn Sie Farben nicht gut lesen können).
- Verlassen Sie sich nicht nur auf Sternchen (Sie zwingen den Benutzer, darüber nachzudenken, was obligatorisch ist und was nicht).
- Zerbrechen Sie das Formular nicht: Während es außerhalb des Rahmens dieser Frage zu liegen scheint, hilft ein poliertes, vertikal ausgerichtetes Formular mit klaren Beschriftungen häufig beim Verständnis der Pflichtfelder: Da ein einzelner vertikaler Scan einfacher ist, ist dies auch einfacher Pflichtfelder erkennen.
Ich dachte, Sie interessieren sich vielleicht für die neuesten Forschungsergebnisse von Baymards: http://baymard.com/blog/required-optional-form-fields
Die Zusammenfassung lautet:
- Beim Benchmarking der 100 wichtigsten US-Checkout-Prozesse haben nur 9% der Websites beide Feldtypen explizit markiert
- Durch die explizite Angabe von optionalen und erforderlichen Feldern muss der Benutzer nichts ableiten und kann sich nur auf das Feld konzentrieren, das er ausfüllt, und kann so nahtlos im gesamten Formular Feld für Feld ohne Hin und Her fortschreiten Scannen früherer Felder.
- Der häufigste Fehler, der von 63% der 100 besten E-Commerce-Kassen begangen wurde, besteht darin, nur einen der Typen zu kennzeichnen
- Beim Testen von mobilen Kassen traten bei 75% der Testpersonen schwerwiegende Probleme mit der Benutzerfreundlichkeit auf Websites auf, auf denen sowohl erforderliche als auch optionale Felder nicht eindeutig markiert waren.
Und ihre Empfehlung:
Das Beibehalten des Sternchens kann nützlich sein, anstatt nur eine farbbasierte Anzeige (+1 für Barrierefreiheit). Geben Sie auch ein Titelattribut in das Sternchen ein, z. <span title = "Erforderliches Feld"> * </ span>
Dies ist wahrscheinlich sowieso notwendig, um es angemessen zu gestalten
Ich denke nicht, dass die Sternchenposition kritisch ist - seien Sie einfach konsistent!
Ich glaube, ich habe all das irgendwann getan. Was ich in letzter Zeit erlebt habe, ist etwas, das mehr Arbeit erfordert, aber ich denke, es ist besser für den Benutzer. Grundsätzlich geben Sie eine kleine rote Popover-Box mit einem stumpfen Pfeil, der auf das betreffende Feld zeigt, und teilen ihnen mit, dass es sich um ein erforderliches Feld handelt. Wenn Sie es in einer hellen Farbe über dem Feld anzeigen, wird der Punkt meiner Meinung nach gut vermittelt, ohne den Fluss des restlichen Dokuments mit eingefügtem Inhalt oder fettem Text zu verändern.
Es wird komplizierter, wenn Sie mehrere Fehler haben. An diesem Punkt ist die Anzeige mehrerer Popover sehr unübersichtlich. Sie entscheiden sich entweder dafür, nur den ersten Fehler oder nur jeweils einen Fehler anzuzeigen, und sobald einer der Konflikte behoben ist, wird der nächste Fehler angezeigt .