Menu Search
Jump to the content X X

Best Practices For Animated Progress Indicators

Visibility of system status is one of the most important principles in user interface design. Users want to feel in control of the system they’re using, which means they want to know and understand their current context at any given time, and especially when a system is busy doing work. A wait-animation progress indicator is the most common form of providing a system status for users when something is happening or loading.

To get a better understanding of how your UI designs can benefit from animated progress indicators, it will help to sketch out your (app) ideas. A few months back, Adobe introduced a new design and wireframing app called Experience Design (or Adobe XD), designed for creating interactive wireframes and user interfaces. The app is still in public beta, with features added on a regular base, and you can download and try it out for free1. In this article, we’ll explore the main types of animated progress indicators and provide recommendations on when and how to use each type.

Further Reading on SmashingMag: Link

Good Interaction Design Provides Feedback Link

While an instant response from an app is the best, there are times when your app won’t be able to comply with the guidelines for speed. A slow response could be caused by a bad internet connection, or an operation itself can take a long time (e.g. install an update for OS). For such cases, in order to minimize user tension, you must reassure the users that the app is working on their request and that actual progress is being made. Thus, you should provide feedback to the user about what is happening with the app within a reasonable amount of time.

Always Give Some Type of Immediate Feedback Link

A user’s wait time begins the moment they initiate an action, and the worst case is when they don’t have any indicator the system has received it. When an app fails to notify users that it’s taking time to complete an action, users often think the app didn’t receive the request, and they try again. Plenty of extra clicks and taps have resulted due to a lack of feedback.

Any action, such as clicking a button or pulling to refresh, should have an immediate reaction. It’s essential to give some visual feedback immediately after receiving the request from the user to indicate that the process has initiated.

Pull-To-Refresh action. Image credit: Behance6
Pull-To-Refresh action Image credit: Behance7

Use A Progress Indicator For Any Action That Takes Longer Than One Second Link

When the app takes more than 0.1 second but less than one second to respond to user input, it feels like the app is causing the result to appear. Although users notice a short delay, they stay focused on their current task. After one second, the user’s attention begins to wander, and they notice that they’re waiting for a slow app to respond.

In order to reduce a user’s uncertainty, offer a reason to wait with a progress indicator for any action that takes longer than about one second (Note: the use of animation isn’t recommended for anything that takes less than one second to load, because users might feel anxious about what just flashed on the screen). Animated progress indicators mitigate the negative effects of waiting and prolong the user’s attention on the site or in the app.

Types Of Progress Indicators Link

Progress indicators tell users that the app needs more time to process the last user action. The simplest form of process indicator is indeterminate — these types of indicators request users to wait while something finishes, but they don’t indicate how long it will take.

8
Infinite looped animation offers feedback that the system is working, but doesn’t provides any information about how long the user will have to wait. Image credit: Behance9

As a general rule, you should use this type of progress indicator for fast actions (2–10 seconds). Making the user stare at a spinning wheel or infinite linear animation longer can increase bounce rates for your website or cause people to close your app.

Another type of progress indicators tell how long an operation will take (approximately or exactly). These types of indicators are called determinate. They are the most informative type of wait-animation feedback since they show the current progress, how much has already been accomplished, and how much is left. A visual indicator that progresses towards completion puts the user at ease and increases their willingness to wait.

Indeterminate indicators visualize an unspecified wait time, while determinate indicators display how long an operation will take.10
Indeterminate indicators visualize an unspecified wait time, while determinate indicators display how long an operation will take. Image credit: Material Design11. (Large preview12)

There are two popular types of animated progress indicators — looped animation and percent-done indicator.

Looped Animation Link

Since the majority of looped animation is indeterminate and serve a variety of types of delays, including long ones, this type of progress indicator tends to have negative connotations.  For example, a default loading icon in Apple iOS (spinner of gray lines radiating from a central point area) serves a variety of operating system functions, indicating the status of everything from device boot to problems connecting to network or loading data. Because of that, users don’t like to see only a loading spinner with no indication of progress or time.

Watching a loading spinner is like watching the clock tick down — when you do, time seems to stop13
Watching a loading spinner is like watching the clock tick down — when you do, time seems to stop. Image credit: appance14

Percent-done Indicator Link

A percent-done indicator is a determinate progress indicator that fills from 0% to 100% and never decreases in value. Both linear and circular progress indicators may be percent-done.

Loading bar15
Linear percent-done progress indicator Image credit: Adobe Stock1816
Circular percent-done progress indicators17
Circular percent-done progress indicators Image credit: Adobe Stock1816

