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 themEach 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>>
| Table of Contents |
|---|
Description
A wizard is a step-by-step process, allowing users to perform a set of actions in a predefined order, in order to accomplish a goal. It may appear in a dialog or within a workspace.
...
Usage & Behavior
General guidelines
Wizard steps may:
be mandatory or non-mandatory,
depend on previous steps,
be skipped according to previous selections.
A Wizard has two possible modes:
Create mode - where the wizard is entirely new, i.e. no fields have previously been filled in. In this case, steps must be completed in the predefined order.
Edit mode - where fields have previously been filled in. In this case, the user may move freely between steps using the navigation bar (see below).
Structure
Element | Details | Images |
|---|---|---|
Header (In case of a dialog) |
|  |
Navigation bar |
|  |
Content area |
|  |
Actions Row |
|  |
Default State
By default, the wizard will show the first step, with the first field in focus.
States
Step navigation states:
Currently selected step |  | |
Last step selected |  | |
Previous steps which have already been covered |  | |
Uncompleted steps |  | |
Hover |  | |
Active |  | |
Selected Hover |  | |
Focus |  | |
Focus Hover |  | |
Focus Selected |  |
Interaction
On the navigation panel, the user can only select steps that were already filled in. Selecting a step shows the content of that step and updates the navigation panel accordingly.
Clicking the Next button saved the data and goes to the next step. In this case, both the content and the navigation bar are updated.
Clicking the Back button saves the data (without triggering a mandatory field validation), and goes to the previous step.
...
On the last step, clicking the primary button:
performs the wizard action,
either:
closes the dialog (or goes to the initial page), and shows a success (or failure) toast,
goes to a final step showing the results.
...
If the wizard appears in a dialog, clicking the X button on the header will close the dialog, without saving its content. In this case, a confirmation popup may appear.
Validations and errors
Each step of the wizard behaves as a separate form, where both client-side and server-side validations may occur.
For detailed information about form validations, see Forms Validations and Errors.
For detailed information about specific component’s validations, see Field Validation.
...
Transitions
When moving between steps, a transition should be used on both the navigation bar and the content area to illustrate the flow.
Best practices
Use where:
object creation or editing may be complex and needs to be divided into steps.
users needs guided help.
steps are dependant on each other in a complex way.
Don’t use where:
the overall task isn’t complex (less than 3 steps).
advanced users might be frustrated by a wizard, which can be rigid and limiting.
General
The number of steps should be between 3 and 7.
On each step:
keep the wizard title short and informative,
include a brief explanation at the top, describing the purpose of the step,
set the focus to the first field,
provide the user with enough information to make decisions and act on them,
use default values where possible.
On the last step show a summary of what is about to be created or updated.
Where possible, save user input when leaving a step or in case of a wizard submission failure.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Code
| Html macro | ||
|---|---|---|
| ||
<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> |