- Guidelines
- React API Reference
- Blazor API Reference
Progress indicators communicate the status of ongoing processes, showing users how much of a task has been completed and how much remains. They provide essential feedback that helps manage user expectations during wait times.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use progress indicators for processes that take more than a moment to complete. Choose determinate (showing percentage) when progress can be measured. |
| Content | Consider including percentages or time estimates for clarity. For indeterminate progress, use messaging that indicates activity. |
| Behavior | Update smoothly to reflect actual progress. Avoid sudden jumps or erratic movements that may confuse users about the actual progress. |
| States | Show clear visual distinction between completed and incomplete portions. Consider loading, success, and error states. |
| Feedback | Combine visual progress with textual feedback when appropriate. Ensure progress changes are perceivable. |
| Examples | File uploads, form submissions, data processing, or installation processes. |
Best Practices
- Accurate Representation: Progress indicators should accurately reflect the actual completion percentage of a task.
- Appropriate Type: Use determinate progress (with percentage) when progress can be calculated; use indeterminate progress (animation) when duration is unknown.
- Visual Clarity: Ensure high contrast between completed and remaining portions for better visibility.
- Contextual Information: When possible, supplement progress bars with helpful text, estimated time remaining, or completion percentage.
- Response to Interruptions: Consider how progress indicators respond to pauses, errors, or process cancellations.
Do’s and Don’ts
Do
- Provide progress indicators for operations taking more than a moment.
- Update progress smoothly and continuously.
- Include relevant contextual information when helpful.
- Ensure sufficient contrast for visibility.
Don't
- Use for instantaneous operations.
- Show inaccurate progress that doesn’t match actual completion.
- Allow progress to move backward unexpectedly.
- Overuse animation that may distract from other content.
Additional Guidance
- Psychological Impact:
- Uncertainty Reduction: Progress indicators reduce anxiety by showing that the system is working and providing an estimate of completion time.
- Perceived Performance: Well-designed progress feedback can make wait times feel shorter than they actually are.
- User Confidence: Clear, accurate progress indicators build trust that the system is functioning as expected.