Wizards UI: Organizing Content for the Best Results

The Design Problem

There are a number of tasks the user must perform in a particular order.

The Solution

A wizard is a series of web pages or dialogue boxes that guide users through a sequence of component tasks to the point of overall completion. When the user has satisfied the particular demands of a component they either click a button, such as a right-facing arrow, ‘continue’ or ‘next’, or the system automatically takes them to the next step. When they have completed all the steps a declarative message should appear leaving the user in no doubt all phases of the overall task have been fulfilled.

Why choose a Wizard?

Wizards are best used in situations where the task is long, complicated, novel to most users or infrequently performed as they provide a step-by-step instructional walkthrough, which relieves the user of having to undertake lengthy training or having to commit task-based information to memory. For example, when ordering food online the user is channeled through the necessary steps; first filling in their delivery address, then be taken through the various purchasing options before entering payment details to finalize the procedure. At each of these phases, the user is told exactly what they need to do to progress to the next stage.

Wizards are especially useful in eCommerce as they help simplify what can often be a long-winded process and remove the responsibility from users of having to remember which elements of a task they have or have not completed. This does, however, remove control from the user but they are unlikely to be resentful if it means they simply have to follow the instructions to complete the task without any mishaps along the way.

Implementing Wizards

There are a number of key considerations in the design and implementation of wizards which are as follows:

• The overall task must be broken down into logical chunks; there is no sense in asking the user to enter payment details before they have verified what is in their shopping basket, for instance. There is usually an order that best suits the overall task; however, there might be occasions where it is not as apparent. When this is the case, carry out a trial with a sample of users and see which order provides the smoothest transition from each step to step and fastest completion time.

 

• As the user interface will only be used to display instructions for one sub-task at a time you must provide some graphic depicting task progress, such as a filling bar or a percentage showing how much of the overall task has been completed. Informative feedback is an essential part of user interface design as the user must know whether their actions have been successful or not. It also plays a role in reducing the user’s sense of powerlessness over events in the user interface. The inclusion of progress bars has been shown to reduce perceived loading times, reflecting the importance of feedback in minimizing the user’s sense of how long tasks take. Shneiderman stated that for every action there should be system feedback. This feedback should be proportional to the seriousness of the action, with minor incidents flagged by undisruptive feedback and major system events indicated by eye-grabbing feedback, such as serious error messages. Therefore, if a user has failed to complete a sub-task sufficiently you must draw their attention with some prominent, unmissable graphic or highlighted text, whilst less significant events, such as leaving an input field blank that does not have to be filled, must not be brought to the user’s attention.

 

• Input fields that must be completed, such as the zip or postal code entry box in eCommerce websites, should be highlighted in some way. There are a number of common methods, like placing an asterisk next to required fields or using a different background color (i.e. more prominent) to the non-essential input boxes. Whichever method you employ, ensure the user is aware of the convention; otherwise, this could easily be overlooked.

 

• The aim of splitting the components of a task into separate sections is to minimize the amount of information a user must contend with at any one time. Therefore, you must keep the amount of extraneous information and the number of navigation options in the periphery to a minimum. Retaining lots of other elements within the wizard, such as top-level navigation bars, drop-down menus or scrolling lists, increases visual complexity in a display, thus reducing the effectiveness of the wizard.