...
A multi-step process requires filling out several sub forms in sub 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, then continue forward again to complete the task.
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
...
Do not use such a form, if your form actually does not contain multiple, interdependant interdependent 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 visualizes 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.
...
Growing and shrinking dialogs
As forms may have different heights, a dialog box has to adjust its height to accommodate them. It is undesirable to have scrollbars in a form - break up the form into different parts using tabs or a single-page complex form.
Dialogs shall immediately grow to fit the height of the form of the current step. In order to avoid too much jiggle in the user interface, however, a form only decreases in height, if the form it has to accommodate is smaller than two thirds its current height.
Aborting a process
If a multi-step process is shown using a dialog - either an overlay dialog or a dialog in a separate window -, the way to stop and exit the process is to click the "close window" button in the upper right corner. If a form offers a clear choice, however, to confirm the data entered so far, such as is the case in the review step, an explicit "cancel" button next to the confirmation button must be present.