it-swarm.com.de

Konvention zum Nachweis, dass eine von zwei Webformulareingaben erforderlich ist?

Im Webformular-Design ist es üblich, erforderliche Felder mit einem Sternchen zu markieren. Gibt es eine Möglichkeit, diese eine von ein Feldpaar ist erforderlich? Mit anderen Worten, eine Form wie diese:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Wo ist entweder E-Mail oder Telefon erforderlich, aber nicht unbedingt beides?

Das Beste, was ich mir vorstellen kann, ist einfach ein Text mit der Aufschrift "Sie müssen einen davon eingeben". Ist das der einzige Weg?

6
jlarson

Wäre es nicht angemessener, auf dem Etikett zu beschreiben, dass es sich um ein Kontaktfeld handelt, und den Benutzer zu bitten, einen oder mehrere der entsprechenden Typen hinzuzufügen? Dadurch kann das Formular auch auf zukünftige Kontaktformen (z. B. SMS oder Postanschrift) oder ein Vielfaches von Telefon und/oder E-Mail erweitert werden.

In diesem Bildschirm haben wir die ersten beiden Feldsätze vorab ausgefüllt. Die Felder sind als erforderlich markiert. Wenn sie "Telefon" auswählen, kann sich der Platzhaltertext in "Telefon" ändern.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Sobald sie mit der Eingabe begonnen haben oder eine gültige E-Mail-Adresse oder ein gültiges Telefon eingegeben haben, können Sie automatisch weitere Felder des nächsten Typs hinzufügen, die nicht als erforderlich gelten.

mockup

bmml Quelle herunterladen

12
Kevin Peno

Beginnen Sie mit einem normalen "erforderlichen" Flair auf beiden Feldern. Vielleicht ein farbiger Hintergrund. Vielleicht farbige Sternchen.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Wenn die Felder scharfgestellt werden, entfernen Sie das Standard-Flair und ersetzen Sie es durch eine spezifische Erklärung, dass nur eines erforderlich ist. In meinem Beispiel behalte ich das erforderliche Flair im aktiven Feld, um den Text zu verstärken, der noch mindestens erforderlich ist.

mockup

bmml Quelle herunterladen

Um Unordnung zu vermeiden, müssen die Klammer und die Erklärung nur angezeigt werden, wenn diese Felder fokussiert sind, und können das allgemeine Feldflair "Erforderlich" ersetzen. Die Notwendigkeit von "Eines dieser Felder ist erforderlich" wird nicht beseitigt, das Formular wird jedoch nur dann überfüllt, wenn dies unbedingt erforderlich ist, und nur vorübergehend.

Wenn der Benutzer mit einem oder beiden Feldern fertig ist, passt sich das Flair an die aktuell ausgefüllten Felder an, um den Benutzer nicht zu verwirren, dass er zurückkehren muss, um ein leeres Feld auszufüllen.

mockup

bmml Quelle herunterladen

Ich musste nie ein Feld auf diese Weise benötigen, daher wurde dies von mir nicht getestet. Ich glaube, es bietet eine gute Benutzerfreundlichkeit für einen einzigartigen Workflow, aber ich könnte mich irren. Testen Sie immer mit echten Benutzern, bevor Sie ein völlig neues Schnittstellendesign verwenden.

3
Myrddin Emrys

Ich denke, es ist am besten, Optionsfelder zu verwenden, die in einem Abschnitt zusammengefasst sind. Erforderliches Zeichen * wird außerhalb des Kästchens angegeben, um anzuzeigen, dass dieser Abschnitt erforderlich ist. Bei den Optionsfeldern wird der Benutzer gezwungen, eines der erforderlichen Felder auszuwählen.

enter image description here

1
Ades

E-Mail [..............] - oder - Telefon [.................] (* erforderlich)

wie wäre es damit?

1
Trident D'Gao

Wenn ich beide eingeben kann, welches Feld wird als Identität verwendet? (wenn Sie diese Daten als Login verwenden)

es gibt zwei zusätzliche Möglichkeiten:

Zusatzfeld
Beachten Sie, wie das Bestätigungs-Sternchen von E-Mail zu Telefon springt.


Use as identity: (v) Email
                 ( ) Phone

Email * : [______________]
Phone   : [______________]


Use as identity: ( ) Email
                 (v) Phone

Email   : [______________]
Phone * : [______________]


Fragen Sie zuerst nach einer bevorzugten Option

nicht gut, da es keine Möglichkeit gibt, sowohl E-Mail als auch Telefon einzugeben


Email * [________________]
        [I don't have email adress] -- link to switch form to "Phone mode"
...

wenn der Link angeklickt wird:


Email   : [________________] --- become disabled

Phone * : [______________] [cancel] -- or something like that :)
...
0
ADOConnection