Interaction Design

Interaction Design

Table of Contents

• Overview
• When to Use
• Quick Start
• Reference Guides
• Best Practices

Overview

Interaction design focuses on how users engage with systems, creating intuitive and delightful experiences through feedback and responsiveness.

When to Use

• Designing user flows and touchpoints
• Creating animations and transitions
• Defining error and loading states
• Building microinteractions
• Improving usability and feedback
• Mobile interaction patterns

Quick Start

Minimal working example:

Common Interaction Patterns:

Swipe:
  Use: Mobile lists, carousels
  Feedback: Visual sliding, momentum
  Accessibility: Keyboard alternative (arrows)

Tap & Hold:
  Use: Context menus, drag prep
  Feedback: Visual feedback after delay
  Duration: ~500ms before trigger

Pinch & Zoom:
  Use: Image viewing, maps
  Feedback: Smooth zoom animation
  Boundaries: Set min/max zoom levels

Drag & Drop:
  Use: Reordering, moving items
  Feedback: Visual during drag, drop confirmation
  Fallback: Alternative method (buttons)

Double Tap:
  Use: Zoom, favorite, select
  Feedback: Immediate visual response
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Best Practices

✅ DO

• Keep animations under 400ms
• Provide clear visual feedback
• Use animations to guide attention
• Respect motion preferences
• Make interactions reversible
• Test with keyboard and screen readers
• Provide multiple interaction methods
• Design for touch and mouse
• Use appropriate easing curves
• Document interaction behavior

❌ DON'T

• Animate for decoration only
• Use animations longer than 500ms
• Ignore motion-sensitive users
• Remove focus indicators
• Trap users in modals
• Use confusing animations
• Animate everything
• Ignore loading states
• Forget error states
• Skip accessibility testing

Accessibility in Interactions

Accessibility in Interactions

// Ensure interactions are accessible

class AccessibleInteractions {
  ensureKeyboardAccess() {
    return {
      tab_order: "Logical, top-to-bottom",
      focus_visible: "Clear focus indicator (not removed)",
      enter_key: "Activates buttons and links",
      space_key: "Activates buttons",
      escape_key: "Closes modals and menus",
      arrow_keys: "Navigate lists, menus, carousels",
    };
  }

  respectMotionPreferences() {
    return {
      prefers_reduced_motion: {
        media_query: "@media (prefers-reduced-motion: reduce)",
        actions: [
          "Disable animations",
          "Reduce animation duration",
          "Remove parallax effects",
          "Disable autoplay",
        ],
      },
    };
  }

  screenReaderConsiderations() {
    return {
      announcements: "Use ARIA live regions for updates",
      feedback: "Provide screen reader feedback for interactions",
      labels: "Clear, descriptive button labels",
      states: "Announce state changes (expanded, selected)",
    };
  }
}

Animation & Transition Design

Animation & Transition Design

# Define animations and transitions

class InteractionDesign:
    def define_animation(self, interaction):
        """Specify animation properties"""
        return {
            'trigger': interaction.trigger,  # Click, hover, load
            'element': interaction.element,
            'animation': {
                'type': interaction.animation_type,  # Fade, slide, scale
                'duration': interaction.duration,     # 200-400ms typical
                'easing': interaction.easing_fn,      # Ease-in-out
                'delay': interaction.delay_ms
            },
            'purpose': interaction.purpose,  # Feedback, guidance, delight
            'platform': ['Desktop', 'Mobile'],  # Platform-specific
            'accessibility': {
                'respects_prefers_reduced_motion': True,
                'non_distract': 'Critical interactions only'
            }
        }

    def define_transitions(self):
        """Page/screen transitions"""
        return {
            'navigation_forward': {
                'animation': 'Slide right',
                'duration': '300ms',
                'easing': 'ease-out'
            },
            'navigation_back': {
                'animation': 'Slide left',
                'duration': '300ms',
                'easing': 'ease-out'
            },
            'modal_open': {
                'animation': 'Fade + Scale up',
                'duration': '200ms',
                'easing': 'ease-out'
            },
            'modal_close': {
                'animation': 'Fade + Scale down',
                'duration': '150ms',
                'easing': 'ease-in'
            }
        }

    def animation_guidelines(self):
        """Best practices for animation"""
        return {
            'duration': {
                'micro_interactions': '100-200ms',
                'transitions': '200-400ms',
                'entrance_animations': '300-500ms',
                'avoid': '>500ms (feels sluggish)'
            },
            'easing': {
                'entrance': 'Ease out (fast start, slow end)',
                'exit': 'Ease in (slow start, fast end)',
                'focus': 'Ease-in-out for smooth feel'
            },
            'purpose': [
                'Provide feedback',
                'Guide user attention',
                'Communicate state change',
                'Delight users',
                'Avoid: Distraction, slowness'
            ]
        }

Error Handling & Feedback

Error Handling & Feedback

Error State Design:

Primary Error Message:
  "Payment declined"  (clear, non-technical)

Secondary Explanation:
  "Your card was declined by the bank. This might be due to
  insufficient funds, security concerns, or an expired card."

Recovery Action:
  [ Retry Payment ] [ Use Different Card ] [ Contact Support ]

Form Field Errors:
  - Highlight field with error color (red)
  - Show error icon
  - Place error message near field
  - Show error on blur, not on keystroke

Form Validation:
  - Real-time validation for good UX
  - Server-side validation for security
  - Show success state after valid input
  - Clear error when corrected

---

Success States:

Confirmation Message:
  "Payment successful!"
  Duration: 2-3 seconds
  Action: Auto-dismiss or click to close

Next Step:
  - Order confirmation email sent
  - What happens next?
  - Related actions

Visual Feedback:
  - Check mark animation
  - Subtle celebration animation
  - Sound (optional, if enabled)