it-swarm.com.de

Wo sollen Formularanweisungen oder Hinweise platziert werden?

Ich habe Forrst durchsucht und bin zu einem Screenshot eines Formulars gekommen, das mit Twitter Bootstrap) erstellt wurde, das die Beschriftung links, das Eingabefeld rechts und die erforderliche Anweisung unter dem Feld selbst, so:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Ich hätte fast kommentiert, dass es der falsche Weg ist, aber ich habe beschlossen, Twitter selbst zu überprüfen. Es scheint, dass ein solches Layout Teil ihres Styleguides ist:

enter image description here

und so sieht es im Live-Twitter aus:

enter image description here

Der gleiche Ansatz wird in Wufoo verwendet:

enter image description here

und in JotForm:

enter image description here

Google Forms setzt den Hilfetext jedoch unter die Bezeichnung und vor das Eingabefeld:

enter image description here

Das Platzieren des Hilfetextes nach dem Feld scheint gegen einige der wichtigsten Prinzipien der Wahrnehmung (Anweisungen vor der Aufgabe) und der UX (Minimierung der Augenbewegungen hin und her) zu verstoßen. Ich habe mich umgesehen, aber die einzigen Studien, die ich gefunden habe, beziehen sich auf Labels (oben, rechts oder links vom Feld) und es scheint, dass es nichts gibt Hinweise und/oder Anweisungen neben dem Vorschlag, sie inline zu machen und den Fokus auf dem Feld anzuzeigen.

Was ist also der "richtige" Weg, um Hinweise/Anweisungen/Anweisungen/usw. in Bezug auf das Feld und das Etikett zu platzieren? Zu den aktuellen Auswahlmöglichkeiten gehören: unter der Bezeichnung, über dem Feld, nach dem Feld und neben dem Feld als Inline-Beschriftungen.

14
dnbrv

Da diese Anweisungen gelesen werden sollen, nachdem der Benutzer versucht hat, ein Feld zu interpretieren, und nicht von jedem Benutzer zuerst gelesen wurde.

Bei den Twitter-Beispielen erklären diese Texte oft nicht, wie man das Feld ausfüllt, sondern wie man eine Entscheidung trifft. Das heißt, sie sollten nur gelesen werden, wenn ein Benutzer mit einem Entscheidungspunkt zu kämpfen hat. Benutzer, die die Domain kennen oder "Slot-In" -Antworten haben (häufig beim Ausfüllen von Identifizierungsfunktionen), müssen den Text nicht sehen, damit er sich an einem untergeordneten Standort befinden kann.

Es spielen auch andere Faktoren eine Rolle. Anweisungen vor Formularfeldern würden es schwieriger machen, Paare zuzuordnen, da das (normalerweise größere) Formularfeld zuerst eine visuelle Hierarchie begründet (wie Ben Brocka im obigen Kommentar erwähnt). Dies bedeutet auch, dass Felder und Beschriftungen sehr nahe beieinander liegen können, was das Parsen erleichtert (insbesondere, wenn ein Benutzer ein Feld sucht, um es nach der ursprünglichen Übermittlung zu bearbeiten).

11

Für eine anständig zugängliche Website sollten die Anweisungen immer vor dem Feld stehen. Sie sind nicht nur für typische Benutzer da, sondern auch wichtige Hinweise für die Barrierefreiheit.

Beispiel: Screenreader drücken die Beschreibung/den Hinweis , bevor sie die Details des Formularfelds lesen, damit der Benutzer weiß, was zum erfolgreichen Ausfüllen des Felds erforderlich ist. Wenn der Hinweis nach dem Feld kommt, besteht eine gute Chance, dass sie ihn bereits ausgefüllt haben, bevor sie den Hinweistext hören.

