it-swarm-eu.dev

Wie kann ein erforderliches Feld in einem Webformular vor dem Absenden am besten hervorgehoben werden?

Dies scheint subjektiv und ist es; Ein Kunde von mir möchte, dass ich die erforderlichen Felder in den Webformularen in seiner Anwendung mit einem roten Sternchen hervorhole. Ich suche nach einer Alternative, da rote Sternchen normalerweise bedeuten, dass ein Fehler bei mir vorliegt.

Wie kann ich einem Benutzer mitteilen, welche Felder erforderlich sind? (Eine pro Antwort bitte.)

PDATE : Dies gibt an, welche Felder erforderlich sind , bevor Validierung/Postback erfolgt.

46
Ryan Shripat

Da 95% aller Felder bei techinsurance.com erforderlich sind, entschied ich mich, einfach fett zu verwenden, um anzuzeigen, dass ein Feld erforderlich ist, und das Wort (optional) neben die optionalen Felder zu schreiben, um Unordnung zu vermeiden.

z.B.

Vorname

Nachname

Geschäftstelefonnummer

Handynummer (optional)

Und vielleicht genauso wichtig sind die Fehlermeldungen selbst. Ich habe sie so offensichtlich wie möglich gemacht ...

Pflichtfeld ...

alt text

mit Fehler ...

alt text

Diese Entscheidungen wurden getroffen, nachdem jahrelang eine Website mit den halbtraditionellen roten Sternchen vorhanden war, um ein erforderliches Feld anzuzeigen. Diese Sternchen funktionierten die meiste Zeit. Das Problem war, als ein Validierungsfehler auftrat. Einige unserer Seiten können ziemlich lang sein und die roten Validierungsfehler würden auf der Seite einfach nicht genug auffallen, wenn sie bereits mit roten Sternchen übersät war. Ich weiß das, weil die Leute gelegentlich so frustriert waren, dass sie uns darüber anriefen. Alle Angaben zeigen jedoch, dass das neue (oben) Design das Problem behoben hat.

57
Steve Wortham

Ich bin der Meinung, dass der beste Weg, dies zu tun, darin besteht, das Wort "erforderlich" nach dem Eingabefeld zu buchstabieren. Dieses Gefühl spiegelt sich auch im Web Form Design von Luke Wroblewski wider: http://www.lukew.com/ff/entry.asp?725

Während der Beispiellink über optionale Felder anstelle von erforderlichen Feldern spricht, bleibt der Prinzipal meines Erachtens derselbe - Benutzer ziehen es vor, ihn für sie ausschreiben zu lassen, anstatt visuelle Indikatoren einzuschließen.

Darüber hinaus kann etwas zu beachten sein, das die Felder angibt, die Optionen anstelle der erforderlichen Felder sind. Für mich ist die Ausnahme diejenige, die beachtet werden sollte. Wenn Sie beispielsweise 10 Felder haben und 8 davon erforderlich sind, schreiben Sie für die 2 Ausnahmen "Optional", anstatt für 8 Felder "Erforderlich" zu schreiben. Wenn jedoch nur 2 erforderlich sind, schreiben Sie "Erforderlich" für diese 2, da dies die Ausnahme ist.

9
RussellUresti

Diese Frage kann problematischer sein, als Sie sich zunächst vorstellen können.

Einige Poster haben beispielsweise vorgeschlagen, ein Sternchen zu verwenden, um "erforderlich" zu kennzeichnen. Das Problem dabei ist, dass einige Websites tatsächlich das Gegenteil verwenden und ein Sternchen neben die Felder setzen, die optional sind. Benutzer wissen nicht explizit, ob ein Stern ein "erforderliches" Feld oder ein optionales Feld ist, und müssen weitere Untersuchungen durchführen, ihren Ablauf unterbrechen, sie über den Formularprozess frustrieren und in einigen Fällen dazu führen, dass das Formular alle abgebrochen wird zusammen.

Die Antwort von RussellUresti, in der Luke Wroblewskis Forschung im Bereich "Web Form Design" wiederholt wurde, um einfach "erforderlich" neben die Pflichtfelder zu schreiben, war (nach meiner 10-jährigen Erfahrung) auch der Ansatz, der den höchsten Durchsatz bei Formularen erbracht und zu der geringsten Verwirrung geführt hat.

Wenn ein Formularfeld optional ist, können Sie die Logik selbst verwenden, um die Antwort zu erhalten, ohne den Benutzer zu fragen?

Wenn Sie beispielsweise wissen müssen, ob der Benutzer männlich oder weiblich ist, können Sie eine Antwort in einigen Fällen anhand des Titels ableiten, den sie für ihren Namen ausgewählt haben (Miss, Frau usw. impliziert weiblich), und die Frage vom Benutzer entfernen.

Ein weiterer zu berücksichtigender Punkt betrifft beispielsweise Adressfelder. Wenn Sie die Postleitzahl abfragen und eine Postleitzahlensuche durchführen können und nur die Adressfelder angezeigt werden, wenn der Benutzer die Adresse manuell eingibt oder wenn die Postleitzahlensuche fehlschlägt, können Sie viele optionale Daten vermeiden Dadurch kann das Formular länger aussehen als es tatsächlich ist, und der Benutzer kann das Formular verlassen.

