UX铁律的实践指南

翻译:赵宇航  审校:林有九  |   UXRen翻译组 #381译文
原作者:Ali ÇORAKFollow
原标题:《Better Design with UX Rules, and Psychological Research You Need to Know》

 

我曾研读过许多本UX领域的必读书籍,但《UX铁律/Laws of UX》这本书却一直没看。当我终于读到这本书的时候,我意识到这本书中所展示的内容和其他UX书籍中所介绍的内容有千丝万缕的联系。事实上,你可以把这篇文章看作是这本书的摘要。请我们不单单从平台(platform)这个视角(例如web端、移动端等)来理解UX,而是聚焦在“产品(product)”这个概念上来。

 

1. 聚焦用途(Focus on purpose)

当用户拥有一款产品的时候,他们希望这款产品可以很好地实现其功能。所以用户只是想让这款产品能够在它的核心功能上无懈可击。因此,请去掉所有让用户感到疲惫不堪的冗余流程。简而言之,不要让你的用户“开小差”。

 

2. 尊重普适性习惯(Common habits)

人们对于一款新产品的反应往往取决于其过往学到的习惯。例如,当人们浏览一个网站的时候,他们会期待这个网站或多或少的与之前访问过的网站形似;场景转换到汽车驾驶室,用户会期望一些控制按钮的位置与其他汽车类似。否则,用户重新学习和适应每一辆新车或者理解每一个新网站是如何运作的将会变得异常困难。

 

3. 心智模型(Mental Model)

在现实生活中,我们已经了解了诸多事物的用途。我们在这里需要使用心理模型的理论。为什么我们非要在虚拟设计中学习新事物呢?与此相反,我们应该把现实生活中的设计应用到虚拟设计中来。在《UX铁律》这本书中,作者用这样一张图片充分解释了何为将现实事物引入我们的设计。

控制面板(左) vs 谷歌的material Deisgn设计规范(右)

再举一个例子,苹果建议大家在设计iOS app的图标时使用心智模型。在手机上,你可以看到一个酷似真实文件的图标来代表“文件”这个app;一个齿轮图案来代表“设置”这个app。这些应用心智模型的例子理解起来很容易。同时,正如你所看到的,这么做也非常简单和可预测。

隐喻(Metaphors)

 

4. 枯燥乏味怎么办?(What about boring?)

接下来让我们一起来看看网站的例子:如果每个网站都使用相同的布局,这难道不会使它们看起来都很雷同和无聊吗?既然这样,那么就有必要关注下面的问题了:如果每个网站都不一样,你之前的使用习惯又如何能在新网站上奏效呢?难道我们需要在每次浏览一个新网站时重新学习它吗?

如果忽视了用户习惯,那么你就打破了“聚焦用途”这条规则。因为一个搞不清楚这网站咋用的用户,永远也不会了解这个网页有什么用途。从一开始就考虑用户习惯和可用性时,UI设计等多样的元素会使你的网站变得独一无二。用户至上!

 

5. 可触区域(Touchable areas)

这条法则聚焦于移动端app。一个按钮、一个输入框等等,换句话说,可触区域应该是与人们的手指可轻松触摸相匹配的物理尺寸。在“为手指设计(designing for fingers)”这一章节中,麻省理工大学触摸实验室(MIT Touch Lab)的研究发现人们的手指肚平均宽度是10-14毫米,而手指尖的平均宽度是8-10毫米。

可点击元素之间的间隙(gap)不仅对好点击性(clickability)很重要,也对“是否能点击到正确区域”十分重要。因此,你需要在两个可以点击的元素中间保留一定的间隙。当然,一些公司已经针对元素区域(space)和可点击大小(clickable size)提出了建议。

来源:Apple

虽然这条法则对移动端设备更加重要,但也要注意它对web端和平板设备的影响。特别是,苹果将iPad OS变得越来越像Mac OS,而不是以前那样更像iPhone OS。我认为这条法则将会变得越来越重要,因为iPhone OS、iPad OS或是Big Sur(Mac OS)上设计的所有东西都会彼此和谐相处。

 

6. 复杂性(Complexity)

我们提到人们期望所使用的产品可以快速地实现其功能。这里所说的“快速地(quickly)”实际上是非常重要的。当人们访问一个网站,如果网站上有很多选项的话,那么其响应时间(response time)也会被拉长,这是因为用户选择所用的时间也要包括在总响应时长之内。当响应时长作为一设计的重要指标时,减少网站上项目对减少时长或许有效。根据希克定律(hick law),选项越多,决策时间会指数级增长。

