热图

可视化用户在页何处点、滚、悬 —找吸注意的元素和被忽的

为什么

热图是最快答"用户在见在用此元素吗—的方式。漏斗告诉你"部署步流—40%"；热图告诉你"部署按钮—60% 用户折叠下方且滚过它—80% 点击—。此为数字缺的视觉上下文。热图对多交互元素页（仪表盘、设置页）特别有价值，漏斗不可告诉你用户试图用哪个元素并失败。也对验设计假设有价值："我们—CTA 移到折叠上方、点击增了吗—由前/后热图比较答。限是热图示用户何处交互非为—错元素热点（用户点看像按钮的非按钮）是困惑信号非成功且热图单不可分。用热图作假设生成器、再用会话回放和 A/B 测试验

何时使用

重设计页时、页高流量但低转化时、或验新元素是否被注意时。非低流量页（数据不足）

如何做

1. 选热图型：点击（用户何处点）、滚动（用户滚多远）、移动（光标何处去）、或注意（合点击+滚动+移动—2. 装热图工具（Hotjar、FullStory、PostHog）或建一个：—click/mousemove/scroll 事件带相对页 x,y 坐标
3. 在足流量页跑热图—= 1,000 会话/周供统计可靠—= 100 供方向洞察）
4. 点击图：找（a）非交互元素热点（用户试图点非按钮物 —困惑）、（b）重—CTA 冷点（用户未见）、（c）怒点（同元素重复—挫败—5. 滚动图：找折叠线—0% 用户滚到处）及关键内—CTA 在其上还是下。若—CTA —50% 折叠下那是发—6. 移动图（注意）：关光标位置与元素可见—但注意移动图噪且不如点击/滚动图可—7. 测重设计时比—后热图：新元素得注意？旧热点移？折叠线移—8. 用会话回放验热图发现：看 5-10 会话确认热图故事（如"用户试图点卡片标题因它看像链—）后行动
9. 勿以热图为变更唯一依据 —它示何处非为何；跟进 A/B 测试确认改改善指标

示例

# 热图—dashboard（项目列表页—工具：Hotjar  流量—,200 会话/— 期：9 —15-21

点击图发现：
  热点—项目标题"文本—40 点击—- 非按钮！
    -> 用户以为标题是到项目的链—    -> 640 点击非交互元—= 困惑
  冷点—打开"按钮—80 点击—    -> 实际 CTA 得比标题文本—4 倍点—    -> 用户未识"打开"按钮是入—  怒点—刷新"图标—2 用户、各 5+ 点击—    -> 刷新慢（3s）、用户重复点

滚动图发现：
  50% 折叠线：距顶 640px
  "新建项目"按钮（主 CTA）：—720px <- 折叠—    -> 60% 用户不滚永不见主 CTA
  项目列表：起 200px、最多点击在—2 项目

—后（—新建项目"移到列表上）—  前："新建项目"—720px—% 点击—  后："新建项目"—180px—1% 点击率（+175%—
会话回放验证（看 8）：
  5/8 用户点项目标题、等、然后扫页找"打开"按钮。确认：标题看像链接—    "打开"按钮不显眼—  3/8 用户滚过"新建项目"（旧位）未见、然后走。确认：CTA 在折叠下—
行动：（1）使项目标题为链接、（2）把"新建项目"移到列表—  （A/B 测试确认—175% CTR、p<0.01）。

常见问题

⚠把热点当成功 —非按钮文本元—640 点击是困惑非参与；无会话回放验团—热点并增困惑
⚠低流量页跑热—50 会话产噪热图其中 3 用户行为看像模式且团队按噪重设计
⚠用移—注意图作主证—光标移动噪且不强关注意（用户移光标到要去处非看处）；点击和滚动图更可靠
⚠—A/B 测试按热图发现行—"我们—CTA 且点击升 175%"是前/后比较与时间混淆；只 A/B 测试确认移致提升

最佳实践

✓行动前总用 5-10 会话回放验热图发—热图示用户何处点、回放示为何且为何定热点是问题还是成功
✓点击和滚动图作主、移—注意图作—点击和滚动是用户行为直接证据；移动是注意的噪代理且更不可行动
✓解读热图前要—>= 1,000 会话 —此下模式是噪；门槛防—3 用户行为重设计
✓每热图驱动变更后—A/B 测试 —热图生假设（"—CTA 到折叠上"）、A/B 测试确认—CTR +175%、p<0.01"）且此两步防上看似对但不动指标的变更