认知与设计：理解UI设计准则(第2版)_Jeff Johnson_9787115364104

本书语言清晰明了，将设计准则与其核心的认知学和感知科学高度统一起来，使得设计准则更容易地在具体环境中得到应用。涵盖了交互计算机系统设计的方方面面，为交互系统设计提供了支持工程方法。不仅如此，这也是一本人类行为原理的入门书。

第1章

我们的感知存在偏差

我们对周围世界的感知并不是对其真实的描述。我们的感知至少受到以下三个因素的影响，与现实存在严重的偏差。

过去　我们的经验。

现在　当前的环境。

将来　我们的目标。

经验影响感知

经验，即你过去的感知，会以几种不同的方式影响你现在的感知。

感知的启动

想象一下，你拥有一家大型保险公司，并将与一位房地产经理开会讨论公司新园区的建设方案园区有五座建筑排成一排，后两座有给自助餐厅和健身中心采光的T字形庭院。如果这位房地产经理向你展示如图1-1所示的地图，你就会看到代表这些建筑物的五个图块。

图1-1 　

这是建筑地图还是单词？你看到的取决于别人告诉你看什么

现在想象一下与你见面的不是房地产经理，而是一位广告经理，讨论的是一个将在全国某些市场悬挂的广告牌。广告经理给你看的是同样的图像，但这次是广告牌的略图，由一个单词构成。这次，你清晰无误地看到了一个单词“LIFE”。

当感知系统预先准备看的是建筑物的形状时，你就看到了建筑物的形状，几乎察觉不到建筑物之间的白色区域。当感知系统预先准备去看文字时，你就看到了文字，也几乎注意不到字母间的黑色区域。

先入为主能够影响感知，有个著名的例子是一张素描。这张素描据传由R. C. James 所绘①，大部分人对它的第一印象就是随手泼出的墨点。在继续阅读之前，先看看这张素描（见图1-2）。

① 见Lindsay and Norman（1972）中图3-17，146 页。

图1-2

先入为主在视觉上的效果。你看到了什么

只有在告诉你这是一只在树附近嗅着地面的斑点狗之后，你的视觉系统才会把影像组织成一幅完整的画面。不仅如此，一旦你“看到了”这只狗，就很难再回头把这张素描看成随机无序的点。

以上是视觉的例子。经验也会影响其他类型的感知，如对语句的理解。例如，在不久前听说过疫苗污染事故的人与最近听说过利用疫苗成功对抗疾病的人，他们对“新疫苗含有狂犬病毒”这个标题或许就有不同的理解。

熟悉的感知模式或者框架

我们生活中大部分时间都在熟悉的环境里度过：家中的房间、花园、上学放学上班下班经过的路线、我们的办公室、小区附近的公园、商店、餐馆等。不断置身的各种环境在我们心智中建立起模式，让我们对不同地方的东西有不同期待。研究者们把这些感知模式称为框架，包括在各个环境下通常遇到的对象和事件。

举个例子，你不需要时常详细检查每一个细节，因为对家里的房间足够熟悉。你知道它们的布局，也知道大多数东西放在什么地方。你或许都能够在全黑的情况下在家中行走。但你对家的经验要比自己的住宅更广泛。除了对自己住宅的了解，你的大脑对家也有一个广泛的模式认知。这个模式影响了你对所有家的认知，不论熟悉的还是陌生的。在厨房，你期待看到灶具和水槽。在浴室，你期待看到马桶、洗手池、淋浴器或者浴缸。

不同场合的心智框架影响人们在各个场合下对期待见到的事物的感知。因为不必不断地详细检视身边环境的每一个细节，这是心智的捷径，能帮助人们应付所处的世界。然而，心智框架也让人们看到其实并不存在的东西。

比如，如果你拜访一个厨房里没有灶具的房子，你事后可能会回忆看到过一个灶具，因为在你对厨房的心智框架里，灶具是厨房的一个重要部分。类似地，去餐馆吃饭的心智框架中一部分是付账单，所以你可能记得自己已经付过钱了而心不在焉直接就走出餐馆。你的大脑对后院、学校、城市街道、办公室、超市、牙医诊所、的士、空中交通等熟悉场合都有各自的心智框架。

任何使用电脑、网站或者智能手机的人对桌面和文件、网页浏览器、网站和各种类型的软件应用和在线服务都有对应的心智框架。比如，当他们访问一个新网站时，有经验的网络用户期待看到网站名字和标志、导航条、一些链接，也许还有一个搜索框。当在线订购机票时，他们期待能够指定行程详细信息，查看搜索结果，选择决定的航班，并且购买机票。

