动态更新的标题需避免过于频繁抖动,干扰标签页扫视
别名: 标题抖动 · title flicker · 未读数标题 · tab title animation
概念解释
document.title 可以随状态改:未读数、下载进度、「正在保存」。改得太勤、或在两个字符串之间来回闪,标签栏上那几个字就变成闪烁的斑。抖动干扰扫视:人用标签做的是再认,再认需要一行稳定的字。闪烁把注意拉到「有东西在动」,却读不出是哪一张、现在叫什么。未读数可以出现在标题里,但不能每来一条消息就改一次,更不能 (3) Inbox 与 Inbox 轮流显示来骗一次注视。
机制
标签栏的扫视是一次短的视觉搜索,目标是稳定的字符串形状。形状在搜索过程中变了,当前注视作废,搜索重启。动画和闪烁还触发外周注意捕获,把视线从正在读的那一张标签拉开——这正是某些站点用 title 闪烁做「未读提醒」的原理,也是它伤害识别的原因。读屏在某些平台会把 title 变化当成新页或发出通知,频繁更新变成噪声。浏览器历史若为每一次 title 变化记一行,历史会被进度百分比灌满。
合理的动态是稀疏、单向、有意义的:从「草稿」变成「已保存」一次;未读从无到有时加上数字,之后按节流合并(例如最多每分钟或失焦时才写)。不合理的是轮询式改写、进度每 1% 一次、用 emoji 闪烁。SPA 在数据到达前用占位 title、到达后换成对象名,这一次跳变是身份落地,不是抖动;随后就不该再跳。
怎么研究
在多标签环境里让人找指定的一张,同时让另一张以不同频率改 title(静止、每秒、每条消息、节流后的未读数)。
- 因变量:找到目标的时间、误点正在闪的那张、口头烦躁、读屏是否连续播报 title。
- 自变量:更新频率、是否在两串之间交替、变化是否改变对象身份还是只改计数。
- 方法论注意点:实验室里一张闪烁标签会被当成刺激中心,高估「提醒成功」、低估「旁边那张找不到」。任务必须是找另一张静止的标签。不要用自己的站点习惯化过的未读闪烁当刺激,外部用户没有那套习惯。
边界
下载中的文件标签用递增百分比,用户接受它在动,因为对象身份没变、动的是进度。监控大屏上的窗口本来就被设计成活数据,title 抖动不是主要表面。完全不更新会使「已保存」永远不出现在标签上,该改的时候仍要改,只是不要形成循环。系统自己的「正在播放」指示是操作系统表面,不是 document.title 的责任。
怎么落地
- 禁止用 title 在两串之间交替闪烁做提醒;未读用稳定的前缀数字,按节流或在窗口失焦时更新。
- 进度类写入不要细过用户能读完一行的时间;完成后再改成最终名。
- 路由落地允许一次从占位到对象名的跳变,之后保持稳定直到对象或任务真的变了。
- 验证:并排几张标签,让其中一张按产品当前逻辑更新 title,请人扫视找出指定的静止那张。若视线被拉开或读屏连续打断,频率过高。把未读做成
● Inbox / Inbox每秒切换作为反例,识别应明显变差。