ux-friction-analyzer

UX 摩擦分析器

一套全面的技能，通过认知心理学、适合 ADHD 的设计和心流状态工程来分析并优化用户体验。

激活

在以下情况下使用此技能：

• 设计新界面或用户流程
• 审查现有 UX 中的摩擦点
• 针对神经多样性用户（ADHD、自闭症）进行优化
• 在构建前模拟用户旅程
• 降低复杂应用中的认知负荷

触发短语：“分析 UX”“摩擦审查”“用户旅程”“适合 ADHD”“优化流程”“降低认知负荷”

---

核心框架

1. 适合 ADHD 的设计原则

将这些模式应用于所有界面：

原则	实施方式	重要原因
渐进式披露	一次显示一个任务；隐藏后续步骤	防止不知所措，保持专注
保留上下文	自动保存每次按键；绝不丢失工作内容	减轻对进度丢失的焦虑
温和提醒	提供状态更新，而非警报；不使用红色紧急提示	避免恐慌，保持平静
暂停与继续	会话状态可跨天或跨周保留	适应不规律的日程安排
尽量减少干扰	聚焦单一区域；调暗非活动面板	减少相互竞争的刺激
分块呈现进度	使用视觉卡片或步骤，而非无尽滚动	通过完成任务带来多巴胺奖励
可预测的导航	始终使用相同布局；不制造意外	降低重新适应的成本
平静模式选项	按需减少动画、使用柔和的颜色	适应感官敏感性

2. 格式塔心理学

应用以下感知原则：

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. 认知负荷理论

需要管理的三种心理负荷：

类型	定义	策略
内在负荷	任务本身的复杂性	无法消除；应予以承认
外在负荷	糟糕的设计增加的负担	消除它——这是你的职责
相关负荷	学习与理解	对重复使用的用户尽量降低

工作记忆的限制：

• 最多 7±2 项（米勒定律）
• 复杂任务以 4 个组块为宜
• 每 25 分钟进行一次短暂休息

降低外在负荷的方法：

• 移除不必要的选项
• 使用识别而非回忆
• 提供智能默认值
• 移除不会传递信息的装饰元素

4. 菲茨定律

获取目标所需时间 = f（距离 / 大小）

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. 心流状态工程

关键指标：

• 进入心流状态需要 15–25 分钟
• 从中断中恢复需要 23 分钟
• 频繁中断会导致生产力下降 40%
• 工作时间中仅有 41% 处于心流状态（麦肯锡）

心流条件：

1. 当前任务目标明确
2. 对操作提供即时反馈
3. 挑战与技能相平衡
4. 不必担心失败

保持心流的方法：

• 在后台处理（不要阻塞 UI）
• 准备就绪时发送推送通知（帮助用户更快返回）
• 休息后提供快速重新定位面板
• 自动保存，消除“保存焦虑”
• 所有操作都可撤销（让用户放心尝试）

---

分析方法

步骤 1：创建决策树

根据概率映射所有用户路径：

                    ┌─────────────┐
                    │ USER LANDS  │
                    └──────┬──────┘
                           │
           ┌───────────────┼───────────────┐
           ▼               ▼               ▼
     ┌──────────┐   ┌──────────┐   ┌──────────┐
     │ Action A │   │ Action B │   │ Action C │
     │  (40%)   │   │  (45%)   │   │  (15%)   │
     └────┬─────┘   └────┬─────┘   └────┬─────┘
          │              │              │
          ▼              ▼              ▼
        [Next]         [Next]         [Next]

记录每条边的以下信息：

• 概率（%）
• 摩擦评分（1–10）
• 完成时间（秒/分钟）
• 认知负荷（低/中/高）

步骤 2：模拟用户旅程

为每种用户画像创建详细模拟：

模板：

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)

需要模拟的用户画像：

1. 专家用户——熟悉系统，操作迅速
2. 新用户——首次使用，需要引导
3. 易分心用户——上下文切换、受到干扰
4. 探索者——没有明确目标，探索各种可能性
5. 完成者——试图完成任务，却遇到障碍

步骤 3：摩擦分析矩阵

量化并确定优先级：

