Activity indicators

App Design Guides

Use Activity Indicators to give the user an indication of how long a running task might take and how much work has already been done.

750w_ActivityIndicators_MainImage (1)

The Activity Indicator API visually indicates that a task of unknown or known duration is in progress.

Types of indicators

The toolkit provides progress bars or spinners that can either be: determinate or indeterminate. Use either state depending on whether the proportion being completed is known or not.

Usage

Determine if you need to use either a progress bar or a spinner on how important it is for the user to keep track of progress, and how much space you have to show it.

For example, a download manager may use a progress bar so that you can easily tell that a download is continuing. But a mail client may use spinners for sending mail or updating mail folders, since that is something that can happen in the background.

Determinate indicators

Use a determinate progress bar or spinner for tasks where the activity can be determined at any point in time, such as downloading or importing an item. If you have space within the same screen then place the progress bar below the action that initiated it.

Progress bar – downloading

366w_ActivityIndicators_ProgressBar

Spinner – transferring

366w_ActivityIndicators_DeterminateSpinner

The toolkit progress bars and spinners automatically handle presence for individual tasks by waiting for two seconds. If the task takes less than that they won’t appear at all.

Indeterminate indicators

Use a indeterminate progress bar or spinner if the proportion complete is unknown. For instance, the loading of a screen or re-caching a browser is something the user doesn’t need further information on and can happen in the background.

Progress bar – updating

366w_ActivityIndicators_IndeterminateProgress

Spinner – loading

750w_ActivityIndicators_Spinner

Best practices

Steps of completeness

A determinate progress bar or spinner with a known period of completion should always fill for a successful task, exactly once. For example when a user is downloading a new music track, then an acknowledgement that the download has been completed would be a filled progress bar.

Indeterminate steps

366w_ActivityIndicators_DeterminateSteps

If the last step in a task is verifying its success, then allocate a fraction of the indicator to it. This communicates to the user that the software is preparing to be complete.

Determinate steps

366w_ActivityIndicators_IndeterminateSteps

Never let an Activity Indicator go backwards. If the task size changes part-way through, reallocate the remaining fraction of the indicator to that.

Use only for task progression

366w_ActivityIndicators_Don'tSpinner

Don’t use an Activity Indicator for anything that isn’t progress of a task, such as waiting for user input or as a gauge for anything else.

Avoid confusion

366w_ActivityIndicators_AvoidConfusion

Don’t fill the indicator if the task has failed, because it could confuse the user.

See Communicating Progress (coming soon) for best practices on labelling Activity Indicators.