你是否有过这样的经历:下载了一款新的 app,满怀期待地打开,却发现自己完全搞不清界面上的各种按钮和图标是什么意思,不知道该如何操作?

这其实是个非常常见的问题。

Snapchat 的原始设计经常因为不直观而受到批评。可以在 Beebom 提供的图片中看到,它早期采用了以相机为中心的界面,其他功能的导航并不明晰。

Original Snapchat Design
图片源于:https://beebom.com/old-snapchat-ui-android/

那么,如何设计一个初次使用的人也能轻松上手的 app 界面,让用户无需费力探索就能理解其使用方式呢?

这就要用到心理学中的一个重要概念——可供性(affordance)

Snapchat 后来实施的优化设计旨在提高可访问性和可供性,这在 TechCrunch 的图片中展示出来。这次重新设计旨在明确区分社交互动和媒体内容,使用更易理解的图标,并改善整体布局,使核心功能更易访问。

图片源于:https://techcrunch.com/2020/06/11/snapchat-redesigns-its-app-with-new-action-bar/

从最初更加晦涩的设计到更清晰、更用户友好的布局,这就是注重可供性能为界面设计带来的变化。

设计中的可供性

Affordance(可供性)指的是基于个体感知的物体或环境所提供的潜在行为或用途。它可以被定义为环境提供给个体的行动可能性,是环境与个体之间的关系属性,强调个体基于环境感知的行动潜能。它由心理学家詹姆斯·吉布森引入,用于描述环境与个体感知和行为之间的关系,并后来被设计师唐·诺曼(Don Norman)应用于设计领域。

可供性的一个例子是椅子,椅子提供坐下的可能性,这是它提供给个体的潜在行动。同样,楼梯提供爬升的可能性,门把手提供抓握的可能性,电脑鼠标提供点击的可能性。这些例子说明了可供性是基于个体对环境的感知和他们可以采取的行动。

affordances in door handle design
图源:https://www.pixelfridge.digital/what-are-affordances-and-why-do-they-matter/

在设计中,可用性暗示了物体应该如何使用,通常通过内在的设计元素来实现。它的效率在一定程度上依赖知识和经验,比如说对于相似物品的文化传统、先前经验中的使用,能够塑造我们该如何使用某件物品的期望。

可供性设计如何帮助我们?

假设我们看到一个陌生的咖啡机,咖啡机的按钮把手等部件提供了某些可供性,如「按下按钮可以启动」「转动把手可以调节」等。但我们能否有效利用这些可供性,取决于我们以往使用咖啡机的经验,以及我们所处的文化环境中咖啡机的常见设计和操作方式。如果这个咖啡机的设计与我们过往经验或文化习俗中的咖啡机差异很大,我们可能就难以有效感知和利用它的可供性。

当这个物品的物理属性能够清晰地反映出它的功能时,它就能体现出非常强的可供性。相反,如果物品非常具有误导性大,或者没有提供足够的线索去获取,这可能就会导致非常薄弱的可供性,随之而来的就是导致误解或者错误使用。

好的设计都会有非常清晰的可供性。在交互设计以及用户体验的领域,可供性可以在不需要具体了解的情况下,帮助用户理解如何操作使用界面。

根据 Gao 等人做的研究,可供性作为设计线索,可以帮助用户毫不费力地识别物品的用途。一个明显有可供性的 app,用户可以无需提前训练就轻松使用。因为界面元素能让使用者立刻了解功能。比如,凸起的按钮表示可以点击,滚动条表示可以上下拖动以查看更多内容。这些基于熟悉对象和操作的提示,能让用户快速上手新软件。

再比如说在地图软件中的加减号,就能让用户知道按下这些按键能够使地图放大缩小;还有搜索条上面的放大镜以及搜索框,就能让用户明白这里可以打字然后搜索。

低可供性设计带来的问题

相对地,如果可供性非常薄弱,甚至具有误导性,用户就需要努力识别软件的用法,必然增加一定的认知负荷。这就会导致一些错误使用、降低使用效率,至少产生一条很陡峭的学习曲线,要求用户大量思考基础操作,最终导致疲倦,使用感极差。

