Product Ux Expert

Product UX Expert

Core Principles

• Reduce Cognitive Load — Minimize mental effort required for every interaction
• Accessibility First — WCAG 2.2 AA is the baseline, not an afterthought
• Evidence-Based — Decisions backed by user research, not assumptions
• Anticipatory Design — Predict user needs before they ask
• Ethical Design — No dark patterns, transparent data practices
• Mobile First — Design for smallest screens, enhance for larger

---

Quick Reference

Nielsen's 10 Heuristics

---

Cognitive Psychology

Cognitive Load Types

Intrinsic Load     — Complexity inherent to the task itself
Extraneous Load    — Unnecessary complexity from poor design (eliminate this!)
Germane Load       — Mental effort for learning/understanding (support this)

Key Laws

Hick's Law         — More choices = longer decision time
                   → Limit options to 5-7, use progressive disclosure

Miller's Law       — Working memory holds 7±2 items
                   → Chunk information, use visual grouping

Fitts's Law        — Larger, closer targets are easier to click
                   → Make primary actions big and accessible

Jakob's Law        — Users expect your site to work like others
                   → Follow established patterns

Von Restorff       — Different items are more memorable
                   → Highlight CTAs with contrast

Serial Position    — First and last items remembered best
                   → Put key info at start/end of lists

Gestalt Principles

Proximity          — Close elements are perceived as groups
Similarity         — Similar elements are perceived as related
Continuity         — Eyes follow smooth lines and curves
Closure            — Mind completes incomplete shapes
Figure-Ground      — Elements seen as foreground or background
Common Region      — Elements in same area are grouped

---

Heuristic Evaluation

Process

1. Define scope         — What screens/flows to evaluate
2. Select evaluators    — 3-5 UX experts (80%+ issues found)
3. Independent review   — Each expert reviews alone
4. Apply heuristics     — Rate severity for each issue
5. Consolidate          — Merge findings, remove duplicates
6. Prioritize           — Rank by severity × frequency
7. Report               — Actionable recommendations

Severity Rating

Issue Template

## Issue: [Brief Description]

**Heuristic:** #N - Name
**Severity:** 0-4
**Location:** Screen / Component / Flow

**Problem:**
What's wrong and why it matters to users.

**Evidence:**
Screenshot or recording link.

**Recommendation:**
Specific fix with before/after comparison.

---

User Journey Mapping

Journey Map Structure

┌─────────────────────────────────────────────────────────────────┐
│  PERSONA: [Name, Goals, Context]                                │
├─────────┬─────────┬─────────┬─────────┬─────────┬──────────────┤
│ Stage   │ Aware   │ Consider│ Purchase│ Use     │ Advocate     │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Actions │ Search  │ Compare │ Signup  │ Onboard │ Share/Review │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Touch-  │ Search  │ Website │ Checkout│ App     │ Social       │
│ points  │ Ads     │ Reviews │ Email   │ Support │ Email        │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Emotions│   😐    │   🤔    │   😟    │   😊    │    😍        │
│         │ curious │ hopeful │ anxious │ relieved│  delighted   │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Pain    │ Too many│ Info    │ Complex │ Unclear │ No referral  │
│ Points  │ options │ overload│ forms   │ next    │ program      │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Opportu-│ Clear   │ Compare │ 1-click │ Progress│ Share        │
│ nities  │ tagline │ table   │ signup  │ tracker │ incentive    │
└─────────┴─────────┴─────────┴─────────┴─────────┴──────────────┘

Touchpoint Analysis

For each touchpoint, evaluate:

1. Entry Point      — How do users arrive?
2. User Goal        — What are they trying to accomplish?
3. Friction         — What slows them down?
4. Emotion          — How do they feel?
5. Drop-off Risk    — Where might they abandon?
6. Opportunity      — How can we improve?

---

Accessibility (WCAG 2.2 AA)

POUR Principles

Perceivable     — Can users perceive the content?
                  ✓ Text alternatives for images
                  ✓ Captions for video
                  ✓ 4.5:1 color contrast
                  ✓ Resizable text (up to 200%)

Operable        — Can users operate the interface?
                  ✓ Keyboard accessible
                  ✓ No keyboard traps
                  ✓ Skip navigation links
                  ✓ Sufficient time limits
                  ✓ Focus visible (new in 2.2!)

Understandable  — Can users understand the content?
                  ✓ Language declared
                  ✓ Consistent navigation
                  ✓ Error identification
                  ✓ Labels and instructions

Robust          — Works with assistive technology?
                  ✓ Valid HTML
                  ✓ ARIA landmarks
                  ✓ Status messages announced

New in WCAG 2.2 (2023-2025)

Focus Not Obscured (AA)      — Focused element not fully hidden
Focus Appearance (AA)        — Visible focus indicator (2px outline)
Dragging Movements (AA)      — Alternatives to drag-and-drop
Target Size (AA)             — Minimum 24×24 CSS pixels
Consistent Help (A)          — Help mechanisms in consistent locations
Redundant Entry (A)          — Don't ask for same info twice
Accessible Authentication (A) — No cognitive function tests for login

Quick Checklist

## Accessibility Check

### Perceivable
- [ ] All images have meaningful alt text
- [ ] Videos have captions and transcripts
- [ ] Color contrast ratio ≥ 4.5:1 (text), ≥ 3:1 (large text)
- [ ] Information not conveyed by color alone
- [ ] Text can be resized to 200% without loss

### Operable
- [ ] All functionality available via keyboard
- [ ] Focus order is logical
- [ ] Focus indicator is visible (2px outline minimum)
- [ ] No keyboard traps
- [ ] Skip links provided
- [ ] Touch targets ≥ 24×24px

### Understandable
- [ ] Page language declared
- [ ] Consistent navigation across pages
- [ ] Form errors clearly identified
- [ ] Labels associated with inputs

### Robust
- [ ] Valid HTML (no duplicate IDs)
- [ ] ARIA roles used correctly
- [ ] Works with screen readers (NVDA/VoiceOver)

---

Interaction Patterns

Micro-interactions

