Process list / step-by-step navigation

Problem Context

• The journey has a recognizable start and end but spans multiple pages, services, organizations, or channels.
• Users may need to complete the journey over time, return to guidance, or choose between conditional paths.
• The order is helpful or necessary, but each step may contain several links or pieces of instruction.

Selection Rules

• Choose a process list when users need an ordered overview of an end-to-end journey that combines guidance, service links, offline actions, or external tasks.
• Use a process list when the content has a specific start and end point and the order helps users decide what to do next.
• Keep process steps high-level; split a step when the heading cannot stay short, parallel, and action-oriented.
• Use expandable detail only for essential context, task links, conditions, costs, or alternate routes that help users complete the step.
• Use 'and' branches when users must do multiple parallel activities, and 'or' branches when users choose one applicable path.
• Do not use process lists inside active transactional services where Back, Continue, step navigation, or a task list should own progress.
• Do not use process lists for unordered option sets, site hierarchy, same-page sections, or a single document's table of contents.
• Use a task list when the service stores completion status and users need to choose the order of tasks.

Required States

• Standalone process overview with introduction and ordered high-level steps.
• Collapsed step state showing the step number and action heading.
• Expanded step state showing task links, conditions, costs, or supporting content.
• Contextual page state with a link back to the standalone process overview.
• Branch state using clear 'and' or 'or' subheadings for parallel or alternative tasks.
• External or offline task state that explains what happens outside the current website.
• Mobile state where expanded content remains readable and the process does not become a dense side navigation.

Interaction Contract

• Activating a step expands or collapses its supporting task content without changing the user's transaction state.
• Task links open the relevant guidance, transaction, or external/offline instruction and are labeled with the action users will take.
• A process page does not claim completion unless it is backed by a service task-list model that stores status.
• The current content page can point back to the standalone process overview, but the process list itself remains journey guidance.
• Branch labels make it clear whether tasks are cumulative, parallel, alternative, conditional, online, offline, or external.
• The process order remains stable unless content governance deliberately changes the published journey.

Implementation Checklist

• Map the real journey before designing the list: start point, end point, required actions, guidance pages, transactions, external links, offline steps, costs, and conditional branches.
• Write each step heading as a short parallel action phrase and keep the total number of steps between three and ten when possible.
• Use semantic ordered-list structure with correctly leveled headings inside each step.
• Provide a standalone overview page and, when shown contextually, include a clear link back to that overview.
• Keep only essential explanatory text inside steps; move long guidance to linked pages.
• Label costs, offline requirements, external services, and alternate routes close to the task link.
• Test expanded/collapsed behavior, keyboard operation, screen reader heading order, mobile wrapping, and whether users understand which tasks apply to them.

Common Generated-UI Mistakes

• Using a process list as a transactional progress indicator.
• Using it as side navigation for a website section.
• Using it as a table of contents for headings on the same page.
• Numbering a set of unordered options or related links.
• Showing completion statuses without a service model that can prove completion.
• Linking step-by-step journeys in loops that send users back and forth.

Critique Questions

• Does this journey have a clear start, end, and useful order, or is it a set of related options?
• Which tasks are guidance, transactions, offline actions, external services, costs, or conditional branches?
• Would users be inside a transaction when they see this, and if so should progress be owned by step navigation or a task list instead?
• Can each step heading be a short parallel action phrase that users understand without reading the whole step?
• Will screen reader users hear the step number, heading, branch label, and task links in a useful order?