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.

Verint LUX Design System > Wizard > Wizard - 1st Step.png

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

Verint LUX Design System > Wizard > image-20200806-084820.png

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

Verint LUX Design System > Wizard > Wizard - Final Step.png

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

Verint LUX Design System > Wizard > Wizard - Error Step.png

Verint LUX Design System > Wizard > image2019-9-18_14-23-55.png

Verint LUX Design System > Wizard > image2019-9-18_14-24-58.png

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

<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">


<div class="card">
			<div class="card-header">Wizard <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<div class="form-group row">
					<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Wide Example</label>
					<div class="col-lg-4">
						<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#wideModal">Wide Wizard</button>
						<!-- Modal -->
						<div class="modal fade" id="wideModal" tabindex="-1" role="dialog" aria-labelledby="wideModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-dialog-sm modal-wide modal-dialog-centered modal-wizard" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="wideModalLabel">Wizard Name</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">×</span>
										</button>
									</div>
									<div id="collapseOne" class="collapse show" data-parent="#wideModal">
										<nav aria-label="breadcrumb">
										  <ol class="breadcrumb">
										    <li class="breadcrumb-item active" aria-current="page">First Wizard Step with some more</li>
										    <li class="breadcrumb-item">Second Wizard Step with some</li>
										    <li class="breadcrumb-item">Last Wizard Step with some more</li>
										  </ol>
										</nav>
										<div class="modal-body">
											<h5>First Wizard Step Header</h5>
											<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
											<form>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox1" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox1">Morbi in faucibus lorem</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox2" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox2">Aliquam sollicitudin</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox3" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox3">Curabitur volutpat nunc non magna</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox4" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox4">Nullam sed nunc auctor</label>
												</div>
											</form>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-light btn-fixed-width" disabled>Back</button>
											<button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Next</button>
										</div>
									</div>
									<div id="collapseTwo" class="collapse" data-parent="#wideModal">
										<nav aria-label="breadcrumb">
										  <ol class="breadcrumb">
										    <li class="breadcrumb-item complete">First Wizard Step with some more</li>
										    <li class="breadcrumb-item active" aria-current="page">Second Wizard Step with some</li>
										    <li class="breadcrumb-item">Last Wizard Step with some more</li>
										  </ol>
										</nav>
										<div class="modal-body">
											<h5>Second Wizard Step Header</h5>
											<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
											<form>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox5" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox5">Morbi in faucibus lorem</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox6" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox6">Aliquam sollicitudin</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox7" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox7">Curabitur volutpat nunc non magna</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox8" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox8">Nullam sed nunc auctor</label>
												</div>
											</form>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseOne">Back</button>
											<button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseThree">Next</button>
										</div>
									</div>
									<div id="collapseThree" class="collapse" data-parent="#wideModal">
										<nav aria-label="breadcrumb">
										  <ol class="breadcrumb">
										    <li class="breadcrumb-item complete">First Wizard Step with some more</li>
										    <li class="breadcrumb-item complete">Second Wizard Step with some</li>
										    <li class="breadcrumb-item active" aria-current="page">Last Wizard Step with some more</li>
										  </ol>
										</nav>
										<div class="modal-body">
											<h5>Last Wizard Step Header</h5>
											<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
											<form>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox9" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox9">Morbi in faucibus lorem</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox10" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox10">Aliquam sollicitudin</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox11" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox11">Curabitur volutpat nunc non magna</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox12" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox12">Nullam sed nunc auctor</label>
												</div>
											</form>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Back</button>
											<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">Finish</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#wideModal">Wide Wizard</button>
<!-- Modal -->
<div class="modal fade" id="wideModal" tabindex="-1" role="dialog" aria-labelledby="wideModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-sm modal-wide modal-dialog-centered modal-wizard" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="wideModalLabel">Wizard Name</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div id="collapseOne" class="collapse show" data-parent="#wideModal">
            <nav aria-label="breadcrumb">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item active" aria-current="page">First Wizard Step with some more</li>
                  <li class="breadcrumb-item">Second Wizard Step with some</li>
                  <li class="breadcrumb-item">Last Wizard Step with some more</li>
               </ol>
            </nav>
            <div class="modal-body">
               <h5>First Wizard Step Header</h5>
               <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
               <form>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox1" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox1">Morbi in faucibus lorem</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox2" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox2">Aliquam sollicitudin</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox3" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox3">Curabitur volutpat nunc non magna</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox4" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox4">Nullam sed nunc auctor</label>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-sm btn-light btn-fixed-width" disabled>Back</button>
               <button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Next</button>
            </div>
         </div>
         <div id="collapseTwo" class="collapse" data-parent="#wideModal">
            <nav aria-label="breadcrumb">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item complete">First Wizard Step with some more</li>
                  <li class="breadcrumb-item active" aria-current="page">Second Wizard Step with some</li>
                  <li class="breadcrumb-item">Last Wizard Step with some more</li>
               </ol>
            </nav>
            <div class="modal-body">
               <h5>Second Wizard Step Header</h5>
               <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
               <form>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox5" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox5">Morbi in faucibus lorem</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox6" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox6">Aliquam sollicitudin</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox7" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox7">Curabitur volutpat nunc non magna</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox8" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox8">Nullam sed nunc auctor</label>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseOne">Back</button>
               <button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseThree">Next</button>
            </div>
         </div>
         <div id="collapseThree" class="collapse" data-parent="#wideModal">
            <nav aria-label="breadcrumb">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item complete">First Wizard Step with some more</li>
                  <li class="breadcrumb-item complete">Second Wizard Step with some</li>
                  <li class="breadcrumb-item active" aria-current="page">Last Wizard Step with some more</li>
               </ol>
            </nav>
            <div class="modal-body">
               <h5>Last Wizard Step Header</h5>
               <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
               <form>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox9" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox9">Morbi in faucibus lorem</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox10" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox10">Aliquam sollicitudin</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox11" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox11">Curabitur volutpat nunc non magna</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox12" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox12">Nullam sed nunc auctor</label>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Back</button>
               <button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">Finish</button>
            </div>
         </div>
      </div>
   </div>
</div></script></code></pre>
					</div>
				</div>
			</div>
		</div>