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
  Conflict: Avoid 300ms delay confusion

---

undefined

undefined

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'
        ]
    }

undefined

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)

// 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)'
    };
  }
}