it-swarm.com.de

Ausrichtung von Beschriftung und Textfeld. Lesen Sie den Fall

Hinweis: Ich habe diese vage ähnliche Frage und ihre Antworten gelesen: Warum könnten rechtsbündige Feldbezeichnungen besser sein?

Fall: Ich habe ein langes (ungefähr 10-15 Felder in 1 Form) B2B-Formular in dem ich mich entschieden habe, unterschiedliche Größen der Textfelder für Eingaben gemäß ihrer erwarteten Eingabedatengröße zu haben/Länge. Das Formular soll von Finanz- und Vertriebsmitarbeitern ausgefüllt werden - und ich möchte sicherstellen, dass dies nicht der Fall ist. in jeder Art von Eile/Eile; Fehler machen.

Frage: Ich habe folgende 6 (siehe beigefügtes Bild) mögliche Optionen zum Ausrichten der Beschriftungen an den Textfeldern. Welches soll ich nehmen? Warum?

(enter image description here

Luke Wroblewski (alias LukeW) schrieb einen Artikel über verschiedene Labelpositionen. Wie viele Dinge in UX Design ist es eine Frage zu Vor- und Nachteilen . http://www.lukew.com/ff/entry.asp?1502

(Label above fieldenter image description hereenter image description here

Mateo Penzo hat dann einige Eyetrackings durchgeführt, um Lukes Artikel über die Platzierung von Etiketten zu testen: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Für Beschriftungen, die links über dem Feld ausgerichtet sind:

Durch Platzieren eines Etiketts direkt über dem Eingabefeld konnten Benutzer beide Elemente mit einer einzigen Augenbewegung erfassen.

Für linksbündige Beschriftungen:

Übermäßige Abstände zwischen einigen Beschriftungen und ihren Eingabefeldern zwangen Benutzer unnötig dazu, sich mehr Zeit für die visuelle Interaktion mit dem Formular zu nehmen

Für rechtsbündige Beschriftungen:

Die richtige Ausrichtung der Etiketten reduzierte die Gesamtzahl der Fixierungen um fast die Hälfte, was zeigt, dass dieses Layout die kognitive Belastung, die Benutzer zum Ausführen der Aufgabe benötigen, erheblich reduzierte.

Basierend auf Ihren Optionen scheint 5 die beste zu sein. Wenn Ihre Lösung für den globalen Gebrauch übersetzt werden muss, sollten Sie in Betracht ziehen, Beschriftungen über dem Feld zu platzieren, da sich die Beschriftungslänge häufig erhöht, wenn Sie in bestimmte Sprachen übersetzen.

36
SteveD

Während ich keine wirklichen wissenschaftlichen Beweise für grafische Darstellungen wie SteveD oben habe (großartiger Beitrag übrigens), wechsle ich normalerweise zwischen den vertikal angezeigten Beschriftungen und den horizontalen rechtsbündigen Beschriftungen (und linksbündigen Feldern).

Meine Faustregel lautet: Wenn die Beschriftungen eine ähnliche Größe haben, tendiere ich dazu, den rechtsbündigen Beschriftungs-/linksbündigen Feldansatz zu wählen. Auf diese Weise wird die Lesbarkeit nicht so stark beeinträchtigt, und der Benutzer kann besser durch das Formular fließen, das er ausfüllen soll. Wenn die Etiketten mehrere Größen haben, ist es am besten, den vertikalen Etikettenansatz zu wählen. Es gibt einige Ausnahmen von dieser Regel, die hauptsächlich auf der Größe des Ansichtsfensters und dem Inhalt des Formulars basieren.

Instanz 1 - Wenn Sie die Seite auf einem mobilen Gerät anzeigen , wechsle ich normalerweise unabhängig vom ursprünglichen Design zu vertikale Beschriftungen. Da der Platz von Seite zu Seite ein großes Problem darstellt, fließen vertikale Beschriftungen auf dem kleineren Bildschirm gut.

Instanz # 2 - Wenn Sie unterschiedliche Etikettenlängen haben, , aber diese längeren oder kürzeren Etiketten können in verschiedene Abschnitte unterteilt werden - Ich verwende immer noch den Ansatz für rechtsbündiges Etikett/linksbündiges Feld. Beispielsweise haben Sie eine Reihe von Feldern für Kontaktinformationen (z. B. Vorname, Nachname, Adresse, Telefonnummer, E-Mail-Adresse). Dann haben Sie ein oder zwei Felder, in denen Sie nach detaillierteren Informationen gefragt werden (z. B. spezielle Versandanweisungen, Mädchenname der Mutter usw.). Diese Felder können unterhalb des ersten Abschnitts hinzugefügt werden, der durch eine horizontale Regel getrennt ist. Auf diese Weise befinden sich die Felder immer noch auf derselben Seite mit derselben Grundformatierung, aber der zusätzliche Platz und die horizontale Regel erleichtern das Zusammenpassen dieser Felder.

In diesem Sinne würde ich, um Ihre Frage direkt zu beantworten, SteveD oben zustimmen und sagen, dass Option 5 Ihre beste Wahl wäre.

2
Jon Gallup

Es ist eine Frage der Nutzung.

Als jemand, der in der Vergangenheit Daten eingegeben hat, kann ich sagen, dass die wichtigsten Elemente für die wiederholte Eingabe sind:

  1. Gute Reihenfolge - Die Felder müssen so angeordnet werden, dass sie entweder einer logischen Beziehung entsprechen, oder wenn sie von einem physischen Medium übertragen werden, müssen sie mit der Lesereihenfolge dieses Mediums übereinstimmen. Die Organisation auf der Grundlage ihrer Datenspeicherungsreihenfolge zwingt den Menschen, sich ständig auf Diskrepanzen zwischen der Art und Weise, wie sein Gehirn versucht, die Informationen abzubilden, und der von der Maschine bevorzugten Reihenfolge einzustellen, was die kognitive Belastung erhöht, die Geschwindigkeit verlangsamt und die Wahrscheinlichkeit erhöht des Fehlers.

  2. Scannbare Etiketten - sind hilfreich, da sie die Verfolgung Ihres Standorts innerhalb der Bestellung unterstützen. Daher ist es hilfreich, Beschriftungen in einer Liste mit einem einfachen Scan-Rand zu haben.

  3. Links ausgerichtete Eingabefelder - Hilfe bei der Cursorplatzierung. Eine konsistente visuelle Position erleichtert das Verfolgen des Cursors und hilft, wenn Sie Ihre Position mit der Maus neu positionieren müssen. Rechts ausgerichtete Felder sind konsistent, wenn Sie über die gesamte Länge des Bildschirms laufen. Sie befinden sich jedoch optisch weiter von den Beschriftungen entfernt, sodass Sie etwas mehr Zeit zum Scannen des Elements benötigen.

Alle oben genannten Punkte gelten speziell für die wiederholte Dateneingabe. Bei einem gelegentlichen Formular, das einmal von einem Benutzer ausgefüllt wird, können Inline-Beschriftungen den Benutzer möglicherweise besser durch den Prozess führen. Benutzer, die sich wiederholende Daten eingeben, lernen jedoch die Formulare, sodass Dinge, die die Orientierung von Daten und räumlichen Beziehungen erleichtern, auf lange Sicht wichtiger sind.

0
tealdev