爱交互 > 交互设计 > 提高用户体验,何不试试减少认知过载
提高用户体验,何不试试减少认知过载
2017-10-10

最好的用户体验往往因自然流畅而很难被用户所注意到,但在自然和流畅的体验背后,通常蕴含了大量的设计决策来解决和规避问题。

不得不说,用户使用产品时对界面和设计学习成本越少,他们就越容易专注在你的网站上,更好的完成他们的任务。而作为设计师的我们,需要做的就是提前帮用户清除可能给他们造成困惑的障碍,给他们提供一条直接完成任务的路径。

总的来说,通过复杂而又混乱的用户界面,来迫使用户自己找到解决问题的办法是不可取的,当用户被界面中那些容易造成困惑的选项、导航所影响时,往往会感到不知所措,同时思维短暂的停顿也足以让用户从投入的状态一下子回到他们坐在电脑的现实中来。

 

当外界信息量超过大脑接收信息处理的阈值时,那么人脑处理信息就会变慢,这种过度的思维,就是认知过载

下面我们将解释如何避免这种情况。首先,我们需要解释下当我们的大脑出现认知过载后究竟有多大的风险。

认知过载的科学依据

认知负荷是你的工作记忆可以处理的信息总量,当你工作的记忆体收到了过多的信息,导致不能舒服的处理时,就会导致认知过载,让你感到挫折并影响到后续决策。

但是这真正意味这什么呢?什么是工作记忆呢?这和设计又有什么关系呢?那么第一步就需要我们了解认知负荷理论的起源。

JOHN SWELLER 和认知负荷理论

虽然认知研究可以追溯到几个世纪前,直到20世纪80年代,澳大利亚教育心理学家约翰·斯威勒(John Sweller)才将研究成果应用于教学设计中。Sweller试图找出可以让学员记住他们所学信息的最关键的因素,换句话说,如何让课程印象深刻?

Sweller提出的工作记忆限制的发现让设计师在进行设计的时候去挖掘最为有用的信息进行展示。

另外的,Sweller的工作拓展了1950年代认知心理学家和语言学家George Miller的理论,他们测试了短期记忆的极限。而Miller的研究也被运用与互联网设计中,因此很多设计师将菜单的选择项的数量限制在5到9个之间。

虽然这些策略最初是针对教育领域的,但它们同样适用于用户体验(UX)设计。正如我们所说的,增强记忆和学习的技术同样也减少了用户的烦恼。

 

工作记忆

如果每天打开冰箱你都必须先回答一个谜语的化,那么很容易受不了的。根据认知负荷理论,当用户感受不到合适的体验设计的时候,同样也会有这样的沮丧感。

要了解认知负荷理论,你必须要了解工作记忆,大脑活动是用来完成任务的。工作记忆会对所有的外部刺激和短期记忆的项目进行归纳和整理,如果需要的话,也可以从长期记忆中进行提取。工作记忆就像电脑的RAM,而长期记忆就像电脑的硬盘。

工作记忆和短期记忆通常可以互换使用,但是它们又略有不同,工作记忆会对信息加工来进行处理,而短期记忆更像是一个记了重要信息的便签本,虽然重要,但是相比较于长期记忆而言,没有那么重要。

举个例子,在阅读时,你可能会遇到蓝色文字链中不熟悉的概念。你的工作记忆需要知道蓝色文本中的概念是什么意思,以便更深入的理解文章。你的长期记忆则会告诉你,蓝色带下划线的文字是一个链接,所以你的工作记忆知道点击该链接之后可以获得更多的信息。同时,你的短期记忆会记住你在文章中的浏览位置,以便你从外部页面返回的时候,不至于不知道你在哪里,但明天上午,这个你用短期记忆记住的位置就可能被遗忘。

 

在设计中的应用

有影响力的作家史蒂夫·克鲁格(Steve Krug)是将认知负荷理论应用于网页设计的人。他的书“Don’t make me think”被许多设计师所认同。

这本书里面又很多有价值的经验,下面罗列了一些:

·每个页面都应该能自我解释,因为有的时候Web用户并不会从主页进入到你的网站。

·用户所认为的满意,通常就是采取最简单的解决方案来解决问题,而不是采用最好的解决方案来解决问题。同样,作为会依赖于习惯的生物,人们更依赖于继续使用已有的解决方案,而不是去尝试和思考更好的方案。

·如果面向的用户群体中,具有平均能力或是经验的人可以利用你的系统来完成目标时,那么这样产品的适用性就是满足的。

·返回按钮是web中最常用的功能。

·即使主页按钮从未使用过,但在页面上显示主页(Home)按钮也可以让用户感到有安全感。

除了Krug以外,还有很多人也详细阐述了认知负荷理论在设计中的作用。

 