As a general rule of thumb, you should use a percent-done animation for longer processes that take 10 or more seconds. Based on Jakob Nielsen’s research about response times19,  10 seconds is a limit for users to keep their attention on a task, after this time users quickly grow impatient if they don’t have enough information on how long they have to wait for the result.

Tips For Progress Indicators Link

You should always try to make the wait more pleasant if you can’t shorten the line.

Explain Why User is Waiting Link

Many times, if users are informed, they may be more patient. It can be helpful to add additional clarity by including text that tells the user what is happening or explains why the user is waiting.

Skyscanner tells users it’s searching the best flights by checking all available providers20
Skyscanner21 tells users it’s searching for the best flights by checking all available providers.

Provide a General Time Estimate for Time-Consuming Tasks Link

Don’t try to be exact, a simple, “this might take five minutes” can be enough for the users and encourage them to wait it out.

Software update estimation in Apple iOS22
Software update estimation in Apple iOS

Show Absolute Amount of Work Done Link

For time-consuming operations where it’s unknown in advance how much work has to be done, it may be impossible to use a percent-done indicator, but you still can provide running progress feedback regarding the absolute amount of work done. In this case, consider showing the number of steps, because knowing the number of steps helps users at least form an approximate estimate.

When the progression can’t be monitored accurately consider showing the number of steps instead of percent number.23
When the progression can’t be monitored accurately, consider showing the number of steps instead of percent number.

Don’t Stop a Progress Bar Link

A progress bar makes users develop an expectation for how fast the action is being processed. As a result, any unexpected freezes will be noticed and will impact user satisfaction. The worst possible case is when progress bar approaches 99% and suddenly stops. Most users will be frustrated by this behavior because it makes them think the app is frozen. Hopefully, there is a simple solution  — you can disguise small delays in your progress bar by moving it instantly and steadily.

Image credit: Behance24
Image credit: Behance25

Make Progress Bars Feel Faster to Users Link

Keep in mind that perception can be just as important as raw speed. In order to make a progress bar26 feel faster27 to users you can start the progressive animation slower and allow it to move faster as it approaches the end. This way, you give users a rapid sense of completion time.

Image credit: Behance28
Image credit: Behance29

Offer a Visual Distraction Link

Creative progress indicators can reduce a user’s perception of time. If an app gives users something interesting to look at while waiting, this makes users pay less attention to the wait itself. Thus, to ensure people don’t get bored while waiting for something to happen, offer them a distraction. For example, this can be something fun…

Image Credit: Behance30
Image Credit: Behance31

Or something adorable…

Image credit: Vimeo32
Image credit: Vimeo33

Or something unexpected that catches users’ attention long enough for your app to load.

Fine animations can distract your visitors and make them ignore long loading times. Image credit: Behanc34
Fine animations can distract your visitors and make them ignore long loading times. Image credit: Behance35

Skeleton Screens: A Great Alternative To The Traditional Progress Indicators Link

As you’ve just learned, when things are going to take a while, we let people know that using progress indicators. However, while the intentions behind progress indicators are good, the end result can turn out to be bad. As Luke Wroblewski mentioned in his article36: “Progress indicators by definition call attention to the fact that someone needs to wait. It’s like watching the clock tick down — when you do, time seems to go slower.” With the introduction of progress indicators to our UIs, designers often make people watch the clock. While it’s better than nothing, when you design UIs you should always try to make the wait more pleasant.

Hopefully, there’s a good alternative of progress indicators, the technique that lets people have a great experience while they are waiting. And this technique has a name, skeleton screen. Skeleton screens (a.k.a temporary information containers) are essentially a blank version of a page into which information is gradually loaded. Rather than show a loading indicator, skeleton screens focus on actual progress and create anticipation of what is to come. This creates the sense that things are happening immediately as information is incrementally displayed on the screen and people think that the application is acting while they wait.

Medium uses this trick, showing a simple wireframe as a placeholder, while the actual content loads. The load screen also makes the user familiar with the overall structure of the content being loaded.

Medium37
Medium focus on content being loaded, not the fact that it’s loading. Image Source: merhl38 (Large preview39)

Conclusion Link

No matter how fast we make our app and sites, there will often be something that takes time to process. Wait animations, such as loading spinners and percent-done indicators, reduce uncertainty by informing users of the current working state and increase the likelihood that the user will stay and wait for the information to load. A rule of thumb is to use a looped indicator or skeleton screens for reasonably fast operations taking between two and ten seconds, and a percent-done indicator for operations taking more than about ten seconds. When choosing between looped animation and skeleton screens, it’s probably a good idea to favor latter because they contain one important advantage — they can improve the feel of any action taking longer than a few milliseconds.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app40 is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them — all in one place.

You can check out more inspiring projects created with Adobe XD on Behance41, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free42.

