One Page Wizard

Also known as: Process Funnel, Process Guide, Stepped Tasks, Process Flow

Tags: content, navigation

Guide the user through a task with several steps by showing a clear path to completion.

CampaignMonitor uses a static One Page Wizard for signing up. Sign up process is quite simple – the process is not branched and has only few steps, so showing everything on a single page is a good choice.

The form is well designed. The page has a good title that tells what the form is about and how much time it takes to complete it (Sign up in 30 seconds). Steps required to complete the form are numbered and clearly labeled. The page is also kept simple; unnecessary interface elements are removed, and only information that helps the user to complete this task is shown. In addition, the primary action button is easy to spot.

CampaignMonitor sign up form.
Source: http://signup.createsend.com/signup.aspx

CampaignMonitor sign up form.

What problem does the pattern solve?

The user needs to complete a task that has some or all the following characteristics:

  • Performed rarely.
  • Has few steps.
  • Can’t be undone or edited easily after completed (e.g. signing up).
  • Steps need to be completed in a prescribed order.
  • All the steps can fit on a single page (if not, use Multiple Page Wizard instead).
  • The process is not (heavily) branched / doesn’t have dependencies.

When to use it?

The user needs to complete a task that has some or all the following characteristics:

  • Performed rarely.
  • Has few steps.
  • Can’t be undone or edited easily after completed (e.g. signing up).
  • Steps need to be completed in a prescribed order.
  • All the steps can fit on a single page (if not, use Multiple Page Wizard instead).
  • The process is not (heavily) branched / doesn’t have dependencies.

How to use it?

  • Break up a task into logical, titled steps.
  • Keep all the steps on the same page.
  • Keep the number of steps at the minimum.
    • Usually it is not good to have more than 6-7 steps in a wizard. If there are too many steps, the user gets frustrated.
  • Remove unnecessary interface elements.
    • Additional links and content etc. that user don’t need when completing a task can distract the user.
    • Removing them helps the user to focus on the task and improves the odds of completing it successfully.
    • However, don’t over-simplify it.
  • Keep it flexible.
    • Guide the user, rather than forcing him to do things.
    • Make it easy to move between steps and cancel the task.
    • Allow user to skip optional steps.
    • If possible, allow some freedom for the experts.
    • It might be a good idea to provide also a non-wizard alternative for expert users.
  • Provide good default values when possible (see Good Defaults pattern).
  • Consider making it dynamic.

Why to use it?

  • Completing a task gets easier. The user can just follow a preplanned, step-by-step path to accomplish his goal.
  • It increases the chances that the task gets completed successfully.

Below are listed pros and cons for One Page Wizard:

Pros

  • Lets the user see what it takes to complete the task on one page.
  • Easy to move back and forth between steps and make changes.
  • Seeing all the steps at the same time can help the user to complete other steps.

Cons

  • Gets complex if tasks are highly branched.
  • Seeing a long page can scare off the user.

+ Add

Useful linksUseful links icon

+ Add

Code snippetsCode snippets icon

+ Add

Example Images (3 examples)

Comments

  • Smart Company Software (www) Feb. 3, 2011 16:32

    Some great ideas here, which I'll be sure to implement.