由于软件用户和网站用户感知模式的存在，他们经常不仔细看就点击按钮或链接。他们对控件位置的期望更多来自在当前情况下，他们自己的框架期望他们在屏幕上看见什么。这点有时会让软件设计者觉得挫败，因为设计者期望用户看见屏幕上确实有的东西，但人类的视觉系统却不是这样工作的。

例如，在一个多页对话框①的最后一页，Next（下一步）和Back（返回）按钮交换了位置，很多人就不会立刻注意到（见图1-3）。前几页上布置一致的按钮麻痹了他们的视觉系统。甚至在无心地返回了几次之后，他们可能仍然觉察不到按钮不在标准位置上。这就是为什么“控件的摆放要一致”是一个常见的用户界面设计准则。

① 多步对话框在用户界面设计的术语叫“向导”。

图1-3

Next 按钮感觉是在一致的位置上，即使并非如此

类似地，在寻找某件东西时，如果它不在老地方或者看起来与往常不同，即使就在眼皮底下我们也可能视而不见。这是因为经验调整我们到期望的地方依据期望的特征去寻找。例如，如果一个网站某个表单上“提交”按钮的形状或者颜色与其他表单上的按钮不同，用户就可能找不到它。本章在关于目标如何影响感知的一节中，会深入讨论这种由预期导致的盲目性。

习惯性

经验影响感知的第三种方式被称为习惯性。重复置身于同样（或者非常类似）的感觉会让感觉系统的敏感度降低。习惯性是人们神经系统在非常低层的一个现象，它发生在神经级别。即使是非常原始的、只具有非常简单神经系统的动物，比如扁形虫和阿米巴虫，也会对重复的刺激（比如轻微的电击或者闪光）产生习惯性。具有复杂神经系统的人类，对一系列事件也会产生习惯性，从低层次（如连续的蜂鸣声）、到中间层次（如网站上闪烁的广告条）、再到高层次（比如某人在每次派对上重复说同一个笑话或者某政客的冗长单调的演讲），都是如此。

在使用电脑时，当“你是否确定”的确认框一次又一次出现，人们也能体验到习惯性。人们最开始会注意到并且或许会做出反应，但最终则会反射般直接忽视并关闭确认框。

在最近被标以“社交媒体倦怠”（Nichols，2013）、“社交媒体疲劳”或者“Facebook 假期” （Rainie 等，2013）的现象中，习惯性也是一个因素。社交网站的新用户一开始对用微博来分享体验的创新感到兴奋，但迟早会感到疲惫不堪，不愿再耗费时间阅读“朋友们”分享的各种琐事，比如，“看！我午饭吃的这份三文鱼沙拉太赞了！”

注意瞬脱

过往经验对低层感知的另一个影响，发生在人们刚刚发现或者听到某件重要的事情之后。在识别之后短暂的0.15 秒到0.45 秒之间，即使耳朵和眼睛正常工作，人们也接近于失聪而且无视其他视觉刺激。研究者们把这个现象称为注意瞬脱（Raymond 等，1992，Stafford 和Webb， 2005）①，认为这是由于大脑的感觉与注意力机制在短时间内完全用于处理第一个识别而产生的。

① 第14 章会在其他感知间隔的语境下，讨论注意瞬脱的间隔。

举一个经典的例子：你在一节正在进站的地铁车厢内，计划与两位朋友在地铁站见面。当地铁到达时，你的车厢经过了一位朋友，你透过车窗短暂地看到了他。在下一秒钟，又经过了另一位朋友，但你却没注意到她。这是因为，当她的影像抵达你的视网膜时，你正好因为认出了第一位朋友而处于注意瞬脱中。

当人们使用基于电脑的系统和在线服务时，如果事情连续发生得太快，他们会因为注意瞬脱而错过一些信息或者事件。当下制作纪录影片有一个流行的手段，就是连续快速展示一系列静态照片。这个方式是非常容易产生注意瞬脱的：如果一个图片真的吸引了你的注意力（比如对你有特别的意义），你可能就会错过紧接其后的一两张图片。相比之下，自动播放的幻灯片（比如在网站或者信息资讯机上）中的一张引人注目的图片是不大可能造成注意瞬脱的（即错过下一张图），因为每张图片都一般有几秒钟显示时间。

环境影响感知

当我们试图去理解视觉如何工作时，很容易认为它是一个自下而上的过程，将边、线条、角度、弧线和纹路等基本要素组成图案并最后形成有意义的事物。以阅读为例，你可能假设我们的视觉系统首先识别字母，把它们组合成单词，再将单词组合成句子，如此继续。

但视觉感知，尤其是阅读，不完全是一个自下而上的过程，其中也有自上而下的作用。例如，包含某个字母的单词能够影响我们对这个字母的判断（见图1-4）。

图1-4

同样的字符受其附近的字母影响而被感觉成H 或A