希克定律图示(横轴:可选择的刺激数量   纵轴:响应时长)

请让用户只看到最重要的选项吧。然后把这些选项尽可能设计得清晰、明确,如果我们减少项目的同时又使用直觉式设计或解释,用户就得先理解它们(然后再进行决策)。这样响应时长又增加了。

当用户浏览网站时,他们总是尽可能快地浏览选项,然后思考并决定哪一个选项可以帮助他们找到最快的解决方案,最终点击那个选项。整个过程中,没有套路或公式,就是各种尝试。因此,这也难怪web端用户最常使用的按键是“返回键(back)”了。根据认知负荷理论,等待页面加载、理解界面、检查选项等过程需要消耗用户的心理资源。

关于选项的提供,我是这么看的。例如,对于移动端应用,大多数人会在默认设置下使用app。这时,你就应该优化默认设置,使其对用户最有帮助。至于那些不愿意使用默认设置或者对当前选项不甚满意的用户,他们自然而然地会更加深入了解这款app。我借用一个知名的例子(遥控器按键)来说明如何提供更少选项(见图)。

 

7. 组织(Organize)

把网站的相似内容分组,可以使网站看起来更有条理。例如,经过组织之后群组可以放在同一个大类别(category)里。这里最重要的是,整合后的群组一定要彼此相关联。同时,在确定大类之后,你应该起一个合适的名称来涵盖该类别所包含的一切内容

在完成组织之后,下一步要聚焦图标(icons)。图标的作用类似于我们的心智模型。尽管现在还没有图标应该长啥样的权威标准,但当我们说到“收藏”图标时,我们总是第一时间想到星形或心形。同理,当我们看图标的时候,其背后的隐喻也会进入脑海。因此,即使不同的设计所使用的图标千差万别,它们的含义确是大多是可以被猜到的。

我们组织内容,给设计加上图标,并给类目起名,一切都很完美。但有些设计师倾向于在移动端app中不显示类别名称,例如底部的标签栏。如果这不是一个定制化设计,尤其是设计需求里并没有如此要求,我们还是建议把名字展示在界面中。这样一来,当用户猜测类目图标的含义时,他们有机会通过名称来识别。

 

8. 格式化/组块化(Formatting / Chunking)

目前,很多人对米勒法则(Miller’s Rule)中的某些观点存在误解。首先,让我先来谈谈那些正确的观点,无论是数字、文字还是物品,人类的大脑都是将事物分组记忆的。米勒所谓的那个神奇数字7是指人们可以在短时记忆中保存7±2个单元(item)。我们在用户体验设计中,常常会应用到这一规则。但有时,我们却没有正确地使用它。例如,这个 “神奇数字7”并不是万能的。我们可以在一串数组中记忆7个数字,也可以很轻松地记下7个单词。然而,对于一个普通人来说,记下7句话是几乎不可能的。因此,在设计中,只有将数字7应用于“群组”才更加合理。

未分组处理的电话号码 vs 分组的电话号码

综上所述,按照米勒法则来看,人类的短时记忆是有限的。有时会起作用,但有时又没什么必要。

 

9. 掌控(Control)

用户希望掌控他们使用的产品、设备、亦或是正在浏览的网站,而不是被它们“掌控”。究其原因,是因为用户希望得到安全感,而处于掌控地位恰恰可以带来这种安全感,认为产品也是安全的。例如,当你的app需要获取手机中的相机权限时,苹果在其《人机界面交互指南》中给出了“如何提出请求/问题”的指导建议。这些细节给用户提供了信心也使他们更有掌控感。

产品不仅需要提供安全感,更需要让人使用起来觉得舒适。一个好的产品理应帮助到每一个目标用户。例如,设计时应尽可能地消除那些可能给残障人士带来的不便(可达性/无障碍,accessibility),尽可能兼容用户设备,以及即使是在网速缓慢的情况下也能保持高效。

有一些很好的例子完美契合我的上述观点。人脸识别技术(Face ID)就是其中之一,它非常安全且简单易用。如果智能设备上应用了Face ID技术,利用它来进行人脸支付也是一个很好的例子

