UX Friction Analyzer
A comprehensive skill for analyzing and optimizing user experience through cognitive psychology, ADHD-friendly design, and flow state engineering.
Activation
Use this skill when:
Designing new interfaces or user flows Auditing existing UX for friction points Optimizing for neurodivergent users (ADHD, autism) Simulating user journeys before building Reducing cognitive load in complex applications
Trigger phrases: "analyze UX", "friction audit", "user journey", "ADHD-friendly", "optimize flow", "reduce cognitive load"
Core Frameworks 1. ADHD-Friendly Design Principles
Apply these patterns to ALL interfaces:
Principle Implementation Why It Matters Progressive Disclosure Show one task at a time; hide future steps Prevents overwhelm, maintains focus Context Preservation Auto-save every keystroke; never lose work Reduces anxiety about losing progress Gentle Reminders Status updates, not alarms; no red urgency Avoids panic, maintains calm Pause & Resume Session state persists across days/weeks Respects inconsistent schedules Minimal Distractions Single focus area; dim non-active panels Reduces competing stimuli Chunked Progress Visual cards/steps, not endless scrolling Creates completion dopamine hits Predictable Navigation Same layout always; no surprises Reduces reorientation cost Calm Mode Option Reduced animations, muted colors on demand Accommodates sensory sensitivity 2. Gestalt Psychology
Apply these perception principles:
PROXIMITY ───────── Elements close together = perceived as related White space creates natural boundaries
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ Related │ │ Related │ │ Other │ │ Other │ │ Item A │ │ Item B │ │ Group A │ │ Group B │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ ↑ CLOSE = GROUPED ↑ SEPARATE = DISTINCT
SIMILARITY ────────── Same color/shape/size = perceived as related function
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ BLUE │ │ BLUE │ │ BLUE │ │ CORAL│ │ CORAL│ │ Save │ │ Copy │ │ Edit │ │ Del │ │ Clear│ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ ↑ SAME = Related actions ↑ DIFFERENT = Destructive
CONTINUITY ────────── Eye follows lines/paths naturally
Step 1 ──→ Step 2 ──→ Step 3 ──→ Complete ●──────────●──────────●──────────●
CLOSURE ─────── Brain completes incomplete shapes Use for progress indicators, loading states
[ ████████░░░░░░░░ ] 50% - brain "sees" the end
- Cognitive Load Theory
Three types of mental load to manage:
Type Definition Strategy Intrinsic Task complexity itself Can't eliminate; acknowledge it Extraneous Poor design adding effort ELIMINATE THIS - your job Germane Learning/understanding Minimize for repeat users
Working Memory Limits:
7±2 items maximum (Miller's Law) 4 chunks optimal for complex tasks Micro-breaks every 25 minutes
Reduce Extraneous Load By:
Removing unnecessary choices Using recognition over recall Providing smart defaults Eliminating decorative elements that don't inform 4. Fitts' Law
Time to acquire target = f(Distance / Size)
IMPLICATIONS FOR BUTTONS: ─────────────────────────
┌───────────────────┐ vs ┌──┐ │ GENERATE │ │Go│ │ │ └──┘ └───────────────────┘ ↑ ↑ 44px+ touch target Hard to hit Easy to acquire Frustrating
MINIMUM SIZES: - iOS: 44x44 CSS pixels - Android: 48x48 CSS pixels - Desktop: 32x32 minimum, 44x44 preferred
EDGE TARGETS ARE INFINITE: ┌─────────────────────────────────────────────────────┐ │ ■ LOGO MENU ■ │ │ │ │ Screen edges = can't overshoot │ │ Place critical actions at corners/edges │ │ │ │ ■ HELP EXPORT ■ │ └─────────────────────────────────────────────────────┘
ICON + LABEL > ICON ALONE: - Larger target area - Reduced ambiguity - Faster acquisition
- Flow State Engineering
Key Metrics:
15-25 minutes to enter flow state 23 minutes to recover from interruption 40% productivity loss with frequent interruptions Only 41% of work time spent in flow (McKinsey)
Flow Conditions:
Clear goals for the current task Immediate feedback on actions Balance between challenge and skill No anxiety about failure
Preserve Flow By:
Background processing (don't block UI) Push notifications when ready (bring user back faster) Quick re-orientation panels after breaks Auto-save eliminating "save anxiety" Undo everything (confidence to experiment) Analysis Methodology Step 1: Create Decision Tree
Map every user path with probabilities:
┌─────────────┐
│ USER LANDS │
└──────┬──────┘
│
┌───────────────┼───────────────┐
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Action A │ │ Action B │ │ Action C │
│ (40%) │ │ (45%) │ │ (15%) │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
▼ ▼ ▼
[Next] [Next] [Next]
For each edge, record:
Probability (%) Friction score (1-10) Time to complete (seconds/minutes) Cognitive load (low/medium/high) Step 2: Simulate User Journeys
Create detailed simulations for each persona:
Template:
TIME ACTION COGNITIVE STATE FRICTION ───────────────────────────────────────────────────────────────────────────── 0:00 [User action] [Mental state] Low/Med/High └─ [System response or UI shown]
0:15 [Next action] [How they feel] Low/Med/High └─ [What happens] └─ PROBLEM: [Friction point if any]
...continue... ───────────────────────────────────────────────────────────────────────────── TOTAL TIME: X minutes FRICTION POINTS: N (list them) ABANDONMENT RISKS: N (critical moments) DELIGHT MOMENTS: N (positive surprises)
Personas to simulate:
Expert User - Knows the system, moving fast New User - First time, needs guidance Distracted User - Context switching, interruptions Explorer - No goal, seeing what's possible Completer - Trying to finish, hitting obstacles Step 3: Friction Analysis Matrix
Quantify and prioritize:
Friction Point Users Affected Severity (1-10) Fix Difficulty Priority Score [Issue 1] X% N Easy/Med/Hard HIGH/MED/LOW [Issue 2] X% N Easy/Med/Hard HIGH/MED/LOW
Priority Formula:
Priority = (Users Affected × Severity) / Fix Difficulty
Step 4: Impedance Mapping
Compare current vs ideal:
TASK CURRENT IMPEDANCE IDEAL IMPEDANCE ──────────────────────────────────────────────────────────────────── [Task 1] Low (X sec) ✓ Optimal [Task 2] Medium (X sec) Could be Y sec [Task 3] HIGH (X min) Should be Y sec
Step 5: Time-Loss Analysis
Calculate context switch costs:
Action Frequency Time Lost Each Total Impact ───────────────────────────────────────────────────────────────────────── [Interruption type 1] X/session Y min Z min [Interruption type 2] X/session Y min Z min ───────────────────────────────────────────────────────────────────────── TOTAL CONTEXT SWITCH LOSS Z min/session
Optimization Patterns Immediate Fixes (Low Effort, High Impact)
Giant CTA on Landing
Visible Edit Affordances
Show pencil/edit icons by default, not just on hover Add tooltips: "Click to edit"
Auto-Fill Prompts
After user completes 1 item manually, offer to auto-complete rest "Want me to fill in the remaining X items?"
Floating Action Buttons
Critical actions always visible (not buried in menus) Bottom-right for mobile thumb zone
Progress Indicators
Show "Step X of Y" always Visual progress bar at top Medium-Term Improvements
Re-Orientation Panels
┌─────────────────────────────────────────────┐ │ Welcome back! Here's where you left off: │ │ │ │ ✓ Step 1: Complete │ │ → Step 2: In progress (60%) │ │ ○ Step 3: Not started │ │ │ │ [Continue where I left off] │ └─────────────────────────────────────────────┘
Keyboard Shortcuts
Number keys for mode switching (1, 2, 3...) Cmd+Enter for primary action Escape for cancel/close
Background Processing
Never block UI for long operations Show progress, allow user to continue Push notification when complete
Smart Defaults
Pre-fill based on user history Remember last-used settings Suggest most common option first Long-Term Vision
Predictive UI
Anticipate next action based on patterns Pre-load likely next screens Suggest before user asks
Personalized Complexity
Simple mode for new users Power user mode unlocks over time User controls their complexity level
Accessibility Suite
High contrast mode Reduced motion option Screen reader optimization Keyboard-only navigation Checklist for New Features
Before shipping any feature, verify:
Cognitive Load Can user complete with ≤4 things in working memory? Are there unnecessary choices that could be defaults? Is recognition used instead of recall? ADHD-Friendly Can user pause and resume without losing context? Are there gentle progress indicators (not anxiety-inducing)? Is the interface calm (not visually noisy)? Fitts' Law Are primary buttons ≥44px tall? Are destructive actions away from common paths? Do buttons have labels, not just icons? Flow Preservation Does any action block the UI for >2 seconds? Can long operations run in background? Is there a clear "done" state? Error Recovery Can every action be undone? Are error messages actionable (not just "Error")? Is auto-save enabled? Example Analysis Output
When running this skill, produce a document with:
Executive Summary - Key findings in 3 bullets Decision Tree - All user paths with probabilities User Journey Simulations - 3-5 personas, full timeline Friction Matrix - Prioritized issues table Optimization Recommendations - Immediate/Medium/Long-term Implementation Checklist - Specific changes to make Integration Points web-design-expert: Implement UX recommendations visually adhd-design-expert: Deep neurodivergent design patterns frontend-developer: Technical implementation of fixes diagramming-expert: Create user flow diagrams Sources NN/g: Minimize Cognitive Load NN/g: Fitts's Law Laws of UX IxDF: Gestalt Principles Stack Overflow: Developer Flow State Medium: ADHD UX Design
Core Philosophy: Every click, every second of confusion, every moment of "where am I?" is friction stealing from your users. Design for the distracted, optimize for the overwhelmed, and everyone benefits.