类似地，对一句话或者一段话完整的理解甚至能够影响我们所看到的单词。例如，同样的字母序列可以因前后段落含义的不同而被理解成不同的单词（见图1-5）。

图1-5

同样的短语因其所在的短语组不同而有不同的解读

视觉受环境因素影响的偏差在不仅仅在阅读中出现。Müller–Lyer 错觉就是一个著名的例子（见图1-6）：两条水平线，一条有朝外指向的“翅”，另一条有着朝内指向的“翅”，尽管它们相同长度，但不同的“翅”使得我们的视觉系统觉得上方的线比下方的线更长。这类视错觉（见图1-7）欺骗了我们，因为我们的视觉系统并不使用精确的、最佳的处理方式来感知世界。视觉系统在进化中发展，这是一个半随机的过程，不断叠加各种应急的，通常非完备且不精确的方案。它在大部分时间里运转正常，但包含许多粗略估计、拼凑、修补和一些在某些情况下彻底导致问题的bug。

图1-6

Müller-Lyer 错觉：同样长度的水平线看起来不一样长

图1-7

（A）棋盘中间并未凸起；（B）三角形的边没有弯曲；（C）红色的竖线是平行的

图1-6 和图1-7 中的例子显示，视觉被视觉环境所影响。然而，在当前环境下不同感官之间也会有感知的偏差。五官的感觉会同时相互影响。我们的触觉感受可能会被听到的、看到的或者闻到的所影响，视觉会被听觉影响，听觉也会被视觉影响。以下是我们的视觉影响听觉的两个例子。

McGurk 效应　如果你观看一个视频，其中有人说着“吧、吧、吧”，接着“嗒、嗒、嗒”，然后“哇、哇、哇”，但音频一直是“吧、吧、吧”。你将会通过观看说话者的嘴唇运动而不是实际听到的来辨认他说的音节。只有当闭上眼睛或者转移目光，你才能真正听到实际语音发出的音节。我打赌你们不知道自己可以读唇，但事实上人们一天里这么做的次数相当多。

腹语　腹语表演者并不转移自己的声音，他们仅仅是学会了不动嘴说话。观众的大脑感觉是与声音最近的那个动着的嘴在说话，就是腹语者表演用的玩偶的嘴（Eagleman， 2012）。

反过来，听觉影响视觉的一个例子是幻觉闪光效果。当屏幕上的某一点短暂地闪了一下，但伴随着两个快速的蜂鸣声，就会看起来像闪了两下。类似地，感觉到的闪光频率也可以随点击鼠标的频率变化（Eagleman， 2012）。

后续章节将解释人脑中的视觉感知、阅读和认知功能。现在就简单地表述为：识别一个字母、一个单词、一张脸或者其他任何物体的神经活动，都包含了环境刺激产生的神经信号的输入。这个环境包括感知到的其他邻近对象和事件，甚至由环境激活的、对以往感知到的对象和事件的记忆。

环境不仅影响人的感知，也影响低级动物的感知。一位朋友经常带着她的狗开车出门办事。一天当她开进自家车道时，有一只猫在前院。她的狗看见了就开始叫。我的朋友一打开车门，狗就蹿出去追那只猫，猫立刻转身跳进灌木丛中逃跑了。狗也扎进灌木丛，但没逮到猫。那之后的一段时间里，这条狗就一直很烦躁不安。

之后，在我的朋友住在那里的那段时间，每次她开车带着狗回到家，它就兴奋地叫起来，并在车门打开那一刻跳出去，冲过院子，跃入灌木丛。没有猫在那里，但那并不重要。乘着车回到家对这狗来说已经足够让它看见甚至可能闻到一只猫。然而，如果是走回家，比如每天遛完它后，“猫幻影”就不会发生。

目标影响感知

除了经验和当前环境会影响感知，我们的目标和对将来的计划也会影响我们的感知。具体地说，我们的目标可以做到如下的事。

引导我们的感觉器官，让我们从四周的环境根据需要采集样本。

对我们感知到的进行过滤：与目标无关的事物在被意识到之前就被过滤掉，也就不会被我们的主观意识注意到。

例如，当人们在软件里或者网站上寻找信息或者某个功能时，他们并不会认真阅读，只是快速而粗略地扫描屏幕上与目标相关的东西。他们不是仅仅忽略掉与目标无关的东西，而是经常根本注意不到它们。

现在就来体会一下。请在图1-8 中的工具箱里找到剪刀，然后立刻回到这里。

图1-8

工具箱：这里有剪刀吗

你发现剪刀了吗？现在不去看工具箱，你能说出来那里面有没有螺丝刀吗？

除了视觉，我们的目标还过滤其他感官的感知。一个熟悉的例子是“鸡尾酒会”效应。如果你在一个拥挤的酒会上与某人谈话，你能把大部分注意力放在他说的话上，即使身边还有许多人在对话。你对谈话的兴趣越大就越能过滤掉周围的对话。如果你对谈话内容感到乏味了，多半就会越来越多地听到周围的谈话。

