R3.05.2misclick from layout shift设计研究

位移会造成误点击

别名: 偏移误触 · 点偏 · hit-test 错位 · rage click

概念解释

布局偏移的人因代价不是分数变差,而是手指或指针落在错误的控件上。瞄准时目标还在原处,抬手或 pointerup 时目标已经挪走,命中测试拿到的是此刻占据该坐标的另一个节点。这叫偏移造成的误点击(misclick from layout shift)。CLS 可以很低——挪动的面积不大——但被挪的恰好是用户正在按的那一个。

机制

运动规划在按下之前就锁定了空间目标。命中测试却在采样时刻查询当前的命中树。两者之间若发生布局,坐标没变、树变了,命中结果就换人。触摸尤其危险:从瞄准到抬起有几十到一两百毫秒,这段窗口足够一次迟到插入完成。鼠标按下与抬起若跨过一次位移,也可能变成拖到别的控件。

关键不在“页面跳了一下”,而在意图坐标与命中坐标不再指向同一控件。面积很小的位移,只要穿过热区边界,误操作率就会上去;大面积位移若发生在没有指针的区域,则可能只造成阅读中断而不造成误点。

怎么研究

CLS 不统计误点击,所以分数和人因可以 metric mismatch。实验室做法是:在目标控件可点之后注入延迟插入,记录 pointerup 的命中节点是否仍是被试瞄准的那个,并记下按下到抬起之间是否有 layout-shift。现场做法是把 layout-shift 归因和点击、连点、撤消事件按时间对齐——位移后立刻出现的连点往往是没命中,而不是需求本身。不要用 CLS 分位代替误点率。

边界

键盘和辅助技术不走指针命中树,这条的误点击机制对它们不成立;它们会被重排打乱的是焦点顺序和朗读位置。位移发生在指针已经离开热区之后,不会造成这次点击错误。拖拽、滑动本身就在跟踪移动目标,不能把跟手过程里的坐标变化都算成误点。游戏或画布里的命中由应用自己做,不经过文档命中树。

怎么落地

  • 主操作、关闭、购买、发送这类不可逆控件,在可点击之后冻结其文档流位置,迟到内容不得从上方或内部把它挤走。
  • 触摸热区四周留出不易被插入块穿过的间隙;小按钮不要紧贴会变高的插槽。
  • 对不可逆动作做抬起确认或短延迟提交,避免按下与抬起之间换了命中目标。
  • 验证:在真机上于按钮可点后插入一条横幅,看第一次点击是否仍落在原按钮;RUM 里对齐位移与随后的连点,误点应随位移来源关闭而下降。

延伸

  • 同组R3.05.1 内容后到会推动已呈现元素 · R3.05.3 需为动态内容预留空间 · R3.05.4 阻塞渲染的资源决定首次可见的时刻 · R3.05.5 已交互的区域不应被后到内容重排 · R3.05.6 异步插入的内容优先占据不打断阅读的位置
  • 相邻I2.07 感知性能 · R3.15 首屏指标与交互就绪
  • 站内检索misclick · layout shift · hit testing

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R3.05.2