UX Design of Creative Progress Indicators with Examples

What is a Progress Indicator?

When a user is working on a product, it is very common that he must wait for some time after performing an action. The progress indicators help to enhance the experience of this waiting time for the user.

It simply means that we need to provide the user some kind of feedback until the waiting time is over and the ongoing process is completed.

Progress indicators inform users about the status of the process, current progress, and how much time is remaining to complete the process.

There are many user actions that initiate the processes that require some time to show a response on UI. Examples of such processes include loading a web page, saving a document, downloading a file, etc.

This is a simple and very common behavior that needs to give attention to while designing a product.

However, you must have experienced a number of apps, websites, and products that do not take care of providing this feedback to the user. This leads to an annoying user experience as the user does not have a clue whether the action is being performed or not, he should wait on the screen or he should leave it.

This uncertainty hurts the trust of the user in your product.

Elements of Progress Indicator

A good progress indicator 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 below design principles:

Informative: The progress indicator shows the information of the ongoing process as well as its status in terms of completion.

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.

Animated: The progress indicator shows some kind of 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

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.

Linear Indeterminate

A Linear Indeterminate progress indicator is the one that displays for an unspecified period of time, or you can say when the waiting time period is not known.

These types of progress indicators are used for processes where progress is not detectable, or if it is not necessary for the user to tell them how long an activity will take.

Linear Determinate

A Linear determinate progress indicator is the one that displays for a specified period of time, or you can say when the waiting time period is detectable. They tell the user how long the process will take.

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 process is completed, the current progress, and how much is remaining. This helps to analyze the time taken by the process.

Circular 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.

Circular Indeterminate

A Circular Indeterminate progress indicator is the one that displays for an unspecified period of time, or you can say when the waiting time period is not known.

These types of progress indicators are used for processes where progress is not detectable, or if it is not necessary for the user to tell them how long an activity will take.

A Circular Indeterminate Progress Indicator showing a looped animation. Dribbble

Circular Determinate

A Circular determinate progress indicator is the one that displays for a specified period of time, or you can say when the waiting time period is detectable. They tell the user how long the process will take.

DribbbleDribbble

---

Circular with Value or Percentage

A circular progress indicator displays the progress of the process in terms of value or percentage. The user can easily see how much process is completed, the current progress, and how much is remaining. This helps to analyze the time taken by the process.

A Circular Determinate Progress Indicator showing the percentage progress of the process. DribbbleDribbble

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.

A Progress Indicator can be integrated with user actions. Dribbble

DribbbleDribbbleDribbbleDribbbleDribbbleDribbble

More Creative Progress Indicators

There can be more creative ways to design progress indicators that help the users easily understand the progress of the ongoing process.

DribbbleDribbbleDribbbleDribbble

Conclusion

Progress indicators are important design controls that are often ignored by UX designers. Without providing proper user feedback, the UX design of your product remains incomplete. This helps to reduce uncertainty for the users and they will wait for the response without getting annoyed.

Learn More

To learn more on how to design better experiences, consider the Interaction Design Foundation’s online courses on UI Design Patterns for Successful Software.

Apart from courses, webinars and bootcamps, the IxDF is also home to the biggest and most authoritative library of open-source UX Design Resources. Check out the free UX Literature here.

---

Thanks for reading.

Subscribe for more related articles at UX World.

If you have any questions, contact here: Facebook | YouTube | Twitter| Instagram | Linkedin