npm - @jakkrichm/create-nexus-devflow - Versions diffs - 2.0.0 → 2.0.2 - Mend

@jakkrichm/create-nexus-devflow 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (398) hide show

package/template/.agents/skills/mobile-design/touch-psychology.md CHANGED Viewed

@@ -1,537 +1,537 @@
-# Touch Psychology Reference
-> Deep dive into mobile touch interaction, Fitts' Law for touch, thumb zone anatomy, gesture psychology, and haptic feedback.
-> **This is the mobile equivalent of ux-psychology.md - CRITICAL for all mobile work.**
----
-## 1. Fitts' Law for Touch
-### The Fundamental Difference
-```
-DESKTOP (Mouse/Trackpad):
-├── Cursor size: 1 pixel (precision)
-├── Visual feedback: Hover states
-├── Error cost: Low (easy to retry)
-└── Target acquisition: Fast, precise
-MOBILE (Finger):
-├── Contact area: ~7mm diameter (imprecise)
-├── Visual feedback: No hover, only tap
-├── Error cost: High (frustrating retries)
-├── Occlusion: Finger covers the target
-└── Target acquisition: Slower, needs larger targets
-```
-### Fitts' Law Formula Adapted
-```
-Touch acquisition time = a + b × log₂(1 + D/W)
-Where:
-├── D = Distance to target
-├── W = Width of target
-└── For touch: W must be MUCH larger than desktop
-```
-### Minimum Touch Target Sizes
-| Platform | Minimum | Recommended | Use For |
-|----------|---------|-------------|---------|
-| **iOS (HIG)** | 44pt × 44pt | 48pt+ | All tappable elements |
-| **Android (Material)** | 48dp × 48dp | 56dp+ | All tappable elements |
-| **WCAG 2.2** | 44px × 44px | - | Accessibility compliance |
-| **Critical Actions** | - | 56-64px | Primary CTAs, destructive actions |
-### Visual Size vs Hit Area
-```
-┌─────────────────────────────────────┐
-│                                     │
-│    ┌─────────────────────────┐      │
-│    │                         │      │
-│    │    [  BUTTON  ]         │ ← Visual: 36px
-│    │                         │      │
-│    └─────────────────────────┘      │
-│                                     │ ← Hit area: 48px (padding extends)
-└─────────────────────────────────────┘
-✅ CORRECT: Visual can be smaller if hit area is minimum 44-48px
-❌ WRONG: Making hit area same as small visual element
-```
-### Application Rules
-| Element | Visual Size | Hit Area |
-|---------|-------------|----------|
-| Icon buttons | 24-32px | 44-48px (padding) |
-| Text links | Any | 44px height minimum |
-| List items | Full width | 48-56px height |
-| Checkboxes/Radio | 20-24px | 44-48px tap area |
-| Close/X buttons | 24px | 44px minimum |
-| Tab bar items | Icon 24-28px | Full tab width, 49px height (iOS) |
----
-## 2. Thumb Zone Anatomy
-### One-Handed Phone Usage
-```
-Research shows: 49% of users hold phone one-handed.
-┌─────────────────────────────────────┐
-│                                     │
-│  ┌─────────────────────────────┐    │
-│  │       HARD TO REACH         │    │ ← Status bar, top nav
-│  │      (requires stretch)     │    │    Put: Back, menu, settings
-│  │                             │    │
-│  ├─────────────────────────────┤    │
-│  │                             │    │
-│  │       OK TO REACH           │    │ ← Content area
-│  │      (comfortable)          │    │    Put: Secondary actions, content
-│  │                             │    │
-│  ├─────────────────────────────┤    │
-│  │                             │    │
-│  │       EASY TO REACH         │    │ ← Tab bar, FAB zone
-│  │      (thumb's arc)          │    │    Put: PRIMARY CTAs!
-│  │                             │    │
-│  └─────────────────────────────┘    │
-│                                     │
-│          [    HOME    ]             │
-└─────────────────────────────────────┘
-```
-### Thumb Arc (Right-Handed User)
-```
-Right hand holding phone:
-┌───────────────────────────────┐
-│  STRETCH      STRETCH    OK   │
-│                               │
-│  STRETCH        OK       EASY │
-│                               │
-│    OK          EASY      EASY │
-│                               │
-│   EASY         EASY      EASY │
-└───────────────────────────────┘
-Left hand is mirrored.
-→ Design for BOTH hands or assume right-dominant
-```
-### Placement Guidelines
-| Element Type | Ideal Position | Reason |
-|--------------|----------------|--------|
-| **Primary CTA** | Bottom center/right | Easy thumb reach |
-| **Tab bar** | Bottom | Natural thumb position |
-| **FAB** | Bottom right | Easy for right hand |
-| **Navigation** | Top (stretch) | Less frequent use |
-| **Destructive actions** | Top left | Hard to reach = harder to accidentally tap |
-| **Dismiss/Cancel** | Top left | Convention + safety |
-| **Confirm/Done** | Top right or bottom | Convention |
-### Large Phone Considerations (>6")
-```
-On large phones, top 40% becomes "dead zone" for one-handed use.
-Solutions:
-├── Reachability features (iOS)
-├── Pull-down interfaces (drawer pulls content down)
-├── Bottom sheet navigation
-├── Floating action buttons
-└── Gesture-based alternatives to top actions
-```
----
-## 3. Touch vs Click Psychology
-### Expectation Differences
-| Aspect | Click (Desktop) | Touch (Mobile) |
-|--------|-----------------|----------------|
-| **Feedback timing** | Can wait 100ms | Expect instant (<50ms) |
-| **Visual feedback** | Hover → Click | Immediate tap response |
-| **Error tolerance** | Easy retry | Frustrating, feels broken |
-| **Precision** | High | Low |
-| **Context menu** | Right-click | Long press |
-| **Cancel action** | ESC key | Swipe away, outside tap |
-### Touch Feedback Requirements
-```
-Tap → Immediate visual change (< 50ms)
-├── Highlight state (background color change)
-├── Scale down slightly (0.95-0.98)
-├── Ripple effect (Android Material)
-├── Haptic feedback for confirmation
-└── Never nothing!
-Loading → Show within 100ms
-├── If action takes > 100ms
-├── Show spinner/progress
-├── Disable button (prevent double tap)
-└── Optimistic UI when possible
-```
-### The "Fat Finger" Problem
-```
-Problem: Finger occludes target during tap
-├── User can't see exactly where they're tapping
-├── Visual feedback appears UNDER finger
-└── Increases error rate
-Solutions:
-├── Show feedback ABOVE touch point (tooltips)
-├── Use cursor-like offset for precision tasks
-├── Magnification loupe for text selection
-└── Large enough targets that precision doesn't matter
-```
----
-## 4. Gesture Psychology
-### Gesture Discoverability Problem
-```
-Problem: Gestures are INVISIBLE.
-├── User must discover/remember them
-├── No hover/visual hint
-├── Different mental model than tap
-└── Many users never discover gestures
-Solution: Always provide visible alternative
-├── Swipe to delete → Also show delete button or menu
-├── Pull to refresh → Also show refresh button
-├── Pinch to zoom → Also show zoom controls
-└── Gestures as shortcuts, not only way
-```
-### Common Gesture Conventions
-| Gesture | Universal Meaning | Usage |
-|---------|-------------------|-------|
-| **Tap** | Select, activate | Primary action |
-| **Double tap** | Zoom in, like/favorite | Quick action |
-| **Long press** | Context menu, selection mode | Secondary options |
-| **Swipe horizontal** | Navigation, delete, actions | List actions |
-| **Swipe down** | Refresh, dismiss | Pull to refresh |
-| **Pinch** | Zoom in/out | Maps, images |
-| **Two-finger scroll** | Scroll within scroll | Nested scrolls |
-### Gesture Affordance Design
-```
-Swipe actions need visual hints:
-┌─────────────────────────────────────────┐
-│  ┌───┐                                  │
-│  │ ≡ │  Item with hidden actions...   → │ ← Edge hint (partial color)
-│  └───┘                                  │
-└─────────────────────────────────────────┘
-✅ Good: Slight color peek at edge suggesting swipe
-✅ Good: Drag handle icon ( ≡ ) suggesting reorder
-✅ Good: Onboarding tooltip explaining gesture
-❌ Bad: Hidden gestures with no visual affordance
-```
-### Platform Gesture Differences
-| Gesture | iOS | Android |
-|---------|-----|---------|
-| **Back** | Edge swipe from left | System back button/gesture |
-| **Share** | Action sheet | Share sheet |
-| **Context menu** | Long press / Force touch | Long press |
-| **Dismiss modal** | Swipe down | Back button or swipe |
-| **Delete in list** | Swipe left, tap delete | Swipe left, immediate or undo |
----
-## 5. Haptic Feedback Patterns
-### Why Haptics Matter
-```
-Haptics provide:
-├── Confirmation without looking
-├── Richer, more premium feel
-├── Accessibility (blind users)
-├── Reduced error rate
-└── Emotional satisfaction
-Without haptics:
-├── Feels "cheap" or web-like
-├── User unsure if action registered
-└── Missed opportunity for delight
-```
-### iOS Haptic Types
-| Type | Intensity | Use Case |
-|------|-----------|----------|
-| `selection` | Light | Picker scroll, toggle, selection |
-| `light` | Light | Minor actions, hover equivalent |
-| `medium` | Medium | Standard tap confirmation |
-| `heavy` | Strong | Important completed, drop |
-| `success` | Pattern | Task completed successfully |
-| `warning` | Pattern | Warning, attention needed |
-| `error` | Pattern | Error occurred |
-### Android Haptic Types
-| Type | Use Case |
-|------|----------|
-| `CLICK` | Standard tap feedback |
-| `HEAVY_CLICK` | Important actions |
-| `DOUBLE_CLICK` | Confirm actions |
-| `TICK` | Scroll/scrub feedback |
-| `LONG_PRESS` | Long press activation |
-| `REJECT` | Error/invalid action |
-### Haptic Usage Guidelines
-```
-✅ DO use haptics for:
-├── Button taps
-├── Toggle switches
-├── Picker/slider values
-├── Pull to refresh trigger
-├── Successful action completion
-├── Errors and warnings
-├── Swipe action thresholds
-└── Important state changes
-❌ DON'T use haptics for:
-├── Every scroll position
-├── Every list item
-├── Background events
-├── Passive displays
-└── Too frequently (haptic fatigue)
-```
-### Haptic Intensity Mapping
-| Action Importance | Haptic Level | Example |
-|-------------------|--------------|---------|
-| Minor/Browsing | Light / None | Scrolling, hovering |
-| Standard Action | Medium / Selection | Tap, toggle |
-| Significant Action | Heavy / Success | Complete, confirm |
-| Critical/Destructive | Heavy / Warning | Delete, payment |
-| Error | Error pattern | Failed action |
----
-## 6. Mobile Cognitive Load
-### How Mobile Differs from Desktop
-| Factor | Desktop | Mobile | Implication |
-|--------|---------|--------|-------------|
-| **Attention** | Focused sessions | Interrupted constantly | Design for micro-sessions |
-| **Context** | Controlled environment | Anywhere, any condition | Handle bad lighting, noise |
-| **Multitasking** | Multiple windows | One app visible | Complete task in-app |
-| **Input speed** | Fast (keyboard) | Slow (touch typing) | Minimize input, smart defaults |
-| **Error recovery** | Easy (undo, back) | Harder (no keyboard shortcuts) | Prevent errors, easy recovery |
-### Reducing Mobile Cognitive Load
-```
-1. ONE PRIMARY ACTION per screen
-   └── Clear what to do next
-2. PROGRESSIVE DISCLOSURE
-   └── Show only what's needed now
-3. SMART DEFAULTS
-   └── Pre-fill what you can
-4. CHUNKING
-   └── Break long forms into steps
-5. RECOGNITION over RECALL
-   └── Show options, don't make user remember
-6. CONTEXT PERSISTENCE
-   └── Save state on interrupt/background
-```
-### Miller's Law for Mobile
-```
-Desktop: 7±2 items in working memory
-Mobile: Reduce to 5±1 (more distractions)
-Navigation: Max 5 tab bar items
-Options: Max 5 per menu level
-Steps: Max 5 visible steps in progress
-```
-### Hick's Law for Mobile
-```
-More choices = slower decisions
-Mobile impact: Even worse than desktop
-├── Smaller screen = less overview
-├── Scrolling required = items forgotten
-├── Interruptions = lost context
-└── Decision fatigue faster
-Solution: Progressive disclosure
-├── Start with 3-5 options
-├── "More" for additional
-├── Smart ordering (most used first)
-└── Previous selections remembered
-```
----
-## 7. Touch Accessibility
-### Motor Impairment Considerations
-```
-Users with motor impairments may:
-├── Have tremors (need larger targets)
-├── Use assistive devices (different input method)
-├── Have limited reach (one-handed necessity)
-├── Need more time (avoid timeouts)
-└── Make accidental touches (need confirmation)
-Design responses:
-├── Generous touch targets (48dp+)
-├── Adjustable timing for gestures
-├── Undo for destructive actions
-├── Switch control support
-└── Voice control support
-```
-### Touch Target Spacing (A11y)
-```
-WCAG 2.2 Success Criterion 2.5.8:
-Touch targets MUST have:
-├── Width: ≥ 44px
-├── Height: ≥ 44px
-├── Spacing: ≥ 8px from adjacent targets
-OR the target is:
-├── Inline (within text)
-├── User-controlled (user can resize)
-├── Essential (no alternative design)
-```
-### Accessible Touch Patterns
-| Pattern | Accessible Implementation |
-|---------|---------------------------|
-| Swipe actions | Provide menu alternative |
-| Drag and drop | Provide select + move option |
-| Pinch zoom | Provide zoom buttons |
-| Force touch | Provide long press alternative |
-| Shake gesture | Provide button alternative |
----
-## 8. Emotion in Touch
-### The Premium Feel
-```
-What makes touch feel "premium":
-├── Instant response (< 50ms)
-├── Appropriate haptic feedback
-├── Smooth 60fps animations
-├── Correct resistance/physics
-├── Sound feedback (when appropriate)
-└── Attention to spring physics
-```
-### Emotional Touch Feedback
-| Emotion | Touch Response |
-|---------|----------------|
-| Success | Haptic success + confetti/check |
-| Error | Haptic error + shake animation |
-| Warning | Haptic warning + attention color |
-| Delight | Unexpected smooth animation |
-| Power | Heavy haptic on significant action |
-### Trust Building Through Touch
-```
-Trust signals in touch interactions:
-├── Consistent behavior (same action = same response)
-├── Reliable feedback (never fails silently)
-├── Secure feel for sensitive actions
-├── Professional animations (not janky)
-└── No accidental actions (confirmation for destructive)
-```
----
-## 9. Touch Psychology Checklist
-### Before Every Screen
-- [ ] **All touch targets ≥ 44-48px?**
-- [ ] **Primary CTA in thumb zone?**
-- [ ] **Destructive actions require confirmation?**
-- [ ] **Gesture alternatives exist (visible buttons)?**
-- [ ] **Haptic feedback on important actions?**
-- [ ] **Immediate visual feedback on tap?**
-- [ ] **Loading states for actions > 100ms?**
-### Before Release
-- [ ] **Tested on smallest supported device?**
-- [ ] **Tested one-handed on large phone?**
-- [ ] **All gestures have visible alternatives?**
-- [ ] **Haptics work correctly (test on device)?**
-- [ ] **Touch targets tested with accessibility settings?**
-- [ ] **No tiny close buttons or icons?**
----
-## 10. Quick Reference Card
-### Touch Target Sizes
-```
-                     iOS        Android     WCAG
-Minimum:           44pt       48dp       44px
-Recommended:       48pt+      56dp+      -
-Spacing:           8pt+       8dp+       8px+
-```
-### Thumb Zone Actions
-```
-TOP:      Navigation, settings, back (infrequent)
-MIDDLE:   Content, secondary actions
-BOTTOM:   Primary CTA, tab bar, FAB (frequent)
-```
-### Haptic Selection
-```
-Light:    Selection, toggle, minor
-Medium:   Tap, standard action
-Heavy:    Confirm, complete, drop
-Success:  Task done
-Error:    Failed action
-Warning:  Attention needed
-```
----
-> **Remember:** Every touch is a conversation between user and device. Make it feel natural, responsive, and respectful of human fingers—not precise cursor points.
+# Touch Psychology Reference
+> Deep dive into mobile touch interaction, Fitts' Law for touch, thumb zone anatomy, gesture psychology, and haptic feedback.
+> **This is the mobile equivalent of ux-psychology.md - CRITICAL for all mobile work.**
+---
+## 1. Fitts' Law for Touch
+### The Fundamental Difference
+```
+DESKTOP (Mouse/Trackpad):
+├── Cursor size: 1 pixel (precision)
+├── Visual feedback: Hover states
+├── Error cost: Low (easy to retry)
+└── Target acquisition: Fast, precise
+MOBILE (Finger):
+├── Contact area: ~7mm diameter (imprecise)
+├── Visual feedback: No hover, only tap
+├── Error cost: High (frustrating retries)
+├── Occlusion: Finger covers the target
+└── Target acquisition: Slower, needs larger targets
+```
+### Fitts' Law Formula Adapted
+```
+Touch acquisition time = a + b × log₂(1 + D/W)
+Where:
+├── D = Distance to target
+├── W = Width of target
+└── For touch: W must be MUCH larger than desktop
+```
+### Minimum Touch Target Sizes
+| Platform | Minimum | Recommended | Use For |
+|----------|---------|-------------|---------|
+| **iOS (HIG)** | 44pt × 44pt | 48pt+ | All tappable elements |
+| **Android (Material)** | 48dp × 48dp | 56dp+ | All tappable elements |
+| **WCAG 2.2** | 44px × 44px | - | Accessibility compliance |
+| **Critical Actions** | - | 56-64px | Primary CTAs, destructive actions |
+### Visual Size vs Hit Area
+```
+┌─────────────────────────────────────┐
+│                                     │
+│    ┌─────────────────────────┐      │
+│    │                         │      │
+│    │    [  BUTTON  ]         │ ← Visual: 36px
+│    │                         │      │
+│    └─────────────────────────┘      │
+│                                     │ ← Hit area: 48px (padding extends)
+└─────────────────────────────────────┘
+✅ CORRECT: Visual can be smaller if hit area is minimum 44-48px
+❌ WRONG: Making hit area same as small visual element
+```
+### Application Rules
+| Element | Visual Size | Hit Area |
+|---------|-------------|----------|
+| Icon buttons | 24-32px | 44-48px (padding) |
+| Text links | Any | 44px height minimum |
+| List items | Full width | 48-56px height |
+| Checkboxes/Radio | 20-24px | 44-48px tap area |
+| Close/X buttons | 24px | 44px minimum |
+| Tab bar items | Icon 24-28px | Full tab width, 49px height (iOS) |
+---
+## 2. Thumb Zone Anatomy
+### One-Handed Phone Usage
+```
+Research shows: 49% of users hold phone one-handed.
+┌─────────────────────────────────────┐
+│                                     │
+│  ┌─────────────────────────────┐    │
+│  │       HARD TO REACH         │    │ ← Status bar, top nav
+│  │      (requires stretch)     │    │    Put: Back, menu, settings
+│  │                             │    │
+│  ├─────────────────────────────┤    │
+│  │                             │    │
+│  │       OK TO REACH           │    │ ← Content area
+│  │      (comfortable)          │    │    Put: Secondary actions, content
+│  │                             │    │
+│  ├─────────────────────────────┤    │
+│  │                             │    │
+│  │       EASY TO REACH         │    │ ← Tab bar, FAB zone
+│  │      (thumb's arc)          │    │    Put: PRIMARY CTAs!
+│  │                             │    │
+│  └─────────────────────────────┘    │
+│                                     │
+│          [    HOME    ]             │
+└─────────────────────────────────────┘
+```
+### Thumb Arc (Right-Handed User)
+```
+Right hand holding phone:
+┌───────────────────────────────┐
+│  STRETCH      STRETCH    OK   │
+│                               │
+│  STRETCH        OK       EASY │
+│                               │
+│    OK          EASY      EASY │
+│                               │
+│   EASY         EASY      EASY │
+└───────────────────────────────┘
+Left hand is mirrored.
+→ Design for BOTH hands or assume right-dominant
+```
+### Placement Guidelines
+| Element Type | Ideal Position | Reason |
+|--------------|----------------|--------|
+| **Primary CTA** | Bottom center/right | Easy thumb reach |
+| **Tab bar** | Bottom | Natural thumb position |
+| **FAB** | Bottom right | Easy for right hand |
+| **Navigation** | Top (stretch) | Less frequent use |
+| **Destructive actions** | Top left | Hard to reach = harder to accidentally tap |
+| **Dismiss/Cancel** | Top left | Convention + safety |
+| **Confirm/Done** | Top right or bottom | Convention |
+### Large Phone Considerations (>6")
+```
+On large phones, top 40% becomes "dead zone" for one-handed use.
+Solutions:
+├── Reachability features (iOS)
+├── Pull-down interfaces (drawer pulls content down)
+├── Bottom sheet navigation
+├── Floating action buttons
+└── Gesture-based alternatives to top actions
+```
+---
+## 3. Touch vs Click Psychology
+### Expectation Differences
+| Aspect | Click (Desktop) | Touch (Mobile) |
+|--------|-----------------|----------------|
+| **Feedback timing** | Can wait 100ms | Expect instant (<50ms) |
+| **Visual feedback** | Hover → Click | Immediate tap response |
+| **Error tolerance** | Easy retry | Frustrating, feels broken |
+| **Precision** | High | Low |
+| **Context menu** | Right-click | Long press |
+| **Cancel action** | ESC key | Swipe away, outside tap |
+### Touch Feedback Requirements
+```
+Tap → Immediate visual change (< 50ms)
+├── Highlight state (background color change)
+├── Scale down slightly (0.95-0.98)
+├── Ripple effect (Android Material)
+├── Haptic feedback for confirmation
+└── Never nothing!
+Loading → Show within 100ms
+├── If action takes > 100ms
+├── Show spinner/progress
+├── Disable button (prevent double tap)
+└── Optimistic UI when possible
+```
+### The "Fat Finger" Problem
+```
+Problem: Finger occludes target during tap
+├── User can't see exactly where they're tapping
+├── Visual feedback appears UNDER finger
+└── Increases error rate
+Solutions:
+├── Show feedback ABOVE touch point (tooltips)
+├── Use cursor-like offset for precision tasks
+├── Magnification loupe for text selection
+└── Large enough targets that precision doesn't matter
+```
+---
+## 4. Gesture Psychology
+### Gesture Discoverability Problem
+```
+Problem: Gestures are INVISIBLE.
+├── User must discover/remember them
+├── No hover/visual hint
+├── Different mental model than tap
+└── Many users never discover gestures
+Solution: Always provide visible alternative
+├── Swipe to delete → Also show delete button or menu
+├── Pull to refresh → Also show refresh button
+├── Pinch to zoom → Also show zoom controls
+└── Gestures as shortcuts, not only way
+```
+### Common Gesture Conventions
+| Gesture | Universal Meaning | Usage |
+|---------|-------------------|-------|
+| **Tap** | Select, activate | Primary action |
+| **Double tap** | Zoom in, like/favorite | Quick action |
+| **Long press** | Context menu, selection mode | Secondary options |
+| **Swipe horizontal** | Navigation, delete, actions | List actions |
+| **Swipe down** | Refresh, dismiss | Pull to refresh |
+| **Pinch** | Zoom in/out | Maps, images |
+| **Two-finger scroll** | Scroll within scroll | Nested scrolls |
+### Gesture Affordance Design
+```
+Swipe actions need visual hints:
+┌─────────────────────────────────────────┐
+│  ┌───┐                                  │
+│  │ ≡ │  Item with hidden actions...   → │ ← Edge hint (partial color)
+│  └───┘                                  │
+└─────────────────────────────────────────┘
+✅ Good: Slight color peek at edge suggesting swipe
+✅ Good: Drag handle icon ( ≡ ) suggesting reorder
+✅ Good: Onboarding tooltip explaining gesture
+❌ Bad: Hidden gestures with no visual affordance
+```
+### Platform Gesture Differences
+| Gesture | iOS | Android |
+|---------|-----|---------|
+| **Back** | Edge swipe from left | System back button/gesture |
+| **Share** | Action sheet | Share sheet |
+| **Context menu** | Long press / Force touch | Long press |
+| **Dismiss modal** | Swipe down | Back button or swipe |
+| **Delete in list** | Swipe left, tap delete | Swipe left, immediate or undo |
+---
+## 5. Haptic Feedback Patterns
+### Why Haptics Matter
+```
+Haptics provide:
+├── Confirmation without looking
+├── Richer, more premium feel
+├── Accessibility (blind users)
+├── Reduced error rate
+└── Emotional satisfaction
+Without haptics:
+├── Feels "cheap" or web-like
+├── User unsure if action registered
+└── Missed opportunity for delight
+```
+### iOS Haptic Types
+| Type | Intensity | Use Case |
+|------|-----------|----------|
+| `selection` | Light | Picker scroll, toggle, selection |
+| `light` | Light | Minor actions, hover equivalent |
+| `medium` | Medium | Standard tap confirmation |
+| `heavy` | Strong | Important completed, drop |
+| `success` | Pattern | Task completed successfully |
+| `warning` | Pattern | Warning, attention needed |
+| `error` | Pattern | Error occurred |
+### Android Haptic Types
+| Type | Use Case |
+|------|----------|
+| `CLICK` | Standard tap feedback |
+| `HEAVY_CLICK` | Important actions |
+| `DOUBLE_CLICK` | Confirm actions |
+| `TICK` | Scroll/scrub feedback |
+| `LONG_PRESS` | Long press activation |
+| `REJECT` | Error/invalid action |
+### Haptic Usage Guidelines
+```
+✅ DO use haptics for:
+├── Button taps
+├── Toggle switches
+├── Picker/slider values
+├── Pull to refresh trigger
+├── Successful action completion
+├── Errors and warnings
+├── Swipe action thresholds
+└── Important state changes
+❌ DON'T use haptics for:
+├── Every scroll position
+├── Every list item
+├── Background events
+├── Passive displays
+└── Too frequently (haptic fatigue)
+```
+### Haptic Intensity Mapping
+| Action Importance | Haptic Level | Example |
+|-------------------|--------------|---------|
+| Minor/Browsing | Light / None | Scrolling, hovering |
+| Standard Action | Medium / Selection | Tap, toggle |
+| Significant Action | Heavy / Success | Complete, confirm |
+| Critical/Destructive | Heavy / Warning | Delete, payment |
+| Error | Error pattern | Failed action |
+---
+## 6. Mobile Cognitive Load
+### How Mobile Differs from Desktop
+| Factor | Desktop | Mobile | Implication |
+|--------|---------|--------|-------------|
+| **Attention** | Focused sessions | Interrupted constantly | Design for micro-sessions |
+| **Context** | Controlled environment | Anywhere, any condition | Handle bad lighting, noise |
+| **Multitasking** | Multiple windows | One app visible | Complete task in-app |
+| **Input speed** | Fast (keyboard) | Slow (touch typing) | Minimize input, smart defaults |
+| **Error recovery** | Easy (undo, back) | Harder (no keyboard shortcuts) | Prevent errors, easy recovery |
+### Reducing Mobile Cognitive Load
+```
+1. ONE PRIMARY ACTION per screen
+   └── Clear what to do next
+2. PROGRESSIVE DISCLOSURE
+   └── Show only what's needed now
+3. SMART DEFAULTS
+   └── Pre-fill what you can
+4. CHUNKING
+   └── Break long forms into steps
+5. RECOGNITION over RECALL
+   └── Show options, don't make user remember
+6. CONTEXT PERSISTENCE
+   └── Save state on interrupt/background
+```
+### Miller's Law for Mobile
+```
+Desktop: 7±2 items in working memory
+Mobile: Reduce to 5±1 (more distractions)
+Navigation: Max 5 tab bar items
+Options: Max 5 per menu level
+Steps: Max 5 visible steps in progress
+```
+### Hick's Law for Mobile
+```
+More choices = slower decisions
+Mobile impact: Even worse than desktop
+├── Smaller screen = less overview
+├── Scrolling required = items forgotten
+├── Interruptions = lost context
+└── Decision fatigue faster
+Solution: Progressive disclosure
+├── Start with 3-5 options
+├── "More" for additional
+├── Smart ordering (most used first)
+└── Previous selections remembered
+```
+---
+## 7. Touch Accessibility
+### Motor Impairment Considerations
+```
+Users with motor impairments may:
+├── Have tremors (need larger targets)
+├── Use assistive devices (different input method)
+├── Have limited reach (one-handed necessity)
+├── Need more time (avoid timeouts)
+└── Make accidental touches (need confirmation)
+Design responses:
+├── Generous touch targets (48dp+)
+├── Adjustable timing for gestures
+├── Undo for destructive actions
+├── Switch control support
+└── Voice control support
+```
+### Touch Target Spacing (A11y)
+```
+WCAG 2.2 Success Criterion 2.5.8:
+Touch targets MUST have:
+├── Width: ≥ 44px
+├── Height: ≥ 44px
+├── Spacing: ≥ 8px from adjacent targets
+OR the target is:
+├── Inline (within text)
+├── User-controlled (user can resize)
+├── Essential (no alternative design)
+```
+### Accessible Touch Patterns
+| Pattern | Accessible Implementation |
+|---------|---------------------------|
+| Swipe actions | Provide menu alternative |
+| Drag and drop | Provide select + move option |
+| Pinch zoom | Provide zoom buttons |
+| Force touch | Provide long press alternative |
+| Shake gesture | Provide button alternative |
+---
+## 8. Emotion in Touch
+### The Premium Feel
+```
+What makes touch feel "premium":
+├── Instant response (< 50ms)
+├── Appropriate haptic feedback
+├── Smooth 60fps animations
+├── Correct resistance/physics
+├── Sound feedback (when appropriate)
+└── Attention to spring physics
+```
+### Emotional Touch Feedback
+| Emotion | Touch Response |
+|---------|----------------|
+| Success | Haptic success + confetti/check |
+| Error | Haptic error + shake animation |
+| Warning | Haptic warning + attention color |
+| Delight | Unexpected smooth animation |
+| Power | Heavy haptic on significant action |
+### Trust Building Through Touch
+```
+Trust signals in touch interactions:
+├── Consistent behavior (same action = same response)
+├── Reliable feedback (never fails silently)
+├── Secure feel for sensitive actions
+├── Professional animations (not janky)
+└── No accidental actions (confirmation for destructive)
+```
+---
+## 9. Touch Psychology Checklist
+### Before Every Screen
+- [ ] **All touch targets ≥ 44-48px?**
+- [ ] **Primary CTA in thumb zone?**
+- [ ] **Destructive actions require confirmation?**
+- [ ] **Gesture alternatives exist (visible buttons)?**
+- [ ] **Haptic feedback on important actions?**
+- [ ] **Immediate visual feedback on tap?**
+- [ ] **Loading states for actions > 100ms?**
+### Before Release
+- [ ] **Tested on smallest supported device?**
+- [ ] **Tested one-handed on large phone?**
+- [ ] **All gestures have visible alternatives?**
+- [ ] **Haptics work correctly (test on device)?**
+- [ ] **Touch targets tested with accessibility settings?**
+- [ ] **No tiny close buttons or icons?**
+---
+## 10. Quick Reference Card
+### Touch Target Sizes
+```
+                     iOS        Android     WCAG
+Minimum:           44pt       48dp       44px
+Recommended:       48pt+      56dp+      -
+Spacing:           8pt+       8dp+       8px+
+```
+### Thumb Zone Actions
+```
+TOP:      Navigation, settings, back (infrequent)
+MIDDLE:   Content, secondary actions
+BOTTOM:   Primary CTA, tab bar, FAB (frequent)
+```
+### Haptic Selection
+```
+Light:    Selection, toggle, minor
+Medium:   Tap, standard action
+Heavy:    Confirm, complete, drop
+Success:  Task done
+Error:    Failed action
+Warning:  Attention needed
+```
+---
+> **Remember:** Every touch is a conversation between user and device. Make it feel natural, responsive, and respectful of human fingers—not precise cursor points.