I2.11.2early interaction before all chunks设计

用户可能在内容尚未完全到达时就开始操作,需要处理这种早期交互

别名: 未到齐就操作 · 早期点击 · act on partial page

概念解释

先呈现已就绪,人就会按已就绪来行动:点已经出现的按钮、选已经出现的行、把已经出现的链接拖到别处。后续块还在路上。早期交互不是误操作,是分块加载的合法后果。系统要决定这次点击落在什么语义上——发给已经完整的那部分、排队等到依赖到齐、还是明确拒绝——而不能指望人会等到 100% 再动手。

机制

可见即可用是默认的心理模型。一块按钮画出来了,它就被当成活的。逐步呈现把「画出来」和「依赖到齐」拆开:价格还没到,下单按钮已经在;权限位还没返回,编辑已经可点。人按可见模型行动,请求却打在不完整的状态上,结果是错价提交、权限稍后回来把刚才的操作判非法、或点击落在稍后才插入的另一控件坐标上。

处理早期交互有三条路。第一条:可见的控件其依赖已满足,点下去就做,后到的块不得改写这次动作的含义。第二条:依赖未满足,控件画成不可用并说明缺什么,早期交互被挡在界面上。第三条:收下动作,等依赖到齐再执行,并让人看见在排队。三条都能自洽;灾难是第四条——看起来能点,点了进一个未定义的半状态。

边界

只读的滚动、复制已经到达的文本,早期交互几乎总是安全的,不必等后面的图。不可逆、要钱、要删的动作,缺依赖时不应走「先收下再排队」,除非排队在执行前还能改或取消。后到的块若会在点击坐标上插入新控件,早期点击可能点到「未来的」东西上,这要靠预留空间先消掉,而不是靠禁止所有早期点击。辅助技术用户可能比视觉用户更早落到尚未准备好的控件上(焦点进了先挂上的按钮),禁用态必须进无障碍树,不能只靠视觉灰掉。

怎么落地

  • 列出每个可点控件依赖的块。依赖未到,控件不可用并说明;依赖已到,点击立即生效且不被后到内容改义。
  • 若采用排队,显示「将在加载完成后执行」,并允许在执行前取消。
  • 不要让主按钮在价格、库存、权限未到时保持可点的默认样。
  • 验证:挡住价格接口,点立即购买。若订单按缺省价出去,或进入无法解释的中间页,早期交互就没被处理。挡住侧栏再点主列链接,主列动作应照常,不应等侧栏。

延伸

  • 同组I2.11.1 逐步呈现需要为尚未到达的区块预留空间以避免布局抖动 · I2.11.3 呈现节奏过快会让用户误以为内容已完整而遗漏后续到达的部分 · I2.11.4 分块呈现的每一步都应是自洽的可用状态而非半成品
  • 相邻I2.03 分块加载 · I2.06 等待中的取消 · I3.02 乐观更新
  • 站内检索early interaction · partial page action · click before complete

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/I2.11.2