Step navigation / step indicator

Problem Context

• The task spans several screens and users may worry about how much work remains.
• The steps have a stable order that can be explained before or during the task.
• Users must complete or validate information before moving safely to later steps.

Selection Rules

• Choose step navigation when a form, checkout, onboarding, or application has three or more high-level linear steps.
• Use it to communicate completed, current, upcoming, optional, and error states; do not use it as ordinary site navigation.
• Show the current step in the indicator and in the page heading, and keep those labels synchronized with the route or task state.
• Keep Back and Continue controls separate from the indicator unless the product deliberately supports interactive step navigation.
• Allow navigation to completed steps only when previous data can be preserved and revisited safely.
• Lock, disable, or explain future steps until prerequisites are complete; never let users skip required validation silently.
• Avoid a step indicator for fewer than three steps, nonlinear tasks, highly conditional step counts, or same-page content sections.
• Use a task list or process list when users need a detailed overview of many tasks that can be completed out of order.

Required States

• Default state with completed, current, and upcoming steps.
• Current step heading with step number and total step count.
• Validated completion state after the user successfully continues.
• Future step blocked or unavailable state before prerequisites are met.
• Completed step revisit state with previous answers preserved.
• Error state on the affected step when validation fails.
• Responsive compact state with labels shortened or counters used when space is limited.

Interaction Contract

• The current indicator segment always matches the visible page, route, and task heading.
• A step becomes complete only after required information for that step is valid or saved.
• Back and Continue move through the linear journey and preserve previously entered answers where valid.
• Completed steps may be revisited if the product supports editing; future steps remain unavailable until prerequisites are satisfied.
• Optional steps are labeled as optional and do not block progress when skipped.
• If a step has an error, the indicator shows the error state and the page provides field-level or inline recovery guidance.

Implementation Checklist

• Model steps as task milestones with stable IDs, labels, route ownership, prerequisites, completion status, and optional or error metadata.
• Render the indicator near the task heading and include a text heading that states the current step number, total, and label.
• Use semantic ordered-list or equivalent step semantics, and apply aria-current to the current labeled step.
• Validate the current step before marking it complete or unlocking later steps.
• Preserve answers when users go back or revisit completed steps, and recompute downstream status when earlier answers change.
• Keep labels short, responsive, and readable; use counters or omitted labels only when the heading still communicates the current step.
• Test keyboard operation, focus order, visible focus, screen reader status text, and mobile wrapping.

Common Generated-UI Mistakes

• Using a step indicator as breadcrumbs, tabs, side navigation, or pagination.
• Marking steps complete because they were visited rather than validated.
• Letting users jump to unavailable future steps without saved prerequisites.
• Showing a fixed step count for a journey whose steps change based on answers.
• Hiding the actual page heading and expecting the indicator to serve as the only title.
• Using vague labels such as Details, More, Next, or Processing that do not explain what the step accomplishes.

Critique Questions

• Are these stable task milestones, or are they hierarchy pages, result pages, or same-page sections?
• What proof marks a step complete, and what happens if a completed answer changes later?
• Can the user revisit completed steps without losing data or invalidating hidden downstream answers?
• Will future-step links be locked, explained, or removed until prerequisites are complete?
• Does the current route, heading, and indicator all name the same step?