A2.02.2Similarity-implies-sameness fallacy设计研究

相似即同类的推断会导致功能误判

别名: 外观误导 · 相似性陷阱 · similarity trap

概念解释

人不会停在"这几个东西看起来像"这一步,会自动往下推一层:看起来像,所以应该干同一件事、有同样的行为。这个推断在两个功能完全不同的元素恰好外观相似时就会出错——用户不是因为读错了标签,而是因为外观相似替他们提前下了判断,才点错、点重了本不该被混淆的东西。

这和外观相似本身没有对错之分:相似性分组是自动发生的知觉过程,出错的是在此基础上多做的那一步功能推断,而这一步同样是自动的,不需要用户主动去想。

机制

相似性分组发生在识别元素具体功能之前,是一次纯粹基于外观属性的知觉归类。但用户的行为决策不会停在知觉层面,会把"知觉上归为一类"当成一条现成的证据,用来预测这一类里的其他成员会怎样表现——这是一种基于类别的省力推理,日常生活里大多数时候是对的(同样造型的按钮通常确实功能相近),所以视觉系统没有理由对它保持怀疑。

问题出在设计恰好制造了一个例外:两个功能不同的元素因为使用了同一套视觉语言(同一种图标风格、同一个颜色、同一种控件形态)而落入了同一个知觉类别,用户据此做出的功能预测就会系统性地错——而且这种错误不会因为用户更仔细看一眼就消失,因为归类本身发生在注意介入之前。

怎么研究

这类误判可以通过预测型任务来检验:不给用户实际交互,只让他们凭外观预测某个元素点下去会发生什么,或者判断哪些元素"应该"表现一致,把预测结果和实际功能对照,找出因外观相似而被错误归为一类的元素对。

比事后统计误点率更有效的做法是在预测阶段就发现问题,因为误点率会被用户学习、纠错行为掩盖——一个界面用久了误点率会下降,不代表最初的知觉归类问题被解决了,只是用户记住了例外。

边界

外观相似造成的误判只在用户第一次遇到这套视觉语言、还没有建立起"这两个东西其实不一样"的经验时最明显;重复使用同一界面后,用户会靠记忆覆盖掉最初的知觉推断,误判率会下降,但这不代表设计本身的问题被解决了,换一批新用户,同样的误判还会重新出现。

后果的严重程度和相似元素之间的功能差异大小有关:外观相似但功能后果接近的元素误按了影响不大;外观相似但功能后果差异巨大(比如"保存"和"删除")的元素误按了代价很高,这种情况下即便误判概率不高也需要优先处理。

怎么落地

  • 排查界面里外观相似(同色、同形、同图标风格)但功能不同的元素对,尤其是功能后果差异大的那些组合,优先处理。
  • 不要指望靠增加文字标签解决问题——标签需要被主动阅读才起作用,而外观相似造成的误判发生在阅读之前。
  • 验证办法:找没用过这个界面的人,只给他们看静态截图(不给交互权限),让他们指出"这几个东西里哪些应该表现一样",和实际功能对照,统计被外观误导而错误归为一类的比例。

延伸

  • 同组A2.02.1 外观相似的元素被感知为同类 · A2.02.3 不同功能的元素必须在外观上可区分
  • 相邻A2.01.3 间距不一致会产生非预期分组 · A7 心智模型
  • 站内检索similarity fallacy · visual affordance mismatch · perceptual category error

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/A2.02.2