The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Progress Indicator


Internet Explorer progress dialog box

What:

Show the user how much progress was made on a time-consuming operation.

Use when:

A time-consuming operation interrupts the UI, or runs in the background, for longer than two seconds or so.

Why:

Users get impatient when the UI just sits there. Even if you're changing the mouse pointer to a clock or hourglass (which you should in any case, if the rest of the UI is locked out), you don't want to make a user wait for an unspecified length of time.

Experiments show that if users see an indication that something is going on, they're much more patient, even if they have to wait longer than they would without a progress indicator. Maybe it's because they know that "the system is thinking," and it isn't just hung or waiting for them to do something.

How:

Show an animated indicator of how much progress has been made. Either verbally or graphically (or both), tell the user:
  • What's currently going on
  • What proportion of the operation is complete
  • How much time remains
  • How to stop it
As far as time estimates are concerned, it's okay to be wrong sometimes, as long as your estimates converge on something accurate quickly. But sometimes the UI can't tell how far along it is. In that case, show something animated anyway that is noncommittal about percentages. Think about the browsers' image loops that keep rolling while a page loads.

Most GUI toolboxes provide a widget or dialog box that implements this pattern, like Java Swing's JProgressBar. Beware of potentially tricky threading issues, however -- the progress indicator must be updated consistently, while the operation itself proceeds uninhibited. If you can, keep the rest of the UI alive too. Don't lock up the UI while the progress indicator is visible.

If it's possible to cancel the operation whose progress is monitored, offer a cancel button or similar affordance on or near the progress indicator; that's where a user will probably look for it. See the Cancelability pattern for more information.

Examples:


From the KDE startup screen

This startup screen uses icons to show what KDE does while it starts -- each icon becomes sharply defined when that step is reached. No timing numbers are used, but they aren't really necessary (the user is a captive audience until KDE finishes starting), and they may not be accurate anyway.