G4.09.5dynamic titles must not jitter设计研究

动态更新的标题需避免过于频繁抖动,干扰标签页扫视

别名: 标题抖动 · title flicker · 未读数标题 · tab title animation

概念解释

document.title 可以随状态改:未读数、下载进度、「正在保存」。改得太勤、或在两个字符串之间来回闪,标签栏上那几个字就变成闪烁的斑。抖动干扰扫视:人用标签做的是再认,再认需要一行稳定的字。闪烁把注意拉到「有东西在动」,却读不出是哪一张、现在叫什么。未读数可以出现在标题里,但不能每来一条消息就改一次,更不能 (3) InboxInbox 轮流显示来骗一次注视。

机制

标签栏的扫视是一次短的视觉搜索,目标是稳定的字符串形状。形状在搜索过程中变了,当前注视作废,搜索重启。动画和闪烁还触发外周注意捕获,把视线从正在读的那一张标签拉开——这正是某些站点用 title 闪烁做「未读提醒」的原理,也是它伤害识别的原因。读屏在某些平台会把 title 变化当成新页或发出通知,频繁更新变成噪声。浏览器历史若为每一次 title 变化记一行,历史会被进度百分比灌满。

合理的动态是稀疏、单向、有意义的:从「草稿」变成「已保存」一次;未读从无到有时加上数字,之后按节流合并(例如最多每分钟或失焦时才写)。不合理的是轮询式改写、进度每 1% 一次、用 emoji 闪烁。SPA 在数据到达前用占位 title、到达后换成对象名,这一次跳变是身份落地,不是抖动;随后就不该再跳。

怎么研究

在多标签环境里让人找指定的一张,同时让另一张以不同频率改 title(静止、每秒、每条消息、节流后的未读数)。

  • 因变量:找到目标的时间、误点正在闪的那张、口头烦躁、读屏是否连续播报 title。
  • 自变量:更新频率、是否在两串之间交替、变化是否改变对象身份还是只改计数。
  • 方法论注意点:实验室里一张闪烁标签会被当成刺激中心,高估「提醒成功」、低估「旁边那张找不到」。任务必须是找另一张静止的标签。不要用自己的站点习惯化过的未读闪烁当刺激,外部用户没有那套习惯。

边界

下载中的文件标签用递增百分比,用户接受它在动,因为对象身份没变、动的是进度。监控大屏上的窗口本来就被设计成活数据,title 抖动不是主要表面。完全不更新会使「已保存」永远不出现在标签上,该改的时候仍要改,只是不要形成循环。系统自己的「正在播放」指示是操作系统表面,不是 document.title 的责任。

怎么落地

  • 禁止用 title 在两串之间交替闪烁做提醒;未读用稳定的前缀数字,按节流或在窗口失焦时更新。
  • 进度类写入不要细过用户能读完一行的时间;完成后再改成最终名。
  • 路由落地允许一次从占位到对象名的跳变,之后保持稳定直到对象或任务真的变了。
  • 验证:并排几张标签,让其中一张按产品当前逻辑更新 title,请人扫视找出指定的静止那张。若视线被拉开或读屏连续打断,频率过高。把未读做成 ● Inbox / Inbox 每秒切换作为反例,识别应明显变差。

延伸

  • 同组G4.09.1 页面标题需反映当前具体内容,而非全站统一的站点名 · G4.09.2 标题是标签页、历史记录与收藏夹中识别页面的主要依据 · G4.09.3 多标签页同时打开同站点时,重复标题会让用户无法区分 · G4.09.4 页面标题应与页内主标题一致,避免用户怀疑跳转到错页
  • 相邻A5.07 注意捕获 · H5.05 徽标与未读计数 · I4.01 防抖与节流
  • 站内检索document.title · title flicker · tab scanning

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/G4.09.5