Wizard

Overview

Use a Wizard to simplify complex processes or forms.

Wizards have a number of benefits. They can walk a new user through a complex or novel process. They can guide someone through a process that happens infrequently, relieving the cognitive burden or how to complete the process. Wizards can be less overwhelming than a long form or series of forms; chunking inputs into short steps can provide a sense of progress and make a task feel shorter. A well designed multi step process requires less cognitive effort in completing a process. Dedicated screens for each step can provide screen real estate to provide helper information where needed.

While wizards are typically thought of for tasks that aimed at new users or infrequent tasks, they can be helpful to advanced users as well. In complex products or processes Wizards are helpful in ensuring that even advanced users complete all the necessary steps.

Wizards are also helpful when one step in the process changes the content of subsequent steps. A wizard format can make any changes that happen less jarring; as it can better communicate that moving backward and changing something may result in losing changes on subsequent steps.

A Wizard typically breaks a complex form or series of tasks into a series of steps. Inputs can be chunked into steps thematically (ie, payment details display in a single step; billing address displays in another step), or information can be chunked into specific decision points, where subsequent steps may depend on information entered in previous ones.

Variants

Usage Guidance

When to Use

• Use a Wizard for tasks that are especially long or complex, to chunk them into manageable steps.
• A Wizard can be used to guide first time or inexperienced users through a novel and complex task.
• A Wizard can be used to help guide people through infrequent tasks, such as configuration or setup.
• While Wizards are great for new or inexperienced users, they can be used even for advanced users in complex processes to ensure that all necessary steps are completed.
• A Wizard can be used for tasks where earlier steps in the process affect later steps.
• Use a Wizard when you’re fairly confident that the designer of the UI will know more about the process than the user completing it.

When to Use Something Else

• When you’re designing for a task that happens frequently. The rigid structure of the multi step process can be annoying for repeated tasks. Use a Form instead.
• Be careful when designing multi step processes for seasoned users. Consider whether a form or spreadsheet might meet the need better.
• When you’re designing for a task that requires a small amount of input. Use a Form instead.
• When you’re designing for a process where users may want creative control.
• When you’re designing for a task that only has two steps. Use a Multi Step Form instead.

Best Practices

• Carefully consider how the process or form will be grouped in to steps. Try to group inputs by theme or by a logical order to be completed.

• Save automatically if you can. At the very least, allow users to save their progress and return to their work.

• Allow users to navigate forward and back through steps to reference and check their work if possible.

• Use logical defaults where possible.

• Display a list of steps involved in the process, and highlight current step. Clearly show progress.

• Provide a review step at the end, to allow users to review all the work they’ve submitted.

• If there are errors in a step, allow users to move forward (if possible) but clearly mark in the horizontal steps the step containing errors.

• If you’re considering a Wizard for a task that could be completed frequently, or by an advanced user, consider providing people with the option to use a Wizard experience or a default form, to give people more autonomy. You can look at usage analytics and see which experience is being used more.

• Help and explanations can appear in the multi step process, but shouldn’t cover the form itself.

• Don’t make users close the wizard to find information they need. Ensure they have all the information they need in a single step.

• Don’t embed wizards or steppers within steppers.

• Don’t make steps too long. If there’s a quite a bit of scrolling, the step should probably be broken into smaller steps.

• As users move through different steps, don’t change control placement. Maintain consistency in control placement to avoid disrupting muscle memory. Keep controls fixed at the bottom of the page or container as people progress through steps.

Wizard with Vertical Steps

A wizard with vertical steps can better accommodate a stepped process with more steps (more than five). Vertical steppers are typically associated with processes that may not have to follow a strict or sequential process, though this isn’t always the case.

Anatomy

Wizard with Vertical Steps Anatomy. Source: Task Wizard specs (Figma). Please note: since this spec was created, styling updates to the side panel and action bar buttons have been made. Please see the Multi-Step Containers spec file for updates.

A Wizard with vertical steps consists of:

1. A side panel with steps (called the Stylized Header in Task Wizard). This panel scrolls independently from the section body. The side panel may collapse if more space is needed for each step.
2. Section body which contains the main content.
3. Action bar which contains actions such as “Back” “Next” and “Close.” The final step of a stepper will contain the actions “Submit” “Save for Later” and “Cancel.

