Wizard interaction - which of the following methods serves the user better?

Question

One of the classic wizard formats is as follows:

I've also encountered a slightly different version using the master-detail paradigm, where the appropriate step is highlighted on the left:

If the wizard doesn't reside in a dialog, but may span an entire page, one might also use something like the following.

Do you have a preference / see any substantial difference between them (specifically the 1st & 2nd)?

Is there another type of wizard format you've used yourself or seen elsewhere that does a better job?

Answer 1

Your first example looks more like tabs than like a wizard. It's a bit confusing because wizard has the strict order of steps as opposed to tabs where you can visit sections in any order.

Your third example could hardly be called wizard because the classical wizard shows only one step. In your case it's something like a form with groups of controls.

So, what is important about the wizard? User should understand what are the steps and where exactly he is (how many steps did he pass and how many more he has to go). This means that if you provide all this information, the wizard may look whatever you like. It's not a big deal if steps names are on the left side or on top.

Answer 2

I agree with Kostya, the tabbed one doesn't look like a wizard and is confusing.

My personal preference is to not show at all the particular page they're on. But I still like to provide some feedback on how many steps there are. I'd display Step 1 of 5, or show a nice visual progress bar, e.g.

Answer 3

This of course depends on your definition of "wizard" and the user group and the task you're trying to perform - so a generic answer isn't really possible.

To give one example: I've successfully used the tabbed style in a context where the data the user enters wasn't necessarily linear A->B->C->D - but often was. So the normal "happy" path would be ABCD, but occasionally might be CABD or similar.

(The user was capturing information from a third party and entering it into the system. Normally they would be prompting the user through the forms ABCD, but sometimes the user gives them information in an unprompted way out of sequence and they want to jump to one section or another.)

So we wanted to:

a) give a solid guidance on the normal path through

b) allow the user to jump around when needed

c) show the user that jumping around is not "wrong" by giving them a familiar UI

Since there were tabbed interfaces elsewhere in the application (which was a desktop client/server app - not a web app) the tabs tested well compared to the previous one long form since folk had to spend less time scrolling around on the happy path, and could navigate to the appropriate area much quickly when they needed to jump around.

We also added some visual colour indicators on the tabs (colour and font) after the first round of testing to help indicate when a tab was untouched/partially-complete/finished.

Answer 4

I prefer this one:

Answer 5

I don't see any fundamental difference. Obviously the second choice gives more space to the steps in case there are many of them (which is usually bad). Depends on the case I suppose. As always. And as Kostya said, the first wizard example does not look like the traditional wizard. If I remember correctly, the original Microsoft standard didn't even have an indicator to show on which page you are on.
I think what we should ask instead is that do any kind of wizards serve the user well? Going through a wizard is slow and asking the user questions and holding his hand might not give the best user experience. And I'm not saying you shouldn't use them, but you should think are they really the best way.

Answer 6

I have the same preference as Hisham as to show the progress in a more discrete format, still pretty clear but taking up less space.

Depending on the flexibility of the wizard you're working on, I would also suggest a 'Back' button.

Answer 7

If you want to show progress, just use a Step m/N display.

If you want to enable the user to jump to specific pages, one of these formats make sense.

I've had a case where adding the Next button to a tabbed interface created confidence on what to do next. (No more than hallway usability test).

Advanced users could easily skip the pages they didn't need, beginners are guided by the "Next". (But be aware this was not a wizard extended by tabs, but tabs extended by a next button.)

---

The 3rd version sticks out by not focusing on part of the information. That's bad in most scenarios where you'd use either a tabbed interface or a wizard. Might be ok if you have to pass through all options and most are usually taken.

Functionally, 1st & 2nd are identical, so user expectations will take the bite.

Both need the Next indicator to show the user the process is not complete - as without the next, they are both used for option dialogs where the page acts as filter, not as step.

The 2nd is visually more pleasing for me. It would also allow indented sub pages.