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. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
Agent Directive
Use short labels and completion states in steppers; each step shows purpose, required scope, previous summary, and next-step consequence.