总而言之,用户在浏览网站时哪怕是一瞬间不得不停下来的思考,也会让他们的工作记忆被损耗。比如:这个按钮是可以点击的吗?主页按钮在哪里?我怎样可以保存?这样都问题都会破坏用户的体验。

 

认知过载最常见的原因

很多你设计的变化都有可能给用户的大脑带来负担,而通常用户所处的外部环境和生活中更是有许多变化无法被你控制。用户可能会担心第二天的工作演示,或是窗外可能有非常吵闹的施工队,所以面对这些情况时,无论你的网站设计的多么简单,这些都会让你的工作记忆耗尽。

不得不说的是,每个用户工作记忆的容量是不同的。外向的用户会比那些在意每一件小事的用户更关注你的网站,那些很少上网的用户会比有经验的用户想的更多。

虽然我们不能量化认知过载,但我们在设计时可以规避大部分的设计错误。下面我们整理了一些常见的问题,以及对应的解决方案。

 

一、不必要的操作

用户每一步的操作都会增加他们的认知负担。太多的不必要的行动会破坏用户的思维或刺激他们。由于用户的工作记忆会集中于实现特定的目标,因此不要让不必要的操作,导致用户付出更多的努力。这就意味着可以有更多的工作记忆来为任务本身服务。

加快响应速度是最小化认知负荷的重要因素。用户想要快速的完成任务,所以要取消任何可能造成滞后的操作。

 

用户喜欢在提交自己的电子邮件之前,知道他们正在做什么。但是Touch网站在做任何事情前都必须让用户先登录注册。这个强制性和不必要的操作会吓倒大部分的潜在用户。

 

解决方案:

找出不必要的操作是一个很好的练习:列出用户完成任务所必须经历的步骤。例如发电子邮件可能会有如下步骤:

1.点击电子邮件图标

2.点击发邮件按钮

3.点击电子邮件输入框

4.输入点击邮件地址

5.点击主题输入框

6.等等

现在,重新看下上面的列表是否有多余的步骤,是否有些想法呢?

你可以让用户点击发邮件按钮时,光标直接就在电子邮件输入框中,这样就可以去掉步骤3。这将减少用户的操作成本,无论多么小的优化点,每一次改进都是胜利。

 

我们来看下Google的主页。光标直接就出现在了输入框中,所以用户可以直接开始输入想要的内容。这样的交互提升了整体的体验,所以不要忽视它们。

 

二、过度的刺激

混乱和其他可能让用户转移注意力的界面都有可能会使用户脱离当前手头的任务,就像你同时和几个人一起聊天一样,你很难集中注意力。所以当网络上的图像,动画,图标,广告,文字类型和明亮的颜色都很吸引人时,你的用户将很难集中注意力。

 

不要忘了,在像任务目标前进的时候,工作记忆还必须对外部刺激进行归纳和整理。视觉上很夸张,刺激吸引人的设计都会占用一部分的工作记忆。

 

LINGSCARS是一个极端的例子,但是你可以看到明亮的颜色和吸引人的动效对于感官的刺激有多强烈。屏幕的两个不同的区域甚至有2个同时播放的动画效果在过度刺激着用户。

 

解决方案:

对于初学者而言,减少一切不重要的东西,是有效减少加载时间的经验。更重要的是,有一项关于美学的研究发现,用户喜欢看起来简单的网站,而不是视觉上感觉复杂的网站。

你还可以通过让内容形式多样化来达到一种平衡。大量的同一种类型的内容(如文字/图片)往往是不容易让人阅读的。使用视觉元素(图像,视频,信息图表等)的合理组合,会让页面平衡,也让用户更易于理解。

电影和电视网站IMDb因为有很多图片,很容易过度倾向于视觉内容,为了保持平衡,在右侧展示了等量的文本内容

当你把整个页面进行梳理之后,就可以把里面所有的元素以一种让用户容易理解的方式组织起来。对称和比较合理的不对称布局可以让用户大脑更轻松更容易的获取所需要的信息。这不仅让人愉悦,同时这样的结构也使得页面更容易进行交互。

 

Groupon通过将左侧的菜单列表和右侧交易文字说明中间添加照片,让图片和文字创建了一个结构化和让人满意的对称结构。

 

对称不仅仅是在屏幕的两边放置相同的布局,而是如何对视觉方向和视觉重心进行平衡。这样,即使不对称的页面可以显得很平衡和有组织。就像下面的OTHR所示

 

将页面中的元素进行精简和变得不那么抢眼只是做到了减少过度刺激的一部分。不要忽视将这些元素呈现在一个简单的布局中。

 

三、过多的选项(希克定律)

这有点像是一个悖论,用户一方面希望能有更多的选择,但另一方面过多的选择又会让大脑过载。