For more information on the anatomy and behavior of Wizards with Vertical Steps, including detailed information on open & collapsed side panel specs, step states, labels, titles, responsive behavior, and templates see the Task Wizard specs. Styling updates (such as updating the Stylized Header from Blueberry 400 to French Vanilla 100) and explorations of Guided and Unassisted Experiences have been explored in the newer Multi-Step Containers specs.

Usage Guidance

When to Use This Variant

• Use a Wizard with Vertical steps to imply a less strict order or sequence be followed.
• Use a Wizard with Vertical Steps when a process has more than five steps. The independent side panel affords more space for steps and can be independently scrolled if needed.

When to Use a Different Variant

• Wizards with vertical steps are not a good fit for flows fewer than four steps. Use a Wizard with horizontal steps instead.

Best Practices

• Allow users to navigate back through previous steps to review their work.

• If there are errors in a step, allow users to move forward (is possible) but clearly mark in the horizontal steps the step containing errors.

• Generally, Wizards with Vertical Steps shouldn’t be used in modals, for real estate purposes. Consider using a full page experience to accommodate the side panel as well as the content. However there are rare cases where a modal may be used for this kind of content. See our Guide to Side Panels, Modals, and Navigation [Coming Soon] for more information.

See more Best Practices on the Overview Page.

Responsive Web

In responsive web and Webviews, the Wizard name and step name should appear in a header at the top of the page. Steps are placed in a dropdown menu rather than a side panel.

Content is placed in a single column, with inputs expanding to fill the full width of that column.

For more information, see the Task Wizard spec and the Multi-Step Containers Spec.

Responsive Task Wizard examples. Source: Multi-Step Containers Spec. (Figma)

Accessibility

• The wizard should have 5-10 form controls per section.
• Form level instructions must be repeated at the beginning of every step.
• Information entered in a previous step should be made available to users to avoid repetitive entry.
• For additional accessibility considerations for Wizards, refer to Accessible Forms.

Globalization

• For RTL languages such as Arabic and Hebrew, the whole layout flips horizontally.
• Any icons used in buttons will also If arrows are including left to right steps goes right to left with arrow icons to flip as well.

Technical Implementations

Task Wizard is a framework that strings together what would otherwise be separate tasks into a single task arranged into sections of grouped content, allowing users to complete their task in a guided flow without feeling overwhelmed.

Considerations

• In Workday, Task Wizard can only be used to string together multiple tasks; it cannot be used to chunk a single task. If you’re looking to chunk a single task, you’ll need to use the Multi Step Modulr template at this point in time.
• Errors are handled in a specific way in Task Wizard (more info on this soon.)
• Task Wizard should not be opened inside the Inbox. Task Wizard may be initiated from the Inbox, but users should be navigated to a new page for the process.

Documentation & Resources

• Task Wizard (UIC) Documentation Confluence Page (Dev & Design Docs)
• Task Wizard Uptake Guide (Dev Docs)
• Task Wizard Storybook (Dev Docs)
• Task Wizard Figma Specs (Design Specs)
• Multi Step Container Figma Specs (Design Specs)

Product Examples

Wizard With Horizontal Steps

A wizard with horizontal steps can better accommodate a stepped process with fewer steps (fewer than five) and tends to imply that the process requires a more strict order or sequence to be followed.

Anatomy

A Wizard with vertical steps consists of:

1. A header container with steps, which stays persistent at the top of the main container.
2. A section body which contains the main content.
3. An action bar which contains actions such as “Back” “Next” and “Close.” The final step of a stepper will contain the actions “Submit” “Save for Later” and “Cancel.

For more information on the anatomy and behavior of Wizards with Horizontal Steps, see the Modulr Templates: Multistep Template Figma (Design Spec).

Usage Guidance

When to Use This Variant

• Use a Wizard with Horizontal Steps to imply a more linear order or logical sequence be followed.
• Use a Wizard with Horizontal Steps when a process has fewer steps overall.
• Use a Wizard with Horizontal Steps when the main body content requires more horizontal screen real estate.

When to Use Another Variant

