作品

Branchat

把 LLM 长对话排成一棵树的界面,可以沿分支回看、给节点做标注、看到整段对话的结构。

时间
2025.09 – 2025.11
负责
  • 共同创作者
  • 产品方向
  • 交互设计
  • 全栈开发
  • 实验设计与用户研究

操作演示

在线演示的录屏,34 秒,无声音。选中节点后,右侧对话换成这条路径;单个节点也可以单独展开,或者加一条批注。

Branchat 演示录屏。左侧是一棵对话树,根节点 Decision framework 分出两条分支,点击不同节点后,右侧面板切换为该分支的完整对话;随后展开 Decision record 节点查看单轮问答,再给 Scoring options 节点添加一条批注。

问题

LLM 对话越长,线性聊天界面就把早先的讨论推得越远。想回看某个决定、比较两种思路或者复用之前的上下文,只能反复滚动,自己重新理清对话脉络。

设计思路

把对话从一条线性记录改成可以导航的结构:用户能找到需要的上下文、比较分支,并从任意节点继续往下问。

Branchat

Branchat 把对话组织成可交互的树。用户可以沿路径浏览、从任意节点分支、标注关键节点,用文本或语义检索找回历史内容。实现上包括 D3 树状工作区、流式聊天、持久化对话记录和带检索的搜索。同名产品获第 27 届 STePS 项目展 IT5007 课程组最佳项目。

交互方式

1. 新建根对话,或者选中已有节点继续

选中的节点就是当前的出发点,新的输入会成为它的子对话。原有路径不会被改写,不同思路可以同时保留。

2. 右侧只显示选中节点所在的路径

右侧只显示当前节点和它的祖先节点组成的路径,不显示整棵树的消息。每次继续对话都带着这条路径的上下文,其他分支留在树上,可以随时回去。

选中 Scoring options 节点后,右侧显示从 Decision framework 经 Comparison criteria 到它的路径。在新标签页打开原图
选中 Scoring options 后,右侧显示这条路径的对话。页面顶部的截图选中的是 Decision record。

论文

论文收录于 ACM CHI 2026 论文集:

Jiaming Li, Peinuan Qin, and Yi-Chieh Lee. 2026. Branchat: A Tree-Structured Interface for Efficient Revisitation in Long-Horizon LLM Conversations. In Proceedings of the Extended Abstracts of the 2026 CHI Conference on Human Factors in Computing Systems (CHI EA ’26). ACM. https://doi.org/10.1145/3772363.3798792

研究围绕信息回溯设计实验任务,在原型里记录交互行为,用拉丁方 A/B 设计做了 12 人组内实验。在需要反复检索和整合信息的复杂任务里,参与者用树状界面完成得更快,报告的认知负担更低。

Branchat 论文在 CHI EA ’26 论文集中的第一页:标题、作者、摘要和引言开头。
论文第一页,点击打开 ACM 数字图书馆页面。