常见的错误比如,交互线索不清晰、设计元素前后不一致——有一个经典的可供性缺失的例子就是「诺曼门」。

你有没有曾经走近一扇门,却不知道该推还是该拉?如果有过,那这扇门的设计就不够清晰。一扇设计良好的门应该能够轻松地向用户传达如何与它交互,最基础地,比如写上一个「推」字。

Norman door

对 app 来说,常见的问题表现为:

  • 设计中包含不清晰的交互线索。比如选择的扁平化设计元素看起来像静态图片,而不是可点击按钮。
  • 设计元素的不一致。比如说相似的元素却有截然不同的应用,这就打破了用户的期望,使用户常常需要花心思去理解。

不清晰的交互线索还包括隐藏功能,这些功能一开始看不到,需要进行操作才能看到。例如 iOS 下拉菜单、iOS 操作表、工具提示或悬停在按钮上显示交互性,还有之前的 3D Touch。

隐藏功能是设计师可以减少视觉负担和复杂的好方法。下拉菜单或操作表将隐藏不同的内容选项,只有当用户与菜单项交互时才会显示。如果设计不够清晰,这些隐含的可操作性可能会被忽略,导致糟糕的用户体验。

图源:https://www.pixelfridge.digital/what-are-affordances-and-why-do-they-matter/

如何增强 app 设计中的可供性?

比较常见的增强可供性的理念在这里列举三个:以用户为中心、视觉交流、交互设计。

  • 关注最终用户的需求,从用户角度进行设计,确保界面设计符合用户的使用习惯以及期望偏好。
  • 有效地使用视觉元素来传达软件组件的使用方式,包括色彩、排版、布局、图标和视觉层次。
  • 促进参与性和可用性的方式制作交互元素,包括手势界面的操作以及用户如何操作屏幕元素。

从用户的角度去增强可供性中,有一个角度是根据用户的使用习惯或者是思维惯式来设计。与之对应的,是心理学术语 Schema,指的是人们在大脑中形成的,关于世界和事物运作方式的心理结构或框架。这些结构帮助个体组织和解释信息,是从以往的经验中构建的,并可以影响个体对新信息的注意、理解和记忆。

Schema 可以帮助每个人加快信息处理速度和提高效率,就像是大脑中形成的一个定式,当你看到某个物品的时候,脑中就迅速产生该物品的惯常用途,通过过滤掉不必要的细节,使人们能够快速理解和响应周围的世界。

Mac OS icons

比如上图这样,我们看到音符就能想到音乐,看到书籍就能想到阅读,看到摄像机就能想到视频,看到像垃圾桶一样的东西,加上计算机的环境,我们就能想到清理垃圾文件。这些都是很自然的反应。

像常见交互元素中的悬停状态,当鼠标光标移动到一个元素上时,我们会改变其视觉状态,这告诉用户点击会有所作为。改变鼠标指针本身也是一种常见的提示。

Hover states
图片源于:https://www.pixelfridge.digital/what-are-affordances-and-why-do-they-matter/

功能固着

关于物品使用的思维定式,还有一个名为功能固着(functional fixedness)的概念,这是一种认知偏差,指在解决问题或创新时,人们往往过度依赖于某种特定功能或解决方案的常用途径,难以跳出固有思维模式,从而可能忽略更合适或更创新的解决方法。

这种偏差一般来源于我们对于工具的固定的心理表征,我们以往的重复使用和习惯性的使用塑造了这种定式,导致物品的潜在用途被屏蔽了,在一定程度上这就相当于屏蔽了物品的某些可供性。

举个例子,下面是个小婴儿下床的视频,大家觉得小宝宝会怎么下床?我身边的同学朋友大多数的答案是,小宝宝沿着床边攀爬下去,就是把手扒在床上然后脚伸下去慢慢着地。

一开始,小宝宝确实是尝试着直接下床,或许是感觉到不安全,小宝宝立即将探下去的腿缩了回去。重新回到床上后,小宝宝将枕头丢到地上,用枕头垫脚保护自己。

