Progress

Not everything a user wants to do is instant, so how do you keep users informed of their progress—and your system’s progress? This section deals with the best practices for letting users know that they’re waiting, and how long they’ll be waiting for.

Use a “Linear” Progress Bar If a Task Will Take a Determinate Amount of Time

Despite your iPhone having the number-crunching power of a late-1990s supercomputer, everyday tasks still seem to take a maddeningly long time in a lot of software. Printing, for example: why does it take so long for the computer to send a document to a printer? It’s as if the printer must work out how to be a printer every time. Regardless, it’s a great idea to let users know how long they’re going to be waiting for.

By the word determinate, I mean that your software “knows” the number of things it must do (or can work it out), and can work through them while updating on progress. Default to this option if you can.

Never show a series of completing progress bars, for example:

• Copying: 0...10..50..100%
• Decompressing: 0..20...60..100%
• Installing: 0...15...45...80...100%
• Finishing up: 0...20...60...100%

...

Show a Numeric Progress Indicator on the Progress Bar

Following on from #61, Use a “Linear” Progress Bar If a Task Will Take a Determinate Amount of Time, we can enhance the experience by showing a numeric (percentage) indicator on the progress bar, but only if there’s time to read it.

Figure 62.1: A progress bar with a numeric indicator

A progress bar and a number that appears for a fraction of a second is just confusing and adds to the visual clutter that the user needs to process. If they’re going to be stuck looking at the progress bar for a few seconds, then a percentage is a nice, universally understood way of keeping them updated.

Also, this numeric indicator could be an amount of time. So, for an update, you can show a certain number of minutes remaining. However, a percentage is more useful for shorter processes. Be careful because calculating “time remaining” is often a big technical challenge. It’s common...

Show a “Spinner” If the Task Will Take an Indeterminate Amount of Time

In this case, by indeterminate, I mean that your software isn’t sure (or has no way of knowing) how many things it must do: it just knows that it will know when it is done.

Showing an animated spinner gives a user less information than a progress bar, but it at least tells them that something is happening, and their task will be done when the spinner vanishes.

Figure 63.1: A spinner. Other styles of spinner are available

If something goes wrong, then make the spinner stop. Your user doesn’t know whether this is a “loop forever” GIF, so they’ll just carry on waiting when nothing is happening behind the scenes. Gmail shows “loading” and then, after some time, it shows “still loading”, which is a nice touch.

A spinner is also great for tasks that are very short, for example when a page reloads, or when fetching some updated...