Playground
  • Introduction
  • Components

Step by step

The guided progression through a prescribed sequence, balancing task-completion focus against freedom to deviate. Flows range from simple two-step processes to complex multi-stage journeys, with supplementary options like skip, save and continue later, or jump to step.

Behavioural position

This model optimises for task completion over exploration, reducing cognitive load from navigation decisions whilst constraining freedom to deviate.

Primarily supports

  • Transactional search — optimised for getting the job done
  • TODO: Goal-oriented task completion with clear endpoints

Deliberately constrains

  • Exploring — intentionally limited to maintain focus
  • Browsing — lateral movement discouraged or impossible
  • Navigating — constrained to sequence, even when destination is known

Variants

  • Linear: strict sequence, must complete steps in order.
  • Flexible: steps shown in overview, some skippable or reorderable. Approaches pyramid model
  • Branching: different paths based on choices or conditions.
  • Progressive disclosure sequence: simple initial steps, complexity revealed gradually.

Related components

  • Progress indicators — visualise progression through steps

Resources & references

  • Tidwell, Brewer, Valencia (2020) Designing Interfaces, 3rd ed.

Related patterns

Enables

  • Form — a form split into one-question-per-page steps (the question-pages pattern)

Alternatives

  • Fully connected
  • Pyramid
  • Hybrid patterns
  • Multilevel tree

Related

  • Intent & Interaction — guided completion without distraction

Instantiated by

  • Wizard — Wizard is the canonical instantiation of step-by-step navigation