Page History

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.

...

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.

Notifications

Validation messages

Please refer to concept for showing Messages such as (optional) description of fields as well as warning and error messages are shown right above the bottom edge of the form. See an example below and refer to Showing validation messages in forms for the complete picture.

...

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:

...

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.

Wiki MarkupDialogs 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 existing buttons within the form frame. 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 "order" button. Any shown [notification|#Notifications] is shown after the space, but still before the buttonsthe edge of the form frame. Any shown UX:notification would be shown after the space, but still before the edge.

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

The form features a If presented in a dialog, the form is embedded in a colored frame, which contains all controls related to movement for navigation between steps and aborting the process itself. It also contains the title of the task the user would like to achieveany 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.