Description

A wizard is a step-by-step process, allowing users to perform a set of actions in a predefined order, in order to accomplish a goal. It may appear in a dialog or within a workspace.

Open

Usage & Behavior

General guidelines

• Wizard steps may:

  • be mandatory or non-mandatory,

  • depend on previous steps,

  • be skipped according to previous selections.

• A Wizard has two possible modes:

  • Create mode - where the wizard is entirely new, i.e. no fields have previously been filled in. In this case, steps must be completed in the predefined order.

  • Edit mode - where fields have previously been filled in. In this case, the user may move freely between steps using the navigation bar (see below).

Structure

Element	Details	Images

Element	Details	Images
Header (In case of a dialog)	The header describes the wizard’s purpose / expected results, and the name/ID of the object that the wizard operates upon (if one exists).	Open
Navigation bar	Shows all of the steps in the wizard. Indicates which step the user is currently on, and the steps which have already been covered.
Content area	Displays content relevant for the selected step, including a title, a Form, and additional content to support decisions. The Form may include a variety of input fields types, such as Radio Buttons, Checkboxes, and Drop-down Menus.
Actions Row	On each step, the actions row will include at least two Dialog Buttons: Back (secondary) and Next (or other primary). On the first step, the Back button is disabled. On the last step, the primary button will show the final action that will occur (e.g. Create statistic Set). Additional buttons may also be included. If one of the fields contains an error, the primary button will be disabled and an error message will be shown (see validations and errors below).

Default State

By default, the wizard will show the first step, with the first field in focus.

States

Step navigation states:

Interaction

• On the navigation panel, the user can only select steps that were already filled in. Selecting a step shows the content of that step and updates the navigation panel accordingly.

• Clicking the Next button saved the data and goes to the next step. In this case, both the content and the navigation bar are updated.

• Clicking the Back button saves the data (without triggering a mandatory field validation), and goes to the previous step.

• On the last step, clicking the primary button:

  • performs the wizard action,

  • either:

    • closes the dialog (or goes to the initial page), and shows a success (or failure) toast,

    • goes to a final step showing the results.

• If the wizard appears in a dialog, clicking the X button on the header will close the dialog, without saving its content. In this case, a confirmation popup may appear.

Validations and errors

• Each step of the wizard behaves as a separate form, where both client-side and server-side validations may occur.

• For detailed information about form validations, see Forms Validations and Errors.

• For detailed information about specific component’s validations, see Field Validation.

Transitions

• When moving between steps, a transition should be used on both the navigation bar and the content area to illustrate the flow.

Best practices

Use where:

• object creation or editing may be complex and needs to be divided into steps.

• users needs guided help.

• steps are dependant on each other in a complex way.

Don’t use where:

• the overall task isn’t complex (less than 3 steps).

• advanced users might be frustrated by a wizard, which can be rigid and limiting.

General

• The number of steps should be between 3 and 7.

• On each step:

  • keep the wizard title short and informative,

  • include a brief explanation at the top, describing the purpose of the step,

  • set the focus to the first field,

  • provide the user with enough information to make decisions and act on them,

  • use default values where possible.

• On the last step show a summary of what is about to be created or updated.

• Where possible, save user input when leaving a step or in case of a wizard submission failure.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Code