Purpose of micro-interactions:
1. Feedback      — Confirm user action (button click, form submit)
2. Status        — Show current state (loading, progress)
3. Guidance      — Direct attention (onboarding tooltips)
4. Delight       — Create emotional connection (subtle animations)

Best Practices:
✓ Keep animations under 300ms
✓ Use easing (ease-out for exits, ease-in for entries)
✓ Respect prefers-reduced-motion
✓ Animate properties that don't trigger layout (transform, opacity)

Motion Design Principles

Duration Scale:
- Micro (fade, state change)     →  100-200ms
- Small (dropdown, tooltip)      →  200-300ms
- Medium (modal, sidebar)        →  300-400ms
- Large (page transition)        →  400-500ms

Easing:
- ease-out    → Elements entering (decelerate into view)
- ease-in     → Elements exiting (accelerate out of view)
- ease-in-out → Elements moving (natural feel)

Form Design

✓ One column layout (no side-by-side inputs)
✓ Labels above inputs (not placeholder-only)
✓ Group related fields visually
✓ Inline validation (after field blur)
✓ Clear error messages with solutions
✓ Show password option
✓ Autofill support (autocomplete attributes)
✓ Smart defaults based on context

---

Design System Integration

Component States

Every interactive component needs:

Default         — Normal resting state
Hover           — Mouse over (desktop)
Focus           — Keyboard focus (visible ring)
Active          — Being pressed/clicked
Disabled        — Not currently available
Loading         — Processing action
Error           — Validation failed
Success         — Action completed

Design Tokens

{
  "color": {
    "text": {
      "primary": "#1a1a1a",
      "secondary": "#6b6b6b",
      "disabled": "#a3a3a3",
      "inverse": "#ffffff"
    },
    "interactive": {
      "default": "#0066cc",
      "hover": "#0052a3",
      "active": "#003d7a",
      "focus": "#0066cc"
    },
    "feedback": {
      "error": "#d32f2f",
      "warning": "#f57c00",
      "success": "#388e3c",
      "info": "#1976d2"
    }
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px"
  },
  "radius": {
    "sm": "4px",
    "md": "8px",
    "lg": "16px",
    "full": "9999px"
  }
}

---

2025 UX Trends

AI-Driven Personalization

✓ Adaptive interfaces based on user behavior
✓ Predictive content suggestions
✓ Context-aware personalization
✓ Real-time UI adjustments

⚠️ Always provide transparency and user control
⚠️ Respect privacy, use on-device processing when possible

Anticipatory Design

Design that:
- Predicts user needs before they ask
- Reduces decision fatigue with smart defaults
- Automates repetitive tasks
- Surfaces relevant information proactively

Example: Pre-filling shipping address based on previous orders

Ethical Design Practices

DO:
✓ Clear consent for data collection
✓ Easy-to-find privacy settings
✓ Honest product representations
✓ Sustainable design (reduce digital carbon)

DON'T (Dark Patterns):
✗ Confirmshaming ("No, I don't want to save money")
✗ Hidden costs
✗ Trick questions
✗ Forced continuity (hard-to-cancel subscriptions)
✗ Misdirection
✗ Roach motels (easy in, hard out)

---

Evaluation Template

# UX Evaluation Report

## Overview
- **Product:** [Name]
- **Scope:** [Screens/Flows evaluated]
- **Date:** [Date]
- **Evaluators:** [Names]

## Executive Summary
[2-3 sentences on overall UX health and critical findings]

## Methodology
- Nielsen's 10 Heuristics
- WCAG 2.2 AA Compliance Check
- Cognitive Load Analysis

## Findings by Severity

### Catastrophic (Severity 4)
[Issues that must be fixed immediately]

### Major (Severity 3)
[High priority issues]

### Minor (Severity 2)
[Low priority improvements]

## Accessibility Status
- [ ] WCAG 2.2 A Compliance
- [ ] WCAG 2.2 AA Compliance
- [ ] Screen Reader Compatible
- [ ] Keyboard Navigation Complete

## Recommendations
[Prioritized action items with effort estimates]

## Appendix
- Screenshot evidence
- User testing video clips
- Competitive analysis

---

See Also

• reference/heuristics.md — Detailed heuristic examples
• reference/accessibility.md — Full WCAG 2.2 checklist
• reference/psychology.md — Cognitive psychology deep dive
• reference/journey-mapping.md — Journey mapping templates

WCAG 2.2 Accessibility Guide

Compliance Levels

Level A    — Minimum accessibility (legal baseline)
Level AA   — Standard target (recommended, EAA required)
Level AAA  — Enhanced accessibility (aspirational)

Note: European Accessibility Act (EAA) requires WCAG 2.2 AA compliance as of June 2025.

---

Perceivable

1.1 Text Alternatives

<!-- Good: Descriptive alt text -->
<img src="chart.png" alt="Sales increased 25% from Q1 to Q2 2024" />

<!-- Good: Decorative image -->
<img src="decoration.png" alt="" role="presentation" />

<!-- Good: Complex image with long description -->
<figure>
  <img src="complex-diagram.png" alt="System architecture diagram"
       aria-describedby="diagram-desc" />
  <figcaption id="diagram-desc">
    The system consists of three layers: presentation,
    business logic, and data access...
  </figcaption>
</figure>

<!-- Icon buttons need labels -->
<button aria-label="Close dialog">
  <svg><!-- X icon --></svg>
</button>

1.2 Time-Based Media

<!-- Video with captions and transcript -->
<video controls>
  <source src="tutorial.mp4" type="video/mp4" />
  <track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>
<details>
  <summary>Transcript</summary>
  <p>Full transcript of video content...</p>
</details>

1.3 Adaptable

<!-- Semantic structure -->
<main>
  <article>
    <h1>Page Title</h1>
    <section aria-labelledby="section1">
      <h2 id="section1">Section Title</h2>
      <p>Content...</p>
    </section>
  </article>
</main>

<!-- Form with proper labels -->
<form>
  <div>
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email"
           aria-describedby="email-hint" required />
    <span id="email-hint">We'll never share your email</span>
  </div>
</form>

<!-- Data tables with headers -->
<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$10,000</td>
    </tr>
  </tbody>
</table>

1.4 Distinguishable

