减少认知负荷,打造更好UI的6种方法

多年来,设计师们一直在尝试通过减少摩擦以及为用户创造更多的价值来提高产品效率。虽然很多产品需要传递众多的流程和功能,但是设计师的角色仍然是简化用户达成目标的路径。

设计师们在每一个新的用户界面上都会寻求形式和内容之间的完美平衡。在用户眼中,一切都需要简单化。设计师如何在避免认知负荷的同时降低复杂性呢?

认知工效学(Cognitive ergonomics)的概念为出发点,我们可以认为,认知设计旨在让界面决策以促进浏览者理解为存在,减少短期记忆的负载,加速理解所呈现的内容,防止认知负荷。

什么是认知负荷?

说得通俗一点,只要我们的认知负荷大于我们的工作记忆(working memory)所能处理的范围,我们的大脑就会因为处理能力有限而面临承受认知负荷的风险。

要想更好地理解认知负荷,可以看看其鼻祖 John Sweller 的著作认知负荷理论。Sweller探讨了有助于理解信息的心理路径。根据Sweller的观点,理解在很大程度上受到内容呈现给观众的方式的影响。例如,展示一个正方形的图像比用语言描述更容易被人理解。

在另一项名为「减少多媒体学习中认知负荷的九种方法」的研究中,UCSB的研究人员探讨了认知负荷的几种潜在情况,并提出了一些关于如何减少或防止认知负荷的建议。这些建议中的许多都适用于网页设计的实践。

为什么减少认知负荷很重要?

数字体验通常始于意图:我们在Instagram上查看照片、通过Gmail发送电子邮件或在LinkedIn上阅读消息。

目标达成越难、体验越差、认知负荷越大。根据1993年提出的峰终定律(Peak-End Rule),我们都倾向于根据最关键以及最终时刻来判断一段体验。

困惑的感觉会产生焦虑和挫折感,而这些负面的感觉很可能与你的品牌有关。在考虑用户体验时,我们必须考虑使用有效的认知设计。

在试图解决问题之前先了解问题

在尝试解决一个设计问题之前,纵观全局很重要。人们有不同的目标和背景,所以他们可能会对同一个挑战有不同的理解。有些东西可能对你来说很复杂,但对你的用户来说可能就并非如此了。

花时间研究你的用户如何与你产品的界面进行交互。在对你的用户流程进行更改之前,先观察你的用户并与之交谈,确定可能的认知负荷情况。

做好UI的关键点

为了减少认知负荷,我们需要有策略地决定如何以及何时使用以下方式呈现内容:

让路径清晰

即使我们很想通过尝试呈现多种内容选择的方式让用户能够快速获取自己感兴趣的内容,但我们还是应该尽量简化用户达成目标的路径。将过多的信息集中在同一个地方并不是理想的呈现方式。

成为向导

设计界面就像讲故事一样,用户体验中认知负荷高的主要原因之一就是故事讲得不好。尽最大努力引导用户,保持一致的叙事结构,有清晰的开头、中间和结尾。

采用明确的标准

通过使用模式来减少认知负荷。探索良好的实践,比如坚持遵循用户界面设计的10个可用性启发法,以及使用设计系统来设计一个成功的用户界面。

如何防止认知负荷影响用户体验?

认知负荷的发生并非偶然,很多因素都会造成这种情况。请记住以下这些主要的因素:

过度刺激是你的敌人

请记住:现在是2020年,不是1999年。闪烁的动画和GIF不再是典型的好设计之选。并且,动画和微交互的存在应该有明确的目的。任何形式的视觉刺激都应该用于引导体验而非误导体验。

