Interaction Design

What is Interaction Design?

Interaction Design (IxD) focuses on creating engaging interfaces with well-thought-out behaviors. It's about designing the conversation between users and products.

The Microwave vs iPhone

Microwave: Complex interface, unclear buttons, frustrating interactions

iPhone: Intuitive gestures, immediate feedback, delightful interactions

Difference: Thoughtful interaction design

Core Interaction Principles

1. Affordances

Design elements should suggest how they can be used.

Example: Buttons look pressable (raised, shadowed). Links are underlined and colored. Sliders have handles you can grab. Instagram's heart icon begs to be tapped.

2. Feedback

Every action should have a visible reaction.

Example: Twitter's heart animation when you like a tweet. Medium's clap animation that grows with multiple clicks. Slack's message sent checkmark.

3. Consistency

Similar elements should behave similarly.

Example: Apple's swipe-to-delete works the same in Mail, Messages, Photos, and Notes. Once learned, it transfers everywhere.

4. Constraints

Limit options to prevent errors.

Example: Google Calendar grays out past dates when scheduling future events. Can't select invalid options.

5. Mapping

Controls should relate naturally to their effects.

Example: Volume slider goes up for louder, down for quieter. Brightness slider uses sun icon. Natural mental models.

Interaction Patterns

Pull to Refresh

Origin: Tweetie (2008)

Problem: No space for refresh button on mobile

Solution: Loren Brichter invented pull-to-refresh gesture

Interaction: Pull down → see loading indicator → release → content refreshes

Why It Works: Uses natural scrolling motion, provides clear feedback, feels satisfying

Adoption: Now standard in Twitter, Instagram, Gmail, Facebook—billions of daily uses

Swipe Gestures

Tinder's Swipe Mechanic

Interaction: Swipe right to like, left to pass

Why It Works:

  • Fast decision-making (100+ profiles per session)
  • Physical gesture feels more natural than tapping buttons
  • Gamified—addictive swiping motion
  • Clear visual feedback (card flies off screen)

Impact: "Swipe right" entered popular culture, pattern copied by Bumble, Hinge, even job apps like Switch

Infinite Scroll

Example: Facebook News Feed

Old Pattern: Pagination (Next/Previous buttons)

New Pattern: Content loads automatically as you scroll

Benefits:

  • Seamless experience, no interruption
  • Increased engagement (no stopping points)
  • Mobile-friendly (no precise clicking)

Drawbacks:

  • Can't reach footer easily
  • Lose your place if you navigate away
  • Addictive—hard to stop scrolling

When to Use: Social feeds, image galleries. When NOT to use: Search results, data tables (users need to find specific items)

Drag and Drop

Trello's Card Management

Interaction: Click and hold card → drag to new column → drop to move

Feedback:

  • Card lifts with shadow (visual elevation)
  • Cursor changes to grabbing hand
  • Drop zones highlight when hovering
  • Other cards shift to make space
  • Smooth animation on release

Why It Works: Mimics physical manipulation, direct manipulation feels powerful

Microinteractions

What Are Microinteractions?

Small, contained moments that accomplish a single task. They're the details that delight.

Structure: Trigger → Rules → Feedback → Loops/Modes

Example: Facebook's Like Button Evolution

2009: Simple thumbs up icon, instant like

2016: Added Reactions (Love, Haha, Wow, Sad, Angry)

Interaction Design:

  • Trigger: Long-press on Like button
  • Feedback: Reactions pop up with bounce animation
  • Selection: Hover over reaction, it grows larger
  • Confirmation: Reaction animates into post

Result: Increased engagement 20%, gave users more expressive options

Great Microinteraction Examples

  • Gmail's Undo Send: 5-second window to cancel, progress bar shows time remaining
  • Slack's Message Sent: Checkmark appears, message slides into place
  • Stripe's Payment Form: Card type detected automatically, icon appears
  • Duolingo's Streak: Fire emoji grows with consecutive days, celebration animation at milestones
  • Apple Watch's Activity Rings: Rings fill throughout day, close with satisfying animation

Animation & Motion

Purpose of Animation

  • Provide Feedback: Show that action was received
  • Maintain Context: Show where elements come from/go to
  • Direct Attention: Guide users to important changes
  • Express Personality: Make product feel alive