/* Color contrast requirements */
/* Normal text: 4.5:1 ratio minimum */
/* Large text (18pt or 14pt bold): 3:1 ratio minimum */
/* UI components and graphics: 3:1 ratio minimum */

.text-primary {
  color: #1a1a1a; /* On white: 14.4:1 ✓ */
}

.text-secondary {
  color: #595959; /* On white: 7.0:1 ✓ */
}

.text-disabled {
  color: #767676; /* On white: 4.54:1 ✓ (minimum) */
}

/* Focus indicators (WCAG 2.2) */
:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border-color: #000000;
    --text-secondary: #1a1a1a;
  }
}

---

Operable

2.1 Keyboard Accessible

<!-- All interactive elements must be keyboard accessible -->
<button onclick="submit()">Submit</button> <!-- ✓ Native keyboard support -->

<!-- Custom interactive elements need tabindex and key handlers -->
<div role="button"
     tabindex="0"
     onclick="doAction()"
     onkeydown="handleKey(event)">
  Custom Button
</div>

<script>
function handleKey(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    doAction();
  }
}
</script>

<!-- Skip links for keyboard navigation -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>...</nav>
<main id="main-content">...</main>

<style>
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
  z-index: 9999;
  background: #000;
  color: #fff;
  padding: 8px 16px;
}
</style>

2.2 Enough Time

// Auto-refresh with user control
let refreshTimeout;

function startAutoRefresh() {
  refreshTimeout = setTimeout(refreshData, 30000);
}

function pauseAutoRefresh() {
  clearTimeout(refreshTimeout);
  showNotification('Auto-refresh paused. Click to resume.');
}

// Session timeout with warning
function showTimeoutWarning() {
  // Show 2 minutes before timeout
  const dialog = document.getElementById('timeout-warning');
  dialog.showModal();
  // Focus the "extend session" button
  dialog.querySelector('#extend-button').focus();
}

2.4 Navigable

<!-- Page title describes content -->
<title>Edit Profile - Settings - MyApp</title>

<!-- Focus order matches visual order -->
<form>
  <input tabindex="0" /> <!-- Natural order -->
  <input tabindex="0" />
  <button tabindex="0">Submit</button>
</form>

<!-- Avoid positive tabindex values -->
<!-- ❌ Bad: <input tabindex="2" /> -->

<!-- Link purpose is clear -->
<a href="/report.pdf">Download Q4 2024 Financial Report (PDF, 2.5MB)</a>

<!-- Multiple navigation methods -->
<nav aria-label="Main">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<form role="search">...</form>
<nav aria-label="Pagination">...</nav>

2.5 Input Modalities (WCAG 2.2)

<!-- Target size minimum 24x24px -->
<style>
.btn, .link, [role="button"] {
  min-width: 24px;
  min-height: 24px;
  /* Better: 44x44px for touch targets */
}

/* Ensure spacing between targets */
.icon-button + .icon-button {
  margin-left: 8px; /* Prevents accidental activation */
}
</style>

<!-- Dragging alternatives (2.5.7) -->
<div class="sortable-list">
  <div class="item" draggable="true">
    <span class="handle" aria-label="Drag to reorder">⠿</span>
    <span>Item 1</span>
    <!-- Alternative: position buttons -->
    <button aria-label="Move up">↑</button>
    <button aria-label="Move down">↓</button>
  </div>
</div>

---

Understandable

3.1 Readable

<!-- Declare page language -->
<html lang="en">

<!-- Declare language changes -->
<p>The French word <span lang="fr">bonjour</span> means hello.</p>

<!-- Define abbreviations -->
<abbr title="World Wide Web Consortium">W3C</abbr>

3.2 Predictable

<!-- Don't change context on focus -->
<!-- ❌ Bad: Select that navigates on change -->
<select onchange="location.href = this.value">
  <option value="/page1">Page 1</option>
</select>

<!-- ✓ Good: Explicit submit -->
<form action="/search">
  <select name="page">
    <option value="/page1">Page 1</option>
  </select>
  <button type="submit">Go</button>
</form>

<!-- Consistent navigation -->
<nav aria-label="Main" class="main-nav">
  <!-- Same order on every page -->
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

3.3 Input Assistance

<!-- Error identification -->
<div class="form-field error">
  <label for="email">Email</label>
  <input type="email" id="email"
         aria-invalid="true"
         aria-describedby="email-error" />
  <span id="email-error" role="alert">
    Please enter a valid email address (e.g., user@example.com)
  </span>
</div>

<!-- Required fields -->
<label for="name">
  Name <span aria-hidden="true">*</span>
  <span class="sr-only">required</span>
</label>
<input id="name" required aria-required="true" />

<!-- Input instructions -->
<label for="password">Password</label>
<input type="password" id="password"
       aria-describedby="password-requirements" />
<div id="password-requirements">
  Must contain:
  <ul>
    <li>At least 8 characters</li>
    <li>One uppercase letter</li>
    <li>One number</li>
  </ul>
</div>

---

Robust

4.1 Compatible

<!-- Valid HTML -->
<!-- No duplicate IDs -->
<div id="unique-id-1">...</div>
<div id="unique-id-2">...</div>

<!-- Proper ARIA usage -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2">Tab 2</button>
</div>
<div role="tabpanel" id="panel1">Content 1</div>
<div role="tabpanel" id="panel2" hidden>Content 2</div>

<!-- Status messages announced -->
<div role="status" aria-live="polite">
  <!-- Dynamic content announced to screen readers -->
  3 items added to cart
</div>

<div role="alert" aria-live="assertive">
  <!-- Urgent messages interrupt -->
  Session will expire in 2 minutes
</div>

---

Testing Tools

Automated Testing

# axe-core (most comprehensive)
npm install @axe-core/cli
npx axe https://example.com

# pa11y
npm install pa11y
npx pa11y https://example.com

# Lighthouse
npx lighthouse https://example.com --only-categories=accessibility

Manual Testing Checklist

## Keyboard Testing
- [ ] Tab through all interactive elements
- [ ] Verify focus is always visible
- [ ] Check focus order matches visual order
- [ ] Test Enter/Space on buttons and links
- [ ] Test Escape to close modals
- [ ] Verify no keyboard traps

