小纽扣

好的用户体验是不会让用户注意到并毫无察觉的一种体验。表面上看似非常简单,但实际上设计师已经做出了非常多的设计思考。用户越少的去思考界面,用户就越能专注他们要完成的目标。在浏览页面时,用户的注意力不应该停留在界面和设计上,他们更应该关注的是如何达成他们的目的。所以作为设计师的首要工作就是通过事先清除障碍,为用户提供直达目标的途径。

“通常,飞速行驶的货车不可能轻松地停下来。因为运用更多的动能去改变运动状态是非常困难的。与其强迫人们从他们的主任务上转移注意力,不如直接带他们去他们想去的地方。”

——Luke Wroblewski,谷歌产品总监

 

换个思路来看。复杂和混乱的界面会迫使用户去寻找解决问题的方法,而通常情况下,这些方法并不是一目了然的。用户会因为过多的选项、界面、导航等感到困惑,用户可能会在思考过程中感到不知所措。即便是很短暂的停顿,也足以让用户离开。

这种过度的思考就被称为认知过载,在这篇文章里,我们将为你解释如何避免认知过载。首先,我们需要明白我们大脑中存在过载风险的原因。

Image title

 

认知超负荷的科学根源

认知过载是指工作记忆中脑力处理的信息总量过多。当你的工作记忆接收到的信息超出其可以轻松处理的信息时,就会发生认知过载,从而产生挫败感。

但这究竟意味着什么?工作记忆到底是什么?针对这些我们又应该怎样进行设计呢?那就让我们先来了解一下认知负荷理论的起源吧。

 

JOHN SWELLER和认知负荷理论

虽然对认知的研究可以追溯到几个世纪,但直到20世纪80年代,澳大利亚教育心理学家约翰·瑞勒才将这项研究应用于教学设计当中。Sweller试图为每一种类型的学习者找出最适合他们的学习方法,让他们可以记住他们学到的所有知识。换句话说,怎样的课程设计才是最佳的呢?

Sweller在1988年出版了“ 认知负荷理论,学习难度和教学设计 ”,这使他的研究工作达到新的高峰,于1994年重新修改并重新发表。他的研究中运用了数据组织结构中的图表数据库,讲述了有效和无效的教学方法,而他对于工作记忆负荷极限的研究结果才是设计师们找到的最有用内容。

Sweller的研究在许多方面扩展了George Miller的信息加工理论。George Miller是一位认知心理学家和语言学家,他在20世纪50年代测试出短期记忆的极限。Miller的研究在于数字化设计,尤其是分块技术方面,这将在后面讨论。另外,Miller还创作了论文“ The Magical Number Seven, Plus orMinus Two“,这个理论促使许多设计师将菜单项的数量限制在5和9之间。

虽然这些理论最初是针对教育领域的,但它们同样适用于用户体验(UX)设计。

 

工作记忆

如果你每次打开冰箱,都必须回答一个像谜语一样的问题,“什么东西小的时候四只脚走路,长大了以后两只脚,而老了以后有三只脚?”这是一个老段子。但是,根据认知负荷理论,使用这种让人无奈的用户体验设计会让用户产生挫败感。

Image title

要理解认知负荷理论,你必须要了解什么是工作记忆,大脑在短时间内用于完成任务的过程便是工作记忆。工作记忆必须借助外部刺激和短期记忆,并在需要时从长期记忆中抽取。通俗一点说,工作记忆相当于计算机内存,而长期记忆则相当于硬盘驱动器。

工作记忆和短期记忆通常可以互换使用,但它们略有不同。工作记忆是处理信息的过程,而短期记忆更像是一个信息的便签本,它虽然重要,但却没有长期记忆重要。

让我们看看这篇文章是如何解释这些差异的。在你阅读的时候,你可能会遇到一个用蓝色字体书写的陌生概念。你的工作记忆需要知道蓝色文本是什么意思,才能够理解文章更深层的含义。你的长期记忆知道蓝色文本表示链接,因此你的工作记忆知道点击该链可以获得更多信息。与此同时,你的短期记忆会记住你在文章中的位置,这样当你从外部页面返回时你不会迷失,但到了第二天早上,该位置就会被遗忘掉。

Image title

 

设计中的应用

Steve Krug(史蒂夫·克鲁格)是一位很有影响力的作家,他在网页设计中极力推崇认知负荷理论。他的书《Don’t make me think》被许多设计师认为是有巨大影响力的著作。

