What interaction design is and why motion matters
Interaction design is the practice of shaping how users and products communicate through behavior. While visual design determines how an interface looks, interaction design determines how it feels — how it responds to input, how elements move and change, how the system communicates its state.
Motion in interfaces serves a functional purpose. It shows cause and effect (I tapped this, and that happened). It maintains spatial orientation (this panel slid in from the right, so I know it's "beside" the previous view). It communicates status (the spinner tells me something is loading). It directs attention (the notification badge pulsed, so I noticed it). Without motion, interfaces feel mechanical and disconnected — users lose context during transitions and miss state changes.
The key principle: motion should be invisible. Users shouldn't notice your animations — they should simply feel that the interface is responsive, clear, and natural. When someone notices the animation itself, it's usually too slow, too flashy, or too decorative.
Principles of motion design
The Twelve Principles (adapted from Disney) Framework
Use this to evaluate whether an animation feels right.
Disney's animation principles translate surprisingly well to UI. The most relevant for interfaces: Easing (objects accelerate and decelerate naturally — never move at constant speed). Anticipation (a brief wind-up before the main action — a button scales down slightly before the press response). Follow-through (elements settle after arriving — a slight overshoot and bounce-back). Staging (direct the user's attention to the most important change). Secondary action (supporting animations that reinforce the primary action without competing for attention).
Duration guidelines
Micro-interactions: 100–300ms. Button press feedback, toggle switches, tooltips. Fast enough to feel instant, slow enough to be perceived. Transitions: 200–500ms. Page transitions, modal open/close, panel slide. Long enough to maintain spatial context. Complex choreography: 300–700ms. Staggered list animations, multi-element transitions. Each element gets 50–100ms, staggered by 30–50ms. Never exceed 1 second for any UI animation — after that, users feel like they're waiting for the interface rather than using it.
The easing rule
Never use linear easing for UI motion. Objects in the real world don't move at constant speed — they accelerate and decelerate. Use ease-out for elements entering the screen (fast start, gentle landing). Use ease-in for elements leaving (slow start, fast exit). Use ease-in-out for elements moving within the screen. The difference between linear and eased motion is the difference between robotic and natural.
Micro-interactions
Micro-interactions are contained moments of interaction — a single use case with a clear trigger, rules, feedback, and loop. Dan Saffer's framework breaks every micro-interaction into four parts:
Micro-interaction Anatomy Framework
Use this to design any small, contained interaction.
Trigger
What initiates the interaction. User-initiated triggers: clicking a button, swiping, typing. System-initiated triggers: receiving a notification, reaching a threshold, a timer expiring. Every micro-interaction starts with one of these.
Rules
What happens when the trigger fires. The rules define the behavior: what changes, what's affected, what the constraints are. "When the user toggles the switch, change the setting and sync to the server." Rules are invisible to users but define the entire logic.
Feedback
How the system communicates what happened. Visual feedback (color change, animation), auditory feedback (click sound, notification chime), haptic feedback (vibration). Feedback must be immediate, proportional to the action, and clearly connected to the trigger.
Loops and modes
What happens over time. Does the interaction repeat? Does it change with repeated use? Does it expire? A "like" animation plays once per tap. A loading spinner loops until the data arrives. A notification badge persists until acknowledged. Modes are alternate states: a toggle that changes behavior between two modes.
Common Micro-interactions Core Method
Use when: designing any interactive element.
Button press: Visual depression on press (scale to 0.97), color shift, then release. 100–150ms. Toggle switch: Thumb slides with easing, track color transitions, optional haptic on mobile. 200ms. Pull-to-refresh: Elastic resistance while pulling, spinner appears at threshold, content reloads, spinner fades. Swipe to delete: Item slides to reveal action, color change indicates danger zone, release triggers action or snaps back. Form validation: Inline feedback as user types (checkmark, error icon), not just on submit.
State transitions
The Five UI States Framework
Use when: designing any component that loads or displays data.
Every data-dependent component exists in five states. Designing for only the "ideal" populated state leaves users confused when anything else happens.
Empty state: No data yet. Don't show a blank screen — explain what will appear here and how to get started. The best empty states are onboarding moments. Loading state: Data is being fetched. Use skeleton screens (content-shaped placeholders) over spinners when possible — they give a sense of what's coming. Partial state: Some data, not all. Handle gracefully — show what you have, indicate what's missing. Error state: Something went wrong. Say what happened and what the user can do about it. Offer retry. Ideal state: Everything works. This is what most teams design first (and sometimes only).
Skeleton screens vs spinners
Skeleton screens (gray shapes mimicking the content layout) make perceived load time feel shorter than spinners. The user's brain starts processing the layout before data arrives, so the transition from skeleton to content feels like a reveal rather than a wait. Use skeletons when you know the content structure. Use spinners when the content structure is unpredictable or when a discrete action is processing (submitting a form, saving a file).
Feedback patterns
Hover and Focus States Core Pattern
Use when: designing any interactive element.
Hover states communicate "this is interactive" before the user clicks. A subtle background shift, underline appearance, or shadow elevation. Don't make hover states too dramatic — they fire constantly as the cursor moves. Focus states (for keyboard navigation) must be visible and distinct from hover — typically an outline or ring. Never share the same visual treatment between hover and focus; keyboard users need to know which element is focused even without a cursor present.
Progress and Loading Feedback Core Pattern
Use when: any operation takes longer than 1 second.
Under 1 second: no feedback needed — the result should just appear. 1–3 seconds: show a spinner or skeleton screen. 3–10 seconds: show a progress bar with indication of progress (determinate if possible, indeterminate if not). Over 10 seconds: show progress with estimated time remaining and allow the user to do other things. Over 1 minute: send a notification when done, let the user navigate away.
Success and Confirmation Core Pattern
Use when: a user action completes successfully.
Success feedback should be proportional to the action's importance. Saving a document: a brief checkmark or "Saved" label that fades after 2 seconds. Completing a purchase: a dedicated success screen with order details. Sending a message: the message appears in the conversation with a "sent" indicator. The common mistake is over-celebrating trivial actions (full-screen confetti for toggling a setting) or under-acknowledging important ones (no confirmation after deleting a file).
Functional vs decorative animation
The purpose test
Before adding any animation, ask: "If I remove this animation, does the user lose information or context?" If yes, it's functional — keep it. If no, it's decorative — justify it carefully. Functional animation clarifies relationships, provides feedback, or maintains spatial context. Decorative animation adds personality but costs performance and can distract. Most products need more functional animation and less decorative animation.
Functional examples: A sidebar sliding in from the left (spatial context). A checkmark appearing after form validation (feedback). Items reordering smoothly after a sort (continuity). A modal dimming the background (focus direction). Decorative examples: A logo animation on page load. Parallax scrolling effects. Particle effects on button hover. Bouncing notification badges. Decorative animation isn't wrong, but it should be used sparingly and always with a prefers-reduced-motion fallback.
Reduced motion and accessibility
prefers-reduced-motion Core Pattern
Use when: implementing any animation in CSS or JavaScript.
Some users experience motion sickness, seizures, or distraction from animation. The prefers-reduced-motion media query lets you respect their system preference. At minimum: disable parallax, auto-playing video, and complex transitions. Replace animated transitions with instant state changes (opacity crossfade is usually acceptable). Never remove functional feedback — just make it non-animated. In CSS: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
Vestibular disorders affect more people than you think
An estimated 35% of adults over 40 have experienced vestibular dysfunction. Large-scale motion (full-screen transitions, parallax), zoom effects, and animations that move in multiple directions simultaneously are the most problematic. Supporting reduced motion isn't an edge case — it's a significant portion of your user base.
Notification and attention design
Notification Design Framework Core Method
Use when: designing how your product communicates with users across different urgency levels, or when users complain about notification fatigue.
Notifications are an interaction design problem, not just a feature. Every notification is an interruption — and interruptions have cognitive costs. The framework: Alert hierarchy defines urgency levels and the interaction pattern each deserves. Critical alerts (security breach, payment failure) warrant modal interruption. Important updates (new message, task assigned) warrant persistent but non-blocking indicators (badges, banners). Informational updates (weekly digest, feature announcement) warrant passive indicators (inbox items, feed entries). The hierarchy must be strict: promoting low-urgency notifications to high-urgency channels trains users to ignore everything. Interruption management gives users control over when and how they're interrupted: do-not-disturb modes, notification schedules, per-channel granularity, and smart batching that groups low-urgency notifications into periodic digests. Smart notification patterns use context to suppress or modify: don't send a push notification if the user is actively in the app, combine multiple notifications from the same source, and decay notification urgency over time. AI-generated notification governance is the emerging challenge: as AI systems generate more proactive recommendations, alerts, and suggestions, designers need policies for how many AI-initiated notifications are acceptable, quality thresholds before surfacing an AI suggestion, and clear visual differentiation between human-triggered and AI-triggered notifications.
Templates and checklists
- Every animation has a functional purpose (feedback, context, direction)
- Durations are appropriate (100–300ms for micro-interactions, 200–500ms for transitions)
- Easing is non-linear (ease-out for enter, ease-in for exit)
- No animation exceeds 1 second
- prefers-reduced-motion is respected for all decorative animation
- Functional feedback is preserved in reduced-motion mode (instant state changes)
- All five UI states are designed (empty, loading, partial, error, ideal)
- Loading feedback matches operation duration (spinner for 1–3s, progress bar for 3–10s)
- Hover and focus states are visually distinct from each other
- Success feedback is proportional to action importance
- No auto-playing animation without user control
Real-world examples
Case study
Stripe: micro-interactions that build trust
Stripe's payment forms use micro-interactions to reduce anxiety during the most critical moment — entering payment details. The credit card number field formats as you type (adding spaces every 4 digits), the card brand icon appears when the number is recognized (Visa, Mastercard), and inline validation confirms each field before you move to the next. The entire form provides continuous, reassuring feedback that says "everything is working correctly" without interrupting the flow.
Why it works: Each micro-interaction reduces cognitive load and builds confidence. The user never wonders "did that work?" — the interface tells them in real time.
Case study
iOS: spatial model and physics-based motion
Apple's iOS uses a consistent spatial model: apps live on the home screen, and launching an app zooms into it. Closing zooms back out. Notifications slide down from the top (where they "live"). Control Center slides up from the bottom. This spatial consistency means users always know where things are, even in a 2D interface. The physics-based motion (momentum scrolling, rubber-banding at scroll limits, spring animations) makes the interface feel like it has physical properties — you can almost feel the weight of the elements.
Why it works: Spatial consistency reduces disorientation. Physics-based motion makes abstract digital objects feel tangible and predictable.
Case study
Slack: loading states and status communication
Slack uses skeleton screens for channel loading, typing indicators for real-time presence awareness, and message delivery indicators (sent → delivered → read). When a message fails to send, the interface doesn't silently fail — it shows a red error indicator with a retry button. The loading experience is particularly notable: skeleton screens match the exact layout of messages, so the transition from loading to loaded feels like content "filling in" rather than replacing a spinner.
Why it works: Every state transition communicates clearly. Users always know what's happening, what worked, and what didn't.
Common pitfalls
Animation for animation's sake
Adding motion to make the interface "feel premium" without functional purpose. Every animation should pass the removal test: if you take it away and nothing is lost (no context, no feedback, no direction), it shouldn't exist. Decorative animation has a high cost in performance, accessibility, and user patience.
Animations that are too slow
A 500ms button press animation feels sluggish. A 1-second page transition makes the app feel heavy. Users of modern interfaces expect near-instant feedback. When in doubt, make it faster. The most common timing mistake is applying the same duration to everything — a tooltip should appear in 100ms, not the same 300ms as a modal transition.
Ignoring reduced motion preferences
Approximately 35% of adults over 40 have vestibular issues. Parallax, zoom effects, and complex transitions cause real discomfort for these users. prefers-reduced-motion is easy to implement and has been supported by all major browsers since 2019. There's no excuse for ignoring it.