How to Make Progress Bars Feel Faster to Users

by on 05/29/12 at 1:52 pm

In today’s age of instant gratification, making users wait too long for your application to load is a user experience issue. If users get the feeling that your application loads too slow, they’ll grow impatient, and spend their time elsewhere. While there are technical things you can do to speed up load times, some feature-rich applications have no choice but to make users wait a while in order for the application to work properly. When you’ve optimized your application all you can and it still feels slow, there’s a way you can speed up your user’s sense of time to make them feel like your application loads faster than it really does.

When an application is loading, users will typically see a progress bar on their screen that gives them a visual indication of when the application will finish loading. The way your progress bar moves and animates affects how users perceive the load time of your application

Use Backwards Moving Ribbings

http://www.youtube.com/watch?v=2jsqNFx0U_w

A research study found that progress bars with backwards moving ribbings seem faster to users than forwards moving ribbings [1]. These findings show that “induced motion effects, which state that motion perception is not absolute, but rather relative to the surrounding visual context” creates an illusion of increased velocity, which alters our perception of progress bar time [1]. How to Make Progress Bars Feel Faster to Users

Increase the Number of Pulsations

Another way you can make your progress bar feel faster to users is to increase the number of pulsations it has. The same research study found that “the progress bar with increasing pulsation was more likely to be perceived as having a shorter duration” [1]. Increasing pulsations are much like the beats per measure of a song. The more beats per measure, the greater the tempo and the faster the song is played. When a progress bar pulsates, it acts like a metronome counting the “tempo” of the progress time. How to Make Progress Bars Feel Faster to Users This finding also has implications for indeterminate activity indicators. Indeterminate activity indicators are like progress bars except they’re radial rather than linear, and they don’t show when a process will complete. They’re used more for telling users that progress is taking place, but without indicating the extent of it. If your application uses activity indicators, you can make load times feel faster to users by increasing the number of revolutions it has. The more times your activity indicator spins in a duration, the faster your application will feel to users.

Accelerate the Progress and Avoid Pauses at the End

A separate study found that progress bars with accelerating progress was strongly favored over decelerating progress [2]. This means that progress bars “with the fastest progress occurring near the end of the process” were perceived faster than progress bars “with pauses near the process conclusion” [2]. If your progress bar will have pauses, you can downplay the progress in the beginning of the process and accelerate it towards the end to give users a rapid sense of completion time. Users are much more tolerable with pauses at the beginning of the progress than at the end. How to Make Progress Bars Feel Faster to Users

Progress Bar Time is Relative

Intelligent and informed design can make your progress bar seem faster than it really is. This comes in handy when you’ve exhausted all the options for application optimization you possibly can do. Many feature-rich applications that have long load times can benefit from using these techniques. When it comes to user experience, perception is everything. If your application looks and feels faster to users, maybe it actually is.

References

[1] http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf

[2] http://www.scribd.com/lmjabreu/d/2226848-Rethinking-The-Progress-Bar


How to Make Progress Bars Feel Faster to Users How to Make Progress Bars Feel Faster to Users

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

19 Responses to “How to Make Progress Bars Feel Faster to Users”

  1. Hugo

    May 30th, 2012

    Hey, nice article !

    It’s fun (and useful of course) to see that kind of observations. I should remember that when I have to design a progress bar / loader.

    Thanks for sharing anyway. :)

  2. Chris LaChance

    Jun 6th, 2012

    I was just talking about this with our dept about a month ago, trying to push a faster spinner (i had no evidence then however).

  3. Jeroen van der Tuin

    Jun 6th, 2012

    Can’t wait to whip such a fast looking progress bar out on a client. Great observation and might just mean the difference between cancelling a download and waiting just a little bit more.

  4. Paul

    Jun 6th, 2012

    great read! I loved the last part that said users tolerate slower acceleration at the start, but not towards the end of the process.

    great great great!

  5. Alex Coady

    Jun 6th, 2012

    Interesting article. Might have a play with some CSS3 effects for use in a web application.

  6. Pierre

    Jun 7th, 2012

    It’s nice post, thanks you very much.

    I’m change my progress bar ASAP.

    See you,
    Pierre

  7. Paul d'Aoust

    Jun 7th, 2012

    Ha, that’s hilarious! The psychology of the human eye, eh? Thanks for the clever advice.

  8. GameZone

    Jun 11th, 2012

    Great Article. I should remember that when I have to design a progress bar / loader.

  9. Christopher Roberts

    Jun 16th, 2012

    Very clever stuff, the psychology of time perception!

    “Accelerate the Progress and Avoid Pauses at the End” – totally true I think, I would much rather the first half took 40 seconds to load and the second 20, rather than the other way around.

    Thanks for bringing this to my attention, it has very interesting implications :-)

    Christopher

  10. Alistair Lattimore

    Jun 22nd, 2012

    I’ve never seen research to support whether this is good or bad but in cases where you don’t know how long something is going to take and a radial progress indicator is used, a lot of web sites use helpful/interesting messaging to keep the user engaged while they wait.

  11. Mark Cowtan

    Aug 11th, 2012

    Excellent information, many thanks. Makes a lot of sense. On sites with lots of big images in sliders, load time is a big concern. If you can fool the user into thinking “its almost loaded” it could make a big difference in bounce rate for first time visitors. People dont mind slightly slow sites if they know the content is good, but first time visitors, the first experience must not be off-putting.

  12. Stefan

    Sep 20th, 2012

    Good article, especially the backwards ribbing makes a lot of sense!

    There are two things I’m missing though:
    1. Don’t add time estimates when you can’t reliably make them (I’m looking at you, file copy dialog!). Inaccurate time estimates only increase annoyance levels.
    2. Use sub bars for sub processes – it makes the different stages of an operation more visible, and distracts from the varying speeds of the main progress bar which may seem to be stuck at times. (Note this also increases the apparent ‘pulse rate’ that is mentioned in this article)

  13. Steven St. John

    Sep 20th, 2012

    The tip about speeding up the progress bar towards the end is consistent with the peak-end rule from psychology. (See: http://en.wikipedia.org/wiki/Peak%E2%80%93end_rule)

  14. Mick

    Sep 20th, 2012

    One of the things about pauses at the start, we’ve all come to expect “some” delays there – like “Are you sure?” and other confirmation screen as well as queries as to where you want the file saved, or to “Open file when download finished”, etc. IOW, we expect there to be some “overhead” at first, and we tolerate watching a stumbling progress bar.

    However, at the end of a long (especially a so-far smooth) download, it might appear as if it crashed or got hung-up – a condition we’ve all experienced and don’t tolerate.

  15. Alastair McDermott

    Sep 21st, 2012

    Very interesting. Any example GIFs that use these techniques?

  16. ChadF

    Sep 23rd, 2012

    Maybe someone should implement the seeming opposite style “progress bar” to mock the human psychology effect.. A cup/pan side view with a slooooow drip filling it up as it goes. Here comes another drop.. almost.. getting there.. any minute now.. and.. and.. DRIP! There we go. Now repeat 1000 times till full. =)

  17. Daniele

    Nov 13th, 2012

    Nice article, but what if we quit progress bar at all ? And what if we apply something as used in the Chrome browser ? A circle filling up based on the size downloaded plus some ticks rotating with a speed proportional to the download speed ? I actually put up this solution for one of my clients… you can see a video explaining the solution here: http://youtu.be/7wjdwOyqjZg

  18. Cristian Rojas

    May 27th, 2013

    Amazing article, thanks for posting, the studies pdfs are very useful

  19. Brandan

    Mar 20th, 2014

    On website games with long load time have a mini game with it.

Leave a Comment