书中记录了许多宝贵的经验,下面就列举一些最受欢迎的:

  • 1、每一个页面都要清晰明了。
  • 2、用户倾向于“满意” – 也就是说,采取一个最简单的解决方案来解决他们的问题,而不是最好的解决方案。此外,作为习惯的生物,用户将一遍又一遍地使用相同的方法解决问题,而不会刻意寻找一个更好的选择。
  • 3、当新用户可以熟练使用该系统来实现他们的目标时,系统的可用性就足够了。
  • 4、用户使用网络的绝大部分是想要节省时间。因此,用户的行为通常会像鲨鱼一样“保持移动,否则就会死亡”。
  • 5、后退按钮是Web浏览器最常用的功能。
  • 6、屏幕上显示的主页按钮即使从来不被用户使用,但也能让用户感到放心。

总之,用户在浏览网站过程中哪怕是一瞬间的思考,也会对他们的工作记忆造成负担。例如 “这个可以点击吗?“首页按钮在哪儿?”和“我怎么保存?”等等问题,都会不同程度破坏用户体验。

 

认知超负荷最常见的原因

许多设计元素都有可能对用户的大脑造成超负荷,外界环境中会有更多的因素它们超出了设计师的控制范围。例如:一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰,此时,无论你的网站设计多么简单,这些都会耗尽他们的工作记忆。

我们要知道每个用户的工作记忆能力都不同。随性的用户比那些对每一件小事都无比关注的用户更能专注于你的网站。不经常上网的用户往往比经验丰富的网络用户思考的更多。

虽然我们无法量化所有的认知过载,但我们可以尽量的去避免他的产生,下面,我们对网页设计中最常见的类型以及避免它们的最佳方法进行了分类说明。

 

1.不必要的操作

用户的每一步操作都会增加他们的认知负担。过多不必要的操作会打断用户的思路或者会让用户抓狂。因为用户的工作记忆都集中在完成特定的目标上,所以多余的操作将迫使用户投入更多的精力,这样就需要更多的工作记忆才能完成任务,所以,那些不必要的操作步骤很考验用户的耐心。

速度和节奏是让认知负荷最小化的基本因素。用户希望以轻快,目的性很强的步骤来完成任务,所以应该提前消除一切延迟。
Image title

用户希望在他们提交邮箱地址之前就知道他们将要进入什么网站,但Touch of Modern却要求用户在使用之前必须进行注册!这个强制而又多余的行为将会吓跑很多的潜在用户。

 

解决方案

下面这个方法,可以帮助我们找到不必要的操作有哪些:列出用户要完成任务必须要去做的步骤。例如发送电子邮件:

  • 1、点击电子邮件图标。
  • 2、点击“发送到”输入框。
  • 3、输入电子邮件地址。
  • 4、点击“主题”输入框。
  • 5、等等….

现在,重新审视列表并且找出可删减的操作步骤,想到什么了吗?你可以通过将光标一开始就自动定位在“发送到”字段就可以删除步骤2.这将减少用户的操作,虽然很微小,但你消除的每一步对于用户来说都是友好的。

Image title

我们来看看谷歌的主页。光标一开始就在搜索输入框当中,因此用户所要做的就是开始输入文字。这些微小的交互提升了整体的用户体验,所以不要忽视它们。

 

2.过度刺激

杂乱无章的页面会分散用户的注意力,使用户无法专注他们想要完成的目标。就像有好几个人同时与你交谈时你会很难集中注意力,当页面上太多的图片、动画、图标、广告、文本类型和鲜艳的颜色夺取你的注意时,就会很难集中注意力。

记住,每个人的工作记忆在完成目标的过程中,会因为外界的刺激对每一步工作重新排序。每一次分心,尤其是视觉上的强烈刺激,都需要消耗用户的一部分注意力。

Image title

LINGsCARS就是个极端的例子,你可以看到有强烈对比的颜色和绚丽的动效冲击着人们的感官。在屏幕上,即便在两个不同位置同时进行的动效依然会对用户造成过度刺激。

 

解决方法

首先,减少一切不必要的元素。仅保留必要的内容通常是最佳的选择,减少加载时间并简化体验。用户更喜欢视觉简单的网站,而不是视觉上复杂的网站。

你还可以进行内容区分以达到平衡的效果。太多相同的内容(比如文字或图像)会让用户感到厌烦。所以,视觉内容要进行合理的组合,图像、视频、信息图表等,能够使页面和谐,并便于用户理解。

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

Image title

在抽取出一个页面上必须要展示的元素之后,你应该采用一种让用户立即能够理解的方式组织这些元素。对称或者不对称的信息布局显示都可以很快的被用户所理解,也就是说,用一种方式,尽可能的减少大脑的工作。这样不仅对称和不对称都能让眼睛感觉很舒适,而这样的结构也能让界面交互更容易。

