How to intuitively display steps in a dynamic context

Question

I am creating a new wizard, and depending on the choice on the first wizard step maximum 2 more steps are needed. The reason for this is that the user can select an existing object in the first step or choose to create a new one:

Step one:
Pick Layout: New or Existing
Pick Type: New or Existing

I visualize all the steps in the top of the window, so what is the best way to visualize these optional steps?

A) Show them and skip them when the user chooses to select an existing one

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

B) Don't show them and let the appear when the user selects to create a new one

^{download bmml source}

Answer 1

I have been struggling with the exact same problem. In my case, I had 10 steps and depending on which choices you make along the way, some steps are not applicable, and some have a different content and title.

Let me first explain how I solved my specific case. After many discussions we basically decided to split up the wizard in steps and substeps. We divided the 10 steps into 4 bigger blocks, which are always present and make a lot of sense from a functional point of view. Some steps have "substeps", and the number of substeps (and what those substeps are) depend on the choice that the user made in a previous step. I only show the substeps when the user is already in a certain step. My approach is actually more or less based on this:

(I took this mockup out of this question: If and how to break a long wizard into main steps and substeps?).

This could also be a solution for you. See if you can break it up into bigger chunks. This way you could basically hide the "dynamic steps" in your process.

If you cannot do this, then my suggestion would be to show all steps, and disable unnecessary steps based on the user choices. My reasoning for this: what do you want to do with a wizard? You want to make a lengthy of complex operation easier for a user by showing some kind of guidance path. A user will feel that you are a bad guide if, along the way, you insert extra steps into the process. It's like asking a user to carry a 20 pound backpack, and while the user is carrying it, you load more weight onto it.

Inserting extra steps will feel like betrayal. Leaving out steps on the other hand will feel like a relief. Look at it this way, you have 2 options:

• Making a task look really simple, but make it more complex once the user starts doing the task
• Be honest and show the complexity of the task, but (possibly) make it simpler along the way.

What would you prefer?

Ps.: I agree with some of the other comments that your current design looks a lot like a breadcrumb navigation. This is something you definitely have to consider, but not a fundamental answer to the question.

Answer 2

What you have described looks more like a bread crumb navigation. And this navigation does not seem to make sense for wizards; see this article for bread crumb best practices.

In this particular case, I would probably just show a Step 1 of 4 or Step 1 of 2, depending on what they select. However, if I had to choose between those two options I would only show the options when they are applicable in order to avoid confusion to the user (i.e. option B in your question).

Answer 3

With so few steps, does it make sense to even use navigation in this wizard? Providing clearly labeled action buttons and titles to each wizard screen might do more for the user than giving them a set of navigation items to pick from. I would consider the relative need for letting the user hop between steps in this instance and weigh that against the cost of using up screen real-estate and user attention for those nav links.