## Screen Reader Testing
- [ ] VoiceOver (macOS): Cmd + F5
- [ ] NVDA (Windows): Free download
- [ ] JAWS (Windows): Commercial

Test with each:
- [ ] Page title announced
- [ ] Headings navigable (H key)
- [ ] Links make sense out of context
- [ ] Form labels announced
- [ ] Error messages announced
- [ ] Dynamic content announced

## Visual Testing
- [ ] Zoom to 200% (no horizontal scroll)
- [ ] Test in Windows High Contrast mode
- [ ] Check color contrast ratios
- [ ] Verify focus indicators visible
- [ ] Test without images loaded

---

Quick Reference Card

PERCEIVABLE
├── Alt text for images
├── Captions for video
├── Color contrast 4.5:1
├── Text resizable to 200%
└── No info by color alone

OPERABLE
├── Keyboard accessible
├── Focus visible (2px outline)
├── Skip navigation
├── No keyboard traps
├── Target size 24×24px min
└── Drag alternatives

UNDERSTANDABLE
├── Language declared
├── Consistent navigation
├── Error identification
├── Labels for inputs
└── Instructions provided

ROBUST
├── Valid HTML
├── ARIA used correctly
├── Status messages announced
└── Works with assistive tech

Nielsen's 10 Usability Heuristics - Deep Dive

1. Visibility of System Status

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Good Examples

✓ Loading spinners with progress percentage
✓ "Saving..." → "Saved" confirmation
✓ Upload progress bar with time estimate
✓ Form field validation as you type
✓ Breadcrumb navigation showing location
✓ Order status tracking ("Shipped", "Out for delivery")

Bad Examples

✗ Button clicked but no visual feedback
✗ Form submitted with no confirmation
✗ Page loading with no indicator
✗ Background sync with no notification

Implementation Checklist

- [ ] Every user action has immediate visual feedback
- [ ] Loading states show progress when possible
- [ ] Success/error states are clearly communicated
- [ ] Current location in navigation is visible
- [ ] System state changes are announced to screen readers

---

2. Match Between System and Real World

The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.

Good Examples

✓ "Shopping Cart" (not "Purchase Queue")
✓ "Your Files" (not "User Directory Assets")
✓ Calendar icons for date pickers
✓ Trash can icon for delete
✓ Heart icon for favorites/likes

Bad Examples

✗ "Initiate session termination" (vs "Log out")
✗ "Null value detected in field" (vs "Please enter your email")
✗ Technical error codes shown to users
✗ Database field names in forms

Language Guidelines

Technical Term         → User-Friendly Alternative
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Authenticate           → Sign in / Log in
Terminate session      → Log out / Sign out
Invalid input          → Please check your entry
Query                  → Search
Repository             → Storage / Files
Instantiate            → Create / Start
Null/undefined         → Not provided / Missing

---

3. User Control and Freedom

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.

Essential Controls

✓ Undo/Redo for all destructive actions
✓ Cancel button on dialogs
✓ Back navigation that works
✓ Clear all / Reset option
✓ Close button on modals (X and escape key)
✓ "Unsend" or grace period for sent messages

Undo Patterns

Soft Delete (Recommended):
┌─────────────────────────────────────┐
│ Item deleted.         [Undo]        │
└─────────────────────────────────────┘
→ Shows toast for 10 seconds
→ Undo restores immediately
→ Permanent deletion after 30 days

Confirmation Dialog (Use Sparingly):
┌─────────────────────────────────────┐
│ Delete "Project Alpha"?             │
│                                     │
│ This will permanently delete all    │
│ files and cannot be undone.         │
│                                     │
│ [Cancel]            [Delete]        │
└─────────────────────────────────────┘

---

4. Consistency and Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

Consistency Levels

1. Internal Consistency
   - Same terms throughout the product
   - Same interaction patterns everywhere
   - Same visual language (colors, icons, spacing)

2. External Consistency
   - Follow platform conventions (iOS/Android/Web)
   - Match user expectations from similar products
   - Use standard icons and gestures

Common Conventions

Action              Standard Pattern
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Primary action      Bottom-right of modal
Secondary action    Left of primary button
Cancel              Leftmost button
Destructive         Red color, requires confirmation
Navigation          Top or left side
Search              Top-right with magnifying glass
Profile             Top-right avatar
Settings            Gear icon

---

5. Error Prevention

Good design prevents problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option.

Prevention Strategies

1. Constraints
   ✓ Disable unavailable options
   ✓ Input masks for formatted data
   ✓ Date pickers instead of text input
   ✓ Dropdown for limited choices

2. Suggestions
   ✓ Autocomplete for known values
   ✓ "Did you mean...?" for typos
   ✓ Recent/popular choices first

3. Confirmation
   ✓ Confirm before destructive actions
   ✓ Show summary before final submission
   ✓ Preview before publishing

Input Validation Examples

<!-- Constrain input to valid format -->
<input
  type="tel"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  placeholder="123-456-7890"
/>

<!-- Provide real-time feedback -->
<input
  type="email"
  aria-describedby="email-hint"
/>
<span id="email-hint" role="status">
  Enter a valid email address
</span>

---

6. Recognition Rather Than Recall

Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another.

Techniques

✓ Show recently used items
✓ Display saved preferences
✓ Visible navigation (not hidden menus)
✓ Persistent search with history
✓ Auto-fill from previous entries
✓ Preview thumbnails for files
✓ Labels visible (not just icons)

Before vs After

❌ Before (Recall Required):
   Enter product code: [          ]

✅ After (Recognition):
   Select product:
   ┌─────────────────────────────────┐
   │ 📦 Widget Pro - WP-2024        │
   │ 📦 Widget Basic - WB-2024      │
   │ 📦 Widget Enterprise - WE-2024 │
   └─────────────────────────────────┘

   Recent: Widget Pro, Widget Basic

---

7. Flexibility and Efficiency of Use

Accelerators — unseen by the novice user — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users.

Expert Features

Keyboard Shortcuts:
Ctrl/Cmd + S     → Save
Ctrl/Cmd + Z     → Undo
Ctrl/Cmd + K     → Command palette
/                → Focus search

