Progress Indicator
Problem
It’s not nice to leave people hanging.
Solution
Display an indicator that shows actual progress or at least that progress is being made.
Context
Your solution is doing something for longer than a few hundred milliseconds.
Rationale
Progress indicators are the digital version of holding up your finger while you finish chewing before responding to a question. You want to let people know that you heard them and that you’ll get them what they’re after as soon as you can. This is why it’s important to show them, even just after a short time.
People get antsy real quick when it comes to computers, especially. They fear the unknown more than anything, and anxiety can build quickly when they don’t know that something is going on, what is going on, how long it will take, and are unable to take control of their circumstances.
So, more advanced progress indicators do more than just hold a finger up; they can let people know actual proportionate progress, estimated time to completion, tell them what is going on, and also let them say “never mind” by canceling. If you can do these extra things, you should, as they provide much more transparency into the processing, which gives people knowledge a bit of control over the situation should they change their minds.
Implementation
There are a handful of common bits of feedback and control you can provide with progress indicators. As a general rule, the more, meaningful feedback you can provide, the better:
- The proportion of work done – this usually manifests in some sort of visual graph such as a bar that fills up, but it could be as simple as showing percentage from 0-100%. If you can’t know or show the proportion of progress, show an indefinite indicator such as a spinning circle or repeating bar (as in Windows XP and Vista start up).
- The estimated time remaining – if you can do this, it’s great, but they rarely end up being accurate due to all sorts of issues, so it’s usually a best guess. Err on the side of longer, and please, please do NOT end up saying “0 seconds remaining” for five minutes! If you estimate that badly, then don’t add this indicator.
- What is the application doing – if you can explain in normal human terms what is going on, do so. Reporting back every file that is being installed is not helpful to people, but if there are chunky operations that they’d understand and care about (e.g., “Now setting up your profile”), then let them know that you’re working on that.
- How to cancel the operation – if it can be canceled without undesirable results, do so. Usually, if something can’t be fully completed, you should undo to the previous state, unless you can seamlessly pick up where you left off. If it is a big operation, you might want to ask people if they want to leave it as it is or undo what had been done to that point, but only do that if they can make an informed decision. When in doubt, roll back to previous state.
Whatever you do, don’t freeze up the UI or provide no indication that the solution is doing processing requested. That leaves them hanging and leads to great confusion and frustration and other bad things.
Help Me Get There
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
ASP.NET
Progress Indicators are implemented in all of the following ASP.NET controls and are shown anytime there is an Ajax operation in progress: WebDataGrid, WebGrid, WebDropDown, WebTab, WebDataTree. Check out the samples browser to see it in action.
This pattern can be implemented for other scenarios using WebProgressBar control to update users on a process that is running in the back ground.
Windows Forms
You can use the NetAdvantage for Windows Forms WinProgressBar or WinAnimation to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinProgressBarto see it in action.
Examples
This is part of the TurboTax application that lets people get back into their application, which uses the Wizard pattern. Here you see the use of a progress indicator to show where the person left off.
http://quince.infragistics.com/11bq
This is on the iPod (on iPhone) for podcasts. The thing that caught my eye here was the little pie chart symbol that gives you a simplistic visual sense of how far you've made it through the podcast. It is supplemented with actual numbers as well.
http://quince.infragistics.com/119s
Gmail uses a nifty HTML-based (I think) progress indicator that lets you keep working on your message while it finishes uploading your attachment(s).
http://quince.infragistics.com/113m
The primary example from Internet Explorer shows a standard progress dialog. It shows the estimated remaining time, the proportion of the work done, what it’s doing, and how to cancel it. It also shows the download speed and adds other contextual actions.
http://quince.infragistics.com/11av
Eclipse shows a progress bar while displaying the component that’s currently loading.
http://quince.infragistics.com/1171
KDE shows an icon for each component that’s being loaded.
http://quince.infragistics.com/10yc
Some Web sites take you to a “progress indicator page” where they show an animation, and when the requested information is ready, redirect people to the target page.
http://quince.infragistics.com/10xg
FireFox shows two progress indicators. One in the tab where the page is being loaded and another in the right side of the menu bar.
http://quince.infragistics.com/116z
Flickr’s upload dialog shows a progress bar for each file that’s being uploaded, together with a progress bar for the whole process, and flags each completed file with a check mark.
http://quince.infragistics.com/118a
This example from Infragistics’ Windows Forms toolkit shows the different ways to configure their progress bar.
http://quince.infragistics.com/111u
This sample from Infragistics’ ASP.NET toolkit shows how Ajax-based applications often display indeterminate progress indicators to let people know that they are working on something without being able to convey a sense of relative completeness. http://www.infragistics.com/dotnet/netadvantage/aspnet.aspx
http://quince.infragistics.com/10x3
Quince uses indeterminate progress indicators when loading things from the server if they take long enough (a few hundred milliseconds) to warrant it.
http://quince.infragistics.com/1114
Quince uses determinate progress indicators when uploading files such as example screen shots or pattern documents. The message tells people what’s going on, the fill of the bar gives a sense of the progress, and it has a cancel button should people not want to wait.
http://quince.infragistics.com/117w
What list of progress indicator examples would be complete without the barber shop indefinite indicator. It's an animated gif that spins happily.
http://quince.infragistics.com/16t1
Sources
Patterns in Interaction Design, Processing Page
Jennifer Tidwell, Progress Indicator
Bruce Tognazzini, First Principles of Interaction Design
Tags
