Manuals / Motion for Product / Ch 5

B · PatternsIntermediate40 min read

5. Micro-interactions

Motion for Product · 36 pages source format

Buttons, toggles, toasts, pull-to-refresh. Feedback should be immediate and proportional. Don’t animate every hover.

What you'll learn

  • Feedback loops
  • Loading states
  • Error motion

Design three micros

Toggle, successful save, failed save.

  • Pressed/active state within 100ms feel
  • Success confirmation not longer than needed
  • Error draws attention without panic strobe

Do this now

Prototype all three. Ensure failure is clearer than success.

Clear?

Checklist