UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Follow publication

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

Saadia Minhas
UX Planet
Published in
5 min readOct 21, 2024

Dribbble

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.

Progress Bar Design and Animation in Figma by UX World

Elements of a Progress Indicator

A good progress indicator UX provides the following information.

  1. Part of the process completed
  2. Current status of the process
  3. Part of the process remaining
  4. Details of the on-going process
Progress indicator showing the (i) part of the process completed, (ii) current status of the process, (iii) part of the process remaining, (iv) details of the 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.

  1. Linear progress indicator
  2. Circular progress indicator
  3. 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.

A Linear Indeterminate Progress Indicator showing an infinite progress loop. Dribbble

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

A Linear Determinate Progress Indicator helps the user to analyze the progress of a process. Dribbble

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

Dribbble

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.

A Circular Indeterminate Progress Indicator showing a looped animation. Dribbble

(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 Determinate Progress Indicator shows the progress of a process from start to end. Dribbble

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.

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

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.

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

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.

Dribbble
Dribbble

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.

Published in UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Written by Saadia Minhas

UX Design Passionate | Love to share and learn about UX design | https://uxdworld.com/

Responses (5)

Write a response

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, dow...

Good

--

Informative

--

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, dow...

Good Writing

--