Meaningful Motion in Design
summary
Five concrete rules emerge: five criteria: orientation responsiveness timing easing personality explains when motion orients between screens, feels immediate, and times out between 100–300 ms; real examples show impact — WhatsApp’s slide to cancel voice UX uses motion as a story, Quartz’s blinking cursor signals ready-to-type, adding a spinner makes Blogger’s creation feel deliberate, and the uxchat.me experiment uses animation to make canned replies feel like real conversation, proving motion can change perception and behavior.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:25Flow
- 5:39Spatial Design
- 10:09Animation
- 12:22Interaction Design
- 16:41Responsiveness
- 19:52Time
- 25:36Serration
- 26:07Motion curves
- 28:01Real world examples
- 29:10Personality
- 35:28Summary
related talks
43mPurpose and Style: Using Motion with Meaning in Interfaces
37mAnimation in UX: The Subconscious Influence of Motion
39mMeaningful motion design and how to implement it
35mMotion In Design Systems
49mMotion & Playfulness
36m”Putting Your Brand in Motion”
50mDesigning with animation
24mDelightful UI Animations by Understanding the Brain