减少认知过载：塑造更好的用户体验

2017-01-04 10:06:00

设计不是美工，想成为优秀的设计师怎么能不懂点心理学？文章从认知心理学角度下手，分析了在交互设计过程中时常会犯得几种错误，一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学，我们需要掌握一些方法论，以不变应万变。

作者介绍了认知超载和工作记忆这两个心理学概念在交互设计中的重要作用，并列举了在设计过程中因为忽视了用户的认知特点可能会犯得错误，并给出了相应的解决方案。因为原文里反复提到了上面两个概念，所以我先简单解释一下二者的含义，也方便大家更好的理解文章的内容。

认知超载：

认知负荷指在工作记忆中脑力使用的总量。当外界信息量超出大脑接收处理的阈值时，就会出现认知超载的情况。通俗来说，人脑跟电脑一样，处理信息的能力是有极限的，如果超过了一定数量，就会变慢，最后死机，这就是认知超载。

工作记忆：

工作记忆指的是一个容量有限的系统，运用听觉、视觉系统来暂时保持和存储外界信息，也叫短期记忆，是外界信息和长期记忆之间的接口。简单来说，工作记忆是长期记忆的先遣小分队。

下面一张图来直观表达外部信息/认知超载/工作记忆三者之间剪不断理还乱的孽缘：

搞清楚认知超载和工作记忆的概念后就可以正式进入正文了~~~

正文

所谓最好的用户体验就是能让用户毫无察觉，在界面上的操作如行云流水般顺畅。用户们越少去思考界面布局，他们就会越多得将关注点放在要完成的目标上。而作为设计师，你的工作就是帮助用户全神贯注的完成任务而不被多余的因素打扰。

复杂的界面会迫使用户去解决那些无足轻重的问题。用户在填写选项、界面和导航等地方感觉到困惑时就会中断他们思考的过程，将他们的注意力从网络情境拖拽回现实情境。这种过度的思考就被称为认知超载。

认知负荷的科学根源：

1980年，澳大利亚教育心理学家John Sweller将认知负荷应用到了教学设计中。他旨在寻找对于各类学生来说最好的知识记忆方式。虽然这些理论最初是应用在教育领域的，但它们也同样适用于交互设计中。接下来我会解释这个技术如何用来减少用户的烦恼。

设计中的应用：

著名作家Steve Krug就是将认知负荷理论最广泛的运用到了网页设计当中。他的书“Don’t Make Me Think”被许多设计师当做业界圣经。

在他书里提到的观点中，以下我非常赞同的：

每一个页面都要清晰明了，因为用户从网站其他页面进入网站的可能性和从首页进入网站的可能性一样大。
用户很有可能放弃——也就是说，比起最好的解决方案，采取能够最早解决问题的方案。
当一个具有一般互联网经验的用户可以用这套系统来完成他们的目标之时，系统达到可用性就可以了。
用户通常会采用一个心态：“要么快要么就去死”。
即便从未使用过，屏幕上一个可以看见的home键将会给用户带来安慰。

综合来讲，每当用户浏览网站必须停下来进行思考时，即使一瞬间，他们的工作记忆也是超负荷的。问题类似于： “这个可以点么？” “Home键在哪儿” “我改怎么保存？”，这些都会毁了用户的体验。

认知过载的最主要的几个原因

有很多设计元素都对用户大脑施加了潜在的负荷，与此同时，外界环境中会有更多的因素超出设计师们的控制范围。比方一个用户浏览网站的同时会担心第二天的工作报告，或者被窗户外装修的噪音所打扰——这些都会消耗他们的工作记忆。

同时，每个用户因为个体差异，会有着不同的工作记忆能力。比起细心谨慎的用户来说，不拘小节的用户会比较容易地将精力集中在你的网站上，而不经常上网的用户会比经常上网的用户思考的要多。即便我们不能量化认知负荷，我们依旧可以归纳出那些经常在设计中出现的错误。下面，我将对最常见的几种错误分类说明并给出解决方案。

1.多余的动作

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路，甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上，多余的动作会迫使他们投入更多的精力，这就会增加工作记忆的负担。最终就会耗尽用户的耐性，掀桌子走人。

为了使认知负荷最小化，速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务，所以撇开一切拖后腿的废物吧！

(Image: Touch of Modern)

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站，但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册！这个强制且多余的动作将会吓跑许多潜在用户。

解决方案：

这里有个找出多余步骤的方法：列出用户必须要完成的每一步任务。举个发邮件的栗子吧：

点击“邮件”图标
点击到“发送给”的输入框
填写邮箱地址
点击“主题”输入框
等等吧啦吧啦吧…….

点击“邮件”图标点击到“发送给”的输入框填写邮箱地址点击“主题”输入框等等吧啦吧啦吧…….现在，我们回头来看这些步骤并找出多余的动作。第二步完全可以删除，因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦，虽然看起来微不足道，但你所删减的每一步都是胜利。（这和最近非常流行的微交互设计概念有些不谋而合，微小而不引人注意，并为用户提供平滑、自然的感觉。）

让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面，所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分，所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力，增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样，你会很难集中精力，当网页上充斥着许多照片，动画，图标，广告，字体和刺眼的亮色时，你同样也很难集中注意力。每一种多余的元素，特别是视觉上的抢眼，都会分散用户的注意力。

要记住的是：在用户实现目标之前，工作记忆都需要将额外的刺激进行归类处理，注意力的每一次分散，都会占用用户的一份工作记忆。

Image: LINGsCARS

LINGsCARS就是个极端的例子，你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上，即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激，产生威胁。

解决方案：

