Interaction Design

Instructions

12 Principles of Interaction Animation — Apply these to every motion decision:

1. Easing — Objects accelerate and decelerate naturally; never use linear timing for UI elements.
2. Offset & Delay — Stagger related elements to create visual rhythm and guide attention.
3. Parenting — Child elements inherit motion from parents (e.g., list items follow the container).
4. Transformation — Morph shape, size, or position to show continuity between states.
5. Value Change — Animate numeric or textual content changes so users register the update.
6. Masking — Reveal or conceal content with clip paths and overflow to maintain spatial context.
7. Overlay — Layer elements with depth cues (shadow, blur, scale) to show hierarchy.
8. Cloning — Duplicate an element at its origin before transitioning it to a new location.
9. Obscuration — Blur or dim background content to direct focus to foreground actions.
10. Parallax — Move layers at different speeds to convey depth and spatial relationships.
11. Dimensionality — Use 3D transforms sparingly to reinforce real-world metaphors.
12. Dolly & Zoom — Scale the viewport or canvas to shift context (e.g., drill-down navigation).

Dan Saffer’s Microinteraction Framework — Structure every microinteraction with four parts:

• Trigger — What initiates it (user action or system event)
• Rules — What happens once triggered (the logic)
• Feedback — How the system communicates the result (visual, auditory, haptic)
• Loops & Modes — How the interaction evolves over repeated use or changes context

Duration Standards — Use these ranges as starting points, then tune per context:

Motion Physics — Prefer spring-based easing over linear or cubic-bezier for object motion. Springs feel organic because they model mass and tension. Define shared spring configs (e.g., stiffness: 300, damping: 24) as design system tokens.

Easing Curves as Tokens — Export named easing tokens so engineers and designers reference identical curves:

• ease-standard: general purpose (ease-in-out equivalent)
• ease-enter: elements appearing (ease-out, fast start, gentle stop)
• ease-exit: elements leaving (ease-in, gentle start, fast finish)
• ease-spring: object motion with overshoot

Accessibility — Every animation must have a prefers-reduced-motion alternative:

• Replace motion with instant state changes or simple opacity fades
• Never rely on animation alone to convey critical information

Choreography Rules:

• Animate a maximum of 3 simultaneous elements without explicit choreography (stagger, sequencing)
• No bounce effects on error or destructive states — bounce implies playfulness, which conflicts with severity
• Apply optimistic UI patterns: animation must never block the user from their next action; start the animation and accept input concurrently

Quality Assurance:

• Test every animation at 0.5x speed to spot awkward intermediate frames, jank, or abrupt direction changes
• Verify animations run at 60 fps on target devices
• Confirm that disabling animations (prefers-reduced-motion: reduce) produces a fully functional experience

Checklist before handoff:

• [ ] Duration and easing specified for every transition
• [ ] Microinteraction documented with trigger, rules, feedback, loops
• [ ] prefers-reduced-motion alternatives defined
• [ ] Choreography sequencing annotated for multi-element transitions
• [ ] Interactive prototype demonstrates all key flows
• [ ] Performance tested on lowest-spec target device