摩擦点	受影响的用户	严重程度（1-10）	修复难度	优先级评分
[问题 1]	X%	N	简单/中等/困难	高/中/低
[问题 2]	X%	N	简单/中等/困难	高/中/低

优先级公式：

Priority = (Users Affected × Severity) / Fix Difficulty

步骤 4：阻力映射

比较当前状态与理想状态：

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

步骤 5：时间损耗分析

计算上下文切换成本：

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

---

优化模式

立即修复（低投入，高影响）

1. 首页上的醒目 CTA

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

2. 清晰可见的编辑入口

   • 默认显示铅笔/编辑图标，而不只在悬停时显示
   • 添加工具提示：“点击即可编辑”

3. 自动填充提示词

   • 用户手动完成 1 个条目后，询问是否自动完成其余条目
   • “要我填完剩下的 X 个条目吗？”

4. 悬浮操作按钮

   • 始终显示关键操作（不要藏在菜单里）
   • 移动设备上放在右下角拇指易于触及的区域

5. 进度指示器

   • 始终显示“第 X 步，共 Y 步”
   • 在顶部显示可视化进度条

中期改进

1. 重新定位面板

   ┌─────────────────────────────────────────────┐
   │  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. 键盘快捷键

   • 使用数字键切换模式（1、2、3……）
   • 使用 Cmd+Enter 执行主要操作
   • 使用 Escape 取消/关闭

3. 后台处理

   • 长时间操作绝不阻塞 UI
   • 显示进度，并允许用户继续操作
   • 完成后推送通知

4. 智能默认值

   • 根据用户历史预填内容
   • 记住上次使用的设置
   • 优先推荐最常用的选项

长期愿景

1. 预测式 UI

   • 根据使用模式预测下一步操作
   • 预加载可能的下一个页面
   • 在用户提出要求前主动建议

2. 个性化复杂度

   • 为新用户提供简易模式
   • 随时间推移解锁高级用户模式
   • 由用户控制复杂度级别

3. 无障碍功能套件

   • 高对比度模式
   • 减少动态效果选项
   • 优化屏幕阅读器体验
   • 仅使用键盘导航

---

新功能检查清单

发布任何功能前，请确认：

认知负荷

• 用户能否在工作记忆中最多保留 4 项内容的情况下完成操作？
• 是否存在可以设为默认值的不必要选项？
• 是否使用识别而非回忆？

ADHD 友好性

• 用户能否暂停并继续操作，且不会丢失上下文？
• 是否提供温和的进度指示器（不会引发焦虑）？
• 界面是否平静（没有过多视觉干扰）？

菲茨定律

• 主要按钮的高度是否 ≥44px？
• 是否将破坏性操作放在常用操作路径之外？
• 按钮是否带有文字标签，而不只是图标？

保持流畅

• 是否有任何操作会阻塞 UI 超过 2 秒？
• 长时间操作能否在后台运行？
• 是否有明确的“完成”状态？

错误恢复

• 每项操作都能撤销吗？
• 错误消息是否可供采取行动（而不只是“错误”）？
• 是否启用了自动保存？

---

分析输出示例

运行此技能时，生成一份包含以下内容的文档：

1. 执行摘要 - 用 3 个要点概述关键发现
2. 决策树 - 列出所有用户路径及其发生概率
3. 用户旅程模拟 - 3-5 个角色的完整时间线
4. 摩擦矩阵 - 按优先级排列的问题表格
5. 优化建议 - 立即/中期/长期建议
6. 实施检查清单 - 需要进行的具体更改

---

集成点

• web-design-expert：以视觉方式实现 UX 建议
• adhd-design-expert：深入探索神经多样性设计模式
• frontend-developer：以技术方式实现修复
• diagramming-expert：创建用户流程图

---

来源

• NN/g：尽量减轻认知负荷
• NN/g：菲茨定律
• UX 法则
• IxDF：格式塔原则
• Stack Overflow：开发者心流状态
• Medium：ADHD 用户体验设计

---

核心理念：每一次点击、每一秒的困惑、每一个“我在哪里？”的瞬间，都是在消耗用户耐心的阻力。为容易分心的人设计，为不堪重负的人优化，每个人都会从中受益。