UX Patterns Guide
Back to compare picker

Step navigation / step indicator vs Back link vs Pagination

Prefer step navigation when the user is inside a linear task or form that spans three or more named steps and needs current, completed, and upcoming progress cues.

Step navigation / step indicator live exampleBack link live examplePagination live example

Decision dimensions

Dimension Step navigation / step indicatorBack linkPagination
UI or UX UI + UX - Linear multistep task progress indicatorUI + UX - Single previous-page return link for a transactionUI + UX - Paged navigation control
UI guidance Show a compact ordered list of named steps near the task heading, with visually distinct completed, current, upcoming, optional, and error states.Render one unobtrusive Back link near the top-left of a transaction page, before the main content, with a destination that returns to the previous service page.Render a labeled pagination nav near the affected results with current page, previous, next, nearby pages, optional first/last or ellipsis, and clear disabled edge states.
UX guidance Use step navigation to reduce uncertainty in long linear tasks by showing where users are, what is done, and what remains.Use Back links to help users safely move one step back in a multi-page transaction without relying on browser history or losing previously entered information.Help users move through an ordered result set with a stable sense of position, progress, and returnability.
Good UI 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 question page shows a single 'Back' link above the H1, before the form, and the Continue button remains the only primary action after the fields.Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear.
Bad UI A two-page form adds a large stepper that consumes space without explaining meaningful progress.A page shows Back, breadcrumbs, a previous button, and pagination controls at the same time.Tiny numbers with no current state.
Good UX After a user enters valid contact details and continues, Contact details becomes complete and Documents becomes current.A user goes back from Review answers to Contact details and sees the email address and phone number they already entered.Users move through pages while query, filters, and sort persist.
Bad UX Clicking Review skips Documents, clears the contact form, and then blocks final submission without explaining the skipped prerequisite.Clicking Back returns to the browser's previous marketing page instead of the last service page.Changing page resets filters.
Best fit A linear form, application, checkout, or setup flow has three or more meaningful steps.A multi-page transaction or form asks users one thing per page.The collection has many ordered results.
Avoid when The journey has only one or two screens.The page is an informational content page with a stable hierarchy.Users need uninterrupted reading or comparison.
Required state Default state with completed, current, and upcoming steps.Default transaction page with one Back link before main content.First page with disabled previous control.
Accessibility burden Use aria-current on the current labeled step and include hidden or visible status text for completed, current, upcoming, optional, and error states.Keep the Back link in a predictable reading order before main content, so skip links can bypass repeated navigation.Use a labeled navigation region.
Common misuse Using a step indicator as breadcrumbs, tabs, side navigation, or pagination.Using Back as a breadcrumb or parent-category link.Using pagination for a tiny collection.

Step navigation / step indicator

UI or UX
UI + UX - Linear multistep task progress indicator
UI guidance
Show a compact ordered list of named steps near the task heading, with visually distinct completed, current, upcoming, optional, and error states.
UX guidance
Use step navigation to reduce uncertainty in long linear tasks by showing where users are, what is done, and what remains.
Good UI
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.
Bad UI
A two-page form adds a large stepper that consumes space without explaining meaningful progress.
Good UX
After a user enters valid contact details and continues, Contact details becomes complete and Documents becomes current.
Bad UX
Clicking Review skips Documents, clears the contact form, and then blocks final submission without explaining the skipped prerequisite.
Best fit
A linear form, application, checkout, or setup flow has three or more meaningful steps.
Avoid when
The journey has only one or two screens.
Required state
Default state with completed, current, and upcoming steps.
Accessibility burden
Use aria-current on the current labeled step and include hidden or visible status text for completed, current, upcoming, optional, and error states.
Common misuse
Using a step indicator as breadcrumbs, tabs, side navigation, or pagination.

Back link

UI or UX
UI + UX - Single previous-page return link for a transaction
UI guidance
Render one unobtrusive Back link near the top-left of a transaction page, before the main content, with a destination that returns to the previous service page.
UX guidance
Use Back links to help users safely move one step back in a multi-page transaction without relying on browser history or losing previously entered information.
Good UI
A question page shows a single 'Back' link above the H1, before the form, and the Continue button remains the only primary action after the fields.
Bad UI
A page shows Back, breadcrumbs, a previous button, and pagination controls at the same time.
Good UX
A user goes back from Review answers to Contact details and sees the email address and phone number they already entered.
Bad UX
Clicking Back returns to the browser's previous marketing page instead of the last service page.
Best fit
A multi-page transaction or form asks users one thing per page.
Avoid when
The page is an informational content page with a stable hierarchy.
Required state
Default transaction page with one Back link before main content.
Accessibility burden
Keep the Back link in a predictable reading order before main content, so skip links can bypass repeated navigation.
Common misuse
Using Back as a breadcrumb or parent-category link.

Pagination

UI or UX
UI + UX - Paged navigation control
UI guidance
Render a labeled pagination nav near the affected results with current page, previous, next, nearby pages, optional first/last or ellipsis, and clear disabled edge states.
UX guidance
Help users move through an ordered result set with a stable sense of position, progress, and returnability.
Good UI
Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear.
Bad UI
Tiny numbers with no current state.
Good UX
Users move through pages while query, filters, and sort persist.
Bad UX
Changing page resets filters.
Best fit
The collection has many ordered results.
Avoid when
Users need uninterrupted reading or comparison.
Required state
First page with disabled previous control.
Accessibility burden
Use a labeled navigation region.
Common misuse
Using pagination for a tiny collection.
Decision rules
  • Prefer step navigation when the user is inside a linear task or form that spans three or more named steps and needs current, completed, and upcoming progress cues.
  • Prefer a Back link when the user only needs to return to the immediately previous transaction page; a Back link does not explain the whole journey.
  • Prefer pagination when users are moving through ordered pages of a result set or record collection, not completing task milestones.
  • Do not use step navigation as the primary way to move around a site, service area, page hierarchy, or same-page content sections.
  • Do not make future steps clickable unless the system can preserve entered data, enforce prerequisites, and explain blocked or unavailable steps.
  • Step navigation should complement separate Back and Continue controls; the progress strip itself is not a substitute for task navigation unless the component is deliberately interactive.
  • Use Back to revise the previous answer, step navigation to understand overall task position, and pagination to request the next collection page.
  • A completed step must mean required work on that step is truly complete; do not mark a step complete simply because the user visited it.
  • If the number or order of steps changes based on answers, use a task list, process list, or clearer per-page progress copy instead of a misleading fixed step indicator.
  • Place step navigation near the task heading, keep labels short, and keep pagination near the collection it controls.
Inspect live examples
Step navigation / step indicatorBack linkPagination
Failure modes
  • A checkout shows five steps, but future steps can be clicked before required information is valid.
  • A breadcrumb trail is styled as a stepper even though it represents hierarchy, not task progress.
  • Pagination controls are used for form steps and imply page two of results instead of the next task milestone.
  • The current step indicator says Review while the page content is still Contact details.
  • Every step is marked complete after visiting it once, even when required fields failed validation.
  • A short two-page form uses a large stepper that adds noise without reducing uncertainty.