下面来看一下Groupon是如何布置页面的吧。左中是文本类的垂直菜单,右中是一个有特色的冻酸奶交易文本描述,插在文本中间的照片和色块的使用,分分钟创造出一个让人喜爱的沙漏结构。

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

Image title

对称不仅仅是在屏幕的两侧应用相同的布局,它是视觉重心和视觉方向的平衡。通过这种方式,非对称页面也能看起来很有组织性,如下图的OTHR所示。

Image title

将你的页面内容精减到只包含简单的和非竞争性的元素,这只是完成了预防过度刺激工作的一半。。不要忘记要以简单的布局呈现这些元素。

 

3、太多选项(希克定律)

这有点自相矛盾:用户需要更多的选择,但是往往太多的选择会使他们的大脑超负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户拥有的选择越多,他们做出决定的时间就越长。

作为设计师要去理解库克定律,可以把每个选项看作是明亮的闪光灯,如下所示,太多的闪光灯会过度刺激用户。

Image title

甚至像Rakuten这样的知名网站也会犯类似的错误,因为他们没有真正的理解这个设计原则。给用户需要的而不是给他们认为他们需要的。

 

解决方案

假如你已经解决了不必要的和多余的选项,你可以将他们分别放入不同的组进行分类,你可以在百货商店的网站上看到很多例子,这些网站拥有广泛的产品选择。

它不一定是太多的选择, 只是一次有太多的选择。如果你可以用隐藏菜单,抽屉和拉出其中的一种方式隐藏一些选项,那么你将获得两全其美的效果,这些超级菜单虽然为用户提供了许多选项,但一定程度上不会给用户带来很大的负担。

Image title

但是,隐藏式的导航栏不利于发现,因此电子商务和新闻等行业的设计人员应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)从而最大限度地减少隐藏菜单的缺点。或者你可以归纳导航菜单的类别,将它们精简为单行导航(如Apple和CNN那样)。

Image title

你还需要注意应该如何组织整个网站的导航。许多与库克定律有关的问题可以通过管理信息架构(IA)来处理,我们将在下面的“难以查找的页面和功能”部分中讨论。

 

4.太多内容

就像过度刺激和选项过多的问题一样,提供过多的内容会将用户的工作记忆拉向不同的方向。

显然,你希望展现的只是重要的内容,但对于一些网站来说,一切都是重要的,如果你的网站也有非常多的内容,为了避免让用户产生困惑,应该对内容信息进行和里的组织规划。

Image title

Arngren的问题并不是它展示了很多的产品,而是它同时展示了太多的产品。在组织结构上的调整将会给网站带来更好的体验。

 

解决方案

如上所述,George Miller的解决策略是“分块”,将需要展示的大量内容以可管理的方式组合起来,以便于记忆,电话号码分为国家代码,区号,一组三位数和两组四位数字便于记忆,而一连串的11个数字会很难被记住。

你想在商店主页上放大量产品的图片吗?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

Image title

还有文本组块,文本组块包括简短的自然段,合理利用标题和副标题以及足够的留白。

对于需要大量数据的长表单字段,可以尝试采用多步骤表单。长表单可能会令人生畏,有时会导致用户流失。你可以将表单的信息分在不同的页面里,减少信息过量给用户带来的影响。记得一定要有一个进度标记来让用户知道还剩下多少页。(可以总结为复杂的页面简单化)

Image title

购买机票总是涉及填写大量的信息,其中没有一项是多余的。Virgin Atlantic通过将其分解在多个单页面上填写来改善其繁琐的体验:选择航班,填写乘客信息,输入付款详细信息等。将所有这些信息放在一个长页面上会对用户造成负担,也有可能会放弃购买。

 

5.模棱两可的界面

认知超负荷的罪魁祸首先就是用户界面混乱。永远不要让用户花费大量的时间来弄清楚他们如何才能完成想要的目标,以及花费时间来弄清楚图标的含义是什么。

Image title

并非所有用户都是经验丰富的,从而可以理解SpeedCrunch这种含义模糊的图标。即使他们能够识别代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标也会让用户迷茫。

 

解决方案

使用用户已经熟知的视觉提示。用户通常会用他所熟悉的符号来进行操作,即便是在以前从未使用过的网站上也是这样。如果你觉得没有新意,可以融合品牌特征巧妙的结合成为用户所熟悉的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。

Image title

