How to implement a branching wizard?

Question

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)

Answer 1

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.

Answer 2

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.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

As an alternative someone has already created a branching wizard here.