Dynamic Progress Indicator

Question

I am currently working on a responsive web app and am having some issues designing a progress indicator that I am happy with.

The app is a workflow based tool which works by displaying cards horizontally across the users screen/tablet - a card for each step. When viewing on mobile the cards stack vertically. (See images below)

However the difficulty is this - at various junctures in the workflow the user has options and depending on what option they choose there may be more steps added to the flow or some taken away. So I have this situation where the progress indicator may be changing as the user moves through the flow.

I am concerned with this, in that it may cause frustration & confusion for the user to see their progress suddenly increase by a step as they work through a flow. Behaviour like this could negatively impact how the user perceives the product.

There are between 6-9 steps and the cards that cause the progress indicator to change are generally in the first 3.

Does anyone have any experience with a similar problem? Has anyone any suggestions to handle this better - from a UI/feedback perspective?

I have thought about using something that resembles a status bar or maybe a % based approach - although each has it's own cons.

Maybe the traditional progress indicator feedback method is not useful at all and the whole approach needs to be rethought?

I am currently using the UI approach below:

Answer 1

As the number of step in the progress is dynamic, it is unsure what you want to communicate. Your image says "You're at step 3 out of X", but you don't know that x, as it may change.

Some suggestions:

1. Skip the progress indication. What you gain from a progress indicator is lost in its arbitrariness.

   (If you have all steps available on the page by scrolling anyway, the scroll bar may already fill the need of an indicator.)

2. Skip the indication of how long the progress could be, by

   A. just saying "You're at step 3." but not "... of totally X." For example, there could just be a title saying "Step 4: User profile".

   B. just displaying previous and next steps, like "<< Setup" and "User profile >>"

3. Add substeps. If a step is introduced between step number, say, 4 and 5, then don't change the number of step 5 and 6, instead just introduce a subpart of 4, like 4b.

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

Answer 2

As you say - a progress indicator showing % or amount of steps thats changing can be feel incorrect if it changes. What about trying an unusual design: showing that depending of choices you make, the total amount of pages can differ. There may be different ways of designing a progress indicator that shows this scenario but I made a quick mockup of one possible solution.