UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Hierarchy Through Motion

Hierarchy Through Motion turns a frequent interface judgment into an executable constraint before generation.

motionhierarchyattention

Design Principle

Useful motion helps users understand what changed, where it came from, and where to look.

Principle Useful motion helps users understand what changed, where it came from, and where to look.

Design action Add short motion only for hierarchy changes, enter/exit, success/error, and progress feedback; support reduced motion.

Examples Positive example: Filtering, expansion, navigation changes, generation progress, and status updates could disorient users. Counterexample: List items float or bounce without meaning.

Apply when Filtering, expansion, navigation changes, generation progress, and status updates could disorient users. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.

Agent Directive

Add short motion only for hierarchy changes, enter/exit, success/error, and progress feedback; support reduced motion.

Apply When

  • Filtering, expansion, navigation changes, generation progress, and status updates could disorient users.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • List items float or bounce without meaning.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Visual Foundations
Quality
84%
Version
v1
Published
6/6/2026