ProgressBar Control Design Guidelines for Windows Phone

A ProgressBar control displays a colored bar that moves from left to right, in accordance with the completion of a specific operation. When the operation is paused, or can’t complete, the ProgressBar control will cease to move. A ProgressBar control only displays information; users do not interact with a ProgressBar control.

Use a ProgressBar control to show users how long an operation will take; this allows them to decide whether or not to wait for the operation to complete or to cancel it.

Use the “completion” of a ProgressBar control to instruct the system to begin another operation or prompt the user to action. It can also be used passively to inform the user of an operation that is happening in the background of your app.

Use a ProgressBar control to show how far along in an operation your app is, relative to a certain value that you designate as “complete.” However, a ProgressBar control can also be an indicator of state or position, as in the case of a music track. In this example, the ProgressBar control corresponds to the timeline of the song, and the length of the bar displays the listener’s position on that timeline; a stopped ProgressBar control in this case indicates that the song is paused.

Windows Phone SDK offers two different designs for ProgressBar controls:

• A solid bar of color that moves from left to right as an operation reaches completion.

• A series of similar and equidistant colored blocks; they appear from left to right as the operation reaches completion.

Use a label to show whether a ProgressBar control is actively moving or stopped; this is optional, but we highly recommend it.

Use labels with gerunds, or –ing verbs, to indicate that a ProgressBar control is going to advance. Examples of these labels include:

• Connecting

• Downloading

• Sending

Use labels with past participles to indicate that a ProgressBar is stopped. In preloaded apps, Windows Phone displays this kind of label in lowercase letters. Examples of these labels include:

• Paused

• Download failed

• Cancelled

It’s up to you where to put a ProgressBar control, but keep in mind that this control’s place and prominence in a view should correspond to its importance. Important ProgressBar controls can serve as a call to action, telling the user to resume a certain operation after the system has done its work. In preloaded Windows Phone apps, important ProgressBar controls appear at the top of the screen, as in the Mail app above. Less-vital ProgressBar controls, such as the one visible during an app download, appear smaller and are restricted to one view.

Other Resources