Why do progress bars animate backwards?

  • 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.


    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”

    You mean from left to right ?

    @MFrank2012: the _animation_ inside the progress bar goes right to left. (The blue color gradient changes.)

    This is a GREAT UX question. If I ever make a progress bar, it will have this feature.

    I was actually thinking about this today and logged on SE to ask this very question. Kudos to you.

    You have a good eye. Very good question indeed. @fredley What did you use to take the animated screenshot? It would be handy.

    @geekpanth3r I didn't, someone else made it and added it to the question later on. I'm pretty sure they made it manually.

    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.)

    The "backwards" turning bar looks to me like a drill grinding the hole left-to-right, and moving "drilldust" right-to-left

    car wheels certainly look fast when they spin to such a speed that the spokes appear to be slowly going backwards, perhaps this has something to do with the perception

    I think Einstein's theory of relativity might come into play here: https://www.youtube.com/watch?v=ev9zrt__lec. I might be wrong, but I have a feeling it might be.

  • csulok

    csulok Correct answer

    9 years ago

    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.

    Could you summarize the studies? We're trying to prevent long-term link rotting.

    So my ass-umption made an ass of no-one! Awesome.

    Or, if you don't want to summarize, you could at least give full citations?

    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.

    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.

    Video link is broken :)

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM