
Progress Indicators in Mobile UX Design
by Nick Babich
Visibility of system status is one of the most important rules of UI design. It is possible to minimize user tension by informing r the user about what is happening with the app within a reasonable amount of time. And one of the most common forms of visual feedback is a progress indicator.
In this article, we’ll overview the main types of progress indicators and use cases for them.
Good Interaction Design Provides Feedback
While instant app’s response is the best, there are simply times when your app won’t be able to comply with the guidelines for speed. Slow response rate can be caused by slow loading times and network latency issues. For such cases, you must reassure the users that the system is working.
Essentially, feedback answers questions across three categories:
- Current Status: What’s happening?
- Outcomes: What just happened?
- Future status: What will happen next?
What is Good Progress Indicator?
Good progress indicators always give some type of immediate feedback. They notify users that the app needs more time to process the user action, and tell (approximately) how much time it will take. They have two main advantages:
- Reduce user’s uncertainty (system reassures the user that it is working).
- Reduce users’ perception of time (app gives the user something to look at while waiting. Thus, makes users pay less attention to the wait itself).
A user’s wait time begins the moment when she taps the button (initiates an action). Immediately, the system should give some visual feedback to communicate that it has received the request.
Use a progress indicator for any action that takes longer than about one second. For anything that takes less than 1 second to load, it is distracting to use an animation.
Types of Indicators
Progress indicators could be determinate or indeterminate:
- When indicators are determinate they indicate how long an operation will take.

- When indicators are indeterminate they just inform the user that something is happening.
There could be combinations of these two types of indicators.

Looped Animation
Loop animation offers feedback that the system is working, but usually doesn’t give enough information about how long the user will have to wait.
As a general rule you should use looped animation only for fast actions (2–10 seconds). When a user stare at a spinning wheel longer than 10 seconds, they can loose patience and leave product. Thus, such behavior can increase bounce rates.

It can also be helpful to add additional clarity for the user by including text that explains why the user is waiting (e.g. “Loading comments…”).
Users Expectations
Default loading indicator (like the iOS infinite loading spinner) tend to have negative connotations because they serve a variety of system functions, from indicating the status device boot to downloading a data from the internet. For the very same reason, users dont’ like to stare at loading spinner with no indication of progress or time.

Looped Animation Integration
You can integrate looped animation with existing controls, such as buttons. For Android application, a circular loader may be integrated with a floating action button.

The thought process here is to confirm that the submission was complete not necessarily the progress. That is shown through the completion of the circle.
System or Custom Looped Animation
Facebook app has very interesting experience with looped animation. Rusty Mitchell highlighted this moment when he talked about a Facebook loading indicator: “When the users were presented with a custom loading animation in the Facebook iOS app (left) they blamed the app for the delay. But when users were shown the iOS system spinner (right), they were more likely to blame the system itself.”

Linear Animation
A determinate linear progress indicator should always fill from 0% to 100% and never decrease in value. For multiple operations happening in sequence, you should use the indicator to represent the progress as a whole, and not each individual operation.

Percent-Done Animation
Uncertain waits are longer than known, finite waits. Percent-done progress indicators are the most informative type of wait-animation feedback. They show the current progress, how much has already been accomplished, and how much is left. A percent-done indicator makes users understand how fast the action is being processed.
As a general rule you should use percent-done animation for actions that take 10 seconds or more.

Provide a General Time Estimate
When it comes to user waiting time, in most cases, you don’t need to be exact (i.e. “Wait 1 minute and 31 seconds”). A simple, “This might take a minute” can be enough to inform the user and encourage them to wait it out.

Use Progressive Animation Trick
Progress bars tell users how long an action is taking, but they’re not always correct. You can disguise small delays in your progress bar by starting the progressive animation slower and allow it to move faster as it approaches the end. But the progress bar should never stop, otherwise users will think the app froze.

Show Steps
Instead of showing a percentage number, consider showing the number of steps. Users might not know how long each step lasts, but knowing the number of steps at least helps them form an estimate.
You can follow a classic step-description way:

Or follow more creative approach:

Skeleton Screens
You should always try to make the wait more pleasant if you can’t shorten the line. And wait-time is a right time for skeleton screens (a.k.a temporary information containers). A skeleton screen is essentially a blank version of a page into which information is gradually loaded.
Skeleton help users focus on progress instead of wait times.
Medium uses this trick, showing a simple wireframe as a placeholder, while the actual content loads. With a such screen, the focus is on content being loaded not the fact that its loading.
Don’t Use Static Text or Images
This group of indicators is represented by static image or text like “Loading…” or “Please wait…” to indicate that the request has been received. While any feedback is better than nothing, static indicators don’t offer enough information about what is happening and should be replaced with more meaningful type of indicator.

One Last Thing
To ensure people don’t get bored while waiting for something to happen, offer interesting visual effect. It can be something fun or something unexpected. Fine animations can distract your visitors and make them ignore long loading times.

Conclusion
Providing feedback is fundamental to a positive user experience. Feedback can reduce uncertainty for users and increase the time they are willing to wait.
Thank you!
Follow UX Planet: Twitter | Facebook
Learn how to design better products
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.