Skip to end of banner
Go to start of banner

Wizard

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 32 Next »

Description

A wizard is a step-by-step dialog which allows users to perform a set of actions in a predefined order, in order to accomplish a goal.

Steps (sub-pages within the wizard) may depend on previous steps, may be non-mandatory, and may be skipped according to previous selections.

Usage & Behavior

General guidelines

Structure

Element

Details

Images

Header

  • The header describes the Wizard’s purpose and expected results.

Steps navigation panel

  • Shows all of the steps in the wizard.

  • Indicates which step the user is currently on, and the steps which have already been covered.

  • Enables jumping between steps.
    This differs between Create and Edit modes. See Interaction below.

Step content area

  • Displays relevant content for the selected step, including a step header, input fields, and content to support decisions.

  • The content area contains a form which can include all input fields types, such as Radio buttons, Check Boxes, and Drop-down Menus.

Actions Row

  • Contains Previous and Next Dialog Buttons.

  • In the last step, the Next button will change to show the final action which will occur. For example, Create statistic Set.

  • In the first step, the Back button will be disabled.

  • Additional action buttons may be included.

  • If one of the fields contains an error, the Next button will be disabled and a guiding message will be shown.

Placement and Positioning

The Popup should be in the center of the screen.

Default State

Open on the first step in the steps navigation, with the first field in focus.

Content

The content is divided into steps.

Each step contains a form which can include all input fields types, such as Radio Buttons, Check Boxes, and Drop-down Menus.

Internal Logic

Step = Inner sub page

  • The user can cancel and exit the wizard at any time before pressing the last confirmation in the last step. All selections and actions inside the wizard will be canceled.

  • The Wizard control can be entered in Create or Edit modes. See Interaction below.

States

Step navigation states.

Currently selected step

Previous steps which have already been covered

Uncompleted steps

Interaction

A Wizard can be entered in two modes:

  • Create mode. No fields have previously been completed. Steps must be updated in the predefined order.

  • Edit mode. Fields have previously been completed, and the user may move freely between the steps using the navigation panel.

1. First step

  • The first step is selected in the navigation panel.

  • The Back button is disabled.

  • In Edit mode, any step can be selected from the left-hand navigation panel.

2. Middle steps

  • The relevant step is selected in the navigation area.

  • It should be possible to return to any previous step using the navigation panel.

  • Navigating to an earlier step shows the choices and content the user has previously entered, which can all be changed or edited.

  • If the user navigates to an earlier step and doesn’t change anything, all of the content for the steps which have already been completed will remain the same.

  • If the user navigates to an earlier step and changes something, it may clear or invalidate other choices within this step or other steps, where there are dependencies. All other choices and content should remain the same.

  • In Edit mode, any step can be selected from the left-hand navigation panel.

3. Last step

  •  Where relevant, show a summary of what is about to be created or updated.

  • The Next button will change to show the final action which will occur. For example, Create statistic Set.

  • After the wizard has been completed, a success or failure message should be shown in a Toast.

  • In Edit mode, any step can be selected from the left-hand navigation panel.

Validations and errors

Validations are shown inside each step, both for individual fields and the entire step as a whole. See Field Validation.

Transitions

  • When moving between steps, a transition will be used in the navigation panel, if technically possible.

Best practices

  • The number of steps should be between 3 and 7, for readability and ease of use.

  • Provide the user with enough information to make decisions and act on them.

  • The title of each step should be short and clear, and describe the step’s purpose.

  • Each step should present a brief explanation of its purpose at the beginning.

  • Use defaults or predefined values where possible.

Use where:

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

  • users needs guided help.

  • steps are dependant on one another in a complex way.

Don’t use where:

  • the overall task isn’t complex.

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

Future Version (TBD)

  • Visual representation on warning in the navigation.

  • Wizard viewing mode.

  • Dynamic branching.

Accessibility compliance

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

Design

Zeplin link

Screen thumbnail

https://zpl.io/bW6oWKa


Code







  • No labels