Songhai Fan's Blog

简体中文

English

简体中文

English

Appearance

网页端用户研究记录

January 25, 2025
PhD用户研究

下面给你一个相对系统的思路，涵盖数据收集、存储和回放三大环节，并结合 HCI 用户研究的常见需求以及"serverless / 轻量化"实践来做具体分析。

数据收集（Collecting Data） ​

首先要明确，你想收集哪些类型的交互数据：

基础访问/流量 ​

  • 浏览量（pageviews）、会话时长、访问来源、跳出率等
  • 一般用 Google Analytics、Matomo 之类的分析工具即可
  • 这些工具的免费版能满足基础分析需求，但只会统计到较粗粒度的数据

点击热图 / 鼠标移动 / 页面回放 ​

  • 通过「Session Replay」服务，能够录制用户在网页上的点击、滚动、鼠标移动轨迹，甚至可以在后台"回放"用户操作
  • 常见免费工具有 Microsoft Clarity，还有一些付费的如 FullStory、Hotjar、Heap、Smartlook
  • 这些服务将你的页面 DOM 变化和用户操作记录下来，然后在他们的云平台里可以回看并做热图分析

自定义事件埋点 ​

  • 比如，你想知道用户点击了哪个按钮、访问了哪个页面、在 Cytoscape 图中拖拽了哪条边、花了多少时间写作等
  • 这类数据需要你在前端代码里手动埋点，在事件回调中调用相应的 JS SDK。例如：
js
// Mixpanel 埋点示例
mixpanel.track("click_node", {
  nodeId: "123",
  time: Date.now(),
});

文本或更多定制信息 ​

  • 如果你想记录用户在文本编辑器里具体输入了什么，需要自定义埋点，或者手动将文本内容发送到某个数据库
  • 例如在 onChange 或 onBlur 事件里，实时/定时/最终提交时把文本同步到后端存储
  • 注意隐私和研究伦理（IRB），确保用户知情同意

关键提示 ​

  • 依靠纯「Session Replay」服务（如 Clarity）只能看到用户大致操作轨迹和输入框焦点，但不一定会采集具体文本（通常还会自动模糊处理密码或可识别信息）。如果 HCI 研究需要保留完整写作文本，要自己在前端主动上传到某个存储
  • 也可以两者结合：既用 session replay 工具做可视化回放，也在自定义事件里收集更详细的数据，为后期量化/统计分析做准备

数据存储（Storing Data） ​

在"serverless / 轻量化 / GitHub Pages"环境下，前端本身没有内置数据库或后端。要想把数据长久保存起来，需要依赖外部服务。这里常见的方案有：

直接使用第三方分析平台 ​

  • 如果你只需要事件埋点和查看分析报表，且对原始数据导出要求不高，那么把埋点数据都传到 Mixpanel、Heap、Amplitude 之类就行。它们会帮你存储并提供可视化分析界面
  • 你要做的就是在前端集成它们的 JS SDK，然后在需要的地方 track 事件即可
  • 缺点：如果你需要拿到完整的原始数据（比如长文本、或者做很细的学术分析），那第三方平台不一定直接开放全部原始数据下载，或者需要付费企业套餐

使用 BaaS（后端即服务） ​

  • 例如 Firebase、Supabase、Airtable、PocketBase 等
  • 你可以直接从前端（在 GitHub Pages 上跑的纯静态网页）调用它们的 API，把数据写进一个云端数据库
  • 好处：
    • 读写都不用自己维护服务器
    • 可以随时导出数据做分析
    • 对于文本、富媒体内容，可轻松存储到可配置的表中
  • 坏处：
    • 需要注册并配置相应的 BaaS，学习一下权限设置、API 规则
    • 有免费额度但有用量限制，超了就要付费

Serverless Function + 自己的数据库 ​

  • 在 Vercel、Netlify、AWS Lambda 等平台运行一个极简的 serverless 函数（API）
  • 你可以在函数里操作自己的数据库（如 MongoDB Atlas、PlanetScale MySQL、PostgreSQL on Supabase 等），把数据保存起来
  • 前端静态部署到 GitHub Pages，然后在需要上报事件时发送 POST 请求到 serverless API
  • 好处：完全自定义，可控性极高
  • 坏处：需要一些后端配置和数据库管理技能，复杂度上升

表单/问卷式提交 ​

  • 如果只是一次性的小规模用户研究，你也可以在用户写作完成后弹出对话框，或直接把文本存到 Google Forms、Typeform
  • 但是它无法实时记录交互过程，也不适合大规模埋点

数据回放（Replaying Data） ​

使用 Session Replay 工具 ​

  • 像 Microsoft Clarity、Heap、Hotjar、FullStory 等会自动"模拟"出一个回放界面，让你看用户在浏览器里的一举一动：点击、滚动、鼠标移动、DOM 变化等
  • 这是最简单的"回放"方式，不需要你做任何自定义，只要嵌入他们的脚本即可，所有数据和回放功能都在它们的官网完成

