Guidelines and checklist for progress controls (Windows Store apps)

Follow these guidelines for adding progress controls to your Windows Store app.

Is this the right control?

The progress control shows users the progress of an operation that takes more than 2 seconds to complete. A progress control can show an approximate percentage of completion (determinate progress), or indicate that an operation is ongoing (indeterminate progress).

It's not always necessary to show a progress control; sometimes a task's progress is obvious enough on it's own or the task completes so quickly that showing a progress control would be distracting. Here are some points to consider when determining whether you should show a progress control.

• Does the operation take more than two seconds to complete?

  If so, show a progress control as soon as the operation starts. If an operation takes more than two seconds to complete most of the time, but sometimes completes in under two seconds, wait 500ms before showing the control to avoid flickering.

• Is the operation waiting for the user to complete a task?

  If so, don't use a progress bar. Progress bars are for computer progress, not user progress.

• Does the user need to know that something is happening?

  For example, if the app is downloading something in the background, and user didn’t initiate the download, the user doesn’t need to know about it.

• Is the operation a background activity that doesn't block user activity and is of minimal (but still some) interest to the user?

  Use text and ellipses when your app is performing tasks that don't have to be visible all the time, but you still need to show the status.

  

  Use the ellipses to indicate that the task is ongoing. If there are multiple tasks or items, you can indicate the number of remaining tasks. When all tasks complete, dismiss the indicator.

• Can you use the content from the operation to visualize progress?

  If so, don't show progress control. For example, when displaying images loaded from the disk, images appear on the screen one-by-one as they are loaded. Displaying progress control would provide no benefit; it would just clutter the UI.

Don't use the "wait cursor" to indicate activity, because users who use touch to interact with the system won't see it, and those users who use mouse don't need two ways to visualize activity (the cursor and the progress control).

Choosing the right type of progress control style

There are 3 progress control styles:

• The determinate progress bar style

  

  Use the determinate progress bar style when a task is determinate, that is when it has a well-defined duration or a predictable end, . Here are some examples of determinate tasks:

  • The app is downloading a 500k photo and has received 100k so far.
  • The app is displaying a 15 second advertisement and 2 seconds have elapsed. If the task is not determinate, use the indeterminate progress bar or ring.
• The indeterminate progress ring style

  

  Use this style for tasks that are not determinate and are modal (block user interaction).

