Design Principle
Microinteractions should confirm input and state change, not make the interface feel busy.
Principle
Microinteractions should confirm input and state change, not make the interface feel busy.
Design action
Give light feedback within 100-300ms for click, toggle, drag, and submit; switch long tasks to progress, skeleton, or queue states.
Examples
Positive example: Buttons, toggles, sorting, AI generation, saving, and upload need to show the system received input. Counterexample: Every click triggers a large bounce animation.
Apply when
Buttons, toggles, sorting, AI generation, saving, and upload need to show the system received input. 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
Give light feedback within 100-300ms for click, toggle, drag, and submit; switch long tasks to progress, skeleton, or queue states.