首先，避免一切不必要的元素。我们仅需保留通常情况下必要的元素，来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现，比起视觉复杂的网站，用户更倾向于视觉简易的网站。

同样，你也可以进行内容区分从而达到平衡的效果。过多的同质化内容（只有照片或只有文本）会让用户感到烦躁。所以，将视觉信息加以综合——图片，视频，信息图表综合到一起从而达到页面的和谐，使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版，但它反而运用同量的文字内容来平衡网站页面。

(Image: IMDb)

当你总结出一个页面的必要元素，将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解，也就是说，让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受，而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单（中间偏左）和描述冻酸奶的文字（中间偏右）进行布局的吧。大图居中被文字包围着，这样就打造了一个舒适自然的沙漏形状。

(Image: Groupon)

对称式并不仅仅是将相同的布局放在两侧，它是用来平衡视觉重量和视觉方向。从这点来讲，非对称性布局依旧可以表现的具有组织性，就像OTHR所做的那样。

(Image: OTHR)

减少页面多余的元素仅仅只胜利了一半，革命尚未成功，大家不要忘了，还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是：用户希望拥有更多的选择，但往往过多的选择会给他们的大脑带来负荷。

席克定律（选择困难症）为我们揭示出了一种现象：用户所拥有的选择越多，他需要作出选择的时间则会越长。从设计的角度来看：人机交互中界面中选项越多，意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中，在移动设备中也比较适用。

(Image: Rakuten)

即便是知名网站，比如说乐天，也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案：

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中，那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择，同时这样也不会给他们带来负担。

(Image: Amazon)

然而，隐藏式的导航栏不利于发现，所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化（比方说亚马逊的“相关购买”）或者你可以归纳导航菜单的类别，将它们精简为单行导航（就像苹果和CNN那样）。

许多与席克定律有关的问题可以通过信息架构的管理来控制，这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样，内容过多会让用户的工作记忆分散到不同的岔道。很明显，你希望展现的仅仅是重要的内容，但对于一些放荡不羁爱自由的网站来说，所有内容都很重要。如果你的网站也有非常多的内容，为了避免对用户造成困扰，你必须学会怎么去合理的组织他们。

(Image: Arngren)

Arngren的问题并不是它展现了很多的产品，而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法：

George Miller的解决策略是“组块”，它将需要展示的大量内容以可管理的方式组合起来，这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号，地区编号等将它们组合成一组三个数字和两组四个数字便于记忆，而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么？比起将它们全部罗列出来，不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

(Image: Etsy)

说完了图片组块还有文本组块，文本的组块包括简短的自然段，恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的，有时甚至会被用户所遗弃，那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。

(Image: Virgin Atlantic)

买机票通常需要填写大量的信息，通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上：选择航班，填写旅客信息，进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担，因而很有可能被他们放弃。

5.模棱两可的界面

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作，也不应该浪费脑力去破译一个图标。

(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号，那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案：

不要费力不讨好：你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意，你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标，但同时也赋予了他们品牌独有的橙色。

(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验，而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外，如果真的需要放个以前从未见过的标识该怎么办？如果那样，运用真实的生活场景展示来让其进行自我解释。这叫做：借壳。它是连接现实和虚拟的桥梁。比方说，早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时，要避免含义模糊的符号，特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标，有些是为人所知的，但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能，这就会中断他们的操作进程。

任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面，需要手把手的教程。比方说，Slack就给出了一个全套的视频指导来说明界面的操作流程。

(Image: Slack)

6.不易寻找到的页面

即便用户已经拥有了他们所需要的一切东西，他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素，导航条应该放在显眼的地方，从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。

(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话，Mojo Yogurt则会让你见识见识什么是山外有山，你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效，但就整个屏幕的颜色和动效来说，它并不够明显。

(Image: Mojo Yogurt)

解决方法：

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法，所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

1.索引卡片上的内容 2.预先设定的分类 3.将索引卡片放置在相应的分类中。

(Image: Rosenfeld Media)

要了解信息架构更多的知识，阅读Dan Brown的“信息架构八准则”。在这仅有的五页里，他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则（例：运用一些不同的分类方法来适应不同用户的思维模式）。

除了有效的信息架构外，如果你还想通过组合页面和菜单项来避免冗余该怎么办？设计工作室Waaark通过把工作室的简介，团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。

(Image: Waaark)

如果确实有比其他功能重要的功能时，运用视觉技术来吸引他们的注意力。比如增加尺寸，添加动效或运用亮色以及对比色来吸引用户眼球。

比起新客户来讲，Paypal更关注老用户，并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构（下图解释什么是小说式架构）来展示信息，特别是用一个相应的图形，但前提是，所有的这些元素都是易于理解的。

（右上图即为小说式架构，它就像是在给用户讲故事而不是干巴巴的列出各个项目）

7.内部的不连贯性

假如一个网站的首页用蓝色文本+下划线代表链接，而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想，“它没有下划线，这还是个链接么？”他们甚至可能不会再去关心链接，而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住，最棒的用户体验就是不被用户所注意到，而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性，是否与其他网站元素具有连贯性（比方说图标）都是至关重要的。在这些例子中，用户都必须花费一些时间来进行思考和处理，因而它们占用了用户的工作记忆。

SIPhawaii到处都是大写，包括字体大小和数字价格。你甚至都想不到去点击汉堡图标，因为它和其他网站上的汉堡图标都不一样。（鹿：加了矩形和阴影跟少先队三道杠一样）

解决方案：

保持统一的一种风格来贯穿整个网站，但说来容易做来难，因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策，当设计师需要它们的时候，就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略，所以参考现成的会对设计有所帮助。

(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片，它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片，那么你就能明白他们所有的卡片。