Articles Comments

GUI Journal » Controls, Featured, GUI Design, Mistakes » GUI Design: Wizards–Blessing or Curse?

GUI Design: Wizards–Blessing or Curse?

Wizards have been used to help users complete complicated setup and/or other tasks that require more information than can be easily understood or laid out on a single panel. By breaking up the details and gathering information step by step across multiple panels the user is more likely to not become overwhelmed as the application gathers all the details needed to complete the task.

Sometimes it’s not necessarily the task that is complicated, but rather the GUI itself that is ill-designed and makes the task more complicated than needed. A wizard is seen as a remedy for this situation, but it may only help in the short-term.

MICROSOFT® OUTLOOK® EXPRESS SETUP WIZARD

Figure 1. Outlook Express Setup Wizard Step 1 with Confusing Title Bar Text

Quite a few years ago I tried out Microsoft Outlook Express and discovered that it has a setup Wizard that launches when the application is run for the first time. The Wizard takes the user step by step through the essential information needed to set up Outlook Express. My first experiences with wizards were with Microsoft products. Microsoft is constantly working to make interfaces easier for users and in general their wizards have been very well done. Unfortunately, this is not one of them.

Figure 2. Wizard Step 2 with Standard Back and Next Buttons

Figures 1-5 show the five steps (panels) of the wizard. The descriptions on each of the panels are helpful and give the user the correct impression that this is setting up e-mail access.

Figure 3. Wizard Step 3 with Next Disabled Until Information is Entered

The wizard uses the standard [Back], [Next], and [Cancel] buttons each step of the way with, of course, the [Finish] button replacing [Next] on the final step (see Figure 5). The [Next] and [Finish] buttons are only enabled when the required data has been entered on each panel. The [Back] button allows the user to retrace steps and make adjustments before moving forward again.

Figure 4. Wizard Step 4 with the First Use of the Word "Account"

But there are several problems with this wizard. The first is the title bar. It’s a good thing that most users don’t read the title bar, because its text is confusing: Internet Connection Wizard. Most users think of Internet Connection as something very different from E-mail setup. When I first read the title bar, I wondered if I had somehow lost Internet connectivity, and so I reasoned this might be why the wizard popped up automatically. A quick check verified that my Internet access was just fine, so I continued cautiously.

Figure 5. Wizard Step 5 with Finish Button to Complete the Task

When the wizard is complete, then everything is great—just as long as you haven’t made any mistakes. If you did make a mistake, then good luck finding where to fix it. I realized almost immediately on completion that I had made a mistake with my incoming mail server (see Figure 3) and hunted for several minutes before finding where I could edit the incorrect value I had entered.

Figure 6 shows the main Outlook Express panel immediately after the wizard is finished. I see several indications that my data from the wizard is now in use, including my name in the black title bar and a new email message in the Inbox.

Figure 6. Outlook Express Application Window after Wizard is Finished.

However, there is no indication as to where the automatic wizard came from or where the settings are that were entered into the wizard panels. Silly me, I was looking for something labeled Internet Connection since the 5 steps of the wizard had Internet Connection Wizard in the title bar. I couldn’t find that text anywhere. If you happen to know (or noticed) that you created an email account, then you may eventually find the Accounts… option near the bottom of the Tools menu (see Figure 7). Unfortunately, the wizard offers very little help in this regard: the first panel in the wizard to use the word Account is shown in Figure 4.

Figure 7. Tools Menu with Accounts... Option

Figure 8. Finding the Correct Account to Edit

Selecting the Accounts option from the Tools menu in Figure 7 invokes the dialog shown in Figure 8. This dialog displays Internet Accounts in the title bar, and a Mail tab with an Account column. This is somewhat consistent with the menu option that got me here. In the list there is an account named mail. guijournal. com, which was entered in the wizard panel shown in Figure 3, not on the only panel with the word Account. Not helpful.

Figure 9. General Tab of Properties Dialog for mail.guijournal.com

If you’re smart enough (or lucky enough) to assume this might be the place to edit the settings entered through the wizard and select mail. guijournal. com and click the [Properties] button, then the dialog shown in Figure 9 pops up. The General tab shows values entered on panels 1, 2, and 3 of the wizard, mixed in with some other settings. (Presumably, the new settings are not necessary to complete the initial e-mail setup, so the user is spared the confusion of dealing with those extra settings in the wizard.) Interestingly, the subheading for the top part of this dialog is Mail Account, which label appears nowhere in the wizard, but the value mail. guijournal. com is what I entered for Incoming mail server (see Figure 3). The next subheading is User Information, which also appears nowhere in the wizard. The values under this subheading are what I entered on the panels shown in Figures 1 & 2, under the subheadings of Your Name and Internet E-mail Address, respectively. Note that Name here was Display name in the wizard. But here’s something good: the E-mail address label and value actually match between the wizard and this dialog.

Figure 10. Servers Tab of Properties Dialog for mail.guijournal.com

Figure 10 shows more of the properties for mail. guijournal. com on the Servers tab of the dialog. These settings can be found in steps 3 and 4 of the wizard, but again, they are interspersed with other settings that weren’t seen in the wizard. While the individual labels and values on this dialog match up with the wizard almost exactly, again, the subheadings are new. What is listed here under the Server Information subheading was under the subheading E-mail server names in the wizard (Figure 3), while the subheading Incoming Mail Server on this dialog has the values that are under the subheading Internet Mail Logon in the wizard (Figure 4).

At some point we figure out that there are two different types of accounts here; the “Account name” on this panel is definitely different from the “Internet Accounts” that we selected from the panel in Figure 8. Eventually the user might discover that this wizard can be invoked by clicking Add (Figure 8 upper right) and then selecting Mail.