希克定律说明了这个现象:用户拥有的选择越多,那么对应的决策时间也会越长。从设计师的角度来看希克定律,页面上提供给用户的每个选项都像一个明亮的闪光灯。就像上面所说,太多明亮的闪光灯会刺激用户。

 

即使是最受欢迎的网站,如乐天百货,也因为没有正确理解而犯了这个错误。给用户他们想要的和给用户他们认为他们想要的是不同的。

 

解决方案

假设你已经去掉了不必要的冗余选项,你可以将剩下的选项在伞状分类中进行分组。你可以在很多电商网站看到这样的设计,这些网站都拥有大量的产品进行展示。

 

有的时候出现问题的并不是有过多的选择,而是一次性提供太多的选择。如果你可以隐藏一部分菜单,像抽屉一样隐藏一部分选项,那么某种程度上你得到了较好的结果。给用户提供了足够多的选择的同时又不会对大脑造成过度的负荷。

 

但是需要注意的是,像抽屉一样对一些菜单进行隐藏,只有点击时才展开这个菜单中的选项,会使这些选项不容易被发现。所以作为电商或是新闻相关的设计师这样处理的时候必须要小心。你可以提供与其他产品不同的链接来补充页面,最大程度上减少隐藏菜单的缺点。就像亚马逊的相关购买Banner一样。还有一种方法,你可以去掉隐藏的菜单,将标题泛化,直到它们适合单一导航菜单就像Apple和CNN那样。

 

你还需要注意如何组织整个网站的导航,通过管理信息架构和希克定律你可以解决很多类似的问题。

 

四、过多的内容

就像过度刺激和过多的选项可能会造成的问题一样,提供过多的内容给用户也会产生一些问题,比如把用户的工作记忆分散到太多不同的方向中。

你当然只想显示那些必要的内容,但是对于一些内容很丰富的网站而言,一切的信息都是至关重要的。如果你有太多的内容,你必须学会如何组织它,这样你就不会给用户造成负担。

Arngren的问题就和上面所说的一样,问题的原因并不是提供了太多的产品,而是在同一时间内展示了太多的产品给用户。

 

解决方案:

如上所述,George Miller的分组策略对于大量内容的展示是有效的。这样可以让分组中展示的数据更容易被记忆。举个例子,就像一个11位或者更长位数的字符串很难被记忆。但是就像这么长的电话号码,当我们把它拆分为国家代码,区号,一组三位数字和一组四位数字时,内容就变得容易被记忆了。

你是否有想过在你的电商主页上展示大量产品的图片吗?不要将它们全部列在单独的行和列中。而是应该根据其类型将它们分组展示。Etsy可以根据卖家在主页上的分组显示更多的产品。

对于文本类型而言,需要充分的利用标题和副标题,以及充足的留白。

对于需要填写大量数据的表单,请尝试拆分成多个步骤来完成。很长的表单会让人感到恐慌,有时甚至会导致用户的流失。我们可以将表单需要填写的信息分成一个个单独的页面,或者至少是单独的部分,让其变得不那么庞大。还可以添加上用来显示进度的进度标记,便于用户知道还有多少页。

 

购买飞机票总是需要涉及填写大量的数据,比如选择航班,填写乘客信息,输入付款细节等。维珍大西洋航空通过将其分解成单独页面上的单独步骤,优化了原本繁琐的体验。如果我们把所有的这些都放在一个页面上,可能会让一些用户不得不选择放弃。

 

五、不明确的界面

最有可能造成认知过载的就是会造成困惑的UI,用户永远不会愿意花费很长的时间来思考如何完成他们任务,也不会浪费脑力来破译一个图标的含义。

 

如上图所示,可能很多熟悉计算机的人可以识别出顶部的Windows和Mac OS X的icon,但是右下角的这两个图标则很难被识别

 

解决方案:

不要做重新发明,尽量使用用户从其他网站已经学习和了解的视觉线索。用户通常会依赖以前的经验来进行认知和学习,在从未使用过的网站上也是如此。

如果你认为这样做太过于局限,你可以将熟悉的图案与品牌进行对应的契合,Home Depot使用了常见的图标,但是给图标赋予了它们品牌的橙色。

同样的,对于一些细节,例如使用Contact和Submit等标准的语义的按钮会比使用Address和Go的按钮更容易识别。常用的语义标签便于用户的浏览体验,而不常见的语义会让用户为了弄清楚按钮的功能而不得不停下来思考。所以请保证表意的清晰。

 

另一个方面,如果你有一个从未有过的功能呢?在这种情况,你需要通过结合现实生活来告诉用户这究竟是什么。例如,早期的互联网先驱选择用信封来表示电子邮件,正是因为信封是邮件系统的明显标志。

 

