Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm toying with the jQuery plugin SmartWizard to implement a branching wizard for a web application. The problem I'm struggling with right now is how to deal with user choices that affect the subsequent workflow and the content and re-ordering of the progress meter of the wizard.

As for now I can think of 3 alternatives.

  1. Static solution:
    Lay out all possible steps in advance. Though some steps will only be activated if the user makes the appropriate choice. Otherwise, the wizard continues with the next valid step. As an example: If someone doesn't need the "flight transfer option" the wizard simply leaves out all steps concerned with that choice.

  2. Fluid solution:
    Lay out only the default or required steps (happy path scenario). If for instance at some point the user chooses to branch away from the visible path (I need the transfer option) the wizard gets a visual update and also its progress meter. Now, showing all the additional steps. (I'm not sure though if this is visually appealing.)

  3. A combination of 1 and 2:
    This is meant as an extension to 1) and 2) where all the choices are made up-front like in a short enquiry (1st step). Based upon these choices the wizard gets a visual update with the corresponding workflow. If the user wants to change the choice she made she has to re-visit the first step (which creates the potential complexity of not loosing already entered data)

share|improve this question

2 Answers 2

up vote 1 down vote accepted

I believe the static solution usually works best and can usually be broken down in such a way that any branching can be done within well defined static steps.

One of the key elements in a wizard is its indication of progress and location within. If steps are added or removed based on user actions, that element of predictability and "confidence" is lost.

As an example, think of a wizard step asking the user to add a profile photo.
The step itself is just that - "Add Profile Photo", but the user can choose from different options that represent different levels of effort and time spent:

  • Use Facebook profile photo (connect with Facebook)
  • Upload an existing photo
  • Take a photo with web-cam / front camera

The user might also be offered the option to edit the photo in the same step and perhaps skip and use a default.
Nonetheless, all these choices and "inner" paths still reside in that well defined step.

share|improve this answer
    
This stratgey makes perfect sense to me. Thanks for your explanation. –  simou Mar 28 '12 at 11:47

You can have branching logic within each step of the wizard, like the illustration below.

But I wouldn't turn the wizard itself into a branching logic, especially if it increases number of steps.

It almost sounds like your problem can be solved by consolidating the number of steps in the wizard until the branching logic selection does not change the number of steps.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Thank you too for making those examples. –  simou Mar 28 '12 at 11:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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