Monday, November 28, 2016

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


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”






Answer



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.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...