Um benutzerfreundliche Applikationen zu entwickeln, sollte die User Experience von Anfang an berücksichtigt werden. Ein Aspekt davon ist die richtige Platzierung der Feldbezeichnungen.
Formulare sind omnipräsent, sie sind ein integraler Bestandteil jeder Applikation und nehmen auch auf Webseiten ein wichtige Rolle ein. Deshalb lohnt es sich, Formulare sorgfältig zu gestalten und das vorhandene Optimierungspotential auszunutzen. Einer Frage, die sich in diesem Zusammenhang stellt, möchten wir heute auf den Grund gehen:
Wo positioniert man Labels in Webformularen?
Für Labels ins Webformularen gibt es drei Lösungen, die üblich sind. Dabei bringt jede Lösung Vor- und Nachteile mit sich:
Labels oberhalb der Eingabefelder
Copyright: Rosenfeld media CC Attribution Share-Alike, Web Form Design
- Die Zuordnung von Labels und Eingabefeldern ist leicht erkennbar
- Die Labels können problemlos beliebig lang oder kurz sein
- Das Formular benötigt viel Platz in der Horizontalen
Labels linksbündig neben den Eingabefeldern
Copyright: Rosenfeld media CC Attribution Share-Alike, Web Form Design
- Spart Platz im Vergleich zur oben stehenden Lösung
- Die Labels sind leicht zu “scannen”
- Allerdings ist die Zuordnung von Labels und Formularfeldern weniger gut, weil der Abstand zwischen Label und Feld manchmal recht gross wird
Labels rechtsbündig neben den Eingabefeldern
Copyright: Rosenfeld media CC Attribution Share-Alike, Web Form Design
- Platzsparend
- Die Zuordnung von Labels und Feldern ist einfach zu erkennen
- Im Vergleich zur linksbündigen Version sind die Labels etwas schwieriger zu “scannen”
Welche Variante ist also nun die Beste?
Die Formularvarianten haben ihre Stärken und Schwächen, deshalb empfehlen wir für verschiedene Situationen auch verschiedene Lösungen:
- Als Standard empfehlen wir die Variante mit rechtsbündigen Labels. Diese bietet eine gute Verbindung von Label und Feld ohne viel Platz zu beanspruchen.
- Formulare, die von einer Person nur selten ausgefüllt werden oder komplex und umfangreich sind, können von Labels oberhalb stark profitieren. Personen können so ein Formular schön von oben nach unten abarbeiten, für gute ausführliche Labels und Erklärungen ist genug Platz.
- Formulare mit linksbündigen Labels empfehlen wir nur für ganz spezifische Fälle. Sie eignen sich, wenn Personen nur Teile eines Formulars ausfüllen und deshalb das Scannen des Formulars möglichst einfach sein soll. Das typische Beispiel hierfür ist ein komplexes Suchformular, bei dem ich nur einzelne von vielen Feldern ausfülle.
- Auf Mobile steht in der Breite wenig Platz zur Verfügung. Vertikal verfügen wir über mehr Platz und das Scrolling in der Vertikalen fällt leicht. Deshalb bieten sich hierfür am ehesten Labels oberhalb der Formularfelder an. Dies lässt sich auch mit Responsive Web Design sehr gut und einfach umsetzen.
Fragen? Unsere Spezialisten helfen gerne
Das richtige Platzieren der Feldbezeichnungen ist nur ein Thema bei der Konzeption und Gestaltung von Websites und -pages. Unsere Spezialisten von We are Cube helfen Ihnen bei der Konzeption Ihrer Software oder bieten Kurse zu den Best Practices im Interaktionsdesign und User Centered Mobile Development an.