Use step progress when users need a live status readout of step completion inside a workflow; use step navigation for moving through pages, progress bar for measurable system work, and meter for a read-only bounded scalar value.
Use step progress when users need a live status readout of step completion inside a workflow; use step navigation for moving through pages, progress bar for measurable system work, and meter for a read-only bounded scalar value.
Practice the judgment: Imagine this situation: A checkout says Payment is complete because the user opened the page, but the card authorization failed. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Step progress | Step navigation / step indicator | Progress bar | Meter |
|---|---|---|---|---|
| UI or UX | UI + UX - Workflow-stage status indicator | UI + UX - Linear multistep task progress indicator | UI + UX - Measurable system-operation progress indicator | UI + UX - Read-only scalar value gauge within a known range |
| UI guidance | Show a compact ordered status readout for named stages with distinct completed, current, pending, blocked, skipped, waiting, and failed treatments that include text or icon cues beyond color. | Show a compact ordered list of named steps near the task heading, with visually distinct completed, current, upcoming, optional, and error states. | Show a labeled bar with a track, filled value, and nearby helper text that reports the measurable unit such as percent, bytes, rows, files, records, or stages. | Use native meter semantics or equivalent read-only meter attributes, and pair color bands with text such as Healthy, Warning, Critical, Low, Normal, High, or Over limit. |
| UX guidance | Use step progress when users need to monitor how a workflow is advancing across named stages and which proof event changed each stage, especially when some stages depend on validation, review, upload, or approval. | Use step navigation to reduce uncertainty in long linear tasks by showing where users are, what is done, and what remains. | Use a progress bar when the system can honestly report movement toward a known finish and users need to decide whether to wait, cancel, retry, continue elsewhere, or return later. | Explain whether higher, lower, or middle values are better, what threshold the current value crosses, and what action is available when the meter enters a warning or critical range. |
| Good UI | An onboarding status strip shows Profile completed, Documents current, Compliance waiting, Review blocked, and Finish locked with text labels for each state. | A five-step application shows Eligibility complete, Contact details current, Documents upcoming, Review upcoming, and Submit upcoming, with the current step emphasized and a matching page heading. | A document upload card says Uploading evidence.zip, shows 64%, 32 of 50 MB, a Cancel action, and keeps the rest of the form usable. | An account storage card says 86 GB of 100 GB used, marks 70 GB as warning and 90 GB as critical, and labels the current state Critical. |
| Bad UI | All visited steps turn green even though required documents failed server validation. | All future steps look clickable and complete even though required earlier fields are blank. | A progress bar reads 100% complete while virus scanning and server acceptance are still pending. | A progress bar for uploading evidence.zip is implemented as a meter, so task completion and capacity status are confused. |
| Good UX | After the user uploads a document, Documents changes to Waiting for review instead of Complete until the file scan and reviewer check pass. | After a user enters valid contact details and continues, Contact details becomes complete and Documents becomes current. | A user uploads evidence.zip, sees progress move from 12% to 64%, cancels before commit, retries after a network error, and gets a completed receipt only after server processing succeeds. | A user sees storage at 86 of 100 GB, understands the account is in the critical band, opens Manage storage, and deletes old exports before uploads are blocked. |
| Bad UX | The step progress says Review ready while the address step contains unsaved edits that would change shipping tax. | The indicator says Step 4 of 5 while the page content and route still show Step 2. | Users leave after 100% transfer even though server processing later rejects the file. | Users mistake quota level for upload completion because the meter animates like progress. |
| Best fit | A workflow has several named stages and users need to understand current, completed, pending, blocked, failed, waiting, or skipped status. | A linear form, application, checkout, or setup flow has three or more meaningful steps. | A system operation has a measurable total or bounded progress value. | A current value exists inside a meaningful known range. |
| Avoid when | Users need a full navigation component for moving between pages rather than a status readout. | The journey has only one or two screens. | The wait is short and only needs scoped activity feedback. | The value represents task completion or loading progress. |
| Required state | Current stage with aria-current step or equivalent current-step semantics. | Default state with completed, current, and upcoming steps. | Idle state before the operation starts. | Normal state inside the acceptable band. |
| Accessibility burden | Expose the current stage with aria-current="step" or equivalent platform semantics and mark only one step current. | Use aria-current on the current labeled step and include hidden or visible status text for completed, current, upcoming, optional, and error states. | Provide an accessible name that identifies the operation and affected object. | Prefer the native meter element where possible because it carries the correct read-only meter semantics. |
| Common misuse | Treating visited pages as completed stages. | Using a step indicator as breadcrumbs, tabs, side navigation, or pagination. | Fabricating progress values just to make users feel movement. | Using a meter to show task progress such as upload completion. |