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. 

...

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)	Image RemovedImage Added
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

...

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

...

States

Step indication states:

	Currently selected step
	Previous step which was already covered
	Uncovered step

Interaction

...

• 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

Image RemovedImage Added

• 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

...

• 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

...

• 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

...