Wenn der Hinweis auch als Validierungs-/Fehlertext verwendet wird, ist es aus demselben Grund schlecht zugänglich, diese nach dem Feld anzuzeigen. Der Benutzer muss den Fehlergrund kennen, bevor er seinen tatsächlich eingegebenen Wert hört, damit er hören kann, wie sein Eintrag die Validierung gebrochen hat. Andernfalls müssten sie annehmen, dass jedes Feld fehlgeschlagen ist, und dann warten, um zu hören, ob es fehlgeschlagen ist. Wenn Sie die Validierung zuerst hören, werden sie vorbereitet. ' ok, dieses Feld, das gerade ausgelesen wird, enthält einen Fehler'

(Um eine noch bessere Zugänglichkeit zu gewährleisten, sollten Sie alle Validierungsfehler ganz oben im Formular auflisten, damit der Benutzer sofort weiß, welche Felder fehlgeschlagen sind und wie viele vorhanden sind.)

Vergessen Sie auch nicht die Tastaturbenutzer. Wenn jemand eine Tastatur verwendet und ohne Mauszeiger durch Felder tippt und das Formular viele Felder "unterhalb der Falte" enthält, wird durch Tippen in Felder unten nur dieses Feld angezeigt und nicht der Hinweistext, wenn dieser Text unter das Feld fällt Feld.

5
JonW

JotForm Entwickler hier.

Diese Hinweise werden hauptsächlich verwendet, um Benutzern den Eingabetyp oder einige Beispiele für eine korrekte Eingabe zu erleichtern. Es wird verwirrend und überfüllt sein, wenn Benutzer Hilfetexte direkt unter der Frage sehen. Wir möchten normalerweise, dass sie sich nur auf die Frage konzentrieren. Wenn sie eine gestellte Frage beantworten, können sie einen einfachen Hinweis auf den erwarteten Eintrag lesen oder den Hinweis vollständig ignorieren, daher die kleine Schriftart und die hellgraue Farbe.

Sie möchten nicht zu viele Informationen anzeigen und potenzielle Einsender Ihrer Umfrage abschrecken.

5
Serkan Yersen

Ich platziere Eingabehinweise/Fehler/Mindestanforderungen immer direkt darunter und codiere sie farblich mit der Randmarkierung der Eingabe, z. rot -> Fehler

Ich kann Googles Argumentation für die Platzierung oben nicht sehen, obwohl eine große Motivation für ihre Entscheidungen basiert auf Nutzerforschung

Außerdem ist hier eine Meinung aus sechs Revisionen

1
dannydev

Wenn die Aufgabe ziemlich einfach ist (für die Mehrheit der Benutzer), sollten die Anweisungen ihnen nicht im Weg stehen.

Z.B. Verwenden Sie QuickInfos oder zeigen Sie etwas kleineren und graueren Text unter den Eingabefeldern an (möglicherweise nur für aktuelle Felder und Felder mit ungültigen Eingaben).


Wenn die Aufgabe komplex ist (für die Mehrheit der Benutzer), sollten die Anweisungen viel auffälliger sein.

Z.B. Box-Hilfemeldungen und platzieren Sie sie an der Seite des Formulars (z. B. links vom Formular, wenn es sich um LTR handelt). Pfeile zeigen auf die Eingaben.

Irgendwie soenter image description here
Aber mit Farben, die viel weniger hervorstehen (z. B. hellgrau), außer vielleicht für aktives Feld (vielleicht dunkleres Grau) und Fehler (rot).


Wenn Sie nur das erforderliche Feld markieren möchten, kann die Verwendung eines anderen Hintergrunds (z. B. Gelb anstelle von Weiß oder Dunkelgelb anstelle von Schwarz) + Text unten eine gute Lösung sein.

Die Verwendung von Sternen mit Erklärungen an anderer Stelle kann die Benutzer dazu zwingen, nach Erklärungen zu suchen.

Durch die Verwendung von Links zur Hilfe wird der Benutzer gezwungen, Hilfetabellen/-fenster zu öffnen, anstatt eine Vorschau zu erhalten. - Es sei denn, es handelt sich um ein Overlay-Popup mit einem Klick nach außen, um mit einem eindeutigen Unterscheidungsmerkmal für reguläre Links (z. B. doppelte Unterstreichung) zu schließen.

0
Danny Varod