How to Make Progress Bars Feel Faster to Users
by anthony 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]. 
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. 
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. 
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
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.
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).
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.
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!
Alex Coady
Jun 6th, 2012
Interesting article. Might have a play with some CSS3 effects for use in a web application.
Pierre
Jun 7th, 2012
It’s nice post, thanks you very much.
I’m change my progress bar ASAP.
See you,
Pierre
Paul d'Aoust
Jun 7th, 2012
Ha, that’s hilarious! The psychology of the human eye, eh? Thanks for the clever advice.
GameZone
Jun 11th, 2012
Great Article. I should remember that when I have to design a progress bar / loader.
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
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.
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.
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)
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)
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.
Alastair McDermott
Sep 21st, 2012
Very interesting. Any example GIFs that use these techniques?
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. =)
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
Cristian Rojas
May 27th, 2013
Amazing article, thanks for posting, the studies pdfs are very useful