Nach meiner Erfahrung gibt es häufig, wenn ein Feld optional ist, einen großen Grund, das Feld insgesamt zu entfernen. Offensichtlich ist dies nicht immer praktikabel, aber in einigen Fällen kann dies dazu beitragen, die visuelle Unordnung zu verringern, unabhängig davon, für welchen Ansatz Sie sich entscheiden.

4

Eine andere Lösung besteht darin, das Formular in zwei Abschnitte aufzuteilen, alle erforderlichen Felder zusammenzufügen und dann den gesamten Abschnitt mit "Erforderlich" zu kennzeichnen.

3
Chase Seibert

Der beste Weg, den ich gefunden habe, besteht darin, ein Sternchen nach innen und rechts auszurichten.

Example of UX

3
Nijikokun

Dies ist sicherlich der falsche Ort, um dies zu posten, aber übersehen Sie nicht eine erweiterte Definition von "Erforderlichkeit" - das heißt, wenn die Erfordernis eines Elements von der Verwendung (Auswahl, Füllung usw.) eines anderen Elements abhängig ist.

Beispiel: Feld A ist optional. Wenn jedoch Feld A tatsächlich vom Endbenutzer ausgefüllt wird, ist Feld B erforderlich.

Wie würden wir die Elementfelder mit Anmerkungen versehen oder gruppieren, um dies anzuzeigen? Sollten wir?

PS. Denken Sie daran, dass Farbe allein ein unzuverlässiger Kanal für die Übermittlung von Informationen ist. Einige von uns können nicht leicht zwischen Rot und Grün unterscheiden, und Rot kann Menschen unterschiedlicher Kulturen unterschiedliche Dinge vermitteln.

3
CSSian

Rote Sternchen werden häufig nach Bedarf verwendet, sodass Ihr Kunde wirklich nicht falsch liegt. Wenn Sie eine andere Farbe wählen, z. B. Orange oder etwas, das zum Site-Design passt, sollte dies in Ordnung sein.

2
James Buckley

Ich mag die einfache Sternchenphilosophie.

In tangentialer Hinsicht ist hier ein Beitrag, den ich vor einiger Zeit geschrieben habe, mit einem Beispiel für das Erstellen benutzerdefinierter Fehlermarkierungen für Felder, die erforderlich und nicht ausgefüllt waren. Es ist eher technisch spezifisch (Rails, Formtastic, jQuery), aber das Konzept ist leicht anpassbar.

http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-error-markers

1
blackant

Erstens, da ich davon ausgehe, dass Sie der UX-Experte sind, sollte Ihr Kunde Ihnen nicht sagen, wie Sie UX-Probleme lösen sollen, sondern er sollte mit dem zu lösenden Problem zu Ihnen kommen, nicht mit der Lösung.

Wenn wir es aus der Sicht eines Benutzers betrachten, können wir nicht davon ausgehen, dass der Benutzer weiß, was ein Sternchen bedeutet. Wenn Sie Zweifel haben, formulieren Sie dies so deutlich wie möglich in schriftlicher Sprache. Ich habe gesehen, dass das Sternchen im gesamten Web immer weniger verwendet wird, und es folgt häufig eine Erklärung am Ende einer Seite, wenn es verwendet wird. Eine einfachere Erklärung ist, einfach 'Erforderlich' zu verwenden. Screenreader werden dies ebenfalls aufgreifen und Ihre Website zugänglicher machen.

Haben Sie auch darüber nachgedacht, in diesem Szenario progressive Offenlegungsgrundsätze anzuwenden? Sollten die nicht benötigten Felder überhaupt auf dem Bildschirm angezeigt werden - können sie ausgeblendet oder dem Benutzer zu einem späteren Zeitpunkt angezeigt werden? Auf diese Weise wird weniger Informationen überladen, und alle erforderlichen Felder werden angezeigt, sodass überhaupt kein "Erforderliches" erforderlich ist. Weitere Informationen zur Psychologie hinter dieser Erklärung: https://www.nngroup.com/articles/progressive-disclosure/

0
lg365

Ich habe Usability-Standards gesehen, die das Gegenteil bestimmen - dass alle Felder erforderlich sind, sofern sie nicht mit dem Text (optional) Markiert sind. Wenn erforderliche Felder nach dem Versuch, Fehler zu beheben, nicht ausgefüllt werden, sollten sie mit einem Text markiert werden, der erklärt, was falsch ist.

0
awe

Wie bei den meisten Usability-Themen hängt es wirklich davon ab, wie viele Felder in Ihrem Formular enthalten sind und wie häufig die erforderlichen Felder in Ihrem Formular vorhanden sind

Normalerweise bevorzuge ich ein einfaches rotes Sternchen neben jedem erforderlichen Feld und dann eine Fußnote "* - erforderliches Feld".

Außerdem möchte ich den Feldrand rot hervorheben, wenn das Feld nach einem onBlur() - Ereignis leer oder ungültig bleibt. Gleiche Hervorhebung, wenn der Benutzer versucht, das Formular zu senden, ohne alle erforderlichen Felder auszufüllen. Die Randmarkierung verschwindet bei einem Javascript onFocus() Ereignis.

0
wnathanlee