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 (suba set of actions in a predefined order, in order to accomplish a goal.

Image Added

Usage & Behavior

General guidelines

• A wizard can appear on either a dialog or a page.

• Sub-pages within the wizard (steps) may:

  • depend on previous steps,

  • may be mandatory or non-mandatory,

...

• • may be skipped according to previous selections.

Image Removed

Usage & Behavior

...

• A Wizard can be entered in one of these modes:

  • Create mode. The wizard is entirely new: no fields have previously been filled in. Steps must be completed in the predefined order.

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

Structure

Element	Details	Images
Header	The header describes the Wizard’s wizard’s purpose and / expected results.	In case of a dialog box:
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 Back and Next Dialog Buttons. In the first step, the Back button will be disabled. 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.

...

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.

...

Default State

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

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.

Interaction

A Wizard can be entered in two different modes:

• Create mode. The wizard is entirely new: no fields have previously been filled in. Steps must be completed 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.

• 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

• modes. See Interaction below.

States

Step navigation states:

Currently selected step	Image Added
Last step selected
Previous steps which have already been covered	Image Added
Uncompleted steps	Image Added
Hover
Active
Selected Hover
Focus
Focus Hover
Focus Selected

Interaction

1. First step

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

2. Middle steps

...

• 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.

...