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: