UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Interaction Responsive Motion

Wizard Stepper Progress

Wizard Stepper Progress turns a frequent interface judgment into an executable constraint before generation.

wizardprogressforms

Design Principle

Wizards need to show current position, remaining work, reversibility, and save state.

Principle Wizards need to show current position, remaining work, reversibility, and save state.

Design action Use short labels and completion states in steppers; each step shows purpose, required scope, previous summary, and next-step consequence.

Examples Positive example: Setup, import, checkout, applications, AI workflows, and multi-stage configuration. Counterexample: Only 'Step 3 of 7' is shown without meaning.

Apply when Setup, import, checkout, applications, AI workflows, and multi-stage configuration. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.

Agent Directive

Use short labels and completion states in steppers; each step shows purpose, required scope, previous summary, and next-step consequence.

Apply When

  • Setup, import, checkout, applications, AI workflows, and multi-stage configuration.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Only 'Step 3 of 7' is shown without meaning.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Interaction Responsive Motion
Quality
85%
Version
v1
Published
6/6/2026