E4.13.3non-interactive tooltip设计研究

提示内不应包含可交互元素

别名: 提示里的链接 · 不可点工具提示 · 提示内按钮 · tooltip link

概念解释

工具提示是一段只读的短文,出现在悬停或聚焦上,移开就消失。把链接、按钮、输入框放进去,它就不再是提示,而是一个没有按弹出层规则建造的微型对话框。提示内不可交互(non-interactive tooltip)禁止在这层短命表面上放可点对象:用户还没移进去,层已经收了;移进去了,指针离开触发器,层同样可能收。交互需要一个愿意停留的表面。

机制

提示的生命周期绑在指针与触发器的关系上:进入显示,离开隐藏,中间通常还有一条缝。可交互元素要求指针从触发器移到层内的链接上,这条路径必然经过缝。缝上一旦触发「离开」,层消失,点击打在下面的页面上。为了让路径走得通,实现会加延迟关闭或不可见的桥,于是提示开始拥有弹出层的驻留行为,却没有弹出层的焦点、关闭和尺寸。键盘更糟:提示若随聚焦出现,Tab 进层内链接会把焦点移出触发器,提示按规则应关掉,链接还没被激活。结果是一套既不像提示也不像弹出层的中间态,两条通道的预期都用不上。需要链接触达的「了解更多」,应换成常驻说明、帮助页或真正的弹出层。

怎么研究

在提示里放一个链接,测鼠标从触发器移到链接并激活的成功率、层中途消失次数、点击穿透到下层的次数。键盘组测 Tab 进链接是否导致层关闭。自变量:关闭延迟、是否有指针桥、链接位置。因变量:激活成功、穿透点击。即便调高延迟,成功率也不应被当成「提示可以放链接」的证据——那只是在用弹出层的补丁修补提示。

边界

富文本提示里的只读格式(粗体、换行)不是交互。把整块提示做成一个不可点的图像也仍是只读。若产品坚持要在悬停层里放表单,应改用点击打开的弹出层,并按弹出层处理焦点与关闭。屏幕阅读器把名称和描述当属性读,不需要层内链接;若描述里嵌了「点击了解更多」却无处可点,那是文案在撒谎。

怎么落地

  • 提示里只放文本。需要动作就用弹出层或页内说明,不要在提示里做链接。
  • 不要靠加长关闭延迟去「养活」一次指向层内的移动。
  • 帮助入口做成明确的按钮或链接,出现在能停留的表面上。
  • 验证:提示出现后把指针移向其中任何看起来能点的东西。层若在到达前关掉,或点中了下层,就还在把交互塞进提示。

延伸

  • 同组E4.13.1 提示只承载补充信息而非必要信息 · E4.13.2 触摸设备上没有稳定的提示触发方式
  • 相邻E4.12 弹出层 · E4.14 引导气泡
  • 站内检索interactive tooltip · hover bridge · tooltip dismiss

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E4.13.3