It’s impossible to ignore the evolution of app and OS interfaces. Online especially, we now see more colors, rounded shapes, animation and feedback showing what’s going on minute by minute.

Some of the most improved elements are progress indicators. Once these were simple lines in a console made from the characters ‘-‘, ‘/’, ‘|’ and ‘\’. Then they became bars that gradually filled with unique symbols. More advanced still, today’s progress indicators have beautifully colored interfaces and engaging animations.

Progress indicators come in two kinds. Firstly, there are ‘undetermined’ displays which show an app is processing your instruction but doesn’t indicate how far it is from completing it. Websites like YouTube and which use Ajax have these. Here’s an example:

Secondly, there are progress bars proper which continually adjust to show how much of a task has been fulfilled and how much remains. Do a Google Image search and you’ll find many examples. The (Flash) site Pretty Loaded offers a gallery of pre-loaders which realize this concept with different shapes. Here’s one example:

Mind Games

Any given task will take a set time to complete. But progress indicators can crucially influence how we perceive this time, and be the difference between us cancelling a download or purchase, and waiting a few a more precious seconds.

Many factors affect this ‘perceived’ or ‘apparent’ time, as the UXMovement article How to Make Progress Bars Feel Faster to Users shows. Carnegie Mellon University studies by specialists from the Research Laboratories of AT&T and the University of New York (http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf) come to similar conclusions.

Features mentioned in this article include:

Animate In The Opposite Direction

New interfaces increasingly use engaging animations in their progress indicators. These show the app is still running – in the same way spinning characters once did – even if the progress bar itself is actually static, and can help quicken the perceived speed of an operation.
More recently, we’ve learned that running an animation’s graphical elements in the opposite direction to the progress bar also shortens perceived time.

Increase The Pace With Pulse

Progress bars use pulse more commonly in their animations than undetermined indicators do. The bar’s color changes for a moment then returns to normal. When this action is continually repeated, it creates the sensation of pulse which – studies show – reduces perceived time. But treat with care: too much pulse may put some users off!
A well known trick is to increase pulse frequency the closer a task is to completion. This also helps shorten perceived time.

Quicken Towards Completion

Studies prove that if a display shows progress to be accelerating towards the end of an operation, this reduces perceived time – even if the actual time taken remains constant. When Windows 7 took over from Vista, it used this technique to enhance the file-copying experience.

Put An End To Pauses

Be careful to avoid final pauses at the end of an operation. OK, the user’s now at a point where they’re unlikely to quit. But such delays can ruin the satisfying sensation of fast progress that’s been achieved up to that point. And may mean the difference between a person using your system and a rival’s in future.

Ongoing UX research, and our deeper understanding of human perception, means the search for the perfect progress indicator is likely to go on for some time yet. The astonishing evolution achieved so far shows this will be an exciting and creative journey.