A1.11.2Visual crowding研究设计

密集排列的相似元素互相掩蔽

别名: 拥挤效应 · crowding · Bouma's law · 侧向掩蔽

概念解释

当一个目标周围紧密排列着与它相似的其他元素(干扰元素/flanker)时,即使目标单独出现时完全可以被清楚识别,一旦被这些相似元素包围且间距过小,目标就会变得难以辨认——这个现象叫拥挤(crowding),是空间维度掩蔽的一种具体表现,也是最容易在密集列表、小图标群、密集文字排版里遇到的一种视觉掩蔽。

要划清的界限:拥挤不是因为目标本身太小、太模糊而看不清(那是分辨率问题),而是因为周围元素的存在主动干扰了对目标的识别——把周围元素单独移开,同一个目标立刻恢复可辨识。这也是拥挤和普通的"分辨率不够"最容易被混淆、但机制完全不同的地方。

机制

产生拥挤的核心原因是视觉系统在识别一个物体时,需要先把目标区域内的局部特征(边缘、笔画、局部形状)正确地归属给目标本身,再合成为一个完整的知觉。当干扰元素离目标足够近,视觉系统在这个特征归属阶段容易发生特征混淆:本该属于目标的特征和本该属于旁边干扰元素的特征被错误地混合、"平均"到了一起,识别出来的不再是目标本身干净的形状,而是目标和周边元素特征混合后的一个模糊拼接体。

拥挤有一个已经被反复验证的空间规律,叫 Bouma 定律:目标能被干扰元素影响的最大间距(临界间距,critical spacing)大致与目标偏离注视点的视网膜偏心度成正比——离中央注视点越远(即越靠近周边视野),需要的安全间距就越大,同样的间距在中央视野可能完全不构成拥挤,挪到周边视野就会明显拥挤。这与周边视觉本身分辨率较低、更依赖粗略特征整合的特性是同一套解剖基础的另一种表现。干扰元素和目标越相似(形状、颜色、朝向接近),拥挤效应通常也越强,因为相似的特征更容易被系统误判为"属于同一个物体"而被一起打包处理。

怎么研究

  • 临界间距测量范式:固定目标呈现在某个偏心度上,系统改变周围干扰元素与目标之间的间距,测量被试识别目标的准确率如何随间距变化,找出准确率显著下降的临界间距,验证其是否符合与偏心度成正比的规律。
  • 常见自变量:目标—干扰元素间距、目标的视网膜偏心度、干扰元素与目标的相似程度(形状/朝向/颜色)。
  • 常见因变量:目标识别准确率、报告目标身份时的错误类型(是否报告成了与干扰元素特征混合后的结果)。
  • 在界面研究里的用途:用于判断密集排列的小尺寸元素(图标网格、密集文字、小地图上的密集标注)在特定间距和呈现位置下,是否会让用户难以准确识别其中单个元素,尤其是这些元素处在用户注视点之外时。
  • 方法论注意点:拥挤效应严重依赖视网膜偏心度,实验室数据通常明确报告偏心度条件,界面设计里评估拥挤风险时也必须区分"元素是否落在用户注视点附近",同一套间距在被直接注视和被余光扫到时结果完全不同。

边界

  • 拥挤主要发生在非注视点或轻度偏离注视点的区域,如果目标恰好被直接注视(落在中央凹),需要的临界间距会小得多,同样的密集排列直视时可能完全不构成问题。
  • 拥挤效应对相似度敏感:如果干扰元素和目标在形状、颜色上差异很大,即使间距很小,拥挤也会明显减弱,因此单纯"缩小同类元素间距"和"缩小差异很大的元素间距"不能一概而论。
  • 这条规律描述的是知觉层面的识别障碍,不是运动控制层面的点击精度问题(点击密集小目标时手指精度不够是另一套问题,属于运动控制范畴),拥挤讲的是"看不清是什么",不是"点不准"。

怎么落地

  • 密集排列的小尺寸元素(图标网格、标签云、地图标注、密集列表),元素之间的间距要按照它们大概率被用户余光扫到还是被直接注视来分别设计——越靠近页面边缘、越可能只被余光扫过的区域,需要更大的安全间距。
  • 让需要被单独识别的关键元素(如需要用户区分状态的图标)与周围元素在形状、颜色上保持较大差异,而不是把一组视觉上高度相似的元素紧密排列在一起,降低特征混淆的概率。
  • 移动端、小屏设备上尤其要留意拥挤问题,因为屏幕小意味着元素天然更密集,同样的设计在大屏上不拥挤,缩小到小屏后间距被压缩,可能触发明显的拥挤效应。
  • 验证办法:在目标元素处于用户视野边缘(非直接注视)的条件下,测试被试是否能正确识别或区分该元素,如果识别准确率明显低于目标被直接注视时的水平,说明间距设计触发了拥挤,需要加大间距或降低周围元素与目标的相似度。

延伸

  • 同组A1.11.1 相邻或相继刺激会削弱目标的可辨识 · A1.11.3 快速切换的画面会掩蔽前一帧信息
  • 相邻A1.02.3 周边可用于提示存在,不能用于传递细节 · A2.01 接近性
  • 站内检索visual crowding · Bouma's law · critical spacing · flanker

同组卡片

快捷操作

分享

分享当前页面

ios_share

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