Power User Features:
- Bulk actions (select all, batch edit)
- Customizable workspace
- Saved filters/views
- Templates for common tasks
- API access for automation

Progressive Disclosure

Level 1: Essential options visible
         [Basic Settings]

Level 2: Advanced options collapsed
         [▸ Advanced Settings]

Level 3: Power features in separate area
         Settings → Developer → API Keys

---

8. Aesthetic and Minimalist Design

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information competes with the relevant units and diminishes their relative visibility.

Signal-to-Noise Ratio

High Signal (Keep):
- Primary action button
- Essential form fields
- Key information
- Clear navigation

Noise (Remove/Hide):
- Decorative elements that distract
- Rarely used options in main view
- Redundant labels/instructions
- Excessive icons and badges

Visual Hierarchy

1. Primary    → Large, bold, high contrast
2. Secondary  → Medium size, normal weight
3. Tertiary   → Smaller, lower contrast
4. Disabled   → Muted, reduced opacity

---

9. Help Users Recognize, Diagnose, and Recover from Errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Error Message Formula

[What happened] + [Why it happened] + [How to fix it]

❌ Bad:  "Error 422"
✅ Good: "We couldn't save your changes because your
         session expired. Please log in again and
         your work will be restored."

❌ Bad:  "Invalid input"
✅ Good: "Password must be at least 8 characters and
         include a number"

Error State Design

┌─────────────────────────────────────────────┐
│ ⚠️ We couldn't process your payment         │
│                                             │
│ Your card was declined. This might be       │
│ because:                                    │
│ • Insufficient funds                        │
│ • Card expired                              │
│ • Incorrect card number                     │
│                                             │
│ [Try Again]  [Use Different Card]           │
└─────────────────────────────────────────────┘

---

10. Help and Documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help. Any such information should be easy to search, focused on the user's task, list concrete steps, and not be too large.

Help Hierarchy

1. Inline Help (First)
   - Tooltips on hover/focus
   - Placeholder examples
   - Contextual hints

2. Embedded Help (Second)
   - "?" icons next to complex features
   - Learn more links
   - Onboarding tours

3. Documentation (Third)
   - Searchable help center
   - Step-by-step guides
   - Video tutorials

4. Human Support (Last Resort)
   - Live chat
   - Email support
   - Phone support

Tooltip Best Practices

✓ Appear on hover AND focus (accessibility)
✓ Short and actionable (max 2 sentences)
✓ Positioned to not obscure related content
✓ Dismissable with Escape key
✓ Not required for essential functionality

---

Heuristic Evaluation Scoring Template

| Heuristic | Score (1-5) | Issues Found | Severity |
|-----------|-------------|--------------|----------|
| 1. System Status | | | |
| 2. Real World Match | | | |
| 3. User Control | | | |
| 4. Consistency | | | |
| 5. Error Prevention | | | |
| 6. Recognition > Recall | | | |
| 7. Flexibility | | | |
| 8. Minimalist Design | | | |
| 9. Error Recovery | | | |
| 10. Help & Docs | | | |

Score Key:
1 = Critical issues, unusable
2 = Major issues, significant friction
3 = Moderate issues, workable but frustrating
4 = Minor issues, mostly good
5 = Excellent, follows best practices

User Journey Mapping Guide

Journey Map Fundamentals

What is a Journey Map?

A visualization of the process a user goes through to accomplish a goal with your product, including their emotions, pain points, and opportunities for improvement.

When to Create Journey Maps

✓ Starting a new product/feature
✓ Redesigning existing experience
✓ Identifying improvement opportunities
✓ Aligning team on user experience
✓ Communicating with stakeholders
✓ Prioritizing roadmap items

---

Journey Map Template

Full Journey Map Structure

┌─────────────────────────────────────────────────────────────────────────────┐
│  JOURNEY MAP: [Goal/Task Name]                                              │
│  Persona: [Name] | Scenario: [Context]                                      │
├─────────┬──────────┬──────────┬──────────┬──────────┬──────────────────────┤
│ STAGE   │ Awareness│ Consider │ Decision │ Use      │ Retention            │
├─────────┼──────────┼──────────┼──────────┼──────────┼──────────────────────┤
│ DOING   │          │          │          │          │                      │
│         │          │          │          │          │                      │
├─────────┼──────────┼──────────┼──────────┼──────────┼──────────────────────┤
│ THINKING│          │          │          │          │                      │
│         │          │          │          │          │                      │
├─────────┼──────────┼──────────┼──────────┼──────────┼──────────────────────┤
│ FEELING │   😐     │    🤔    │    😟    │    😊    │      😍              │
│         │          │          │          │          │                      │
├─────────┼──────────┼──────────┼──────────┼──────────┼──────────────────────┤
│ TOUCH-  │          │          │          │          │                      │
│ POINTS  │          │          │          │          │                      │
├─────────┼──────────┼──────────┼──────────┼──────────┼──────────────────────┤
│ PAIN    │          │          │          │          │                      │
│ POINTS  │          │          │          │          │                      │
├─────────┼──────────┼──────────┼──────────┼──────────┼──────────────────────┤
│ OPPORTU-│          │          │          │          │                      │
│ NITIES  │          │          │          │          │                      │
└─────────┴──────────┴──────────┴──────────┴──────────┴──────────────────────┘

---

Example: E-commerce Purchase Journey

PERSONA: Sarah, 32, busy professional
GOAL: Purchase a birthday gift for her nephew
SCENARIO: Shopping on mobile during lunch break