另外,需要尽量避免模糊的符号,特别是如果它们可能会被误认为别的东西或是被混淆的话。下图中,Issuu的一些图标我们很熟悉,但有些则不是。如果用户必须通过点击图标才能发现这个功能是什么的时候,那么这个图标本身可能就有问题。

 

你可以查看Denis Kortunov的 10 common icon mistakes  ,了解要避免什么样的问题,比如图标之间太过于相似或是过于复杂。

 

任何不能很好进行自我解释的页面都需要一个引导说明,来指导用户如何使用。简单的可以用一个弹窗或是一个特殊的图形来解释。对于全新和独特的界面,那么或许可以提供一个实践教程。例如Slack提供了完整的视频教程,来给用户进行解释和引导。

 

六、难以找到的页面和功能

即使用户拥有所需要的一切,他们仍然有可能无法找到它,这和这个功能被破坏差不多。这会让用户浪费脑力,试图弄清楚该做什么。

作为用户体验不可忽缺的组成部分,导航应该是最容易和无压力的。网站导航应该很直观,可以让用户自由的漫游而不用担心迷路。这不仅需要信息架构额外的研究工作,还需要整理整个应用,使其看起来更简单。

 

Mojo Yogurt需要你将鼠标悬停在左上角的徽章上才能显示出导航菜单

MojoYogurt给了一个小的动画作为引导,但是在充满了颜色和动效的页面上,一个模糊的提示是不够的

 

解决方案:

根据用户的喜好,来进行信息架构的梳理。你的目标用户可能不会以你的方式来进行思考,因此你需要向用户学习如何组织网站。卡片测试可以让你的用户告诉你他们是如何归类那些页面和主题的。Tree test可以让用户用他们的理解来评估你的网站结构是否合理。

DanBrown的Eight Principles of Information Architecture阐述了每个设计师应该知道的有关信息架构的八个难点和规则。例如多重分类原理(用几种不同的分类方法来适应用户的不同思维模式)等。

如果某些功能比其他功能更重要,请使用视觉来吸引用户的注意。增加尺寸,添加动效、使用华丽或对比的颜色可以吸引用户的眼球。以新颖的方式显示信息,特别是对应的图形,但请先确保它是可以理解的。

 

Paypal更倾向于引导老用户回来登录,通过设置特殊的白底登录模块来抓住用户。

 

七、内部不一致

假设网站的首页使用标准的蓝色和下划线文字来表示链接,但是另一个页面只使用蓝色,没有用下划线。即使用户从未启动第一个链接,他们也可能会暂停在第二页上思考。他们甚至可能不关心链接,但是由于整体UX的不一致,分散了用户的注意。

错字和语法错误也一样。最好的UX无法看到,但是这样的错误很容易被用户所注意。

一个元素与网站的其余部分不一致,用户必须花一点时间考虑和处理,这就会耗尽工作记忆。

 

解决方案:

在整个网站保持一致的格式,然而这说起来容易做起来难,因为这种类型的错误往往是无意的。

一个style guide可以解决一致性的问题。它将所有可能被引用的样式放到一个地方,当设计师需要的时候可以很快速的访问和使用。像背景色的色值,图像的尺寸、排版的细节等很容易被遗忘的东西,如果可以很容易的获得的话,对设计而言是很有帮助的。

 

对于拼写错误和语法错误,不要只依赖拼写检查器。在发布之前,请务必浏览你的内容。免费的应用程序可以帮助你发现那些比较明显的错误。

 

Pinterest是视觉和功能保持一致性很好的例子。无论Feed中图片的风格如何,格式均保持不变。

标题,描述,作者,网站,引用和活动都以相同的文字大小和排版显示在每张卡片的相同位置。这种一致性使Pinterest可以自由地将这些Card错开,创造更多的视觉吸引力,但不会混淆用户。如果你可以理解一张卡片,那么你就可以理解它们。

 

Takeaways

对于上面的信息进行了一下总结:

·认知负荷是工作记忆负责的所有信息。当信息太多阻碍决策影响了用户的一般经验时,认知过载就会发生。

·可以对内容梳理和让页面更结构化来避免视觉混乱

·隐藏菜单可以帮助用户一次管理可控数量的选项,但是这会以不容易被发现作为代价。

·分组的形式可以避免认知过载。

·利于用户已有的认知经验来进行UI元素的设计,可以让用户不用太多的思考。新功能和独特功能可以通过新手引导来进行解释。

·围绕用户的实际想法来进行信息架构设计。可用性测试(如卡片分类和Tree Test)可以显示目标用户期望的最直观的架构。

·视觉和功能不一致,以及拼写和语法错误将会使用户脱离他们的主要任务。

·尽可能的去掉冗余,另外,请注意尽量减少用户执行操作的步骤和必须消耗的精力。

Shanghai-Pudong