forgot password?

Posted: 21 March, 2012 Attention: open in a new window. PDFPrintE-mail

8 Tips to Good Wizard Design

 

Wizards are a type of user flow that a developer can use to make the user's experience easy and simple.  Below I have included an introduction to the usage of wizards, and 5 helpful guides to make your wizards the best.

INTRODUCTION

What is a wizard, and when should you use one?

Use a wizard when you have a situation where the user wants to achieve a single goal which consists of multiple dependable sub-tasks.
Example:


Enlarge Image

The wizard used to get an insurance quote at homesite.com uses a highlighted tab in the menu to communicate the purpose of the wizard, uses a good default pattern for selecting options, has a clear communication of the wizard length as well as how far the user has gone, uses large navigation buttons, has all its content above the fold, and provides a nice alternative to the wizard by letting the user talk to a real-life person for assistance.


Usage:

  • Use when the user needs to perform a task or a goal that dictates more than one step.  An example is adding an image to a website which can include uploading the image and cropping the image; the image cannot be cropped before it is uploaded to a server.
  • Use when the user needs to perform a complex task consisting of several dependable sub-tasks.
  • Use when the user needs to input complex data into a system that is easier for the user to comprehend parting the process into multiple steps.
  • Use when the user needs guidance: the user wants to achieve an overall goal, but may not be familiar in the steps needed to reach the goal.
  • Use when the steps needed to reach a final goal may vary due to decisions made in previous stages.
  • Use when the user lacks necessary domain knowledge.
  • Use when the user must complete steps in a specific sequence.


Other Tips to Good Wizard Design:

1. Keep the purpose clear: explain
2. Use plain language
3. Summarize choices
4. Good defaults
5. Minimum of training
6. Keep the amount of screens low
7. Be careful not to make each step too long
8. Allow alternatives to using the wizard

Read More >> Click Here to jump to the whole article.  Thanks to UI Patterns for their article, "Wizards".

 

Get a FREE consultation.

Updated: 10-13-2015