...
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.
...
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.unmigrated-wiki-markup
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|#Notifications] 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.
...