Log In
Back to Designs page

Table of Contents

Related Research

No research entries have been linked to this design.

Resources

No resources available for this entry.

Additional tags

No tags are assigned to this entry.

Wizards

Author: Kevin Hatchoua | Last edit: March 28, 2023 | Design type: Wizard | Product area: Hybrid Cloud Console

General wizard guidelines

Header

Should be the same as the button that launched it

Example: If the user pressed a “Add source” button, then the wizard header should be “Add source”

ButtonWizard

 

Description

Up to you! Should simply describe the purpose of the wizard in a little detail.

Wizard body guidelines

Header / Body title

  • Should use Red Hat Text 20pt, regular weight (400)
  • Should match the Step label
  • Should not be bold

Description 

  • Should use Red Hat Text 16pt, regular weight (400)
  • A description is optional; the text is up to you
  • Can you use it for a requirement statement: (eg: The fields below are required)
  • Should never be bolded. Only elements within the description (a reference to role name, group name, any item name, etc.) should be bolded.

Spacing

  • Spacing between the Header and the Description should be 8px
  • Spacing between the Header/description and the body should be 24px

Steps (left panel) guidelines

  • Steps labels should be the same as that step’s body header
  • Example: If the step is entitled “Review details”, that step’s header should be “Review details”
  • The review step should be entitled “Review details” and so should its body header
  • Keep step labels succinct
  • Use action words “Review details”, “Define permissions”, “Add roles” etc

Example

In the ‘Add source’ wizard, step names were changed to eliminate superfluous action words.

  • Step 1: Changed from ‘Enter source name’ to ‘Name’
  • Step 2: Changed from ‘Choose the application and source type’ to ‘Application and source type’
  • Step 3: Changed from ‘Configure Ansible Tower - Username and password credentials to ‘Configure Credentials’

The key here is to define steps as succinctly as possible. Only tell users what they need to know while keeping action words where needed.


 

Wizard status states

No validation

If there is no backend polling or synchronous validation to be done after users click ‘Finish’ (or ‘Done’ or ‘Add’ or ‘Submit’ etc.), they should be immediately taken out of the wizard and hit with a success toast notification.

  • The title should read ‘Success [whatever action user completes]’
  • The description is optional but could reiterate successful action or point users to whatever they just created.

Loading / polling

If, when users click ‘Done’:

  1. There is backend validation/polling to be done AND
  2. You want to keep users in the wizard until validation is complete

Then they should see a spinner loading state (pictured below). You can decide what the text under the spinner reads, but it should give users a general sense of what they are waiting for.