Users need guidance filling out a complex form.


Splitting a complex form into multiple steps accomplishes a few things:

  • Reduces cognitive overhead by organizing and presenting related input fields
  • Facilitates a potentially linear or evolving process
  • Can provide improved contextual or evolving help

Basic functionality

A wizard is usually composed of:

  • A list of steps, either horizontally or vertically
  • A collection of form controls and help text organized into steps
  • Buttons for navigation
  • Validation



In many cases it’s beneficial to show the list of steps a wizard will have. Depending on the number of steps and space available, steps can be listed vertically or horizontally.


  • Indicate a step’s validity
    • Show a check icon when valid (only if the user has left/submitted the form with valid input)
    • Show a warning icon when invalid (only if the user has left/submitted the form with errors)
  • Allow for navigating to previous steps when possible
  • In some cases, skipping ahead is applicable
  • Navigation may evolve depending on previous steps

Vertical steps

Use vertical steps when there are 5 or more steps, when there are nested steps, or when steps are categorized.

New alert

Add and configure new alerts for an environment.

Recipients Step 2 of 6

When the alert criteria is met, each recipient will receive an email notification.

Fix the 1 error below.

Invalid email address.


Horizontal steps

Use horizontal steps when there are 4 or less steps.

So far so good. Now, let's talk about your mark.

First, what type of mark is this?


Buttons for a wizard can vary depending on the need. The primary actions should be on the right, the secondary actions should be on the left.

Last saved 09/19/14 10:45 AM