---
type: skill
domain: architecture
links: [Corpus_Callosum/CONSTITUTION.md, PULSE_OS.md]
---

# UX_PSYCHOLOGIST.md
> **ROLE:** EXPERIENCE DESIGNER
> **TRIGGER:** "FRONTEND" / "UX" / "USER FLOW"

## Step-by-Step Protocol
1. **Audit cognitive load** — run `brain_query.py --query "UX cognitive load"`. Count visible elements per screen. Apply Miller's Law: max 7+/-2 chunks of information visible at once.
2. **Map interaction paths** — every critical action reachable in <=3 clicks. Draw the path. If >3, restructure navigation or add shortcuts.
3. **Apply Fitts's Law** — target size (px) = log2(distance/width + 1). Practical rule: primary CTAs >=44x44px, spaced >=8px apart. Farther targets need larger hit areas.
4. **Set response time budgets** — <100ms = perceived instant (button feedback). <1000ms = flow maintained (page transition). <10s = attention held (with progress indicator). Anything >10s needs background processing + notification.
5. **Test with progressive disclosure** — show only what's needed now. Secondary actions behind expandable sections. Tertiary actions in settings. Validate: can a new user complete the primary task without reading docs?

## Metrics & Thresholds
- **Visible chunks per screen:** <=7 groups (Miller's Law)
- **Touch/click target size:** >=44x44px (WCAG 2.5.5), >=8px spacing between targets
- **Response times:** <100ms instant feedback, <1s page load, <10s complex operation
- **Task completion rate:** >=90% for primary flows without assistance
- **Error recovery:** user can undo any destructive action within 5 seconds

## Good Example
```tsx
// Fitts's Law: large primary CTA, small secondary actions
<div className="flex flex-col gap-4 p-6">
  {/* Primary: large, high contrast, easy to hit */}
  <button className="w-full h-12 text-lg bg-blue-600 text-white rounded-lg
    hover:bg-blue-700 active:scale-[0.98] transition-all duration-100">
    Save Changes  {/* <100ms visual feedback via active:scale */}
  </button>
  {/* Secondary: smaller, lower contrast */}
  <button className="w-full h-10 text-sm text-gray-600 border rounded-lg">
    Cancel
  </button>
  {/* Tertiary: text link, progressive disclosure */}
  <details><summary className="text-xs text-gray-400 cursor-pointer">
    Advanced options
  </summary>{/* hidden until needed */}</details>
</div>
```

## Anti-Patterns
1. **Modal overload** — stacking modals destroys context; use inline expansion or slide-overs instead. Max 1 modal deep.
2. **Mystery meat navigation** — icon-only buttons without labels; always pair icons with text or tooltips.
3. **Ignoring response time budgets** — a spinner appearing at 50ms feels laggy; delay spinner display by 200ms, show instant skeleton instead.

## Tools to Use
- `python Autonomic_System/Utilities/Tools/brain_query.py --query "UX patterns user flow"` — find past UX decisions
- `python Autonomic_System/Utilities/Tools/pulse_relay.py --tasks "Usability Audit:architecture:fast"` — delegate UX review
- `python Autonomic_System/Utilities/Tools/pulse_save.py --agent ux_psychologist --learnings "what you learned"` — persist UX findings

## Verification Checklist
- [ ] No screen shows >7 information groups simultaneously
- [ ] All primary CTAs are >=44x44px with >=8px spacing
- [ ] Instant feedback (<100ms) on every interactive element
- [ ] Primary task completable in <=3 clicks from any entry point
- [ ] Every destructive action is undoable or requires confirmation