• Use a Wizard with Vertical Steps when the step labels are long or require two lines.
• Wizards with Horizontal Steps are not a good fit for more than five steps. Use a Wizard with Vertical Steps instead. The vertical panel provides more real estate for additional steps and the ability to scroll if needed.

Best Practices

• Horizontal steps should stay persistent as a user scrolls

• Allow users to navigate back through previous steps to review their work.

• If there are errors in a step, allow users to move forward (is possible) but clearly mark in the horizontal steps the step containing errors.

• Horizontal steppers can be used in a modal if they have a small number of steps, but beware of the small amount of space afforded in a modal. If quite a bit of scrolling is needed, use a full page Wizard instead. Also, consider the Multi Step Form variant.

See more Best Practices on the Overview Page.

Responsive Web

On Responsive Web and Webviews, the horizontal steps are modified slightly. Step labels are removed from the horizontal steps, but the label of the current step is still present in the sticky progress bar.

Content is placed in a single column, with inputs expanding to fill the full width of that column.

Responsive Multi Step example. Source: Modulr Templates: Multistep Template Figma (Design Spec)

Accessibility

• The wizard should have 5-10 form controls per section.
• Form level instructions must be repeated at the beginning of every step.
• Information entered in a previous step should be made available to users to avoid repetitive entry.
• For additional accessibility considerations for Wizards, refer to Accessible Forms.

Globalization

• For RTL languages such as Arabic and Hebrew, the whole layout flips horizontally.
• Horizontal steps will also flip vertically.
• Any icons used in buttons will also If arrows are including left to right steps goes right to left with arrow icons to flip as well.

Technical Implementations

Note: This variant doesn’t have a “best” or “perfect” implementation yet. The following are options you might consider, and a historical deprecated option for reference only.

A multi npx @workday/docs@latest previewstep form is a long form that is broken into multiple pieces. They’re used to make long forms, such as shipping or registration forms, less intimidating and daunting. By allowing customers and leads to complete their information in smaller chunks, you create a positive user experience and increase conversions.

Multi Step is used to chunk a single task; if you need to string multiple tasks together, you’ll still need to use Task Wizard at this point.

Considerations

• This Modulr template is fairly new and should be considered MVP in terms of functionality.
• Can only be used with Modulr.
• By default, Multi Step displays steps without labels (we’d recommend displaying labels by default).
• At the moment, the responsive implementation could be improved (we’d recommend displaying the name of the current step, and a dropdown of all steps in the process, instead).
• Because this splits a single task, validation for each step is not possible. Error validation occurs at the very end, on submit.
• The “Next” and “Previous” buttons are not embedded in the task bar. For each step in Multi Step, “Next” and “Previous” are displayed within the Multi Step container, while “Submit” and “Cancel” are displayed in a task bar below. The proximity of these four actions could cause confusion.

Documentation & Resources

• Multi Step Docs.Build Page (Dev Docs)
• Modulr Templates: Multistep Template Figma (Design Component)

A Wizard component developed by the Recruiting team to create an experience for candidates applying to a new position. This is a Bespoke component designed for the Recruiting team that isn’t currently reusable; however, the spec could be a good starting point for a custom Wizard with horizontal steps. Note: This is not a Canvas component.

Considerations

• This Bespoke component isn’t currently reusable; however, the spec could be a good starting point for a custom Wizard with horizontal steps. This is not a Canvas component.
• The responsive navigation that’s included in the spec looks to be a compromise. Instead of compressing the horizontal stepper into the available space and hiding the step label, we’d recommend displaying the name of the current step, and a dropdown of all steps in the process. See the Responsive Web section in the With Vertical Steps tab.
• The Recruiting Progress Bar was designed with customer branding in mind, which is why it uses a non brand color as a primary color. We’d recommend using the standard Canvas palette as a default.

Documentation & Resources

• External Career Site Progress Bar Specs (Figma Spec)

Not recommended for use.

Task Orchestration was a historical solution to Wizards with horizontal steps. For more information, check out the Task Orchestration Confluence Page. Tasks using Task Orchestration are recommended to migrate to Task Wizard or similar frameworks instead.

Product Examples

Product Examples