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

3. 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

5. 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

<button class="cta" style="min-height: 60px; min-width: 200px;"> Primary Action <span class="subtext">Supporting text</span> </button>

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.