这个效应首次记录于对空中交通管制员的研究中。即使控制室的同一个扩音器传出在同一个频道上同时进行的许多不同对话，空中交通管制员们仍然能够与被指派飞机上的飞行员进行对话（Arons，1992）。研究表明，在多个同时进行的对话中，专注于一个对话的能力不仅取决于对谈话内容感兴趣的程度，也取决于客观因素，如在杂音中熟悉的语音、常见“噪声”的量（如碗碟的碰撞声或者喧闹的音乐）以及能否预见谈话对象要说什么（Arons，1992）。

目标对感知的过滤在成人身上特别可靠，成人比儿童对目标更专注。儿童更容易被刺激驱使，目标较少地过滤他们的感知。这种特点使得他们比成人更容易分心，但也使得他们观察时更不容易产生偏差。

一个客厅游戏展示了年龄差异在感知过滤上的差别。它类似刚才的“工具箱”练习。大多数人的家里都有一个专门放厨房器具或者工具的抽屉。请一个人从客厅到那个抽屉所在的房间，要求他拿来某个工具，比如量勺或者水管扳手。当他带着工具回来时，问他在抽屉里是否有另外某个工具。大部分成人不记得抽屉里还有什么其他东西。但孩子们通常能够告诉你那里面还有什么其他东西，前提是他们完成了任务，而没有被抽屉里其他很酷的玩意彻底吸引。

感知过滤在网站导航中也能观察到。假设我要你去新西兰的坎特伯雷大学（见图1-9）的主页并找出对计算机科学系研究生提供资助的信息。你会扫视网页并可能很快地点击那些含有与目标相关单词的链接：Departments（“院系”，左上）、Scholarships（“奖学金”，中间），还有Postgraduate Students（“研究生”，左下）。如果你是个“搜索型”的人，也许就直接到搜索框（右上）输入与目标相关的单词，然后点击“Go”。

图1-9

坎特伯雷大学主页：网页导航过程包含感知过滤

不论你是浏览还是搜索，都很可能没注意到自己被随机地挑中赢得100 美元（右下）而直接离开了主页。为什么？因为那与你的目标无关。

当前的目标影响我们的感知的机理是什么？有两个。

影响我们注意什么　感知是主动的，不是被动的。感知不是对周围事物的简单过滤，而是对世界的体验以及对需要理解的东西的获取。我们始终移动眼睛、耳朵、手、脚、身体和注意力去寻找周围与我们正在做或者正要做的事最相关的东西（Ware，2008）。如果在一个网站上找园区地图，那些能够引导我们去完成目标的对象就会吸引我们的眼睛和控制鼠标的手。我们会或多或少地忽略掉与目标无关的东西。

使我们的感知系统对某些特性敏感　在寻找某件物品时，大脑能预先启动感官，使得它们对要寻找的东西变得非常敏感（Ware，2008）。例如，要在一个大型停车场找一辆红色轿车时，红颜色的车会在我们扫视场地时跃然而出，而其他颜色的车就几乎不会被注意到，即使我们的确“看到”了它们。类似地，当我们试图在一个黑暗拥挤的房间里寻找自己的伴侣时，大脑会对我们的听觉系统进行“编程”，从而对她或他的声音的频率组合非常敏感。

设计时将感知的影响因素考虑在内

这些对感知的影响因素对于用户界面设计有以下三点启发。

避免歧义

避免显示有歧义的信息，并通过测试确认所有用户对信息的理解是一致的。当无法消除歧义时，要么依靠标准或者惯例，要么告知用户用你期望的方式去理解歧义之处。

例如，电脑上的显示经常将按钮和文本输入框渲染成看起来高于背景面（见图1-10）。这种显示方式依赖一个大多数有经验的电脑用户都熟悉的惯例——光源在屏幕的左上角。如果一个物体是以光源在不同的位置来渲染的话，用户则无法看出它是凸起的。

图1-10 　

电脑屏幕上的按钮经常带有阴影以呈现三维效果，但这种惯例只有在假设模拟光源在左上角时才有用

保持一致

在一致的位置摆放信息和控件。不同页面上提供的相同功能的控件和数据显示应该摆放在每一页上相同的位置，而且它们还应该有相同的颜色、字体和阴影等。这样的一致性能让用户很快地找到和识别它们。

理解目标

用户去用一个系统是有目标的。设计者应该了解这些目标，要认识到不同用户的目标可能不同，而且他们的目标强烈左右他们能感知到什么。在一次交互的每个点上，确保提供了用户需要的信息，并非常清晰地对应到一个可能的用户目标，使用户能够注意到并使用这些信息。

你还可能感兴趣