UI Patterns and Techniques

Progress Indicator


From Internet Explorer 5

Use when:

A time-consuming operation interrupts the UI 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), you don't want to make a user wait for some unspecified length of time.

It's been shown experimentally that if users see an indication that something is going on, they're much more patient, even if they have to wait longer. 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 done so far,
  • how much time remains, and
  • how to stop it.
As far as time estimates are concerned, believe it or not, it's OK 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 which is noncommittal about percentages. Think about the browsers' image loops that keep rolling while a page is loading.

Most GUI toolboxes now provide a widget or dialog that implements this pattern, like Java Swing's JProgressBar. Beware of potentially tricky threading issues around these, however -- the progress indicator must be updated consistently, while the operation itself proceeds uninhibited. And if you can, keep the rest of the UI alive too.

Examples:


From the KDE startup screen

This progress indicator uses icons to show where it is in the process of starting up KDE -- each icon becomes sharply defined when that step is reached. No numbers are used, but they aren't really needed (the user is a captive audience until KDE finishes starting), and they wouldn't necessarily be accurate anyway.