Making better progress bars
May 12 2010 ยท User Interface Design
An interesting study I came across a while back, regarding changing the animation of progress bars to alter users’ perception of how long an activity (e.g. a file download) takes to complete. By just changing the animation of the progress bar, an activity can seem 10% faster to users.
… Harrison’s group generated a series of animated progress bars: some pulsated between pale and dark blue at varying speeds, and others had pale blue ripples moving either left or right, also at different rates, as the bar crept forward (see video).
Many participants said that progress bars which pulsated increasingly quickly made the download time seem shorter than those that pulsated increasingly slowly.
A significant number also said downloads were faster when ripples in the progress bars moved to the left rather than to the right.
Note the key phrase, increasingly quickly; the pulsating of the progress bar has to accelerate.
In terms of the ripples, it seems they need to accelerate (I’m assuming, the article wasn’t specific on this point) or decelerate as well. Constant velocity ripples (such as those in OS X progress bars) actually result in a negative effect:
Apple uses left-moving ripples that travel at a constant velocity for progress bars in Mac OS X. However, many of the volunteers in Harrison’s study said that this type of animation appeared slower than one in which the left-moving ripples slowed down as the download neared completion.