标准标签(如“联系人”和“提交”)的按钮比非传统标签(如“地址”或“开始”)更容易识别。通常已知的标签可以提高用户的浏览体验,而不常见的标签会让用户暂停以了解按钮的功能。不要为了个性化而丧失了识别性。

另外,你如果真的需要一个从未见过的图标该怎么办呢?如果这样,可以运用现实生活中的场景展示来让图标进行自我解释,这种做法是连接现实和虚拟的桥梁。例如:早期的互联网先驱选择了一个信封来代表电子邮件,因为信封是邮件系统的明显标志。

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

Image title

任何一个表意不清的图标都应该附带说明,告诉用户怎样操作。新的并且不常见的用户界面,就需要更多的分步教程。例如,Slack就给出了一个完整的视频引导来说明界面的操作流程。

Image title

 

6.难以查找的页面和功能

即使用户已经拥有他们所需要的一切,但他们可能还是不知道如何去寻找它。这样就会让用户费尽脑力去寻找他们所需要的。作为用户体验中不可或缺的元素,导航应该放在明显的地方,给用户信心去任意浏览网站而不会迷失。

Image title

如果你觉得汉堡包图标不好,那可以在看看Mojo Yogurt,它会要求你将鼠标悬停在左上角的徽标上以显示导航菜单。

Image title

虽然围绕着Logo有个小的动效,但对于整个屏幕的颜色和动效来说,它并不够明显。

 

解决方案

根据用户的偏好理顺你的信息架构。你的目标用户群可能并不认可你的做法。因此,要想他们学习如何组织网站,卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

Image title

如果你还希望通过组合页面和菜单项来消除多余的页面。设计工作室Waaark通过将其工作室的简介,团队成员简介和联系信息这三个页面合并到一个页面来简化他们的导航。

Image title

如果某些功能或特征比其他功能或特征更重要,可以运用视觉手段来吸引他们的注意,增加大小,添加动画以及使用对比色以此来吸引用户的眼球。

Image title

PayPal期望有更多的老用户而不是新用户,并通过设置登录按钮与吸引注意力的白色块背景来迎合前者。

 

7.内部不一致

假设网站的主页使用标准的蓝色和带下划线的文本来表示链接,但另一个页面仅使用蓝色而没有下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页面的不统一分散注意力从而影响整体的用户体验。

要记住,最好的用户体验是不会被用户所察觉的,而像上面这样通常都会被注意到。

 

总结

1、认知过载是影响工作记忆的因素。当过多的信息阻碍决策和整体经验时,就会发生认知过载。
2、使用不同的内容类型和结构化页面组合,可以避免视觉混乱。
3、隐藏式菜单可以帮助用户一次管理可用选项的数量,但降低了可发现性。
4、“分块”和“步骤”等的方式可以防止认知过载。
5、UI元素和图标应该基于用户现有的认知上,这样他们就不需要过多的思考,新的独特的功能要加上解释说明。
6、围绕用户的实际思考方式构建你的信息架构。卡片分类等可用性测试可以为你的目标群体揭示最直观的导航方案。
7、视觉和功能的不一致,以及打字错误和语法错误,都会分散用户的注意力。
8、尽可能减少冗余。另外,请留意如何最大限度地减少用户操作步骤量和他们必须花费的精力。

 

原文地址:SMASHING

译文地址:UI中国

作者:Danny

译者:Coldrain1

 

转载请注明:学UI网 » 减少认知过载获得更好的用户体验

登录收藏
 
你可能喜欢的:
设计沉思录|美事升级,不止于改版设计沉思录|美事升级,不止于改版
漫画内容设计之专题三板斧漫画内容设计之专题三板斧
案例:如何优雅地用卡片分类法,搞定烦人的用户需求???案例:如何优雅地用卡片分类法,搞定烦人的用户需求???
造物节品牌设计全过程造物节品牌设计全过程
设计师正在参与的战争——争抢用户注意力设计师正在参与的战争——争抢用户注意力
数据可视化设计经验分享,城市GDP大屏案例【进阶篇】数据可视化设计经验分享,城市GDP大屏案例【进阶篇】
2019双11技术大屏(下) 光明顶监控大屏设计赋能提效2019双11技术大屏(下) 光明顶监控大屏设计赋能提效
2019双11技术大屏(上) 体验设计全流程2019双11技术大屏(上) 体验设计全流程
设计沉思录|这一次,我们尝试设计了仪式感设计沉思录|这一次,我们尝试设计了仪式感
设计沉思录|设计师应该了解的响应式知识设计沉思录|设计师应该了解的响应式知识