Progress Indicator
Progress indicators show the steps or stages in a process, helping users understand where they are and what steps remain. They provide visual feedback on the progress of multi-step tasks or workflows.
Last updated
Progress indicators show the steps or stages in a process, helping users understand where they are and what steps remain. They provide visual feedback on the progress of multi-step tasks or workflows.
Last updated
Progress indicators help users navigate through staged processes, such as checkouts or onboarding flows, by clearly displaying each step and the overall progress.
Use in onboarding flows to show users how far they’ve come in setting up their profile or completing necessary tasks.
When users need to move through several stages, like shipping, payment, and confirmation, progress indicators provide clarity and keep users informed.
For software or application installation processes that involve multiple steps, progress indicators help users understand how far they are from completing the setup.
When users engage in workflows with multiple interdependent stages (e.g., setting up a project), progress indicators offer a structured view of the task's entirety.
For simple actions that complete in one step (e.g., submitting a form), a progress indicator would be unnecessary and clutter the interface.
If the number of steps required can change dynamically or is unclear, progress indicators may mislead users and cause frustration.
Avoid using progress indicators for processes that don't follow a strict sequential order, as they may confuse users by implying an expected progression.
When a process is running in the background or doesn't require direct user interaction, progress indicators are likely not the right tool.
Connector Line: A visual link between steps showing their relationship, represented as a line.
Progress Status: This element shows the current status of each step, which could be a number, icon, checkmark, or empty state for uncompleted steps.
Label: Descriptive text for each step, helping users understand the nature of each stage.
Description: Optional text providing more context about each step, useful for complex processes.
Default
16
24
40
Keyboard Navigation: Ensure that all steps in the progress indicator can be navigated using a keyboard, particularly for users who cannot rely on a mouse for interaction.
Clear Labels for Each Step: Each step in the progress indicator should be clearly labeled for screen readers, helping visually impaired users understand where they are in the process.
High Contrast and Visibility: Use contrasting colors to differentiate between completed, current, and upcoming steps. Ensure all steps are easily distinguishable for users with color blindness.
Announcing Step Transitions: Provide appropriate feedback when users transition between steps, including status updates for assistive technology like screen readers.
Consistency Across Devices: Progress indicators should behave consistently across mobile, tablet, and desktop platforms, maintaining clear step labeling and interaction.
Multi-Step Checkout: Use progress indicators to display the stages of a checkout process, from cart review to payment and confirmation.
Survey Completion: Display the steps in a survey or questionnaire, helping users understand how many questions they have left to answer.
Account Setup: During user account setup, progress indicators guide users through tasks like adding profile information and preferences.
Project Management Tools: In project tools, progress indicators help users track the completion of various phases or tasks in a multi-stage project setup.
Software Installation: When installing software, progress indicators show each step in the installation process, such as system checks, downloads, and configuration.