让我们重新探讨一下可达性(accessibility):不仅界面是无障碍的,操作产品的所有过程都应是无障碍的。整个体系的可达性需要一个设计系统(design system)来支撑,你能够在Design System这个网站上找到很好的例子。当我们讨论可达性的时候,首先映入脑海的便会是界面。所以,让我们再给出一些界面的例子:例如,文本区域的大小是会随着正文的语言(英文、中文等)不同而随之改变的。以英文为例,其他语言可能不会像英文那样紧凑,因此在翻译成其他语言之后,整个文本区域可能会变长或缩短。

另外一个界面的例子可能耳熟能详:阅读的方向(从左至右和从右至左)。这是一个直接影响用户习惯的因素。把文本简单镜像并非唯一的解决方案,也许设计中的某些组件也需要被镜像处理。

最后,让我们来探讨一下字号大小的影响。多数用户通常会使用产品的默认配置,但某些用户会更改。例如,对于一个网站来说,浏览器默认的字号大小是16像素。但当我们调整字号时,例如我们增大字号,又会发生什么呢?如果我们的网站是响应式设计的,则对于用户来说,这是非常棒的;反之,如果我们的网站不能很好地适应放大字号的操作,则整篇文章就会是一团乱麻。在移动端设备上修改字号亦然。Apple WWDC 2020曾经提到一个很好的例子,随着SF Symbols 2的更新,苹果系统上的图标可以与字号大小和线条粗细相匹配。

苹果SF Symbols 2的图标缩放

因此,请记住,人是会犯错的。电脑系统可以在不考虑字体、颜色、大小和设计的情况下正常运转,界面对于电脑来说也没那么重要。但人脑不是电脑,把人当成机器来考虑是大错特错的,在人们可能犯错误的地方,我们应该不断改进。

 

10. 印象(Impression)

这是我最喜欢的一条法则,一条总可以帮助你的产品给用户留下好印象的法则。人们往往根据他们的情绪巅峰体验(好的或者是坏的)来评价他们的完整体验。他们不会把自己的全部感受平均后做出折中评价,也不会将自己的体验和他人进行比较。

人们可以很快地做出决定,但有时这种决定往往是片面的。这也是所谓“认知偏差”中的一种。人们想起的总是体验即将结束时达到高峰的时刻。而人们总是习惯于用这种时刻来评价体验。这就是所谓的“峰终定律”。把最好的留在最后会是一个给用户带来良好体验的绝佳选择。

我前面提到人们希望可以快速达成目标。知道离达成目标还需要多久可以很好地激励他们。这就是所谓的“目标趋近效应(goal gradient effect)”。同时,这也是一个可以提高用户体验的积极效应。目标趋近效应和峰终定律可以一起发挥作用。最常见的例子就是连锁咖啡企业常常会在消费者购买一定数量的咖啡之后提供免费咖啡。这样既明确了目标也让最后的免费咖啡给用户留下了一个美好的体验。

当然,如果一些不可预知的原因给用户带来了不好的体验,我们也应该把它展示给用户。例如,如果用户点击的页面确实不存在,最好提前准备一些非常漂亮的404页面。我最近通过一个推荐网站访问了奔驰汽车的官网。我希望可以看到奔驰所使用的技术信息。然而,我尝试了所有的跳转和浏览后仍然无济于事。最终,我看到的是404页面。这个页面做的太棒了以至于我离开网站时甚至忘了最初的目的,在脑海中只留下这个404页面。

 

11. 设计(Design)

人们认为好看的设计更加有用。伴随“好看”而来的是美学价值和产品的可用性。对于喜爱的产品,人们往往会忽视一些小的问题,因为据研究表明,好的设计可以给人们的情绪带来积极影响。

万事有利就有弊。我说过人们会因为一个好的设计而忽略一些小的问题,如果这种因为优秀设计带来的乐观情绪持续存在,那么可能会出现很多可用性问题而没有人注意到。更有甚者,一些严重的错误也可能被忽视。因此,在可用性测试的时候,观察用户的行为可能更加有益。

另外,设计师可能专注于美学价值而忽略了可用性和可达性。所以,我们不仅要关注网站的“颜值”如何,也应关注它是如何运行的。

 

12. 不同(Difference)

冯·雷斯托夫效应

