Initial commit

skills/cognitive-design/resources/ux-product-design.md

@@ -0,0 +1,272 @@
+# UX & Product Design
+
+This resource provides cognitive design principles for interactive software interfaces (web apps, mobile apps, desktop software).
+
+**Covered topics:**
+1. Learnability through familiar patterns
+2. Task flow efficiency
+3. Cognitive load management
+4. Onboarding design
+5. Error handling and prevention
+
+---
+
+## Why UX Needs Cognitive Design
+
+### WHY This Matters
+
+**Core insight:** Users approach interfaces with mental models from prior experiences - designs that violate expectations require re-learning and cause cognitive friction.
+
+**Common problems:**
+- New users abandon apps (steep learning curve)
+- Task flows with too many steps/choices (Hick's Law impact)
+- Complex features overwhelm users (cognitive overload)
+- Confusing error messages
+- Onboarding shows all features at once (memory overload)
+
+**How cognitive principles help:** Leverage existing mental models (Jakob's Law), minimize steps/choices (Hick's/Fitts's Law), progressive disclosure, inline validation, onboarding focused on 3-4 key tasks (working memory limit).
+
+---
+
+## What You'll Learn
+
+1. **Learnability:** Leverage familiar patterns for instant comprehension
+2. **Task Flow Efficiency:** Minimize steps and optimize control placement
+3. **Cognitive Load Management:** Progressive disclosure and memory aids
+4. **Onboarding:** Teaching without overwhelming
+5. **Error Handling:** Prevention first, then contextual recovery
+
+---
+
+## Why Learnability Matters
+
+### WHY This Matters
+
+Users spend most time on OTHER sites/apps (Jakob's Law) - they expect interfaces to work like what they already know.
+
+**Benefits of familiar patterns:** Instant recognition (System 1), lower cognitive load, faster completion, reduced errors.
+
+---
+
+### WHAT to Apply
+
+#### Standard UI Patterns
+
+**Navigation:**
+- Hamburger menu (☰) for mobile
+- Magnifying glass (🔍) for search
+- Logo top-left returns home
+- User avatar top-right for account
+- Breadcrumbs for hierarchy
+
+**Actions:**
+- Primary: Right-aligned button
+- Destructive: Red, requires confirmation
+- Secondary: Gray/outlined
+- Disabled: Grayed out
+
+**Forms:**
+- Labels above/left of fields
+- Required fields: Asterisk (*)
+- Validation: Inline as user types
+- Submit: Bottom-right
+
+**Feedback:**
+- Loading: Spinner for waits >1s
+- Success: Green checkmark + message
+- Error: Red + icon + message
+- Confirmation: Modal for destructive actions
+
+**Application rule:** Use standard patterns by default. Deviate only when standard fails AND provide onboarding. Test if users understand without help.
+
+---
+
+#### Affordances & Signifiers
+
+Controls should signal function through appearance:
+
+**Buttons:** Raised appearance, hover state, active state, focus state
+**Links:** Underlined or distinct color, pointer cursor on hover
+**Inputs:** Rectangular border, cursor on click, placeholder text, focus state
+**Draggable:** Handle icon (≡≡), grab cursor, shadow on drag
+
+**Anti-patterns:** Flat design with no cues, no hover states, buttons looking like labels, clickable areas smaller than visual target.
+
+---
+
+#### Platform Conventions
+
+**iOS:** Back top-left, navigation bottom tabs, swipe gestures, share icon with up arrow
+**Android:** System back button, hamburger menu top-left, three-dot overflow, FAB bottom-right
+**Web:** Logo top-left to home, primary nav top horizontal, search top-right, footer links
+
+**Rule:** Match platform norms. If cross-platform, adapt to each. Don't invent when standards exist.
+
+---
+
+## Why Task Flow Efficiency Matters
+
+### WHY This Matters
+
+Every decision point and step adds time and cognitive effort.
+
+**Hick's Law:** Decision time increases logarithmically with choices (2 choices = fast, 10 = slow/paralysis)
+**Fitts's Law:** Time to target = distance ÷ size (large/nearby = fast, small/distant = slow)
+
+---
+
+### WHAT to Apply
+
+#### Reduce Steps
+
+**Audit method:**
+1. Map current flow
+2. Question each step: "Necessary? Can automate? Can merge?"
+3. Eliminate unnecessary
+4. Combine related
+5. Pre-fill known info
+
+**Example:** Checkout flow reduced from 8 steps to 4 (pre-fill email/shipping, combine review inline) = 50% fewer steps, higher completion.
+
+---
+
+#### Reduce Choices (Hick's Law)
+
+**Progressive disclosure:** Show 5 most common filters, "More filters" reveals rest
+**Smart defaults:** Highlight recommended option, show "Other options" link
+**Contextual menus:** 5-7 actions relevant to current mode, not all 50
+
+**Rule:** Common tasks ≤5 options. Advanced features behind "More". Personalize based on usage.
+
+---
+
+#### Optimize Control Placement (Fitts's Law)
+
+Frequent actions = large and nearby. Infrequent = smaller and distant.
+
+**Primary:** Large button (44×44px mobile, 32×32px desktop), bottom-right or natural flow
+**Secondary:** Medium, near primary but distinct (outlined, gray)
+**Tertiary/destructive:** Smaller, separated, requires confirmation
+
+---
+
+## Why Cognitive Load Management Matters
+
+### WHY This Matters
+
+Working memory holds 4±1 chunks - exceeding this causes confusion/abandonment.
+
+**Load types:** Intrinsic (task complexity), Extraneous (poor design - MINIMIZE), Germane (meaningful learning - support)
+
+---
+
+### WHAT to Apply
+
+#### Progressive Disclosure
+
+Reveal complexity gradually, show only immediate needs.
+
+**Wizards:** 4 steps × 6-8 fields (not 30 fields on one page) = fits working memory, visible progress
+**Expandable sections:** Collapsed by default, expand on demand
+**"Advanced" options:** Basic visible, "Show advanced" link reveals rest
+
+---
+
+#### Chunking & Grouping
+
+Group related items, separate with whitespace.
+
+**Forms:** Group by relationship (Personal Info, Shipping Address) = 2 chunks
+**Navigation:** 5-7 categories × 3-5 items each (not 25 flat items)
+
+---
+
+#### Memory Aids (Recognition over Recall)
+
+Show options, don't require memorization.
+
+**Visible state:** Active filters as chips, current page highlighted, breadcrumbs, progress indicators
+**Autocomplete:** Search suggestions, address autocomplete, date picker
+**Recent history:** Recently opened files, search history, previous purchases
+
+---
+
+## Why Onboarding Matters
+
+### WHY This Matters
+
+First experience determines continuation/abandonment. Must teach key tasks without overwhelming.
+
+**Failures:** All features upfront, passive tutorials, no contextual help
+**Success:** 3-4 core tasks, interactive tutorials, contextual help when encountered
+
+---
+
+### WHAT to Apply
+
+#### Focus on Core Tasks
+
+Limit to 3-4 most important tasks, not comprehensive tour.
+
+**Ask:** "What must users learn to get value?" NOT "What are all features?"
+
+**Example:** Project management app - onboard on: create project, add task, assign to member, mark complete. Skip advanced filtering/custom fields/reporting (teach contextually later).
+
+---
+
+#### Interactive Learning
+
+Users learn by doing, not reading.
+
+**Guided interaction:** Highlight button, require click to proceed (active learning, muscle memory)
+**Progressive completion:** Step 1 must complete before Step 2 unlocks = sense of accomplishment, ensures learning
+
+---
+
+#### Contextual Help
+
+Advanced features taught when encountered, not upfront.
+
+**First encounter tooltips:** One-time help when user navigates to new feature
+**Empty states:** "No tasks yet! Click + to create first task" with illustrative graphic
+**Gradual discovery:** After 1 week show tip, after 1 month show power tip (usage-based timing)
+
+---
+
+## Why Error Handling Matters
+
+### WHY This Matters
+
+Users make errors (slips/mistakes) - good design prevents and provides clear recovery.
+
+**Goal:** Prevention > detection > recovery
+
+---
+
+### WHAT to Apply
+
+#### Prevention (Best)
+
+**Constrain inputs:** Date picker (not free text), numeric keyboard for phone, input masking
+**Provide defaults:** Pre-select common option, suggest formats
+**Confirm destructive:** Require confirmation modal, "Type DELETE to confirm", undo when possible
+
+---
+
+#### Detection (Inline Validation)
+
+Immediate feedback as user types/on blur, not after submit.
+
+**Real-time validation:** Password strength meter as typing, email format on blur
+**Positioning:** Error NEXT TO field (not top of page) - Gestalt proximity
+
+---
+
+#### Recovery (Clear Guidance)
+
+Tell what's wrong and how to fix, in plain language.
+
+**Bad:** "Error 402"
+**Good:** "Password must be at least 8 characters"
+
+**Visual:** Red + icon, auto-focus to error field, keep user input (don't clear), green checkmark when fixed