9

One of the classic wizard formats is as follows:

alt text

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

alt text

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

alt text

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?

Improve this question
9

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.

Improve this answer
1
  • 1
    Although I agree with Kostya theoretically, there's no real way to discuss this without having some user research to back it up. Fundamentally, a wizard should communicate certain information to a user, and as long as it does that and conforms to the expected model of a wizard, users should generally be okay. After that it becomes a matter of details exactly like what you're describing, or things like typography, positioning and color will need some attention paid to. – Rahul Sep 11 '10 at 11:18
6

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.

alt text

Improve this answer
6
  • 4
    Can you explain what the benefit is of not communicating what page you're on to the user? – Rahul Sep 11 '10 at 11:06
  • 1
    I agree the tabbed one doesn't look like a wizard, but I feel removing the step X of Y is not a good move for usability. – scunliffe Sep 13 '10 at 0:41
  • Rahul, to me, it's simply a case of TMI - Too Much Information. I would ask the question differently: what IS the benefit of communicating what page you're on to the user? – Hisham Sep 13 '10 at 5:24
  • Rahul, there's another angle: over the years, I've been disliking wizards more and more. I find that many are necessary only because the overall UI leaves a lot to be desired. True, some wizards are still necessary, but far fewer than many people think. And when truly needed, I see a wizard (as a user) as something that should ask minimal questions and get out of my way ASAP. – Hisham Sep 13 '10 at 5:36
  • 1
    @Hisham: helps the user estimate how long the rest will take. Yes, it's crude and incorrect, but the best he has. A Wizard is for users who have absolutely no idea what it takes to furbulate a bombilator. Progress towards the better creates confidence. – peterchen Sep 13 '10 at 6:23
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.

Improve this answer
3

I prefer this one:

progress

Improve this answer
1

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.

Improve this answer
1

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.

Improve this answer
2
  • The Back button is a MUST (at all steps except the first one)! – Kostya Sep 11 '10 at 14:10
  • I know, but you would be surprised at how many times people don't consider it... – Pam Rdz Sep 11 '10 at 17:13
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.