米勒定律(Miller's Law)指出,一般来说,我们的短时记忆中能够容纳七条信息。这并不意味着一个界面只能有七个元素,但它提醒我们要牢记自己的认知局限,以避免认知负荷。

UAT网站页面上的主要链接出现在加速动画中间,左右浮动,给阅读和互动带来困难。图片来源:https://www.uat.edu/

解决方案

回顾每个刺激背后的意义,并使其与界面的主要目的保持一致。每个颜色、动画、插图和微交互都必须有明确的目的。

在这个个人项目中,Joseph Berry用动画引导观众进入奇妙的沉浸式体验。图片来源https://the-goonies.webflow.io/

更少的选择带来更多的转化

在决定同时显示什么内容时,少即是多。过多的内容会使焦点偏离主要目标动作,降低转化率。希克定律(Hick's Law)告诉我们,选择越多,做决定的时间就会越长。

Arngren网页上众多选择和标准化网格的缺失,阻碍了人们对视觉元素层次的正确认知。图片来源:http://arngren.net/

解决方案

根据上下文将你的内容分离成逻辑组。你可以通过分类学研究、动态卡片排序、以及将内容分成选项卡、区块、屏幕或不同的视觉组来探索选项。

Fiverr除了使用视觉提示(如引导导航的项目符号图标)外,还使用清晰的文字和图片对内容进行分类。图片来源:https://www.fiverr.com

自始至终的一致性

保持用户熟悉的视觉设计、交互和导航。如果搜索栏位于主页的右上角并带有一个蓝色的图标,那么没人希望它跳到下一页的页脚。如果你的销售渠道中的确认按钮总是绿色的,那就确保它一直保持绿色,即使是在那个被遗忘的联系表单的末尾。

不一致的导航会增加认知负荷。图片来源:https://www.cambridge.org/

解决方案

现在是时候让你的设计系统大放异彩了。通过原子系统保持从最小到最大组件的一致性,并将其标准扩展到界面的任何操作,包括导航结构和动画。

当浮动卡片的主CTA因屏幕滚动而被隐藏时会移动到页头,从而保持导航的一致性。图片来源:https://www.airbnb.com/

减少必要的动作

你是否曾发现自己在填写注册表单信息时,不知道为什么需要填写某项内容?消除任何对完成主要任务不重要的内容。额外的字段、多余的信息、验证和点击次数越少越好。

百思买强迫用户做出决定。图片来源:https://www.bestbuy.com/

解决方案

只有在必要时才进行干预。

分析你的内容是否有多余和不必要的步骤。改进默认选项,减少用户的交互需求。

法律要求啤酒网站必须确认每个访问者的年龄。图片来源:https://www.stellaartois.com/

使用熟悉的模式

作为设计师,我们不必总是无谓地重复。经过多年与不同界面进行交互,用户期望看到熟悉的模式。当这种情况没有发生时,工作记忆会发生较大的负荷来处理信息。

即使在今天,MySpace也使用了不同寻常的横向导航。图片来源:https://myspace.com/ladygaga/photos

解决方案

在设计已经被大家熟知的解决方案时,你不必从头开始。

请参考与可用性相关的行业标准,例如人们通常不阅读网页上的每个单词,而是以F-Shaped模式扫描内容。

重复出现的元素,如搜索栏、登录屏幕和导航菜单都有完善的标准。重复使用而不是重新设计。

Mercado Livre遵循现代电子商务的良好实践。图片来源:https://www.mercadolivre.com.br

保持简洁

为了简化心理学家Paul Fitts在1954年的研究中提出的建议,按钮需要大而易懂。让用户更容易做出决定是设计师的责任所在。

这里值得一提的是奥卡姆剃刀(Occam’s Razor)。简单的说,当给你几个产生同样结果的选项时,通常最简单的那个是最好的。

简洁性与可访问性必须齐头并进。

缺乏对比度是认知设计的敌人。图片来源:https://typesetdesign.com/

解决方案

使用负空间(negative space)等特征简化信息的呈现,以强调关键内容。重新审视和应用格式塔原则 Gestalt,如邻近性、相似性和连续性,以优化用户体验,不产生混淆。

避免歧义,同时保持文字的清晰和客观,保持组件符合可访问性原则,并提供必要的帮助量,作为简洁体验的核心要素。

Mural利用负空间和高对比度来清晰地提示页面上最重要的内容。图片来源:https://www.mural.co/

总结

通过所有关于认知负荷的理论和讨论,往往很容易通过产品和业务指标看出一个UI的表现是好是坏。如果没有很好的理由,就不要从根本上改变已经成为标准的内容。最重要的是,观察、倾听,并让与你的界面进行交互的用户发声。只有这样,我们才能设计出能够真正解决用户问题的有用产品。


英文原文:https://xd.adobe.com/ideas/process/information-architecture/6-ways-to-reduce-cognitive-load-for-a-better-ui/
原文作者:Nick Babich
编译作者:微博/公众号@设计吐司

以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271