Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Added: text for review step, adapted others

...

Do not use such a form, if your form actually does not contain multiple, interdependant steps. Use a [single-page complex form|Modelling a complex form in such a case, or introduce tabs to break up your form into multiple parts. Tabs allow to change between any element more freely.

Multiple steps

A series of dots visualises the total number of steps required to complete the process, with a highlighted dot showing the user, at which step in the process he currently is. Note that the dots can't be clicked to directly jump to a particular step.

The "next" button allows to move on to the next step. It may be temporarily disabled, if the user is required to fill out values in the form of the current step first. Likewise, a "previous" button allows to go back in the process one step a time. In general, both buttons should simply be labelled "next" and "previous" to guarantee they are recognized easily. Only in the optional "review" step, the "previous" button should actually be labelled such that it is clear that the user returns into the process by clicking it.

Each step also may also provide a help button to provide offering additional information about the values he a step collects. Try to make it clear , what you expect from the user , by providing a good, initial description and clear labels in the form. If you'd like to provide an overall explanation of a step or some additional details on some or all of the fields, provide install an additional help page through the help button. This page should simply take takes over the space of the dialog box to provide its text.

Optional steps

Optional steps extend a multi-step process. We do not define how to enter such a step as it makes sense to pick the best solution (a button, a link or even an icon) according to context. If the user chooses to enter an optional step:

  • the series of dots is expanded by one or more dot representing the optional step(s)
  • the buttons available in the optional step are inherited from the parent step, if it makes sense
  • the optional step is then treated just as any other step in the process. It is not removed again, nor does it have to be entered again using the original button, link or icon. It has merely become part of the regular multi-step process. Thus, the next/previous buttons are adjusted to also work with this additional step.

Review step

If the data a user has to enter is complex, add a review step at the end of your process. It should clearly show all data the user has entered in every step and contain one button for confirmation as well as one well-labelled button to reenter the process again.

Growing and shrinking dialogs

Aborting a process