Other names for this pattern: Progress Bar, Progress

Why

• It should be clear to the user that progress is being made, and the system hasn’t just “hung”.
• The user wants to know how long he needs to wait.
• Progress indicator makes the application feel more responsive making the user much more patient.
  • If the UI does not give any feedback that something is going on, the user gets impatient and might not wait the operation to complete.

How it works

Always

• Provide continuous feedback.
  • Use an animation to tell the user the system is doing something.
• Let the users continue with their work when progress is being made.
  • Don’t lock up the UI.

For shorter delays (0-3 seconds)

• Display an animated progress spinner so the users know the system hasn’t died.
  • Replace the button/component that triggered the action with a spinner so that the user can’t duplicate action.

For longer delays (more than 3 seconds)

• Rule #1: Make it faster! Don’t let the user wait.
• If possible, visually show how much time there is left for the user to wait.
  • Don’t lie to the user. The time left should be realistic, and it shouldn’t “get stuck”.
• Allow user to cancel the operation.
  • Provide a cancel link/button near the progress indicator
• If the user needs to wait for a long time, provide messages to entertain the user and/or to tell the user what is going on.

History

The first version (1.0) was written on April 5, 2008 by Janne Lammi.

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:

More photos in Flickr group "UIPatternFactory.com" tagged with progress-indicator