Amanoba Logo
Back to Course

Motion and Feedback Language

Day 9 of 30 · The Playbook 2026 – Masterclass for Designers

Set durations, curves, and state rules so motion supports meaning, not noise.

Learning Goal

  • Define base durations (150–300ms) and easing curves.
  • Write state rules (hover, focus, active, success, error).
  • Tie motion to the VIS (restrained vs playful).
  • Avoid motion noise; prefer meaningful cues.

Why This Matters

  • Without feedback, users feel unsure.
  • Too much motion is tiring and risky for accessibility.
  • Consistent motion speeds understanding.

Explanation

Durations

  • Micro-interaction: 150–200ms, ease-out.
  • Modal/overlay: 200–250ms, ease-in-out.
  • Page/route: 250–300ms, ease-in-out.

States

  • Hover: subtle light/scale up to 1.02.
  • Focus: visible, high-contrast outline.
  • Active: slight depression.
  • Success/Error: color + icon + short motion (fade/slide).

Examples

Bad: 600ms bounce on every button.

Good: CTA hover 150ms ease-out, focus ring 3px, active -2px translateY.

Guided Exercise (10–15 minutes)

  1. Create motion tokens: duration.xs/sm/md, easing.standard/enter/exit.
  2. Define state rules for CTA (hover/focus/active) and card.
  3. Add success/error feedback example (icon + color + motion).

Independent Exercise (5–10 minutes)

Implement one component (CTA) with these rules; record a short clip/gif.

Self-Check

  • Duration and easing table exists.
  • State rules documented.
  • Good/bad example exists.
  • Accessibility (prefers-reduced-motion) handled.

Optional Deepening