• The indeterminate progress bar style

  

  Use this style for tasks that are not determinate that are non-modal (don't block user interaction).

Treat partially modal tasks as non-modal. Some tasks block interaction until some progress has been made, and then user can start interacting with the app again. For example, when the user performs a search query, interaction is blocked until the first result is displayed. Treat tasks such as these as non-modal and use the indeterminate progress bar style if modal state lasts less than 2 seconds. If modal state can last more than 2 seconds, use indeterminate progress ring for the modal phase of the task, and use the indeterminate progress bar for the non-modal phase.

Decision tree for choosing a progress style

• Does the user need to know that something is happening?

  If the answer is no, don't show a progress control.

• Is info about how much time it will take to complete the task available?
  • Yes: Does the task take more than two seconds to complete?
    • Yes: Use a determinate progress bar. For tasks that take longer than 10 seconds, provide a way to cancel the task.
    • No: Don't show a progress control.
  • No: Are users blocked from interacting with the UI until the task is complete?
    • Yes: Is this task part of a multi-step process where the user needs to know specific details of the operation?
      • Yes: Use an indeterminate progress ring with status text horizontally centered in the screen.
      • No: Use an indeterminate progress ring without text in the center of the screen.
    • No: Is this a primary activity?
      • Yes: Is progress related to a single, specific element in the UI?
        • Yes: Use an inline indeterminate progress ring with status text next to its related UI element.
        • No: Is a large amount of data being loaded into a list?
          • Yes: Use the indeterminate progress bar at the top with placeholders to represent incoming content.
          • No: Use the indeterminate progress bar at the top of the screen or surface.
      • No: Use status text in an upper corner of the screen.

General guidelines

Here are some general guidelines to follow, regardless of which progress control style you use.

• Show a single progress control for multiple active related tasks. If there are multiple related items on the screen that are all simultaneously performing some kind of activity, don't show multiple progress controls. Instead, show one that ends when the last task completes. For example, if the app downloads multiple photos, show a single progress control, instead of showing one for every photo.
• Don't change the location or size of the progress control while the task is running.

Guidelines for determinate tasks

If you can estimate remaining amount of work in time, bytes, files, or some other quantifiable units of measure, use a determinate progress bar. Here are some guidelines for using the determinate progress bar.

Switching from indeterminate to determinate If some time (or action) is needed to start providing determinate progress, use the indeterminate bar first, and then switch to the determinate bar. For example, if the first step of a download task is connecting to a server, you can’t estimate how long that takes. After the connection is established, switch to the determinate progress bar to show the download progress. Keep progress bar in exactly the same place, and of the same size after the switch.
Showing progress and status inline Suppose you have a list of items, such as a list of printers, and certain actions can initiate an operation on items in that list (such as installing a driver for one of the printers). When this happens and the operation is determinate, show a determinate progress bar next to the item. Show the subject (label) of the task above the progress bar and status underneath. Don’t provide status text if what's happening is obvious. After the task completes, hide the progress bar. Use the status text to communicate the new state of an item.
Showing multiple operations When you want to show a list of tasks, align the content in a grid so users can see the status at a glance. Show progress bars for all items, even those that are pending. Because the purpose of this list is to show ongoing operations, remove operations from the list when they complete.
Showing app-modal determinate progress in the app bar If a user initiated a task from the app bar and it blocks user interaction, show the progress control in the app bar. If it's clear what the progress bar is showing progress for, you can align progress bar to the top of the app bar and omit the label and status; otherwise, provide a label and status text. Disable interaction during the task by disabling controls in the app bar and ignoring input in the content area.

Dos and don'ts for determinate tasks

Guidelines for indeterminate tasks

If the task is modal—it blocks interaction until its completion—use the indeterminate progress ring style. If the task is not modal, use the indeterminate progress bar style.

Indeterminate progress ring

Follow these guidelines for displaying the progress ring:

• Display the progress ring in the context of the action: show it near the location where the user initiated the action or where the resulting data will display.
• Provide status text to the right of the progress ring.
• Make the progress ring the same color as its status text.
• Disable controls that user shouldn’t interact with while the task is running.
• If the task results in an error, hide the progress indicator and status text and display an error message in their place.

Here are some guidelines for specific situations involving the progress ring.

In a dialog, an action occurs before you move to the next screen Place the progress ring just above the button area, left-aligned with the content of the dialog.
Showing progress in an app window with right-aligned controls Place the progress ring to the left or just above the control that caused the action. Left-align the progress ring with related content.
Showing progress in an app window with left-aligned controls If a control that starts the modal action is aligned to the left, place the progress ring to the right of that control. Or you can place it underneath the control.	- or -
Showing progress in a flyout Use a flyout if activity can proceed in the background when the user dismisses the flyout by tapping outside it.
Showing multiple items Place the progress ring and status text underneath the title of the item. If an error occurs, replace the progress ring and status with error text.

Indeterminate progress bar

Use indeterminate progress bar for tasks that don't block user interaction (non-modal).

Here are some guidelines for specific indeterminate progress bar situations.

Showing progress in a flyout Place the indeterminate progress bar at the top of the flyout and set its width so that it spans the entire flyout. This placement minimizes distraction but still communicates ongoing activity. Don't give the flyout a title, because a title prevents you from placing the progress bar at the top of the flyout.
In an app window Place the indeterminate progress bar at the top of the app window, spanning the entire window.

Guidelines for status text

• When you use the determinate progress bar, don’t show the progress percentage in the status text. The control already provides that info.
• If you use text to indicate activity without a progress control, use ellipsis to convey that the activity is ongoing.
• If you use a progress control, don't use ellipsis in your status text, because the progress control already indicates that the operation is ongoing.

Layout patterns

Here are layout guidelines for several common patterns of progress control usage.

• Determinate progress bar with label and status

  

• Multiple progress bars

  

• Indeterminate progress ring with status text

  

• Indeterminate progress bar

  

Related topics

Quickstart: adding progress controls

Build date: 11/29/2012