Example: iOS App Launch Animation

Interaction: Tap app icon → icon expands to fill screen → app content fades in

Why It Works:

  • Maintains spatial context (app comes from icon location)
  • Feels fast (200ms duration)
  • Smooth transition, not jarring cut
  • Consistent across all apps

Alternative (Bad): App just appears—disorienting, feels broken

Animation Mistakes to Avoid

  • Too Slow: Animations over 400ms feel sluggish
  • Too Fast: Under 100ms, users miss them
  • Unnecessary: Animation without purpose is distraction
  • Inconsistent Easing: Mix of linear and eased feels janky
  • Too Many: Everything moving is overwhelming

Material Design Motion Principles

  • Responsive: Acknowledge input immediately (under 100ms)
  • Natural: Use easing curves that mimic physics
  • Aware: Elements respond to user and each other
  • Intentional: Guide focus to important changes

Example: Google's FAB (Floating Action Button) morphs into new screen, maintaining connection between trigger and result

Touch Gestures

Standard Touch Gestures

  • Tap: Select, activate
  • Double Tap: Zoom, like (Instagram)
  • Long Press: Context menu, reorder mode
  • Swipe: Navigate, delete, refresh
  • Pinch: Zoom in/out
  • Rotate: Rotate objects (Maps, Photos)
  • Edge Swipe: System navigation (back, app switcher)

Example: Clear App's Gesture-Based To-Do List

Innovation: Entire app controlled by gestures, no buttons

Interactions:

  • Pull down to add item at top
  • Pull up to add item at bottom
  • Swipe right to complete (item flies off)
  • Swipe left to delete
  • Pinch to create new list
  • Drag to reorder

Result: Won Apple Design Award, praised for innovative interactions, but had learning curve

Lesson: Novel gestures are powerful but need good onboarding

Loading States

Types of Loading Indicators

  • Spinner: Unknown duration, indeterminate
  • Progress Bar: Known duration, shows percentage
  • Skeleton Screens: Show layout while content loads
  • Optimistic UI: Show result immediately, sync in background

Example: Facebook's Skeleton Screens

Old Approach: Blank screen with spinner while loading

New Approach: Gray placeholder boxes in layout of content

Benefits:

  • Feels faster (perceived performance)
  • Shows what's coming (sets expectations)
  • Reduces layout shift when content loads
  • Less jarring than spinner

Result: Users perceive page loads as 20% faster, reduced bounce rate

Optimistic UI Example: Twitter

Interaction: Click "Tweet" button

Optimistic Response: Tweet appears in feed immediately

Background: Actually sending to server

If Fails: Show error, remove tweet, let user retry

Why It Works: Feels instant, 99% of tweets succeed, rare failures are handled gracefully

Error States

Good Error Messages

  • Human Language: Not "Error 404" but "Page not found"
  • Explain What Happened: "Your password must be at least 8 characters"
  • Suggest Solution: "Try checking your spelling or using different keywords"
  • Don't Blame User: "We couldn't find that" not "You entered invalid data"
  • Provide Path Forward: Clear next action

Example: Mailchimp's Error Personality

Standard Error: "Error: Invalid email address"

Mailchimp's Approach: "Hmm, that email doesn't look right. Can you double-check it?"

Why It Works:

  • Friendly tone reduces frustration
  • Specific about the problem
  • Suggests action (double-check)
  • Maintains brand personality

404 Page Examples

  • GitHub: "This is not the web page you are looking for" with search box
  • Pixar: Animated character looking confused, links to popular pages
  • Slack: "Uh oh! We couldn't find that page" with helpful links

Key Elements: Acknowledge error, maintain brand voice, provide helpful next steps

Empty States

Purpose of Empty States

First impression for new users. Opportunity to educate and motivate action.

Example: Dropbox's Empty State

Context: User just installed Dropbox, folder is empty

Empty State Design:

  • Illustration of files being added
  • Headline: "Your Dropbox is empty"
  • Subtext: "Add files to get started"
  • Large "Add files" button
  • Secondary options: "Install desktop app" or "Take a tour"

Result: 60% of users add first file within 5 minutes

