| Uxstatus | ||||
|---|---|---|---|---|
| ||||
Goal
A multi-step process requires filling out several 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.
Concept
| Mockup | ||||||||
|---|---|---|---|---|---|---|---|---|
|
...
|
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.
...
Each step also may also provide a help button offering additional information about the values 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, install an additional help page through the help button. This page simply takes over the space of the dialog box to provide its text.
Validation messages
Please refer to concept for showing validation messages in forms.
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:
...
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. If a dialog chooses to not reduce its height, the superfluous space is added between the last field of a form and any possibly showing notification message or else above the bottom edge of the form frame. E.g. in case of step 3 in the mockup above, this space would be added between the "[UX:change]" link and the edge of the form frame. Any shown UX:notification would be shown after the space, but still before the edge.
| Mockup | ||||||||
|---|---|---|---|---|---|---|---|---|
|
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 UX:review step, an explicit "cancel" button next to the confirmation button must be present.
Additional notes
If presented in a dialog, the form is embedded in a colored frame, which contains all controls for navigation between steps. It also contains any buttons for submitting the form, cancel submission in a review step or closing a help screen. The form box should focus on content, the frame on control. If the form is presented on a page directly, leave out the frame, but still ensure that the form itself resides in a box and the controls are arranged around it using a layout much like in case of the dialog.