ux-friction-analyzer（ux 摩擦分析仪）

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:

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:

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:

1. Clear goals for the current task
2. Immediate feedback on actions
3. Balance between challenge and skill
4. 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:

1. Expert User - Knows the system, moving fast
2. New User - First time, needs guidance
3. Distracted User - Context switching, interruptions
4. Explorer - No goal, seeing what's possible
5. Completer - Trying to finish, hitting obstacles

Step 3: Friction Analysis Matrix

Quantify and prioritize:

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)

1. Giant CTA on Landing <button class="cta" style="min-height: 60px; min-width: 200px;"> Primary Action <span class="subtext">Supporting text</span> </button>
2. Visible Edit Affordances

- Show pencil/edit icons by default, not just on hover - Add tooltips: "Click to edit"

1. Auto-Fill Prompts

- After user completes 1 item manually, offer to auto-complete rest - "Want me to fill in the remaining X items?"

1. Floating Action Buttons

- Critical actions always visible (not buried in menus) - Bottom-right for mobile thumb zone

1. Progress Indicators

- Show "Step X of Y" always - Visual progress bar at top

Medium-Term Improvements

1. 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] │ └─────────────────────────────────────────────┘
2. Keyboard Shortcuts

- Number keys for mode switching (1, 2, 3...) - Cmd+Enter for primary action - Escape for cancel/close

1. Background Processing

- Never block UI for long operations - Show progress, allow user to continue - Push notification when complete

1. Smart Defaults

- Pre-fill based on user history - Remember last-used settings - Suggest most common option first

Long-Term Vision

1. Predictive UI

- Anticipate next action based on patterns - Pre-load likely next screens - Suggest before user asks

1. Personalized Complexity

- Simple mode for new users - Power user mode unlocks over time - User controls their complexity level

1. 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:

1. Executive Summary - Key findings in 3 bullets
2. Decision Tree - All user paths with probabilities
3. User Journey Simulations - 3-5 personas, full timeline
4. Friction Matrix - Prioritized issues table
5. Optimization Recommendations - Immediate/Medium/Long-term
6. 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.