Pathwise

Manuals / Motion for Product / Chapter 5

B · Patterns · intermediate · Week 2 · Chapter 5 of 9

Micro-interactions

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

Path progress
56%

Step 1 of 1

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
Design three microsDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Design three microdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Prototype all three. Ensure failure is clearer than success.

Was this step clear?
Chapter learning outcomes
  • Feedback loops
  • Loading states
  • Error motion

Clear these before you leave