E2.16.2suggestion-list churn设计研究

候选顺序变化会导致误选

别名: 补全列表跳动 · typeahead race · 鼠标下条目被换走

概念解释

人已经把指针或手指移到列表里某一行,正要点下去,新的筛选结果回来了,这一行换成了另一条。点下去的是刚冒出来的项,不是瞄准的那项。候选列表扰动(suggestion-list churn)就是异步更新与瞄准动作抢时间。它管的是条目在指针下被换走,不是列表有没有挡住输入框,也不是键盘上下键通不通。

机制

瞄准需要目标在按下前保持稳定。补全的结果往往晚于按键:debounce、网络、排序。每一次结果替换都可能改变行的几何——上面插入更「相关」的项,原来的第三行变成第五行,指针还停在旧坐标。触屏没有悬停预览,问题更硬:按下到抬起之间列表若刷新,抬起命中的是新行。键盘高亮若绑的是行号而不是某条稳定 id,刷新后「当前高亮」会跳到另一对象。这是经典的指向稳定性失败,和菜单还没打开就点到下面按钮是同一类时序错误。

怎么研究

用可调延迟的假接口,让列表在指针已停在第 N 行时插入新项,记录点中目标与点中替换项的比例。自变量:更新是否保留滚动位置、是否按 id 保持高亮、debounce 时长。因变量:误选率、愤怒重开列表的次数。真实网速下录一次慢 3G 更有用。不要只在本机瞬时结果上测——扰动在实验室局域网里往往不出现。

边界

本地、同步、每次按键结果都在几毫秒内返回时,扰动窗口极窄,误选少。用户还在槽里打字、指针从未进入列表时,更新是预期的,不算误选。语音输入一次塞入整词,列表会大幅换血,应等输入暂停后再更新。无障碍用户若听的是「第三条」,刷新后第三条已是别的对象,听觉通道同样被扰动。

怎么落地

  • 指针或手指进入列表后,冻结当前这一批候选项,直到离开列表或选中;新结果排队,不要在瞄准中插入。
  • 高亮和选中绑到条目 id,不绑到行号;刷新后仍高亮同一对象,找不到再取消高亮。
  • 给网络回包设最短间隔,避免每键都重排。
  • 验证:把接口拖慢,把指针停在第二项上等刷新。点下去若变成另一条,扰动就还在。触屏用按下不抬起的方式看列表是否在接触中换行。

延伸

  • 同组E2.16.1 候选列表不得遮挡正在输入的内容 · E2.16.3 必须支持键盘上下选择与确认
  • 相邻E2.10 搜索输入框 · E5.12 下拉菜单与子菜单
  • 站内检索suggestion-list churn · typeahead race · pointer stability

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E2.16.2