it-swarm.com.de

Eingabe der Formularbeschriftung oben oder links?

Obwohl ich mich mit der Ausrichtung von Eingabeformularbeschriftungen befasst habe, brauche ich einen soliden Vorschlag, wann die Ausrichtung von Formularbeschriftungen oben und wann links verwendet werden soll und warum?

Zum Beispiel werden im folgenden Formular Benutzername und Passwort linksbündig ausgerichtet.

left aligned labels

Hier sind Benutzername und Passwort oben ausgerichtet.

top aligned labels

33
Pir Abdul

Luke Wroblewski ist der Guru auf diesem Feld.

Er hat ein ganzes Buch über Web Form Design ( Web Form Design ) geschrieben und vor einigen Jahren einen interessanten Artikel über die Label-Ausgabe veröffentlicht.

Den vollständigen Artikel können Sie hier lesen: http://www.lukew.com/resources/articles/web_forms.html

Zusammenfassung des Artikels:

Vertikale Beschriftungen

Sollte verwendet werden, wenn:

  • Die Zeit zum Ausfüllen eines Formulars muss minimiert werden
  • Die gesammelten Daten sind den Benutzern meist vertraut

Image of "Vertical labels"

Linksbündige horizontale Beschriftungen

Sollte verwendet werden, wenn:

  • Die Daten, die von einem Formular gesammelt werden, sind unbekannt
  • Die Daten fallen nicht in einfach zu verarbeitende Gruppen
  • Die gesammelten Daten sind den Benutzern meistens [...] bekannt.

Image of "Left-Justified Horizontal Labels"

Rechtsbündige horizontale Beschriftungen

Der Abstand zwischen den [linksbündigen] Beschriftungen und den Eingabefeldern wird häufig durch lange Beschriftungen verlängert. [...] Ein alternatives Layout, rechts, richtet die Eingabefeldbeschriftungen so aus, dass die Zuordnung zwischen Eingabefeld und Beschriftung klar ist.

Image of "Right-Justified Horizontal Labels "

36

Eine Sache, die ich nicht erwähnt sehe und die mich heutzutage dazu veranlasst hat, standardmäßig Top-Labels zu verwenden, ist das mobile Web. Ein großer Vorteil der Top-Labels besteht darin, dass Ihr Formular viel besser für die Verwendung auf einem Mobiltelefon geeignet ist, ohne dass das gesamte CSS für ein mobiles Gerät neu erstellt werden muss.

Da heutzutage viele Telefone Ihr Formularfeld vergrößern, bedeutet es, dass es links neben dem Feld die Beschriftung für Ihr Feld in diesem vergrößerten Modus verloren hat. Top-Labels beheben das nicht in allen Fällen vollständig, werden aber definitiv der linken Seite vorgezogen (es ist für einen Telefonbenutzer normalerweise einfacher, auf der Seite nach oben/unten zu scrollen, als dass Sie diese PLUS-Schwenkbewegung nach links und rechts ausführen müssen).

Und ja, was auch immer LukeW sagt. ;)

11
DA01

Hier sind einige Ratschläge aus Quince , die viele Beispiele für Websites und Software enthalten, die jedes Muster effektiv verwenden. Schauen Sie sich auf jeden Fall diese Seite an .

Begründung für die Ausrichtung nach oben

"Jedes Etikett und Eingabefeld ist nach vertikaler Nähe gruppiert, und die konsistente Ausrichtung von Eingabefeldern und Etiketten reduziert die Augenbewegung und die Verarbeitungszeit. Benutzer müssen sich nur in eine Richtung bewegen: nach unten. Da der Inhalt die Länge der Etiketten horizontal erweitern kann Lokalisierte und komplexe Eingabesteuerelemente können verwendet werden, ohne das Layout zu beeinflussen. Eyetracking-Studien zeigen, dass Benutzer durch Platzieren eines Etiketts direkt über dem Eingabefeld beide Elemente mit einer einzigen Augenbewegung erfassen können. Wenn ein Etikett Daten anzeigt, die ihnen sehr vertraut waren Benutzer - zum Beispiel ihr Vorname oder Familienname - Benutzer haben das Etikett nicht separat fixiert, um es zu lesen. Sie konnten sowohl das Etikett als auch das Eingabefeld im selben Bereich anzeigen, sodass keine zusätzlichen Fixierungen erforderlich waren. "

Begründung für die Ausrichtung nach links

"Der Hauptgrund für die Auswahl linksbündiger Beschriftungen besteht darin, den Benutzern das Scannen der Anforderungen des Formulars oder das Ändern zu erleichtern. Dies kann für verschiedene Zwecke nützlich sein. Die Benutzer können scannen, um festzustellen, ob sie vorhanden sind über die erforderlichen Informationen verfügen oder nur bestätigen, dass es sich um das richtige Formular handelt. Wenn es sich um ein Formular handelt, mit dem vorhandene Werte aktualisiert werden, können sie scannen, um den zu aktualisierenden Wert schneller zu finden, oder wenn nur wenige erforderlich sind Felder können sie Ihr Formular schneller scannen, um diese zu finden. "

Begründung für die richtige Ausrichtung

"Um die Beziehungen zwischen Informationen klar zu machen, richten Sie die Beschriftungen rechts an den Informationen oder Feldern aus, die sie beschreiben, und lassen Sie einen gleichbleibend kleinen Abstand zwischen ihnen.

Objekte, die näher beieinander liegen, werden als verwandt wahrgenommen, mehr als Objekte, die weiter voneinander entfernt sind. Da Felder und Textbeschriftungen, die sie beschreiben, als miteinander verwandt wahrgenommen werden sollen, sollten Sie sie nahe beieinander platzieren. Wenn dieses Muster auf eine lange Liste von Paaren von Textbeschriftungen und Feldern angewendet wird, wird leichter zu erkennen, dass jede Textbeschriftung jedes Feld beschreibt, das sich daneben befindet. "

10
Matt Rockwell

Ich stimme den Profis von Top-Aligned Labes und anderen Arten von Etiketten zu. Meine Frage ist jedoch: Ist es ziemlich wichtig, dass die Art der Kennzeichnung über die gesamte Anwendung hinweg konsistent ist, d. H. Für die gesamte Internet-Banking-Anwendung, oder empfiehlt es sich, angesichts der verschiedenen Arten von Formularen alle Arten der Ausrichtung zu verwenden?

0
Dale