EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
6.0.Components    6.8.Text areas / form elements

6.8.Text areas / form elements

6.0.Components      6.8.Text areas / form elements      6.8.1.Text fields

6.8.1.Text fields

In the context of this style guide, we recommend that generally all labels be placed above the input elements on standard forms.

Some Image
Illustration

Example of typical text fields

  • Download
  • Placing the name and input element close together allows the form to be accessed and completed quickly.
  • So forms can be designed very well within a fixed grid.
  • Because there is more space for the label text, this option is the most suitable one for localized applications. The layout of forms is often very tight in one language, causing problems with the layout in other languages when the lengths of the words change. This risk is minimized by placing the label above the input element.
  • The only disadvantage is that more vertical space is needed.
  • The alternative is to align it to the left, with the label to the left of the field instead of above it.Because user tests have shown that this layout requires somewhat more time we recommend that only, for example, settings that are rarely accessed, such as profile or system settings, which do not have to be filled in as quickly as possible but just need a brief thought, use the left-aligned option.
  • Whether left-aligned or placed above, within the same form all labels must be uniform.
  • For all text fields, pay particular attention to the issues of the grid and labels.
    Labels should be placed above the text entry field.
  • The issues of mandatory fields and validation should also be kept in mind.
  • The length of the text field should be an indicator of the length of the expected input (e.g. fields for postal codes should be long enough for five digits, while fields for cities or towns should be up to 15 characters long).
  • The application should provide visual information about the current entry position (e.g. through highlighting, a color, cursor flashing, mouse cursor, etc.).
  • The HTML attribute "title" should be used to indicate the format expected for the entry (e.g. date of birth: "mmddyyyy"). This prevents incorrect entries.
  • If there is a character limit for longer text fields, this should be clear to the user. For example, by displaying a message such as "234 characters remaining" and decreasing it accordingly as the user types the entry.

In the context of this style guide, we recommend that generally all labels be placed above the input elements on standard forms.

Usability hint

  • Because the form names are generally one of the few ways to maintain a dialog with the user within an application and to communicate what is expected, it is very important for names to be accurate and uniform. For example, names should not combine words from different languages, or simply take words from an online translation tool.
  • In general, field names should be as short as possible; if necessary, use tooltips or watermarks.

6.0.Components      6.8.Text areas / form elements      6.8.2.Watermarks and placeholders

6.8.2.Watermarks and placeholders

Watermarks typically refer to widgets that prefill a form field with certain information. The field is not prefilled with the actual information, but rather an indication of what information is required in the field (e.g. "MM/DD/YYYY"), which disappears when the entry element is clicked. The advantage of ready-made watermark widgets is that they can simply be placed over the form field and do not have to be written into it. This prevents problems with mandatory field validation.

6.0.Components      6.8.Text areas / form elements      6.8.3.Standard HTML form elements

6.8.3.Standard HTML form elements

In general, standard HTML elements, such as radio buttons, checkboxes and dropdown lists have little to no design options (unless these functions are re-engineered using a Javascript library or special widgets).

However, this should generally be avoided and the standard elements used without additional formatting.

Some Image
Illustration

The radio button, checkbox, dropdown list and listbox HTML elements

    6.0.Components      6.8.Text areas / form elements      6.8.4.Preview of the relaunch of the new www.daimler.com

    6.8.4.Preview of the relaunch of the new www.daimler.com

    The following preview provides a taster of the new visual language of www.daimler.com. For the current date of revision (01.02.2018) certain sections of the website have already been implemented in this look, and other sections will follow and be replaced one by one.

    Some Image
    Illustration

    Example of the textfields in the new design

      Usability hint

      • The "label" element must be used and the form element referenced for the labels of all elements, especially radio buttons and checkboxes.This makes it possible to select an element by clicking on the label text and not the element itself, such as the checkbox.
      • For all standard form elements, pay particular attention to the issues of the grid and labels.
      • Radio buttons should be used if there are few selection options (generally, up to four), only one can be selected and selecting more than one option is explicitly excluded.
      • Dropdown lists should be used if there are more than four selection options and only one option should be selected in each case.
      • Checkboxes should be used if there are few selection options (generally, up to 12) and several options can be selected.