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 31 Next »

Description

A wizard is a step-by-step dialogue which allows users to go over or perform actions in a predefined order to accomplish a goal. 

Steps (inner sub pages) may depend on previous ones, may be non-mandatory, and can be skipped according to previous selections.

Usage & Behavior

General guidelines

Structure

Structure Element

Description

Appearance

Header

  • The header describes the Wizard purpose and results

steps navigation

  • Presents all the steps in the wizard

  • Presents indication of which step the user is currently on, and steps were already covered

  • Enables jumping between steps (differs in create and edit modes, see below in ‘Interactions’ section)

Step content area

  • Presents relevant content for the selected step, including input fields and content to support decisions

  • The content area contains a form <link to ‘Form’ page when ready>

Actions Row

  • Contains ‘Previous’/'Next' buttons, In the last step the ‘Next’ button’s caption changes to represent the action which will occur (i.e.- ‘Create statistic Set’)

  • May include additional action buttons as well

  • If one of the fields contains an error the ‘Next’ button will be disabled and present a guiding message

Placement and Positioning

Popup in the center of the screen

Default State

Focus on first step in the steps navigation, first field focused

Content

The content is divided into steps

Each step is a form like which can include all input fields types, such as Radio buttons and drop downs, <link to ‘Form’ page when ready>

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, and all his selections and actions inside the wizard will be canceled

  • The Wizard control can be entered in ‘Create’ or ‘Edit’ modes (see below)

States

Step indication states:

Currently selected step

Previous step which was already covered

Uncovered step

Interaction

1. First step

  • First step is selected in the navigation area

  • Back button disabled

  • On edit mode - navigation through left side is open to any step

2. Inner steps

  • Relevant step is selected in the navigation area

  • All previous steps should be available to navigate back to from the navigation area

  • Navigating to an earlier step displays the content as the user entered, while letting the user change an earlier choice

  • If the user navigated to an earlier step and didn’t change anything all the content of the step and the steps he already filled will remain as he filled

  • If the user navigated to an earlier step and changed something in the content it may clear other selections he did on this or other step which depended on that specific selection, while keeping the rest as they are

  • On edit mode - navigation through left side is open to any step

3. Closing step

  •  When relevant show a summary of what is about to be created

  • The ‘Next’ button’s caption changes to represent the action which will occur (i.e.- ‘Create statistic Set’)

  • After wizard has been completed a success/failure message (toast?) should be presented

  • On edit mode - navigation through left side is open to any step

Validations and errors

Validations are presented inside each step both in the field and entire step level, according to the fields validation presentation

Transitions

  • When moving between steps a transition in the navigation area will be presented, if technically possible

Best practices

  • Number of steps should be between 3 to 7 (for readability and ease of use)
    Provide the user enough information to make decisions and act on them

  • Each step should be clear in name and purpose

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

  • Use defaults or predefined values when possible 

Use Wizards when

  • Object creation/editing may be complex and require sub steps

  • Users needs guided help

  • Steps are depended on one another in a complex way

Don't use Wizards when

  • The task itself isn’t complex 

  • When the users are advanced and might be frustrated from using a wizard, they might find it rigid and limiting

Future Version (TBD)

  • Visual representation on warning in the navigation

  • Wizard viewing mode

  • Dynamic branching

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in Keyboard & Focus Management Guidelines >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design

Zeplin link

Screen thumbnail

https://zpl.io/bW6oWKa


Code







  • No labels