Usage
Approval is required to use this component.
Types of wizard navigation
The wizard can have a maximum of three levels, including the last level of navigation links.
The first and second levels have a minimum of two options and a maximum of nine. The last level has a minimum of one step and a maximum of nine. If there are more than nine options, an overflow link will be added to send the user to a page where they can view the full amount of options. This takes the user out of the drill-down journey, so try to limit the number of options for each level.
One step
A one step wizard will show the last step available. The options will be links.
Because the wizard was designed to allow the user to funnel down their options by traveling from one step to the next step, only use a one step wizard if the links are the most important thing on the page and if no other component can solve for this use case.
Two steps
A two step wizard will have one level of drill-down options and one level of navigation links.
Three steps
A three step wizard will have two levels of drill-down options and one level of navigation links.
Required elements
Title
This is the title of a step. This should be an h2 as the wizard should be the second most important thing on the page after the h1. Keep the title concise and descriptive; omit any marketing content that may not describe the step’s purpose clearly.
Back button
This will appear on all steps after the first step. This allows the user to go back to previous steps to change their decision.
Options
There are two kinds of options. Each step before the last step will have drill-down options. Drill-down options take the user to the next step, not to a new page.
The last step in the wizard should always contain navigation link options. These options will take the user to a new page.
Overflow link
This will appear if there are more than nine options in a step.
Optional elements
Depending on the wizard’s content, it might make sense to add or remove these elements.
Breadcrumb
This will appear above the step’s heading and will show the user’s previous choice or the step number. Using this breadcrumb will remind the user how they got to this step from the last one. If the user does not need to be reminded of previous selections, the breadcrumb can show the number of steps in the wizard. Remove if the drill-down flow is simple and doesn’t require this level of decision tracking or numbering.
Description
This will appear below the step’s heading and give the user a brief description of what the step is. Using a description can make the drill-down journey feel more friendly and give extra details that can’t fit into the step’s heading. Remove if the drill-down flow is simple and doesn’t require this level of description.
Responsive behavior
On smaller screens, the wizard content will stack vertically. Try to limit the number of options shown as the maximum of nine options can be tall on smaller screens.
Do:
- Get approval before designing or using this component
- Only use this component on a home page or a second level landing page
- Simplify the wizard journey as much as possible
- Use a wizard if there are a few different journeys a user could take to get to more specific or personalized locations
- Limit the number of options
Don't:
- Use a wizard without approval
- Use a wizard if there is one journey a user can take
Content guidelines
Do:
- Keep option text concise and descriptive
- Make sure that the link text matches the page title and breadcrumb of the link’s corresponding page
- Describe the step’s purpose, if necessary
Don't:
- Write in title case or all caps
- Add icons
User research
Key takeaways
Wizards break up complex processes
Wizards can be useful to break up complex processes into more manageable steps. They also provide a sense of progress to the user as they work towards the end of the wizard.
Use for infrequent processes
Wizards can become annoying when overused. Wizards should only be used for processes that aren’t familiar to most users, for example, helping patients and caregivers find the pages that apply to their user journey.
Include back and next buttons
Always allow the user to return to a previous step. A back button should appear on each step after the first step. Because our wizard component contains a maximum of three steps, we have decided to remove the next button for simplicity.
Steps should be self-sufficient
The user should have all the information they need to complete the step on the step itself. If a step needs some explanation, use the step’s description to explain.
Study links
Primary sources (Boston Scientific user research)
No sources
Secondary sources
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that the link is fully accessible.