┌─────────┬────────────────┬────────────────┬────────────────┬────────────────┐
│ STAGE   │ Discovery      │ Evaluation     │ Purchase       │ Post-Purchase  │
├─────────┼────────────────┼────────────────┼────────────────┼────────────────┤
│ DOING   │ • Search "gifts│ • Browse       │ • Add to cart  │ • Track order  │
│         │   for 8 year   │   product list │ • Enter        │ • Unbox/gift   │
│         │   old boy"     │ • Read reviews │   shipping     │ • Leave review │
│         │ • Click ad     │ • Compare      │ • Pay          │                │
├─────────┼────────────────┼────────────────┼────────────────┼────────────────┤
│ THINKING│ "What would he │ "Is this good  │ "Will it       │ "Did he like   │
│         │ like?"         │ quality?"      │ arrive on      │ it?"           │
│         │ "Where should  │ "Is the price  │ time?"         │ "Would I buy   │
│         │ I look?"       │ fair?"         │ "Is this site  │ again?"        │
│         │                │                │ secure?"       │                │
├─────────┼────────────────┼────────────────┼────────────────┼────────────────┤
│ FEELING │      😐        │      🤔        │      😟        │      😊        │
│         │ Uncertain      │ Hopeful but    │ Anxious about  │ Relieved,      │
│         │ where to start │ overwhelmed    │ security &     │ satisfied      │
│         │                │                │ delivery       │                │
├─────────┼────────────────┼────────────────┼────────────────┼────────────────┤
│ TOUCH-  │ • Google       │ • Product page │ • Cart         │ • Shipping     │
│ POINTS  │ • Social ads   │ • Reviews      │ • Checkout     │   emails       │
│         │ • Email        │ • Filter/sort  │ • Confirmation │ • Tracking     │
│         │                │                │   email        │ • Package      │
├─────────┼────────────────┼────────────────┼────────────────┼────────────────┤
│ PAIN    │ • Too many     │ • Hard to      │ • Long form    │ • No delivery  │
│ POINTS  │   options      │   filter by age│ • Must create  │   updates      │
│         │ • Generic      │ • Reviews seem │   account      │ • Plain        │
│         │   results      │   fake         │ • No gift wrap │   packaging    │
├─────────┼────────────────┼────────────────┼────────────────┼────────────────┤
│ OPPORT- │ • Gift guides  │ • Age-based    │ • Guest        │ • Proactive    │
│ UNITIES │   by age       │   filters      │   checkout     │   tracking SMS │
│         │ • "Popular     │ • Verified     │ • Gift wrap    │ • Gift-ready   │
│         │   for boys 8-10│   purchaser    │   option       │   packaging    │
│         │   " section    │   reviews      │ • Saved        │ • Easy returns │
│         │                │                │   addresses    │                │
└─────────┴────────────────┴────────────────┴────────────────┴────────────────┘

METRICS TO TRACK:
• Awareness: Search ranking, ad CTR
• Evaluation: Time on product page, bounce rate
• Purchase: Cart abandonment, conversion rate
• Post-Purchase: NPS, repeat purchase rate

---

Touchpoint Analysis Framework

Touchpoint Audit Template

## Touchpoint: [Name]

### Basic Info
- **Channel:** Web / Mobile / Email / In-person / Phone
- **Stage:** Awareness / Consideration / Purchase / Use / Retention
- **Owner:** [Team/Department]

### User Context
- **Entry point:** How do users arrive here?
- **User goal:** What are they trying to accomplish?
- **Previous touchpoint:** What happened before?
- **Next touchpoint:** Where do they go next?

### Experience Assessment
- **Friction level:** Low / Medium / High
- **Emotional state:** Positive / Neutral / Negative
- **Drop-off risk:** Low / Medium / High

### Pain Points
1. [Description of pain point]
2. [Description of pain point]

### Opportunities
1. [Improvement opportunity]
2. [Improvement opportunity]

### Metrics
- **Current performance:** [metric and value]
- **Target:** [goal]
- **How to measure:** [method]

---

Emotion Mapping

Emotion Curve

Positive  │                              ●
  😊      │                         ●         ●
          │                    ●
  😐      │─●───────────────────────────────────────
          │      ●
  😟      │           ●
          │                ●
Negative  │
          └────────────────────────────────────────
            Discover  Browse  Cart  Checkout  Receive

Emotional Triggers

POSITIVE TRIGGERS (+)
├── Success feedback ("Order confirmed!")
├── Progress indicators (75% complete)
├── Personalization ("Welcome back, Sarah")
├── Surprise delight (free gift, faster shipping)
├── Social validation (reviews, testimonials)
└── Milestone celebrations (confetti animation)

NEGATIVE TRIGGERS (-)
├── Errors without solutions
├── Unexpected costs (shipping revealed late)
├── Long wait times / slow loading
├── Complex forms / too many steps
├── Loss of work (unsaved data)
└── Uncertainty (no confirmation, unclear status)

---

Service Blueprint

Extends journey maps to include backend processes.

┌─────────────────────────────────────────────────────────────────────────────┐
│                           CUSTOMER JOURNEY                                   │
│  [Search] → [Browse] → [Add to Cart] → [Checkout] → [Receive]               │
├─────────────────────────────────────────────────────────────────────────────┤
│                        LINE OF INTERACTION                                   │
├─────────────────────────────────────────────────────────────────────────────┤
│                          FRONTSTAGE                                          │
│  Website → Product Page → Cart UI → Checkout Flow → Tracking Page           │
├─────────────────────────────────────────────────────────────────────────────┤
│                         LINE OF VISIBILITY                                   │
├─────────────────────────────────────────────────────────────────────────────┤
│                          BACKSTAGE                                           │
│  Search Index → Inventory Check → Order Processing → Shipping API           │
├─────────────────────────────────────────────────────────────────────────────┤
│                        LINE OF INTERNAL INTERACTION                          │
├─────────────────────────────────────────────────────────────────────────────┤
│                       SUPPORT PROCESSES                                      │
│  CDN → Database → Payment Gateway → Warehouse → Courier                     │
└─────────────────────────────────────────────────────────────────────────────┘

---

Journey Mapping Workshop

Preparation

## Pre-Workshop Checklist
- [ ] Define journey scope (which user goal?)
- [ ] Gather existing research (analytics, surveys, interviews)
- [ ] Identify participants (cross-functional)
- [ ] Prepare materials (sticky notes, templates, data)
- [ ] Book 2-4 hours

## Participants (5-8 people)
- Product Manager
- UX Designer
- Developer
- Customer Support
- Marketing
- (Optional) Actual customers

Workshop Agenda

TIME        ACTIVITY
──────────────────────────────────────
0:00-0:15   Introduction & goals
0:15-0:30   Review persona & scenario
0:30-0:45   Map stages (swim lanes)
0:45-1:15   Fill in touchpoints & actions
1:15-1:30   Break
1:30-2:00   Add emotions & pain points
2:00-2:30   Identify opportunities
2:30-3:00   Prioritize & next steps

