| 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. | Use in-page anchor navigation to help users understand the contents of a long page and jump directly to the section they need without leaving the page. |
| 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. | A two-page form adds a large stepper that consumes space without explaining meaningful progress. | 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. | Clicking Review skips Documents, clears the contact form, and then blocks final submission without explaining the skipped prerequisite. | 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 semantic ordered-list structure so step order is available without relying on visual counters. | 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. |