UX Encyclopedia

Microinteractions & Motion

Motion is information: it explains where things came from, where they went, and what relates to what. Decoration is its side hustle, not its job.

Try it — easing and duration are the whole feel. Pick a curve and a duration, then press Play. If your OS requests reduced motion, the card jumps instantly instead of sliding — that swap is the correct behavior, not a missing feature.

Microinteraction structure (Saffer, 2013)

Trigger → rules → feedback → loops/modes. Every small moment (toggle, like, pull-to-refresh, volume change) can be designed with this lens: what starts it, what happens, how the user knows, what changes over time.

Functional roles of motion

  • Orientation: transitions show spatial/hierarchical relationships — where a screen came from (drill-in slides deeper, back slides out), what a card expanded from (container transform — Material's shared- element pattern). Reduces the "teleportation" disorientation of hard cuts.
  • Feedback: pressed states, drags that track the finger 1:1, elastic overscroll — confirming the system feels the user.
  • Attention: motion is the strongest salience cue (see attention file) — a single small movement can direct the eye; more than one moving thing at a time and you've spent it.
  • Continuity during waits: skeletons, progress, staggered list entrances mask latency.
  • Character: easing + duration + exuberance define personality (snappy-tool vs. playful-consumer) — motion is part of brand voice.

Craft numbers (platform conventions)

  • Durations: most UI transitions ~150–400 ms (Material's duration tokens run roughly 50–1000 ms with most components in the 200–500 ms band; small elements shorter, full-screen longer). Under ~100 ms reads as instant; over ~500 ms for common actions reads as sluggish.
  • Easing: ease-out for entrances (fast start, gentle landing), ease-in for exits, standard/emphasized curves per platform tokens; linear only for continuous progress. Physical plausibility (mass, momentum) is why the 12 classic animation principles (Disney; Thomas & Johnston 1981) — especially slow-in/slow-out, follow-through, anticipation — transfer to UI (Chang & Ungar 1993 made this argument for interfaces early).
  • Spring-based motion systems: the platform direction is physics over fixed curves. Material 3 Expressive (2025) replaces duration+easing with spring tokens (composite damping-ratio + stiffness values; the old duration/easing tokens remain as fallback); SwiftUI's default animation has been a spring since iOS 17. Springs have no fixed end time and are natively interruptible and retargetable — a gesture can redirect a moving element mid-flight without a visible restart, which is the real UX argument for them. Tune with damping (bounce) and stiffness (speed); reserve bouncy under-damped springs for playful, low-frequency moments.

Web platform notes (state as of 2026 — verify against MDN)

  • View Transitions API: browser-native crossfades/shared-element transitions between DOM states. Same-document transitions are Baseline (Chrome 111+, Edge, Safari 18+, Firefox 133+); cross-document (MPA) transitions ship in Chromium 126+ and Safari 18.2+, not yet Firefox. Treat as progressive enhancement — the app must work identically without it — and gate with @media (prefers-reduced-motion).
  • Scroll-driven animations (CSS animation-timeline): supported in Chrome (since 2023), Safari 26; Firefox behind a flag (polyfill available). Cautions: they bind animation to scroll position, so never gate content legibility or critical UI on scroll progress; don't hijack or fight native scrolling (scrolljacking is a perennially documented usability failure — NN/g); keep effects on compositor-friendly properties (transform/opacity) for performance; parallax and scroll-linked zooms are exactly the class of motion that triggers vestibular symptoms — reduced-motion support is mandatory here, not optional polish.

Haptics & sound

  • Haptics confirm through the skin what the screen shows — use for moments the eye may miss: action confirmed, boundary hit, detent crossed, error. Always paired with (never replacing) visual feedback.
  • iOS vocabulary: UINotificationFeedbackGenerator (success/warning/error), UIImpactFeedbackGenerator (light/medium/ heavy/soft/rigid collision weights), UISelectionFeedbackGenerator (ticks for picker/detent changes); Core Haptics for custom patterns. HIG: use the system's semantic haptics consistently so meanings stay learnable; don't fire haptics continuously or for every trivial touch.
  • Android vocabulary: HapticFeedbackConstants via performHapticFeedback for standard interactions; VibrationEffect predefined effects and composition primitives (CLICK, TICK, LOW_TICK, SLOW_RISE, QUICK_RISE, QUICK_FALL, THUD, SPIN) for richer sequences. Android's guidelines: prefer crisp/clear over buzzy vibration, and co-design haptic + visual + audio as one congruent event.
  • Restraint rules: haptic strength ∝ event importance; respect system haptics/vibration settings; hardware varies wildly (especially Android) — test on weak actuators; overuse numbs meaning fast.
  • Sound: silent-by-default is the norm for productivity software; audio earns its place for eyes-free moments — payment success (Apple Pay's chime+haptic), camera shutter, message sent, timer done — and as accessibility reinforcement. Respect the ringer/mute switch and never startle. Sound may never be the sole channel for information (pair with visible state; cf. WCAG 1.3.3's ban on single-sense cues).

Restraint & accessibility

  • Animate only what informs; every animation on a frequent path is paid for on every repetition — allow reduced/no animation.
  • Respect prefers-reduced-motion (WCAG 2.3.3 Animation from Interactions, AAA but treat as baseline decency): replace movement with fades/instant changes. Vestibular disorders make parallax, zooms, and large sweeps physically unpleasant.
  • Auto-playing, auto-updating, or looping motion lasting >5 s needs a pause/stop/hide control (WCAG 2.2.2, Level A).
  • Never block input on a non-interruptible animation; motion must yield to intent (user can act mid-transition) — spring systems make this the default rather than an afterthought.
  • No autoplaying flashing >3/second (WCAG 2.3.1 — seizure safety).

Sources

  • Saffer, D. (2013). Microinteractions. O'Reilly.
  • Thomas, F. & Johnston, O. (1981). The Illusion of Life. Abbeville — the 12 principles; Chang, B.-W. & Ungar, D. (1993). "Animation: From cartoons to the user interface." UIST '93.
  • Material Design 3 — Motion (easing & duration tokens, container transform); M3 Expressive motion-physics/spring-token documentation (m3.material.io).
  • Apple HIG — Motion, Playing haptics, Playing audio; Apple developer docs — UIFeedbackGenerator, Core Haptics.
  • Android developers — Haptics design principles & APIs (developer.android.com); AOSP haptics UX docs (source.android.com).
  • MDN — View Transition API; CSS scroll-driven animations (current support tables; developer.mozilla.org).
  • W3C WCAG 2.2 — SC 2.2.2, 2.3.1, 2.3.3, 1.3.3.
  • Head, V. (2016). Designing Interface Animation. Rosenfeld Media; Nielsen Norman Group — scrolljacking studies (nngroup.com).
↑↓ to navigate · Enter to open · Esc to close