| 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. | Show the measured object, current value, unit, minimum and maximum context, and threshold bands close to the gauge so users can interpret the reading without guessing. |
| 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. | Use a meter when users need to judge the current level of a bounded resource, score, capacity, or risk, not when they are completing a task or choosing a value. |
| 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. | A two-page form adds a large stepper that consumes space without explaining meaningful progress. | A blue bar fills across the top of the page with no label, no percent, and no affected object. | A red-to-green bar says 89% with no unit, minimum, maximum, or explanation of whether high is good. |
| 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. | Clicking Review skips Documents, clears the contact form, and then blocks final submission without explaining the skipped prerequisite. | A fake progress bar inches to 99% for minutes with no elapsed time, cancel, retry, or background option. | A user watches a meter animate during upload and waits for it to reach full even though it represents remaining quota, not upload 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 | The flow has only one or two simple screens and progress status adds no decision value. | The journey has only one or two screens. | Progress cannot be measured or would be guessed. | The value has no meaningful maximum or minimum. |
| Required state | Not started or pending stage. | 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. |