Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
5.0.UI Patterns    5.2.Labels

5.2.Labels

Ein entscheidender Faktor für die Benutzerfreundlichkeit einer Anwendung ist die einheitliche Platzierung und Bezeichnung bzw. Beschriftung von Elementen.

5.0.UI Patterns      5.2.Labels      5.2.1.Platzierung

5.2.1.Platzierung

Im Rahmen dieses Styleguides wird die Empfehlung gegeben, bei Standard-Formularen grundsätzlich alle Labels oberhalb der Eingabeelemente zu platzieren.

  • Die enge Verbindung von Bezeichnung und Eingabeelement erlaubt ein zügiges Erfassen und Ausfüllen des Formulars.
  • Es lassen sich damit Formulare sehr gut innerhalb eines festen Rasters aufbauen.
  • Da mehr Platz zur Verfügung steht für den Labeltext, ist diese Variante am geeignetsten für lokalisierte Applikationen. Oftmals werden Formulare layoutmäßig "auf Kante" genäht in einer Sprache, und es zerschießt das Layout in anderen Sprachen sobald sich Wortlängen ändern. Diese Gefahr ist bei der oberen Anordnung minimiert.
  • Einziger Nachteil: Es wird vertikal mehr Platz benötigt.
  • Die Altenative wäre die "linksbündige Variante", hier steht das Label nicht oberhalb des Feldes, sondern links davon. Da bei den Benutzertests die linksbündige Variante etwas mehr Zeit benötigte, wird empfohlen, bei z.B. Einstellungen, die nur selten aufgerufen werden, z.B. Profil- oder Systemeinstellungen, bei denen es nicht darum geht, möglichst rasch auszufüllen, sondern "kurz nachzudenken", die linksbündige Variante zu verwenden.
  • Innerhalb eines Formulars sind Labels - gleich ob linksbündig oder oberhalb - alle einheitlich anzuordnen.
  • Pflichtfelder sind prinzipiell nicht anders zu formatieren als optionale Eingabefelder, sondern lediglich durch einen roten Stern ("Asterisk") zu kennzeichnen. Dieser steht hinter dem Label, nicht davor, damit die Lesbarkeit nicht beeinträchtigt wird.