Amanoba Logo
Back to Course

Motion and Feedback Language

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

Learning goal

To define base durations (150–300ms) and easing curves, and to write state rules (hover, focus, active, success, error) that tie motion to the VIS (restrained vs playful).

Who

  • Designers
  • Front-end developers
  • Back-end developers
  • UX researchers

What

  • Understand the importance of motion in supporting meaning, not noise.

Where

  • In web applications, mobile apps, and desktop software.

When

  • When users interact with elements (e.g., hover, focus, active states).

Why it matters

  • Without feedback, users feel unsure.

How

  1. Define base durations (150–300ms) and easing curves to ensure smooth transitions.

  2. Write state rules (hover, focus, active, success, error) to provide clear visual cues.

  3. Tie motion to the VIS (restrained vs playful) to enhance user experience.

Guided Exercise (10–15 minutes)

  • Create motion tokens (duration.xs/sm/md, easing.standard/enter/exit).

  • Define state rules for CTA (hover/focus/active) and card.

  • 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.

Bibliography (sources used)

Optional Deepening

  • Read more about Material Motion and prefers-reduced-motion for a deeper understanding.

Current Status

  • The lesson is now complete and ready for review.

Next Steps

  • Review the lesson and provide feedback.

  • Implement the motion and feedback rules in your project.

  • Test and iterate to ensure a smooth user experience.

Additional Resources