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

Restrained Motion With Purpose

Motion should explain state change, spatial relationship, or feedback instead of adding noise.

motionanimationaccessibility

Design Principle

Excessive motion interrupts tasks, especially in dense tools.

Principle Excessive motion interrupts tasks, especially in dense tools.

Design action Motion should be short, light, and predictable; tool pages prioritize state feedback, respect reduced-motion, and avoid unrelated looping decoration.

Examples Positive example: Menu expansion, state switches, generation progress, and list updates. Counterexample: Every card has strong entrance animation.

Apply when Menu expansion, state switches, generation progress, and list updates. Cause or hierarchy changes need explanation.

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

Agent Directive

Motion should be short, light, and predictable; tool pages prioritize state feedback, respect reduced-motion, and avoid unrelated looping decoration.

Apply When

  • Menu expansion, state switches, generation progress, and list updates.
  • Cause or hierarchy changes need explanation.

Avoid

  • Every card has strong entrance animation.
  • Looping backgrounds compete with main content.

Knowledge Metadata

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