Progress indicator

Users sometimes need to wait for a process to be completed by the system. In such case, it is best to communicate that to the user that the system is working the process that the user requested. There are two types of progress indicator: 1.) a progress bar and 2.) a spinner.

The use of progress indicator should follow this guideline.

When to Use

• Use when needing to provide feedback to the user that a process is running, especially when user initiate the process.
• When a percentage of completion can be shown and the process , use a progress bar.
• When a percentage of completion cannot be shown or the process is relatively short, use a spinner.

When Not to Use

• When process' progress communicates well enough on its own.
• When process completes so quickly that it is distracting to show progress. If the task takes less than 500ms.
• When the process waits for the user to complete the task.
• When the user doesn't need to know something is happening
• When the process operates in the background and doesn't block user activity, progress indicator can be used but is not necessary.
• When you can use content from the operation to visualize progress.

Behavior

Progress indicator is read-only, not interactive.

Spinner

Spinner is a gif image.

1. Process is triggered
2. Show spinner - To avoid flickering, if a process generally takes 2 seconds to complete, but can be completed under 500ms. Delay 500ms before showing the spinner.
3. Once process is completed, the spinner disappear along with other indicative elements depending on the context.

Progress Bar

In general, it is not recommended to use the progress bar if the process can be completed under 3 seconds. To avoid flickering, the minimum time displayed of progress bar should be 3 seconds.

States Diagram:

1. Process Trigger

   This process trigger is what the user tell system to start process. It can be anything depending on the context such as a button or a drop action.

2. Starting State

   

3. Progressing

   

4. Success

   Once success, the page should refresh to show success status. The success status and behavior will depend on context of the scenario. (ie. open new page, stay on the same page, success message, etc.)

5. Failed

   The progress bar will disappeared and is replaced with this error message.

   

Variations

Style

Spinner

The spinner can be any of these 4 sizes.

Progress Bar

Refer to Messaging Pattern for final styling on error message.