Prioritization Matrix

                    HIGH IMPACT
                         │
           ┌─────────────┼─────────────┐
           │   PLAN      │    DO       │
           │   (Later)   │   (Now)     │
           │             │             │
LOW ───────┼─────────────┼─────────────┼─────── HIGH
EFFORT     │             │             │       EFFORT
           │   DON'T DO  │  CONSIDER   │
           │   (Skip)    │   (Maybe)   │
           │             │             │
           └─────────────┼─────────────┘
                         │
                    LOW IMPACT

---

Digital Journey Map Tools

Recommended Tools (2025)

DEDICATED JOURNEY MAPPING
├── UXPressia - Best for detail & sharing
├── Smaply - Best for service blueprints
├── Custellence - Best for ROI focus
└── UserBit - Best for research integration

COLLABORATIVE/GENERAL
├── Miro - Best for workshops
├── FigJam - Best for design teams
├── Lucidchart - Best for process flows
└── Notion - Best for documentation

BEHAVIOR ANALYTICS
├── Fullstory - Best for session replay
├── Hotjar - Best for heatmaps
├── Amplitude - Best for event analytics
└── Contentsquare - Best for enterprise

---

Journey Map Checklist

## Quality Checklist

### Foundation
- [ ] Based on real user research (not assumptions)
- [ ] Focuses on specific persona with clear goals
- [ ] Covers complete journey (not just your product)
- [ ] Includes specific scenario/context

### Content
- [ ] Stages clearly defined
- [ ] All key touchpoints identified
- [ ] Actions are specific and observable
- [ ] Emotions mapped with evidence
- [ ] Pain points are actionable
- [ ] Opportunities are prioritized

### Actionability
- [ ] Metrics identified for each stage
- [ ] Owner assigned for each opportunity
- [ ] Timeline for improvements
- [ ] Plan to validate changes

### Maintenance
- [ ] Living document (not one-time)
- [ ] Regular review schedule
- [ ] Updated with new research
- [ ] Shared with stakeholders

---

Quick Templates

Simple Journey Map (5 minutes)

User: _______________
Goal: _______________

STEP 1          STEP 2          STEP 3          STEP 4
____________    ____________    ____________    ____________
|          |    |          |    |          |    |          |
| Action:  |    | Action:  |    | Action:  |    | Action:  |
|          |    |          |    |          |    |          |
|__________|    |__________|    |__________|    |__________|

Feeling:        Feeling:        Feeling:        Feeling:
[ 😊 😐 😟 ]    [ 😊 😐 😟 ]    [ 😊 😐 😟 ]    [ 😊 😐 😟 ]

Pain point:     Pain point:     Pain point:     Pain point:
___________     ___________     ___________     ___________

Opportunity:    Opportunity:    Opportunity:    Opportunity:
___________     ___________     ___________     ___________

Experience Map (Continuous)

TIME ────────────────────────────────────────────────────────────▶

        ●━━━━━●               ●━━━●━━━━━━●
       /       \             /           \
      /         \           /             \
━━━━●           ●━━━━━━━━━●               ●━━━━━━━━━━━━━━━━

Key Moments:
A: First visit
B: Sign up (friction)
C: Onboarding complete
D: First success
E: Power user

Cognitive Psychology for UX Design

Cognitive Load Theory

The Three Types

INTRINSIC LOAD
├── Definition: Inherent complexity of the task
├── Example: Tax filing is complex by nature
├── Control: Simplify tasks, break into steps
└── Cannot be eliminated, only managed

EXTRANEOUS LOAD
├── Definition: Unnecessary complexity from poor design
├── Example: Confusing navigation, visual clutter
├── Control: Simplify UI, remove distractions
└── Should be eliminated entirely

GERMANE LOAD
├── Definition: Effort to build understanding
├── Example: Learning a new feature
├── Control: Progressive disclosure, good onboarding
└── Support this type of load

Reducing Cognitive Load

1. Chunking
   Break information into digestible pieces

   ❌ 4111222233334444
   ✅ 4111 2222 3333 4444

2. Progressive Disclosure
   Show only what's needed at each step

   Step 1: Basic info    [Next →]
   Step 2: Details       [← Back] [Next →]
   Step 3: Review        [← Back] [Submit]

3. Recognition over Recall
   Show options instead of requiring memory

   ❌ Enter country code: [____]
   ✅ Select country: [🇺🇸 United States ▼]

4. Visual Hierarchy
   Guide attention to what matters

   ┌─────────────────────────┐
   │ PRIMARY ACTION          │ ← Most prominent
   ├─────────────────────────┤
   │ Secondary Action        │ ← Less prominent
   ├─────────────────────────┤
   │ tertiary action         │ ← Least prominent
   └─────────────────────────┘

5. Consistency
   Same patterns everywhere = less learning

   ✓ Edit icons always look the same
   ✓ Delete always requires confirmation
   ✓ Save is always in the same location

---

Laws of UX

Hick's Law

Time to decide = a + b × log₂(n)

Where n = number of choices

Implications:
• More choices = longer decision time
• Limit options to 5-7 items
• Use categorization for large sets
• Provide recommended/default option

Example:
❌ 20 plan options on pricing page
✅ 3 plans: Basic, Pro, Enterprise
   + "Which is right for me?" helper

Fitts's Law

Time to target = a + b × log₂(1 + D/W)

Where D = distance, W = width

Implications:
• Large targets are easier to hit
• Close targets are faster to reach
• Corners and edges are infinite (on desktop)
• Touch targets: minimum 44×44px

Example:
❌ Small, spaced-out action buttons
✅ Full-width primary button on mobile
   ┌─────────────────────────────┐
   │       Complete Order        │
   └─────────────────────────────┘

Miller's Law

Working memory capacity: 7 ± 2 items

Implications:
• Chunk related information
• Limit nav items to ~7
• Show progress in multi-step flows
• Don't require remembering across pages

Example:
❌ 15-field form on one page
✅ Multi-step form with progress:
   ○───●───○───○
   Personal  Address  Payment  Review

