Manuals / Motion for Product / Chapter 2

A · Principles · beginner · Week 1 · Chapter 2 of 9

Why motion exists in product UI

Orient, continuity, feedback, delight (last). If it doesn’t serve one of the first three, question it.

Path progress
22%

Step 1 of 1

Audit an app

Pick an app you use daily. Capture 5 animations. Label their job.

Audit an appDrag 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 →Audit an appdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Table: animation → job → helpful/noise.

Pro tip: Delight without clarity is decoration tax.

Was this step clear?
Chapter learning outcomes
  • Four jobs of motion
  • State change storytelling

Clear these before you leave