EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Components    3.7.Forms

3.7.Forms

Forms are the most common component used to request information from users. Usually, multiple inputs are grouped into a form-group which can be submitted by a button. Users should be able to fill the forms quickly and easy.

3.0.Components      3.7.Forms      3.7.1.Usage

3.7.1.Usage

Forms should be as obvious as possible. It should take as little as possible to understand the tasks and to fill the presented fields.

Have the following guidelines in account when starting your design:

  • It is important that the questions/fields have a logical sequence from a user's perspective (as opposed of a database logic).
  • Group related information - use logical blocks or sets. The flow from one set or block help better resemble a conversation and will help users make sense of the information they must fill in.
  • Avoid using multi-column layouts on mobile devices - single-column forms are better for usability because of limited screen size. On desktop computers two-column forms can be used.
  • Match the fields size with fixed input length - users start wondering if there is a misunderstanding when there is an apparent mismatch.
  • Distinguish between optional and required fields - use the standard asterisk (*) to mark the mandatory fields.
  • Smart defaults - anticipate frequently selected items and make data entry easier for the user by providing fields with pre-populated smart default values.
  • Don´t use placeholder text - it creates frustration and insecurity. Keep the label always visible and on top left of the fields.
  • Use Sentence case - it provides a better user experience as its easier to scan and shows less inconsistency.
  • Validate field upon completion - provide real-time feedback as people fill in the fields, using lightweight and direct success messages.
  • Provide field-specific error message - use inline error messages to inform the user what the error is so its easier to fix.
  •  

     

Some Image
Illustration

Example of text fields used at Daimler

    Some Image
    Illustration

    Style used on mobile applications