Jakob's Law

Users spend most time on OTHER sites.
They expect your site to work like those.

Implications:
• Follow platform conventions
• Don't reinvent common patterns
• Test innovations carefully
• "Innovative" ≠ "Usable"

Example:
❌ Custom scrollbar behavior
❌ Unusual navigation patterns
❌ Non-standard icons
✅ Standard hamburger menu on mobile
✅ Cart icon in top-right
✅ Logo links to home

Von Restorff Effect (Isolation Effect)

Items that stand out are more memorable.

Implications:
• Make CTAs visually distinct
• Use contrast for important elements
• Don't overuse — everything becomes nothing

Example:
┌─────────────────────────────────┐
│  Plan A      Plan B     Plan C  │
│  $10/mo      $20/mo     $30/mo  │
│                                 │
│ [Choose]   [Choose]   [Choose]  │
└─────────────────────────────────┘
                ↓
┌─────────────────────────────────┐
│  Plan A    ★ Plan B ★   Plan C  │
│  $10/mo      $20/mo     $30/mo  │
│            POPULAR              │
│ [Choose] [█ Choose █]  [Choose] │
└─────────────────────────────────┘

Serial Position Effect

First (Primacy) and Last (Recency) items
are remembered best.

Implications:
• Put key info at start and end
• Most important nav items first/last
• Summarize key points at beginning and end

Example - Navigation:
✅ Home | Products | ... | Account | Help
   ↑ Start: Most used        End: Support ↑

Zeigarnik Effect

Incomplete tasks are remembered better
than completed tasks.

Implications:
• Show progress to motivate completion
• Incomplete profiles nag at users
• Saved drafts keep users engaged

Example:
┌─────────────────────────────────┐
│ Your profile is 60% complete    │
│ ████████░░░░░░                 │
│ Add a photo to reach 80%        │
│ [Add Photo]                     │
└─────────────────────────────────┘

Peak-End Rule

People judge experiences by:
1. The most intense moment (peak)
2. How it ended

Implications:
• Invest in delightful moments
• End on a positive note
• Smooth the worst friction points

Example:
• Peak: Confetti animation on achievement
• End: Friendly thank-you message
• Bad: Error on final submit step (memorable pain)

---

Gestalt Principles

Proximity

Elements close together are perceived as groups.

❌ Ambiguous grouping:
   Label          Input
   Another Label  Input

✅ Clear grouping:
   Label
   Input

   Another Label
   Input

Similarity

Similar elements are perceived as related.

Example - Form actions:
┌─────────────────────────────────┐
│ [Cancel]           [Save Draft] │
│                    [Publish ██] │
└─────────────────────────────────┘

Secondary actions look similar (outlined)
Primary action looks different (filled)

Continuity

Eyes follow smooth lines and curves.

Example - Progress indicator:
○ ── ● ── ○ ── ○
Step 1  Step 2  Step 3  Step 4

Eyes follow the line through steps

Closure

Mind completes incomplete shapes.

Example - Loading indicator:
   ◜ ◝
   ◟ ◞

Perceived as a spinning circle

Common Region

Elements in same bounded area are grouped.

Example - Card component:
┌─────────────────┐
│ Title           │
│ Description     │
│ [Action]        │
└─────────────────┘

Boundary creates perceived group

Figure-Ground

Elements perceived as foreground or background.

Example - Modal:
┌───────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░┌──────────────────┐░░░░░ │
│ ░░░│    Modal Title   │░░░░░ │
│ ░░░│    Content here  │░░░░░ │
│ ░░░│    [Submit]      │░░░░░ │
│ ░░░└──────────────────┘░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└───────────────────────────────┘

Modal = Figure, Dimmed page = Ground

---

Decision Architecture

Default Effect

Users tend to stick with defaults.

Implications:
• Set defaults thoughtfully
• Make the "right" choice the default
• Don't use dark patterns

Example:
□ Subscribe to newsletter ← Opt-in (ethical)
☑ Subscribe to newsletter ← Pre-checked (questionable)

Choice Architecture

How choices are presented affects decisions.

Techniques:
1. Anchoring: Show high price first
2. Decoy: Add option to make another look better
3. Scarcity: "Only 3 left"
4. Social proof: "1,000 people bought this"

Ethical use:
✓ Help users make informed decisions
✓ Highlight genuinely good options
✗ Manipulate users against their interests

Paradox of Choice

Too many options lead to:
• Decision paralysis
• Lower satisfaction
• Regret

Solutions:
• Curate options (max 3-5)
• Provide recommendations
• Allow filtering
• Show "popular" or "staff pick"

---

Attention & Focus

Attentional Spotlight

Attention is limited and focused.

Design for scanning:
• Clear visual hierarchy
• F-pattern for text-heavy pages
• Z-pattern for landing pages
• Key info in first 2-3 lines

Banner Blindness

Users ignore elements that look like ads.

Avoid:
• Flashy, animated banners
• Rectangular ad-like shapes
• Placement in typical ad locations
• Stock photo + headline layouts

Inattentional Blindness

Users miss things they're not looking for.

Implications:
• Highlight important changes
• Use motion to attract attention
• Announce status changes audibly
• Don't hide critical info

Example:
Save button changes:
[ Save ] → [ ✓ Saved! ]
Need visual indication of state change

---

Practical Application Checklist

## Cognitive Load Audit
- [ ] Is the interface visually clean?
- [ ] Are related items grouped together?
- [ ] Is information chunked appropriately?
- [ ] Are defaults set to reduce decisions?
- [ ] Is navigation consistent across pages?

## Attention Audit
- [ ] Is primary action obvious?
- [ ] Is visual hierarchy clear?
- [ ] Are important elements above the fold?
- [ ] Do animations serve a purpose?
- [ ] Is there appropriate whitespace?

## Memory Audit
- [ ] Can users complete tasks without memorizing?
- [ ] Are recently used items accessible?
- [ ] Is search/filter available for long lists?
- [ ] Are instructions visible when needed?

## Decision Audit
- [ ] Are choices limited to 5-7 options?
- [ ] Is there a recommended option?
- [ ] Are defaults helpful (not manipulative)?
- [ ] Is there a clear path to decision?