Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Gmail's new loading bar drew my attention to this today:

Gmail loading bar

The colored pattern inside the bar animates from right to left.

The Mac OS progress bars do the same:

Mac OS progress bar

Is there a reason for this? If I was asked to animate a progress bar I'd automatically do it the other way, so I'm assuming it must have been a conscious decision.

Update

I recently read an article that included other ways of making a progress bar appear faster to users:

  1. Increase the Number of Pulsations - “The progress bar with increasing pulsation was more likely to be perceived as having a shorter duration”

  2. Accelerate the Progress and Avoid Pauses at the End - 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”

share|improve this question
8  
@MFrank2012: the animation inside the progress bar goes right to left. (The blue color gradient changes.) –  jberger Mar 8 '12 at 22:30
4  
This is a GREAT UX question. If I ever make a progress bar, it will have this feature. –  jberger Mar 8 '12 at 22:34
6  
I was actually thinking about this today and logged on SE to ask this very question. Kudos to you. –  Sonic42 Mar 9 '12 at 1:04
1  
If you have a look at windows 7 progress bar, its animated forwards, a light glow hits right (incomplete) end of of green bar from left, and you will notice each time this happens it gives user a perception that progress bar filled up by a small step. This is incredibly useful in systems where people are used to see slow and frozen progress bars. (This is just an observation. No offence meant to anyone.) –  user117 Sep 24 '12 at 10:10
3  
The "backwards" turning bar looks to me like a drill grinding the hole left-to-right, and moving "drilldust" right-to-left –  Lenne Jun 13 '13 at 9:44
show 4 more comments

4 Answers

up vote 205 down vote accepted

Studies have shown it looks faster and in UX perception is everything ;)

A study (PDF)[1] demonstrates that animations can increase the perceived speed of a download by up to 11% over a bar that is not animated. Having a reverse-animated background as in the Gmail loading bar, or having the background pulse faster as the bar nears completion, both create this effect. There is a video demonstrating the animations and summarizing the article.

[1] Harrison, C., Yeo, Z., & Hudson, S.E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentation. Proceedings of Computer-Human Interaction.

share|improve this answer
42  
Could you summarize the studies? We're trying to prevent long-term link rotting. –  dnbrv Mar 8 '12 at 18:23
4  
So my ass-umption made an ass of no-one! Awesome. –  msanford Mar 8 '12 at 19:15
2  
Or, if you don't want to summarize, you could at least give full citations? –  SamB Mar 8 '12 at 19:38
7  
No need to summarize a study. Just think for a second... The main anchor point is the front of the progress. A reverse animation makes your brain create mini anchor points from the animation. Because mini anchor points move left and the progress moves right, it seems like the distance is getting larger. Hence, the bar appears to be moving faster. –  jberger Mar 8 '12 at 22:50
4  
good job on showing the study. science trumps common sense a lot of times and sometimes they are congruent. point is you need to have science to back it up. –  Jason Sebring Mar 9 '12 at 3:01
add comment

This is an assumption, but it's likely because it makes the progress bar appear to fill more rapidly.

This effect is achieved because the right edge of the bar, the consequential part, is moving in the opposite direction from the animation, thereby making the increments that bar edge moves appear larger than they do relative to the box containing the filling bar.

share|improve this answer
add comment

In addition to the perceived-speed reason offered by the other answers, this interior-pattern animation also makes sense at another logical/analogical level.

The example progress bars are animating in two ways: (1) the area representing progress is widening, with its right-edge moving to the right; and (2) the colored pattern inside is shifting, right-to-left (the 'opposite' direction).

Animation (1) serves to indicate overall progress – and while that edge is noticeably moving, it also indirectly confirms that something is happening.

Animation (2) serves to show that something is happening even when the overall progress-level may seem stuck, or moving imperceptibly.

In that sense, animation (2) is more like a spinner: its motion is not a magnitude indicator (of either rate or absolute progress) but a confirmation, while it is moving at all, that something is ongoing.

Now, why does a spinner usually move clockwise? Because our experience with clock hands strongly associates that rotation with the progress of time.

Similarly, the 'crawling' animation (2) leans on our experience (at least for readers of left-to-right languages) that following a line of text to its conclusion causes the text to move from right-to-left under our gaze. The same goes for a typically-rendered timeline, where later periods are notched to the right. Reviewing it from past to future makes its ticks move right-to-left in our vision. (The same is also common for chronologically-ordered photo-albums which animate photos in and out: moving to later photos sends the earlier photos off to the left while later photos enter from the right, as if on one long filmstrip.)

The widening bar itself is thus a sort of window onto an abstract surface; the fact that the textured surface is moving right-to-left indicates moving towards the future/completion. (The fact that this animation, contrasted against the rightmost edge of the progress bar, also tends to make that magnitude-edge look like it's moving rightward even when it's temporarily halted is another visual bonus.)

You will occasionally see 'crawler' activity-indicators that don't even try to indicate overall progress via growing width. They just have a fixed-size rectangle of candy-striping or other texture. That interior pattern often also moves right-to-left, as if scanning text or other linear media... but also sometimes moves the other way, as if rolling/drilling something forward. (I suspect that it is when people view the texture as representing their busy worker-agents, rather than scanned subject matter, that they see left-to-right as progress. For example, the mental model may be one shared with side-scrolling games that start on the left and move right. The character moves right, the background moves left.)

share|improve this answer
add comment

This took forever to make using Image Ready. lol


Going forward:

enter image description here



Going backward:

enter image description here


When the spiral is going against the bar direction, it does visually exagerate the speed of the bar movement.

The bars are pretty close to each other, so hide one with your palm and look only one at time. :)

share|improve this answer
11  
Great example - makes a lot of sense. –  codeinthehole Mar 11 '12 at 12:57
2  
Wow! wonderful. Presented very cleverly. –  Ashwin kumar Jul 22 '12 at 9:54
7  
wow...the time they spent trying to trick people...they could have just made the actual code faster.... hilarious –  user16832 Aug 1 '12 at 22:52
2  
+1 Perhaps the best way to answer the question, not just the right answer. –  Kris Sep 24 '12 at 11:36
    
+1 for your effort - and I would give another +1 if I could for the joy watching the two racing each other - and on my slow connection the first bar is always the faster one (lol) –  tillinberlin Jun 13 '13 at 15:41
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.