Project Description

Form Design

The more we drive tasks on the Internet, the more we find ourselves in form driven processes.

Using a structured, progressive story line in form design means users can quickly complete forms, even with regular interruption.

A vertical progression means the form can easily be transferred onto a responsive device.

Labels above input boxes means we leave ample space for language changes.

What we chose to achieve with this design:

  • Clear step driven progression
  • Highlighted steps
  • Selectable completed steps (but greyed out)
  • Instant understanding of potential duration
  • Clear and meaningful headers
  • Clear and simple input descriptions
  • Input names can easily grow (multi-language support)
  • Clear differentiated submission and cancel buttons to end progression

Example 1 is the Report on arriving at the form and filling in step 1.


Example 2 shows the task progression highlights.

As we progress along the form the content we have provided that completes a step “greys out” and current working step is still highlighted.


Example 3 Shows the report completion.