人们可以很容易地注意到事物之间的不同。这就是所谓的“冯·雷斯托夫效应(von Restorff effect)”。与众不同则醒目。但如果要强调的地方太多,就会变得毫无意义。想象一下我写了这样一段话,重点在哪里并不清楚。相反,太多强调可能会被当做广告甚至是垃圾信息。“广告盲区(banner blindness)”就是一个很好的例子。即使差别再小,人们也可以在几毫秒之内发现不同。因此,借助用户需要关注的信息来“适配设计”。我的意思是,如果你做出的是非预期的改变,即使这个改变再大,用户也不会注意到它。原因很简单,用户会忽视这些改变。

如何在设计中彰显不同呢?一些大家熟知的方法包括:用不同的颜色、不同的大小、不同的形状、动画效果、负空间设计(negative space)。当我们用颜色和动效来彰显新颖性时,你应该重新审视一下这个设计的可达性,同时考虑到那些色盲用户和对动效敏感的用户。

经常使用这一法则是对这个法则本身的践踏;因为在众多元素中,只有一个与众不同就足够了。

 

13. 屏幕和性能(Screen and Performance )

用户需要快速加载页面并在屏幕上看到结果。根据HTTP archives网站的数据记录,2010年的网页尺寸和现今的有巨大差别。然而,如果不注意的话,网页的增大可能会导致加载延迟。

我之前提到掌控,用户希望处于掌控地位。而缓慢的页面加载会让用户觉得失去控制感。这种延迟越大,失控感越重。

但延迟有时候也是必要和有益的。人们有时需要时间来思考和观察产品的反应。对于一个在操作之后便飞速闪现在屏幕上的答案,用户有时会觉得非常奇怪,甚至可能觉得这个页面也许并没有加载或是出现了错误。这也就是为什么一些设计有意识地加入了一些延迟。然而,不管是有意还是无意,延迟都不应超过400毫秒。

那么,一旦延迟超过了400毫秒,我们又应该怎么做呢?在加载页加入一些动画,可以有效地减少延迟感。在这种情况下,进度条也可以视作动画。

网飞的logo动效

另外一个方法是使用骨架屏(Skeleton Screen)。骨架屏为用户展示了信息会在什么位置、以何种方式加载,这样就会使用户觉得这个页面正在加载中。

页面启动-骨架屏界面-两者的一体动效

最后我想谈谈图像模糊技术(blur up technique)。该技术会用高斯模糊对高分辨率的图片进行处理后,加载其低分辨率版本,然后再替换为高分辨率版本。因此,在图片完全加载完成之前,屏幕不会保持空白,而且高分辨率的图片也不会因为被首先加载而产生延迟。即使拥有这些有效方法,页面从无到有,用户最多也只会专注等待10秒钟。请注意,我这里说的是专注,我们之前已经提到过,如果一个页面需要10秒来加载,对用户而言将是一个非常糟糕的体验。

延时补偿设计(Optimistic UI)是另外一个我想要讨论的话题。我们可以简单地将延时补偿设计定义为:在用户等待服务器响应的同时在界面中显示结果。当你用通讯软件发出一条信息时,这条信息会等待服务器那边的指令而发送。在这时,你的信息还没有被发出去。但在延时补)设计的情境下,“已发送”会显示在屏幕上。这项技术对于发送讯息、点赞和保存这些功能来说是必不可少的。因为用户会期待在屏幕上给出一个快速回应。

这是前端设计开发平台codepen.io上的例子,请尝试理解这三种模式的区别

 

14. 科技向善(Ethic)

我们知道很多心理学方法可以为用户提供舒适感,而且我们一直在学习新的方法。我们必须借助这些信息为人们带来益处,而不是浪费他们的时间。而很多社交媒体的做法缺乏科技道德,这甚至会导致一些用户出现心理问题。社交媒体上瘾(Social media addiction)就是我们经常听到的其中一个心理问题。

(未完待续)

 

原文来源:https://uxplanet.org/better-design-with-ux-rules-and-psychological-research-you-need-to-know-df4c9d8dd2b5(2021.01.20)
版权声明:该文章在UXRen公众号(cnUXRen)首发后方可转载,转载时请注明出处及译者、审校者信息,如有违背,UXRen社区保留侵权追责的权力。

2 条回复

  1. 头像 匿名说道:

    九叔赛高

  2. 头像 匿名说道:

    科技向善

发表评论

您的电子邮箱地址不会被公开。