...
| 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 existing buttons withinshowing 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 "\[change\]" link and the "order" buttonedge of the form frame. Any shown [notification|#Notifications] would isbe shown after the space, but still before the buttonsedge. |
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
...
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.
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.