Gmail's new loading bar drew my attention to this today:
The colored pattern inside the bar animates from right to left.
The Mac OS progress bars do the same:
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:
Increase the Number of Pulsations - “The progress bar with increasing pulsation was more likely to be perceived as having a shorter duration”
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