这就是一个可供性的例子,一般在我们成年人的思维里面,小宝宝是直接下去的,我们很少会想到拿枕头去踮脚,首先一个原因是我们无法感知到婴儿的视角,在我们看来床确实不高,小宝宝确实可以直接下床。第二个就是功能固着遮蔽了枕头的可供性,在我们的习惯性思维中,枕头是用来睡的,不是用来垫脚的,因此我们首先不会想到用枕头来垫脚,而在小婴儿的认知当中,他对于枕头的概念还不是很多,他想到的就是这个东西有厚度可以帮我垫脚,而且软软的可以保护自己。

如上所述,功能固着限制了一个人以不熟悉的方式使用物体的能力,从而抑制了创造性思维 ,阻碍了寻找解决方案的过程。但是在设计中,利用功能固着限制思考,反而能帮助设计师们设计出让用户一眼就能看懂的图标与界面,帮助用户快速捕捉到可供性。

利用 schema 与功能固着平衡可供性

可供性强调的是物品或环境本身提供的多种可能性,而功能固着则是个体心理上对物品功能的限定。通过重新设计物品,增加多样的可供性提示,可以帮助用户打破功能固着,开始探索和利用物品的其他功能。这种设计上的改变有助于将功能固着的认知限制转换为多功能和灵活使用的能力。

对于 app 界面设计来说,过多的可供性选择可能适得其反。因为屏幕上的一个按钮不像实物,它通常只对应一个特定功能。因此,适度利用功能固着这一认知偏差,反而有助于强化界面元素的可供性。通过采用用户已经熟悉的设计惯例,我们可以降低用户的学习门槛,让他们一看就懂,从而提高使用体验。

假如你要发行一款新的 app,从可供性的角度来看,你希望它的界面设计能清晰地传达各个功能的使用方式,让用户无需过多探索就能全部上手。但如果为了快速调出功能,让设计过于新颖独特,偏离了用户已有的 schema,反而可能让他们感到陌生和困惑。这时,适度利用功能固着,模仿用户熟悉的热门 app 的设计,就能降低他们的认知负荷,提高接受度。

具体来说,每个人的大脑中都有一套关于 app 的 schema,形成了对各种常见界面元素的固有印象和使用预期,比如看到齿轮图标就联想到设置,看到垃圾桶就联想到删除。当你在设计中采用这些约定俗成的元素时,等于利用了用户的 schema,增强了相应功能的可供性。用户一看就知道那个按钮是干什么的,无需费心思考,这就是功能固着在起作用。

自然,如果你的 app 只是在复制他人的设计,缺乏自己的特色,就难以吸引用户。这就需要在遵从和创新之间取得平衡。你可以主体借鉴主流设计中用户已经习惯的部分,快速建立起基本的可供性认知,但同时在小的方面有所突破,激发用户的好奇心。

发布一款新 app 就像是带用户踏上一段全新的旅程,schema 和功能固着是他们的「旧世界」,而你的创新设计则是未知的「新大陆」。App 设计就是架起一座连接新旧的桥梁,让用户能从熟悉的 schema 出发,在不知不觉中接纳你的新想法。关键是要把握好度。

结语

可供性作为物品提供给使用者的行为可能性,是设计师需要着重考虑的因素——一个高可供性的 app 界面能让用户一眼就明白各个元素的用途,减少使用障碍,提升用户体验。

功能固着和可供性对于用户体验,可能没有像颜色视觉刺激那样强烈,但是它在无形之中会影响人的认知,默默地影响着人的情绪,塑造用户的整体体验感受。传统来说,功能固着会影响人们对于可供性的发现,阻碍人们的创新想法,但是换种思路,在 app 使用中,用户总是想用 app 实现某种愿景,我们可以利用功能固着,避免削弱核心功能的体验。

当然,同时要警惕过度依赖 schema 导致设计刻板。好的设计应该在引导性和开放性之间取得平衡,在帮助用户理解核心功能的同时,也为他们提供探索新可能性的空间。

希望以此课堂突发联想的拙见,为设计工作者们提供一些想法,将人的认知、惯常行为、经验以及传统等元素加入到设计的思考之中。

> 下载少数派 客户端、关注 少数派小红书,感受精彩数字生活 🍃

> 特惠、好用的硬件产品,尽在 少数派 sspai 官方店铺 🛒