Wow. It’s no wonder a wizard was implemented to set this up, because it’s very confusing. Unfortunately, the wizard actually made things worse because of its inconsistent terminology and the fact that the wizard panels are completely different from the panels used for editing those same settings.

VOLERA VCDN ON-PANEL WIZARD

Volera (a now-defunct subsidiary of Novell) had a Content Delivery Network product called VCDN that used no dialogs anywhere in the GUI. However, there were several cases where an on-panel wizard was implemented to assist the user in the steps required for setting up certain features. Figure 11 shows the top portion of the Group List panel (from which one of these wizards can be invoked).

Figure 11. Volera VCDN Group List Panel

Clicking the Create New Group link invokes the on-panel wizard shown in Figure 12. This wizard implementation has several great features. Notice how the steps of the wizard are outlined across the top with each step being numbered and the title displayed. This provides context to the user regarding where they are relative to everything else to be done to complete the wizard.

Figure 12. VCDN On-Panel "Create New Group" Wizard

Figure 13 shows the 4th step in the Create New Group wizard. This shows another nice feature with this wizard implementation. Notice how the steps across the top become links after the user has entered data and moved to the next step. This makes it so that instead of moving back and forth only one step at a time (with no clue as to the title of the next step or how many more steps there are), the admin can go straight to the desired panel for changes. Also, once the group name is entered in step 1 (Figure 12), it is displayed in the title bar for the rest of the steps.

Figure 13. VCDN "Create New Group" Wizard Step 4

Figure 14 shows the edit panel for the new Group. This panel is invoked by clicking one of the Group names in the list (see Figure 11). Notice that the edit panels are identical to the panels in the Create New Group wizard. The user is not required to learn a new interface between Create and Edit.

Figure 14. VCDN Edit Group Step 4

Here is a summary of the great implementation ideas in the VCDN wizard.

  • First, with the numbered steps across the top of the panel, the user can see the context of the current panel relative to previous and future steps.
  • Second, the user has the option not just to move backward one step at a time (as with the [Back] button in Figures 2-5), but to select any previous step in the wizard. The user cannot jump forward to steps until appropriate information is entered along the way, as with a standard wizard.
  • Third, and best of all, when this wizard is complete and the user needs to edit these settings, the exact same panel is displayed, with the exception that the title (in the blue bar) states Edit … instead of Create New … and the user has full access to all steps across the top.

BARNES & NOBLE INTERNET CHECKOUT WIZARD

Figure 15 shows another great implementation of the wizard idea. This type of layout and functionality have become more common recently with online shopping carts. There are four steps in this wizard (though they are not numbered): 1) Shipping Address, 2) Shipping Options & Gift Preferences, 3) Payment, and 4) Order Review. The steps are arranged vertically and highlighted with a title bar for each section. In this case, the Shipping Address is already set and the user is on step 2.

Figure 15. Barnes & Noble Internet Shopping Cart Checkout Wizard

Figure 16 shows the wizard after the user returned to step 1 by clicking the [Change] button for step 1.

Figure 16. Barnes & Noble Internet Shopping Cart Checkout Wizard Return to Step 1

Similar to the VCDN Wizard, the Barnes & Noble wizard allows the user to see all steps in the wizard, though only work on one at a time. This is another great implementation of a wizard.

KEY DESIGN POINTS

  1. A wizard that sets up information should closely resemble the method for editing that same information
  2. A wizard should teach the user how to accomplish their tasks after the wizard (if the same panels are not being used), by using consistent terminology and giving helpful descriptions that relate to the rest of the GUI
  3. Don’t use a wizard as a crutch for a GUI that just needs to be better organized (If the wizard is setting up information that is scattered across the application, that is a big clue)

GUI Design

GUI Design Guidelines

Graphical User Interface

User Interface

Graphical User Interface Design

Graphical User Interface Design Guidelines

Written by

Carl Andersen currently works for Micro Focus International as a Senior Development Manager. Carl has led teams at NetIQ, Novell, and WordPerfect and been the principal designer of multiple GUIs which have received analyst acclaim.

Filed under: Controls, Featured, GUI Design, Mistakes · Tags: , , , , , , ,

4 Responses to "GUI Design: Wizards–Blessing or Curse?"

  1. Link says:

    In either case, the hard part of designing this kind of UI is striking a balance between the sizes of the chunks and the number of them. It s silly to have a 2-step wizard, and a 15-step wizard is tedious. On the other hand, each chunk shouldn t be overwhelmingly large, or you ve lost some benefits of this pattern.

    1. Carl Andersen says:

      Link, good comments! Thank you.

  2. Carl says:

    Thanks, Eddy. I especially like your last statement!

  3. Eddy says:

    Carl,

    I couldn’t agree more with your detailed, concise, and eloquent description of what a wizard’s purpose and implementation should be based on.

    In particular, your assessment for the reasons why a wizard is needed is spot on, IMHO. In particular point number 2. This is true, primarily, in very complex environments where a good amount of knowledge may be needed to accomplish a specific task, and other aspects of the system need to rely on such task being accomplished correctly.

    Wizards that try to “hide” complexity, to the extent where the user misses an opportunity to understand and learn why something is being done or needed, isn’t always the best approach to usability.

    Wizards are only necessary, IMHO, when user-provided information is required and not already available to the system. Graphical interfaces should be more than fancy colors, buttons, or background images; they should reflect good functionality, ease of use, simplicity, effectiveness, and intuitiveness.

Leave a Reply to Link Cancel reply

*


four × = 36

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>