Use a process list for end-to-end instructional journeys with linked tasks, step navigation for progress inside a linear transaction, and in-page anchor navigation for sections on one long page.
Use a process list for end-to-end instructional journeys with linked tasks, step navigation for progress inside a linear transaction, and in-page anchor navigation for sections on one long page.
Practice the judgment: Imagine this situation: A process list is used inside a live form and users mistake guidance links for required current-step controls. 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 | Process list / step-by-step navigation | Step navigation / step indicator | In-page anchor navigation |
|---|---|---|---|
| UI or UX | UI + UX - End-to-end ordered journey guidance with linked tasks | UI + UX - Linear multistep task progress indicator | UI + UX - Same-page section jump links for long content |
| UI guidance | Present the process as a numbered ordered list of three to ten high-level steps, each with a short parallel action heading and enough supporting text or links to complete that stage. | Show a compact ordered list of named steps near the task heading, with visually distinct completed, current, upcoming, optional, and error states. | Render a labelled navigation landmark with links to major headings on the current page, using labels that match or clearly summarize the destination sections. |
| UX guidance | Use process lists to help users understand an end-to-end journey that may span guidance pages, transactions, departments, offline actions, or separate sessions. | 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. |
| Good UI | A 'Apply for a permit' guide shows numbered steps for Check eligibility, Prepare documents, Submit application, Pay fee, and Track decision, each expanding to relevant links and conditions. | 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. | An article starts with an 'On this page' nav linking to Eligibility, Documents, Fees, and After you apply, each matching an H2 on the same page. |
| Bad UI | A live form page shows a process list where the Continue button should be, so users leave the transaction to read unrelated guidance. | All future steps look clickable and complete even though required earlier fields are blank. | A short page with two paragraphs shows a table of contents that adds more navigation than content. |
| Good UX | A user unsure where to start expands 'Prepare documents' and sees both online upload guidance and an offline identity check requirement before starting the application. | After a user enters valid contact details and continues, Contact details becomes complete and Documents becomes current. | A user opens a long guidance page, chooses Fees, and lands at the Fees heading with the Fees link marked active. |
| Bad UX | The process list says 'Complete identity check' but opens another step-by-step page that loops back to the original guide. | The indicator says Step 4 of 5 while the page content and route still show Step 2. | Clicking a jump link scrolls visually but keyboard focus stays in the contents list. |
| Best fit | An end-to-end journey spans several pieces of guidance, service links, departments, or channels. | A linear form, application, checkout, or setup flow has three or more meaningful steps. | A long content page has several meaningful sections users may want to jump to. |
| Avoid when | The user is inside a live transactional form or wizard. | The journey has only one or two screens. | The page is short enough that the headings are already visible. |
| Required state | Standalone process overview with introduction and ordered high-level steps. | Default state with completed, current, and upcoming steps. | Default state with a labelled same-page navigation list near or beside long content. |
| Accessibility burden | Use the correct heading level for each step heading rather than hard-coding heading ranks from examples. | Use aria-current on the current labeled step and include hidden or visible status text for completed, current, upcoming, optional, and error states. | Wrap the jump links in a labelled navigation landmark so assistive technology users can find the page contents list. |
| Common misuse | Using a process list as a transactional progress indicator. | Using a step indicator as breadcrumbs, tabs, side navigation, or pagination. | Using in-page anchors as a substitute for side navigation across different pages. |