Empty State Best Practices

  • Explain Why It's Empty: "You haven't created any projects yet"
  • Show What It Will Look Like: Preview of populated state
  • Clear Call to Action: Prominent button to add first item
  • Provide Help: Link to tutorial or examples
  • Maintain Personality: Opportunity for brand voice

Progressive Disclosure

Show Complexity Gradually

Start simple, reveal advanced features as needed.

Example: Google Search

Default: Simple search box, one button

Progressive Disclosure:

  • Type → Autocomplete suggestions appear
  • Search → Results with basic filters (Images, News, Videos)
  • Click "Tools" → Advanced filters (time range, location, etc.)
  • Click "Advanced Search" → Full power-user options

Why It Works: 99% of users only need simple search, power users can access advanced features

Camera App Example

Default View: Viewfinder and capture button (80% of use cases)

Swipe Up: Exposure and focus controls

Settings: Grid, timer, formats, etc.

Pro Mode: Manual ISO, shutter speed, white balance

Interaction Design at Scale

Staff/Director Level Considerations

  • Platform Consistency: Interactions work across iOS, Android, web
  • Accessibility: Interactions work with assistive technologies
  • Performance: Smooth 60fps animations on low-end devices
  • Localization: Gestures appropriate for all cultures
  • Documentation: Interaction patterns documented for all teams

Example: Uber's Global Interaction Challenges

Problem: Swipe-to-confirm worked in US but failed in India

Research: Indian users on low-end phones had laggy swipe interactions

Solution: Added tap-to-confirm option, made swipe more forgiving

Learning: Test interactions on target devices in target markets

📅 Evolution of Interaction Design

Pre-2000: Desktop & Mouse Era

Example: Windows 95 interface

  • Click, double-click, right-click paradigms
  • Hover states and tooltips
  • Keyboard shortcuts for power users
  • Static, predictable interactions
  • Skeuomorphic design (buttons look like physical buttons)

Pre-2023: Touch & Mobile Era

Example: iPhone gestures, Material Design

  • Swipe, pinch, tap, long-press gestures
  • Pull-to-refresh and infinite scroll
  • Microinteractions and delightful animations
  • Responsive and adaptive interfaces
  • Haptic feedback for tactile responses

2023+: Multimodal & AI Era

Example: Vision Pro spatial interactions, AI assistants

  • Voice, gesture, eye-tracking combined
  • Spatial computing (3D interactions in AR/VR)
  • AI-predicted actions and smart defaults
  • Natural language as primary interface
  • Context-aware adaptive interactions

Fun Fact

The "pull-to-refresh" gesture was invented by Loren Brichter in 2008 for his Twitter app "Tweetie"! Twitter was so impressed they bought the entire company just to acquire the app (and Loren). The gesture felt so natural that Apple copied it for iOS, and now it's everywhere. Loren later said he regrets making it so addictive—it trained people to constantly refresh their feeds looking for new content, contributing to social media addiction!

⚠️ When Theory Meets Reality: The Contradiction

Theory Says: Provide clear affordances and feedback for every interaction

Reality: Snapchat launched with zero onboarding and hidden gestures—users had to discover everything.

Example: Snapchat's "Figure It Out" Philosophy

  • No tutorial, no tooltips, no help section initially
  • Swipe left/right/up/down did different things (not obvious)
  • Hold to view, tap to advance, swipe to dismiss
  • Users had to teach each other how to use it
  • Became one of the most popular apps among teens (200M+ DAU)

Lesson: Mystery and discovery can be engaging. Not every interaction needs to be obvious. Sometimes making users work to figure things out creates a sense of mastery and exclusivity. But this only works if your target audience enjoys the challenge!

📚 Resources & Further Reading

Books

  • Cooper, Alan, et al. About Face: The Essentials of Interaction Design. 4th ed., Wiley, 2014.
  • Saffer, Dan. Microinteractions: Designing with Details. O'Reilly Media, 2013.
  • Norman, Don. The Design of Everyday Things. Revised ed., Basic Books, 2013.

Articles & Papers

Tools & Resources

  • Framer Motion - Animation library for React
  • Principle - Interaction design tool
  • Lottie - Animation library by Airbnb
← Previous: Information Architecture Next: Visual Design →