自己实现细粒度"回放" ​

  • 如果你需要在自己的前端完整重现用户对 Cytoscape 图的交互（如节点拖拽路径、图形布局变化等），你可能需要：
    • 在前端监听 Cytoscape 的各类事件（on('drag', ...), on('tap', ...) 等），记录当时的节点位置、时间戳、事件类型
    • 以时间顺序保存这些事件到一个日志中（对象数组等），并上传到后端
    • 开发一个"回放"页面，可以按照时间顺序重播这些事件，将 Cytoscape 里的节点位置一帧帧更新，从而看到用户的所有操作过程
  • 这是一项较大工程，但它能给你非常详细的过程回放，甚至可以针对不同研究需求进行可视化标注
  • 当然，也可以只做一部分：记录关键节点事件（点击、选中、删除等），之后做统计分析，而不一定要做炫酷的动态图回放

哪种方式适合你？ ​

  • 若你是学术/科研用途，需要非常定制化和详细的"图操作"回放，那么你可能要做自定义事件记录 + 定制回放
  • 如果你只需要一个大概的用户操作"录像"，看看他们在哪里点击、写了什么，Session Replay 服务更简单，集成也快

选择与实践建议 ​

根据你的需求和资源，可以组合出以下常见落地方案：

最简方案：Session Replay + 外部表单 ​

  • 在页面中嵌入 Clarity 或 Heap 的脚本，记录鼠标、点击、视图回放
  • 用户最后把写作文本复制到 Google Forms 提交（或内置表单脚本），即可拿到文本
  • 你在 Clarity/Heap 后台看用户过程录像，在 Google Forms 下载文本数据做对照
  • 适合一次性、小规模研究

事件埋点 + 分析平台 + BaaS ​

  • 在前端给 Cytoscape 各类关键事件（点击节点、拖拽、选择）埋点，调用 Mixpanel/Amplitude/Heap 的 JS SDK
  • 文本部分用 BaaS（比如 Firebase）做实时存储
  • 这样你既能在 Mixpanel 看可视化漏斗/行为分析，又能在 Firebase 下载到用户写作文本
  • 同时也可并行引入 session replay 工具
  • 比较"纯前端 + 第三方"的打法，适合中小规模研究且需要长时间访问或频繁迭代

自定义 Serverless + 自己数据库 + 自实现回放 ​

  • 你想做对 Cytoscape 事件的"完整回放"，就自己写前端事件日志系统，将日志发送到 Vercel / Netlify / AWS Lambda 的 serverless API，然后写入云数据库
  • 之后写一个"回放页面"，读出日志，逐步执行事件来重建用户交互过程
  • 这需要一定的后端和数据库编程，但最灵活，学术研究中常需要这种细粒度可控的方式

隐私与合规（非常重要） ​

无论你选择哪种方式，在做 HCI 用户研究时，务必考虑：

用户知情同意 ​

  • 告知用户将会收集哪些数据、用途是科研/产品改进/教学等，并明确是否会保存他们的写作内容

去识别化 ​

  • 如果你需要保存用户个人信息，要做适当的去识别化处理（Hash、ID 替代）或在研究报告中不透露个人隐私

法律合规 ​

  • 若有海外用户，需考虑 GDPR、CCPA 等隐私法规
  • 有时会要求在页面上放 Cookie Consent 或隐私声明

总结与推荐 ​

数据收集 ​

  • 在前端对关键交互做埋点（Cytoscape 事件 + 文本编辑器变化 + 其他点击），或使用 Session Replay 工具全程捕捉鼠标轨迹

数据存储 ​

  • 如果只做基础可视化分析，可直接用第三方分析工具（Mixpanel/Amplitude 等）存储事件
  • 若要拿到原始文本/日志，推荐 BaaS 或 serverless 函数 + 数据库

数据回放 ​

  • 轻量方式：用 Clarity/Heap 等服务自带的"录像回放"
  • 复杂/细粒度：自己实现事件日志记录+回放逻辑（工程量会大一些）

隐私与同意 ​

  • 明确告知参与者所采集的数据范围、用途、保留方式

建议实践组合 ​

若要快速搭建一个"文本写作 + 图操作"研究平台，且要轻量：

  • 前端（GitHub Pages）+ Cytoscape.js + Microsoft Clarity (Session Replay)
  • 用 Firebase Realtime Database（或 Supabase）来存储用户写作文本
  • 在 Cytoscape 事件上再接 Mixpanel/Heap 埋点，以便做更细的事件统计
  • 不用自己维护服务器，只要把前端代码放在 GitHub Pages 并配置好第三方工具的脚本和 API Key 就能工作

这既能看到回放、又能获取文本和交互事件数据，后续分析也方便，是相对常见且简单的组合。

希望以上内容能帮助你清晰地了解「如何收集/存储/回放数据」的不同方法，并在 serverless/轻量化的环境中落地 HCI 用户研究。祝研究与开发一切顺利！

基于 MIT 许可发布

Copyright © 2024-present 范松海