(il, ms, vf, aa)

Footnotes Link

  1. 1 https://adobe.ly/2hej6U0
  2. 2 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
  3. 3 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
  4. 4 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  5. 5 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Pull-To-Refresh-action.gif
  7. 7 https://www.behance.net/gallery/24541501/Gear-Powered-Pull-to-Refresh-UI-animation
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Infinite-looped-animation.gif
  9. 9 https://www.behance.net/gallery/18484593/Loader-App-(Gifs)
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Indeterminate-indicators.gif
  11. 11 https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Indeterminate-indicators.gif
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/11/loading-spinner.gif
  14. 14 http://www.appance.com/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Linear-percent-done-progress-indicator-opt.jpeg
  16. 16 https://stock.adobe.com/stock-photo/progress-loading-bar-flat-style-vector-set-of-ten/84209613
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/11/percentdone-opt.jpg
  18. 18 https://stock.adobe.com/stock-photo/progress-loading-bar-flat-style-vector-set-of-ten/84209613
  19. 19 https://www.nngroup.com/articles/response-times-3-important-limits/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Skyscanner-opt.png
  21. 21 https://www.skyscanner.net/
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Software-update-estimation-in-Apple-iOS-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Installed-Field-module-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/progress-bar-opt.gif
  25. 25 https://www.behance.net/gallery/8490779/Progress-bar
  26. 26 http://johnnyholland.org/2008/11/the-effect-of-the-progress-bar/
  27. 27 http://johnnyholland.org/2008/11/the-effect-of-the-progress-bar/
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/11/make-progress-bar-feel-faster-opt.gif
  29. 29 https://www.behance.net/gallery/23015991/Freebie-Progress-Bar
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Visual-Distraction-opt.jpg
  31. 31 https://www.behance.net/de_martin
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/12/adorable-kitten.gif
  33. 33 https://vimeo.com/44251833
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Fine-animations.gif
  35. 35 https://www.behance.net/gallery/19040507/Round-iPhone-app
  36. 36 http://www.lukew.com/ff/entry.asp?1797
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/12/medium-large-preview-opt.png
  38. 38 https://twitter.com/merhl/status/694259963225587712
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/12/medium-large-preview-opt.png
  40. 40 https://adobe.ly/2hej6U0
  41. 41 http://adobe.ly/1U9LS0E
  42. 42 https://adobe.ly/2hej6U0

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    nice article !!

    3
  2. 2

    Denys Mishunov

    December 7, 2016 11:49 am

    Good collection, Nick. Well done!

    3
  3. 3

    Nice article & well explained. One small point … no discussion of animations is complete without reminding that due care needs to be taken to avoid triggering migraines & seizures. Inclusive UX design & paying attention to accessibility guidelines can save you from nasty unintended consequences, bad publicity & risk of lawsuits. There’s a heartfelt summary here with links to the relevant official guidelines – http://www.doitmyselfblog.com/2010/do-your-flashing-ads-cause-seizures/

    6
  4. 4

    Thanks for really good post.

    I’ve created Loading screen as the random good quotes. My users didn’t have any comment about loading time. They seem to loved it.

    0
  5. 5

    Peter Fransson

    December 7, 2016 1:41 pm

    Thanks Nick, useful reading, you pretty much covered it all! Great, fun examples as well!

    0
  6. 6

    But how do we use skeleton screens in the app where the screen itself is too small.

    0
  7. 7

    Skeletons screens are also known as “app shells”:
    https://developers.google.com/web/updates/2015/11/app-shell

    0
  8. 8

    Yantram Studio

    December 8, 2016 5:30 am

    This is completely spectacular Information. Really wonderful.

    0
  9. 9

    This is very useful .Your writing and the way of explanation are very good.Thank you for sharing.

    0
  10. 10

    Good article. Maybe, where applicable, consider crediting the people that designed the things rather than Behance, Vimeo, etc?

    0
  11. 11

    Informative article. I was just yesterday creating a loading gif and now I am wondering how to make a progress indicator accessible. Any ideas?

    0
  12. 12

    Nice article!
    Thank you for this information Nick, very useful.

    0
  13. 13

    I enjoy whatever you guys are typically up too. These kinds of clever work and reporting! Continue the wonderful works guys I’ve included you guys to blog roll.

    0
  14. 14

    Thank a lot for this post that was very interesting. It’s really helpful for all of us. Keep posting like those amazing posts, this is really awesome.

    0
  15. 15

    Thanks for sharing.

    0
  16. 16

    I am really happy with articles quality and presentation.Thanks a lot for keeping great stuff. I am very much thankful for this site.

    0

↑ Back to top