Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
6.0.Komponenten    6.8.Textfelder/Formular-Elemente

6.8.Textfelder/Formular-Elemente

6.0.Komponenten      6.8.Textfelder/Formular-Elemente      6.8.1.Textfelder

6.8.1.Textfelder

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

Some Image
Abbildung

Darstellung klassischer Textfelder

  • Download
  • 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 Alternative 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.
  • Bei allen Textfeldern ist insbesondere auf die Themen „Raster“ und „Labels“ zu achten.
  • Labels sollten über dem Texteingabefeld stehen.
  • Ebenfalls zu beachten sind die Themen „Pflichtfeldmarkierung“ sowie „Validierung“.
  • Die Länge des Textfeldes sollte ein Indikator sein für den Umfang des erwarteten Inputs (z.B. die Eingabe der Postleitzahl sollte in etwa so breit sein wie die fünf Ziffern, während der Ort eher bis zu 15 Zeichen Breite andeuten sollte.
  • Die Applikation soll visuelle Hinweise auf die aktuelle Eingabestelle geben (z.B. durch Markierung, Farbe, Cursorblinken, Mauscursor etc.).
  • Mit dem HTML-Attribut „title“ sollte hinterlegt werden, welches Format für die Eingabe erwartet wird (Beispiel Geburtsdatum: „ttmmjj“). So werden Falscheingaben pro aktiv vermieden.
  • Wenn es bei längeren Textfeldern eine Zeichenbeschränkung gibt, sollte dies sichtbar für den Anwender sein. Zum Beispiel durch die Angabe „noch 234 Zeichen“, die während der Eingabe entsprechend reduziert wird.

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

 

Usability-Hinweis

  • Da die Formularbezeichnungen im Grunde eine der wenigen Möglichkeiten sind, innerhalb einer Applikation mit dem Benutzer in einen Dialog zu treten und mitzuteilen, was eigentlich erwartet wird, sollte auf die Genauigkeit und Einheitlichkeit der Bezeichnungen großer Wert gelegt werden, z.B. keinen Sprachmix innerhalb der Bezeichnungen zu verwenden oder Wörter einfach aus dem Online-Übersetzer zu übernehmen.
  • Grundsätzlich sollten Feldbezeichnungen möglichst kurz sein; gegebenenfalls ist auf Tooltips oder Vorbelegungen („Watermarks“) zurückzugreifen.

6.0.Komponenten      6.8.Textfelder/Formular-Elemente      6.8.2.„Watermarks“ bzw. „Placeholder“

6.8.2.„Watermarks“ bzw. „Placeholder“

Mit „Watermarks“ werden üblicher Weise Widgets bezeichnet, die ein Formularfeld mit einer bestimmten Information vorbelegen. Dieses „Wasserzeichen“ ist jedoch keine Vorbelegung im eigentlichen Sinn, sondern liefert nur eine Hilfestellung zur Befüllung des Feldes (z.B. „TT.MM.JJJJ“) und wird beim Klick auf das Eingabeelement ausgeblendet. Fertige Watermark-Widgets haben den Vorteil, dass diese nur als ein Layer quasi über das Formularfeld gelegt und nicht in dieses hineingeschrieben werden und somit einer ggf. Pflichtfeldvalidierung nicht ins Gehege kommen.

6.0.Komponenten      6.8.Textfelder/Formular-Elemente      6.8.3.Standard HTML-Formularelemente

6.8.3.Standard HTML-Formularelemente

Prinzipiell verfügen die Standard-HTML Elemente wie Radiobutton, Checkbox oder Dropdownlist über geringe bis gar keine Gestaltungsmöglichkeiten (es sei denn, diese Funktionen werden z.B. mittels einer Javascript-Library oder speziellen Widgets nachgebaut).

Generell kann hiervon aber abgesehen werden und es sollten die Standard-Elemente ohne weitere Formatierung derselben verwendet werden.

Some Image
Abbildung

Die HTML-Elemente Radiobutton, Checkbox, Dropdownliste und Listbox.

    6.0.Komponenten      6.8.Textfelder/Formular-Elemente      6.8.4.Vorschau auf den Relaunch der neuen www.daimler.com

    6.8.4.Vorschau auf den Relaunch der neuen www.daimler.com

    Die folgende Vorschau zeigt einen Vorgeschmack auf die neue visuelle Sprache der www.daimler.com. Zum derzeitigen Stand (01.12.2017) der Dinge sind bestimmte Teilbereiche der Webpräsenz bereits in dieser Optik umgesetzt, andere Bereiche werden nachgezogen und Stück für Stück ersetzt.

    Some Image
    Abbildung

    Darstellung der Textfelder im neuen Design

      Usability-Hinweis

      • Für die Beschriftung aller Elemente, insbesondere Radiobuttons und Checkboxen, ist zwingend das „label“-Element zu verwenden und auf das Formularelement zu referenzieren. Dadurch lässt sich ein Element auch durch Anklicken des Beschriftungstextes auswählen und nicht nur durch Anklicken des Elements selbst, wie z.B. der Checkbox.
      • Bei allen Standard-Formularelementen ist insbesondere auf die Themen „Raster“ und „Labels“ zu achten.
      • Radiobuttons sind dann zu verwenden, wenn wenige Wahlmöglichkeiten vorhanden sind (Richtwert: bis zu vier), jeweils nur eine Option wählbar ist und explizit ausgeschlossen werden soll, dass mehr als eine Option selektiert wird.
      • DropDown-Listen sind zu verwenden, wenn mehr als vier Wahlmöglichkeiten vorhanden sind und jeweils nur eine Option gewählt werden soll.
      • Checkboxen sind zu verwenden, wenn wenige Wahlmöglichkeiten vorhanden sind (Richtwert: bis zu 12) und mehrere Option gewählt werden können.