Determine your type of progress tracker
This tracker can be visible in many ways — a loading bar, a pie chart, numbered steps.
An experience with large sections would utilise numbered steps, or "milestones". One overall journey that has incremental steps would utilise a loading bar or pie chart better, perhaps with an overall percentage.
Create your states
A progress tracker with milestones needs to show 3 states:
- What's been completed
- What's currently being completed
- What hasn't been completed yet
Assemble your tracker
Final touches can include grouping your sections by milestone, and deciding how you want to label each milestone (by number or by title).
UX Design Patterns for Progress
A deeper dive into the anatomy of progress tracker, and different ways to visualise them.
Managing User Expectations With Progress Bars
A lean article that highlights the importance of giving feedback to the user through a progress tracker
Progress Trackers in UX Design
A good breakdown of do's and don'ts for progress trackers.
