Progress Guidelines

Progress indicators inform the users that the system is retrieving data or any other slow computation is taking place. They take predictable amount of time before they are finished.

Best practices

Progress should:

• Be used for displaying system processes where the completeness of the task can be determined at any point of time. These tasks can be importing, exporting, uploading, etc.
• Display hints to help the user plan their time:
• Percentage,
• Number of sub-tasks completed,
• Remaining time.
• Be either cancellable or running in the background, so the user can continue their work if the process takes longer than a few seconds.
• Make clear to users that a time-consuming process is happening.
• Make clear to users that things are completely normal.
• Make clear to users how much more time the process will take.
• Provide a way for users to cancel the operation and regain control of the program.

Try to avoid:

• Using progress to show processes with short duration or indeterminate duration. Use a spinner instead.
• Showing no progress while initial calculations (for example how much time something takes). Show the indeterminate animated progress bar as a temporary replacement of the component.
• Non continuous progress (like huge jumps).

Content guidelines

Progress label:

• It should be placed at the right end of the dynamic progress bar. What it displays depends on the kind of progress that is being processed, e.g. '33%', '120 of 980 contacts', '85 MB', etc.
• This should indicate a dynamic percentage value, like “25% uploaded”, a static statement that is specific for the process, like "Exporting your data...", or could change as the process progresses, like "Uploading files 5 of 9".