You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

Goal

A multi-step process requires filling out several sub forms in steps in order to complete a complex task. The steps follow and actually depend on each other.

It should be clear at any time at which step of the process I am. It should also be possible to return to a previous step and change data entered there.

Please configure the Balsamiq Wireframes macro and select the wireframe to show. Learn more

Concept

We use a wizard-style sequence of forms to model a multi-step process. Such an implementation is well established. It is also clear, if each steps focuses on one particular, conceptually simply action.

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.

Each step also may also provide a help button to provide additional information about the values he collects. Try to make it clear, what you expect from the user, by providing a good 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 an additional help page through the help button. This page should simply take over the space of the dialog box to provide its text.

Optional steps

Growing and shrinking dialogs

  • No labels