Showing progress in a step-by-step process
While designing for a sign-up process, I'd like to be able to show a progress indicator dictating how many steps are in the process, total. Right now, I'm using little dots across the top of the screen that "fill in" as you're making progress during the page-by-page sign-up.
My question is in regard to a particular step that could extend or contract the number of remaining steps because a step is added or taken away. It feels weird that, in the middle of a 4-step process, a choice made on Step 2 would then show 5 dots on the following page.
Is there an alternative method to make this feel less strange? Or is the idea for a progress indicator made null because of how this sign-up process works?
My question is in regard to a particular step that could extend or contract the number of remaining steps because a step is added or taken away. It feels weird that, in the middle of a 4-step process, a choice made on Step 2 would then show 5 dots on the following page.
Is there an alternative method to make this feel less strange? Or is the idea for a progress indicator made null because of how this sign-up process works?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Percent will work but could lead to complications in some scenarios. Depends on if you are showing current "completion" stage as the percentage, or the current "step" as the percentage and how many more steps are added at any given stage.
Consider with a 4 step process, that can change to 5 steps after step2:
Completion Stage Example:
Step 1 of 4 = Shows 0% progress
Step 2 of 4 = Shows 25% progress
+
Step 3 of 5 = 50% progress
Step 4 of 5 = 60% progress
Step 5 of 5 = 80% progress
Current Step Example:
Step 1 of 4 = Shows 25% progress
Step 2 of 4 = Shows 50% progress
+
Step 3 of 5 = 60% progress
Step 4 of 5 = 80% progress
Step 5 of 5 = 100% progress
In the second example above, if you were to add an extra step (ex "2 of 4" transitions to "3 of 6"), both steps would show 50% as the current step:
Step 1 of 4 = Shows 25% progress
Step 2 of 4 = Shows 50% progress
+
Step 3 of 6 = 50% progress
Step 4 of 6 = 67% progress
Step 5 of 6 = 83% progress
Step 6 of 6 = 100% progress
Add two more steps and the transition percent would actually go backwards. So using the percentage will come down to how many steps are added potentially.
Consider with a 4 step process, that can change to 5 steps after step2:
Completion Stage Example:
Step 1 of 4 = Shows 0% progress
Step 2 of 4 = Shows 25% progress
+
Step 3 of 5 = 50% progress
Step 4 of 5 = 60% progress
Step 5 of 5 = 80% progress
Current Step Example:
Step 1 of 4 = Shows 25% progress
Step 2 of 4 = Shows 50% progress
+
Step 3 of 5 = 60% progress
Step 4 of 5 = 80% progress
Step 5 of 5 = 100% progress
In the second example above, if you were to add an extra step (ex "2 of 4" transitions to "3 of 6"), both steps would show 50% as the current step:
Step 1 of 4 = Shows 25% progress
Step 2 of 4 = Shows 50% progress
+
Step 3 of 6 = 50% progress
Step 4 of 6 = 67% progress
Step 5 of 6 = 83% progress
Step 6 of 6 = 100% progress
Add two more steps and the transition percent would actually go backwards. So using the percentage will come down to how many steps are added potentially.
ASKER