You're reading for free via Saadia Minhas' Friend Link. Become a member to access the best of Medium.
Member-only story
Designing Progress Indicators
Elements, design principles, styles, examples
Non-Medium members can read the story here.
What is a Progress Indicator?
When users interact with a product, they initiate a process that requires a specific time to show a response on the UI. A few examples include loading a web page, saving a document, downloading a file, etc.
Progress indicators inform users about the current state of the process, progress, and remaining time for completion.
UX designers define the behavior of progress indicators while designing a product. If not done properly, this can lead to an annoying user experience.
The users will not have a clue whether the action is being performed or not, they should wait on the screen or leave it.
Let’s discuss how progress indicators help users to be informed while working on a product.
Key Takeaways
- The progress indicators enhance the user experience by providing feedback on an ongoing process in response to a user action.
- A good progress indicator shows the progress completed, the current status of the process, the remaining process, and details of the process.
- There can be different styles of progress indicators including linear, circular, determinate, and indeterminate.
- The progress indicators also display the progress done as a number or percentage.
Learn how to design a progress indicator in Figma.
Elements of a Progress Indicator
A good progress indicator UX provides the following information.
- Part of the process completed
- Current status of the process
- Part of the process remaining
- Details of the on-going process
Design Principles to Create Progress Indicators
An effective progress indicator follows the key design principles mentioned below.
1. Informative
The progress indicator shows the information of the ongoing process and its status in terms of completion.
2. Consistent
The progress indicator follows a consistent style for similar processes. For example, uploading a file will display the same progress indicator everywhere in your product.
3. Animated
The progress indicator shows some animation to give the user an impact of something happening in the background.
Creative Progress Indicator Styles
Below is a list of creative progress indicators grouped by their type.
- Linear progress indicator
- Circular progress indicator
- Progress indicator integrated with action
1. Linear Progress Indicator
A linear progress indicator shows the progress of a process from start to end in the linear form.
A linear progress indicator can be ‘indeterminate’ or ‘determinate’ depending on its behavior.
(i) Linear Indeterminate
A Linear Indeterminate progress indicator displays for an unspecified time, or you can say when the waiting time is unknown.
These types of progress indicators are used for processes where progress is not detectable, or if the user doesn’t need to know how long an activity will take.
(ii) Linear Determinate
A linear determinate progress indicator displays for a specified time, or you can say when the waiting time is detectable. They tell the user how long the process will take.
(iii) Linear With Value or Percentage
A linear progress indicator displays the progress of the process in terms of value or percentage.
The user can easily see how much of the process is completed, the current progress, and how much is remained. This helps to analyze the time taken by the process.
2. Circular Progress Indicator
A circular progress indicator shows the progress of a process from start to end in the form of a circle.
Like a linear progress indicator, a circular progress indicator can be ‘indeterminate’ or ‘determinate’ depending on its behavior.
(i) Circular Indeterminate
A circular indeterminate progress indicator displays for an unspecified time, or you can say when the waiting time is unknown.
These types of progress indicators are used for processes where progress is not detectable, or if the user doesn’t need to know how long an activity will take.
(ii) Circular Determinate
A circular determinate progress indicator displays for a specified time, or you can say when the waiting time is detectable. They tell the user how long the process will take.
A circular progress indicator displays the progress of the process in terms of value or percentage.
The user can easily see how much of the process is completed, the current progress, and how much remains. This helps to analyze the time taken by the process.
3. Progress Indicators Integrated with Actions
The progress indicators can be integrated with user actions and display the status of the response in terms of time or percentage.
Examples of Creative Progress Indicators
There can be more creative ways to design progress indicators that help users easily understand the progress of the ongoing process.
A few examples of progress indicators are shown below.
Conclusion
A progress indicator is an important UI control often ignored by UX designers. The product’s experience is not completed without providing instant feedback to users in response to their actions. This helps to reduce uncertainty among users and they will wait for the response without getting annoyed.
Learn UX Design
Thanks for reading. If you like the post, hit the clap button.
For more articles like this follow me on Medium, and feel free to take a look at my lists. There’s one all about UI components.
Originally posted at UX World. This post contains affiliate links.
