Bei der Erstellung eines Webformulars müssen Sie unter anderem entscheiden, wie Sie Ihre Labels mit Ihren Eingabefeldern ausrichten. Dies ist keine triviale Entscheidung, da diese Platzierung die Lesbarkeit/Benutzerfreundlichkeit Ihres Formulars, die Abschlussraten, die Geschwindigkeit des Abschlusses und letztendlich die Zufriedenheit der Benutzer, die Ihr Formular ausfüllen müssen, beeinflusst. Aber gibt es eine ultimative Antwort darauf, wie Sie Labels ausrichten sollten? Nicht wirklich, es hängt von den spezifischen Bedürfnissen Ihres Formulars und den Designbeschränkungen der Seite ab.
Lassen Sie uns die verschiedenen Optionen betrachten und die Vorteile jeder einzelnen sehen.
Oben ausgerichtete Labels
Die meisten Informationen deuten darauf hin, dass oben ausgerichtete Labels zu den schnellsten Abschlusszeiten, der geringsten Verwirrung bei den Benutzern und der geringsten Menge an überflüssigen Augenbewegungen führen. Ein weiterer Vorteil von oben ausgerichteten Labels ist der horizontale Platz, den sie dem Label bieten. Wenn Ihr Formular jemals übersetzt oder anderweitig in einer anderen Sprache angeboten wird, kann dieser zusätzliche Platz entscheidend sein. Sprachen wie Französisch können Labels haben, die doppelt so lang sind wie ihre englischen Gegenstücke.
Oben ausgerichtete Labels klingen sicherlich gut und sind es auch, außer wenn vertikaler Platz ins Spiel kommt. Wenn Ihr Formular auch nur mäßig lang ist, wenn Sie das Label, das Eingabefeld und den Zwischenraum (der etwas größer sein muss, um die Felder voneinander zu trennen) zusammenzählen, wird es schnell ziemlich hoch. Schnelle Abschlusszeiten werden abnehmen, wenn Ihr Formular umfangreiches Scrollen nach unten erfordert.
Links ausgerichtete Labels
Links ausgerichtete Labels haben den Vorteil, dass sie die schnellste Überfliegung der Label-Werte ermöglichen. Da sie alle in einer schönen vertikalen Reihe angeordnet sind und nicht durch Eingabefelder unterbrochen werden, können Benutzer jedes Label schnell überfliegen und sich einen Eindruck vom Formular verschaffen. Dies kann ideal sein, wenn das Formular ungewöhnliche Daten abfragt und jedes Label klar verstanden werden muss. Links ausgerichtete Labels bieten den Vorteil, dass sie viel weniger vertikalen Platz benötigen, da jedes Label und Eingabefeld in einer schmalen vertikalen Reihe angeordnet ist. Diese Einsparungen beim vertikalen Platz gehen jedoch auf Kosten eines größeren horizontalen Platzbedarfs. Das Design Ihrer Website hat hier möglicherweise das letzte Wort.
Der größte Nachteil von links ausgerichteten Labels ist, dass die Forschung zeigt, dass sie die langsamsten Abschlusszeiten haben. Dies liegt wahrscheinlich an der visuellen Distanz zwischen Label und Eingabefeld. Je kürzer das Label, desto weiter ist es vom Eingabefeld entfernt. Ich würde vorschlagen, die aktuelle Feldhervorhebung zu integrieren (Artikel/Demo), wenn Sie sich für links ausgerichtete Labels entscheiden. Beachten Sie auch, dass langsame Abschlussraten nicht immer schlecht sind, insbesondere wenn das Formular unbekannte Daten erfordert. Wenn Sie Dinge wie Führerscheinnummern oder Seriennummern abfragen, möchten Sie Benutzer möglicherweise implizit etwas verlangsamen und sicherstellen, dass sie die Daten korrekt eingeben.
Rechts ausgerichtete Labels
Rechts ausgerichtete Labels teilen die gleichen räumlichen Vor- und Nachteile wie links ausgerichtete Labels: Sie benötigen mehr horizontalen, aber weniger vertikalen Platz. Auch hier taucht das Sprachproblem wieder auf, es kann zu Platzierungsproblemen kommen, wenn das Formular mehrsprachige Unterstützung benötigt. Der große Vorteil von rechts ausgerichteten Labels ist die starke visuelle Verbindung zwischen Label und Eingabefeld. Bei kürzeren Formularen können rechts ausgerichtete Labels gute Abschlusszeiten erzielen. Manchmal bis zu doppelt so schnell wie links ausgerichtete Labels, die das inhärente Problem einer geringeren visuellen Verbindung zwischen Label und Eingabefeld aufweisen.
Der Nachteil von rechts ausgerichteten Labels liegt in der Lesbarkeit und der angenehmen Nutzung. Ihrem Formular fehlt dieser harte linke Rand, was es weniger angenehm zum Anschauen und schwerer zu lesen macht. Dies wird bei kurzen Formularen mit bekannten Daten minimiert, sodass es möglicherweise kein Problem darstellt. Es wäre jedoch sicherlich ein Problem bei Formularen mit längeren, fragestiligen Labels und unbekannten Daten.
Weitere Tipps
- Egal welchen Weg Sie wählen, es ist sinnvoll, Ihre Labels zu **Blockelementen** anstatt zu den standardmäßigen **Inlineelementen** zu machen.
- Für alle Formulare auf einer einzigen Website wählen Sie eine Ausrichtung und bleiben Sie dabei. Konsistenz ist wichtiger als die gewählte Ausrichtung.
- Wenn Sie die Konsistenz brechen müssen, sollten Sie einen sehr guten Grund dafür haben.
Weitere Ressourcen
- Suchen Sie nach einem einfachen herunterladbaren Formular, um loszulegen? Laden Sie das einfache Kontaktformular von CSS Karma herunter.
- Viele dieser Ideen stammen aus Luke Wroblewskis fantastischem Buch Web Form Design
- Ein Artikel von Luke zur Label-Ausrichtung.
- Eyetracking-Studien zur Label-Ausrichtung
SitePoint hat einen Artikel darüber, wie man Formulare gestaltet, ein Kapitel aus The Art & Science Of CSS. Obwohl sich ihr Artikel hauptsächlich darauf konzentriert, wie man CSS verwendet, um Formulare zu verschönern, gibt es auch bestimmte Hinweise zur semantischen und benutzbaren Gestaltung. Ein weiteres Muss.
Außerdem bin ich gerade auf CSS-Tricks gestoßen und werde wohl hierbleiben :)
Dieser Artikel hat mir wirklich gut gefallen und ich möchte mich bei BoltClock für den interessanten Link bedanken. Ich werde das beim nächsten Mal, wenn ich ein Formular entwerfe, auf jeden Fall berücksichtigen. Danke.
Was ist mit links- und rechtsausgerichteten Labels auf der rechten Seite des Formulars, nach dem entsprechenden Eingabefeld? Ihre Augen scannen bereits in diese Richtung, wenn Sie das Formular ausfüllen, daher denke ich, dass dies einige der von Ihnen erwähnten Nachteile abschwächen würde, während die Vorteile erhalten bleiben.
Falls ich mich nicht klar ausdrücke, Ihr Kommentarformular ist so formatiert – die Labels befinden sich auf der rechten Seite des Eingabefelds.
@Michael: Das ist ein guter Punkt... Ich habe das Gefühl, dass diese Label-Ausrichtung bei einem Kommentarformular wirklich gut funktioniert, und ich kann nicht genau sagen, warum. Das war lange Zeit der Standard von WordPress bei vielen Vorlagen, ich glaube, ich habe mich einfach daran gewöhnt, es so zu sehen. Ich glaube, es könnte die Wahrnehmung dessen sein, was mit diesen Daten passiert, nachdem sie gesendet wurden. Sie wird tatsächlich veröffentlicht, daher scheint es passend, Ihren Namen ganz oben links im Formular aufzuführen.
Eine weitere Möglichkeit, die ich im Artikel nicht erwähnt habe, ist, Labels innerhalb des Eingabefeldes selbst zu platzieren. Dies ist eine Möglichkeit für Formulare, wenn der Platz wirklich sehr begrenzt ist UND die Felder für sehr bekannte Daten sind (da Sie das Label verlieren, sobald Sie dieses Eingabefeld ausfüllen, wenn die Dinge richtig gemacht werden).
Großartiger Artikel, Chris! Eine Sache, die Sie vielleicht interessant finden: Ich verwende gerne unterschiedliche Ansätze für die Label-Positionierung auf verschiedenen Websites – bei der Positionierung des Submit-Buttons fühle ich mich jedoch immer gezwungen, ihn unten rechts im Formular zu platzieren. Ist das komisch?
Danke Mann! Habe danach gesucht! :P
Ich mache ein Formular! :P Juhu! hehe
Nun, ich verwende meistens die linke Ausrichtung, es sei denn, ein Kunde gibt seine Wahl an.
Danke auch für die anderen nützlichen Ressourcen.
Hallo Chris,
Interessanter Artikel. Ich frage mich nur, auf welcher Grundlage kommen Sie zu dem Schluss, welche davon die höchsten und niedrigsten Abschlussraten haben? Ist das nur Ihre persönliche Meinung? Ich stimme Ihren Schlussfolgerungen zu, aber ich frage mich, ob das jemals von Jakob Nielsen oder anderen Usability-Gurus untersucht wurde. Danke.
Siehe auch diese Seite hier, die einige nützliche Dinge zu Label-Positionen enthält
http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
Hier gibt es eine Fortsetzung
http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
Bibble.
Guter Artikel, aber ich möchte mehr darüber erfahren, wie Sie Fehler in Ihren Formularen behandeln, wie z. B. wo Sie Fehlermeldungen platzieren, ob Sie fehlerhafte Felder hervorheben, ob Sie dem Benutzer einfach mitteilen, dass das Feld fehlerhaft ist, oder ob Sie ihm mit einem Formatbeispiel helfen...
Danke
Dieser Artikel scheint aus Luke Wroblewskis neuem Buch „Web Form Design“ entnommen worden zu sein. Es wäre schön gewesen, wenn er zumindest eine Anerkennung erhalten hätte, falls dies der Fall war...
@Lee: Ja, viele Informationen zu dieser Idee stammen aus Lukes Buch. Deshalb steht im Artikel: *„Viele dieser Ideen stammen aus Luke Wroblewskis fantastischem Buch Web Form Design“*.
Wie immer ein guter Lesestoff.
Ich frage mich jedoch, was Sie mit „Schlechte Mehrsprachigkeit“ meinen. Ich muss Websites meist von Englisch nach Arabisch übersetzen. Man muss nur die Labels und Felder umdrehen und dann die Textausrichtung einstellen, das ist also ziemlich einfach.
Ich persönlich mache bei allen großen Projekten immer zwei Arten von Formularen und nenne eines .block_forms, bei dem die Labels oben ausgerichtet sind, und das andere .inline_forms, bei denen die Labels entweder rechts oder links ausgerichtet sind. Das erweist sich als praktisch, wenn das Projekt an die Entwicklung übergeben wird und diese ihre eigenen Entscheidungen treffen und Sie die Kontrolle über einige, wenn nicht alle Entscheidungen verlieren. Und es erfordert nicht viel CSS, um beides zu tun.
Anstatt nur die Ergebnisse der Eyetracking-Studie zu kopieren und neue Grafiken basierend auf Lukes Diagrammen zu erstellen, wie wäre es, der Diskussion Mehrwert zu bieten, indem Tipps zur semantischen Layoutgestaltung von Formularen gegeben werden? Das Vergraben der Links zur Quelle Ihres gesamten Beitrags am Ende impliziert, dass Sie die gesamte Recherche durchgeführt haben und Ihnen alles einfach so eingefallen ist. Geben Sie an prominenterer Stelle die verdiente Anerkennung und fügen Sie der Diskussion Mehrwert hinzu.