Use step navigation to show progress through a known multistep task, a Back link to return one transaction step, and pagination to traverse ordered slices of one collection.
Use step navigation to show progress through a known multistep task, a Back link to return one transaction step, and pagination to traverse ordered slices of one collection.
Practice the judgment: Imagine this situation: A checkout shows five steps, but future steps can be clicked before required information is valid. 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 navigation / step indicator | Back link | Pagination |
|---|---|---|---|
| UI or UX | UI + UX - Linear multistep task progress indicator | UI + UX - Single previous-page return link for a transaction | UI + 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. | Help the person reach a clear task outcome. | 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 | All future steps look clickable and complete even though required earlier fields are blank. | A page shows Back, breadcrumbs, a previous button, and pagination controls at the same time. | Pagination jumps around as pages load or separates controls from the result list. |
| 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 | The indicator says Step 4 of 5 while the page content and route still show Step 2. | 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. |