每个UI设计师需要懂些用户心理学

著名的设计原则有:尼尔森十大原则、交互设计7±2原则等等;来自不同专家所总结的设计原则却都总能找到共性?为什么设计原则经典甚至永久?有时候这些著名设计原则会遭到一些行外人质疑,觉得这不过是一些约定俗成的规矩,我就很不服呀,但学疏才浅不知如何说服,于是细究下来背后到底有什么站得住脚的道理~

每个UI设计师需要懂些用户心理学

所有设计原则其实都是基于人类心理学,从认知和心理学角度剖析交互设计本质,去解读人们如何感知、学习、推理、记忆,以及把想法转换为行动。将实际的设计原则联系起来会让心理学变得更具体、更容易理解。

此篇是给自己解惑的文章,也是一篇学习笔记总结;也让自己知道就算背熟了著名的交互原则后仍做不好设计,究竟是因为什么?现实中,很多设计原则,有一致的场景却又有互相冲突的场景,到底该怎么推断那些设计准则更靠谱?

比如那些经典的相互矛盾案例:

每个UI设计师需要懂些用户心理学

设计原则描述的是目标而不是操作过程,好的设计一定是考虑了诸多因素之后所采取一种平衡:

更了解人的感官和大脑是如何工作的,去衡量及判断那些设计原则更靠谱;UI设计师需要确定哪个设计原则更适用于给定的环境,从而优选应用,UI设计师必须深思熟虑,而不是盲目的应用设计原则,应该理解其基本原则并有过应用经验的人来使用和诠释;

好的界面设计师是需要拥有认知心理学的知识

一、我们的感知与现实存在一定的偏差

不要怀疑,就是我们所看到的并不是真相,我们的大脑在影响我们的感知;很大程度上是我们“期望”感知到的。感知至少受到以下3个因素影响,与现实存在偏差

1、过去:先入为主的经验影响我们的感知

人常根据以往的经验来对事物进行理解和判断;先入为主的经验会给用户不一样的感知和理解;你看到什么取决于经验/别人告诉你什么?

R.C.James的素描:给人的第一印象是随手泼出的黑点,如果有人和你说这是一只在树附近嗅着地面的斑点狗后,你就很难再把这张素描看成是随手泼出的黑点了;看过刘亦菲演的神雕侠侣小龙女后,后面再有(陈妍希、毛晓慧)翻拍都觉得没有比刘亦菲更适合小龙女这个角色,而且还被黑的很惨;这都是因为人会被先入为主的经验影响感知

每个UI设计师需要懂些用户心理学

我们认知会受熟悉的感知框架影响;

我们生活中大部分时间都是在自己熟悉的环境中度过(比如:家、公司、去公司的路上、附近的商场),久而久之这些熟悉的环境会在我们心智中建立框架;比如,你并不需要经常检查你家里的东西,但你对家里够熟悉,也就知道某些东西大概放在哪里,因为你已经建立了你对自己家的认知,有点刻板印象那么回事,专家们都管这个叫“感知模式/感知框架”

感知框架能帮助我们应付所处的世界,但是呢也会让我们看到并不存在的东西;比如,有时候你觉得你身份证明明放在家里某个地方,你就是找半天没找到;还有你去饭店吃饭,去饭店吃饭的心智框架里有部分是付款,可能你没有付款走出来饭店,但你的潜意识以为自己已经付款过了,查看账单才发现真没付!!!!

不同场合的心智框架影响我们在不同场合下对期待见到的事物感知;使用电脑、网站及手机的人对桌面和文件、网页浏览器、网站和各种类型的APP都会有相对应的心智框架;用户经常不认真看屏幕就点击按钮或链接,他们更多是靠以往的经验来引导他们对界面的感知,没错就是在盲点瞎点!!!能不动脑就不会动脑那种,所以知道这个原理我们可以更好的了解那些设计原则

所以这页就是为什么UI设计原则中需要保持一致性,一致性也包括3个方面:

1.和用户预期保持一致性。

如果不符合人熟悉的心智模型及框架,就很容易很抓狂;经常炒股的朋友,会对红色绿色很敏感,绿色代表下跌红色代表涨,但其实北美的股票市场则反之,红色代表下跌;很多用惯安卓的用户,突然用iOS会很不习惯,最明显的微信APP的iOS版本和安卓版本就有很多不一样的地方;用习惯win的系统用户新买了个macbook电脑,刚用的时候很奔溃,时时刻刻都感觉自己是个智障~

每个UI设计师需要懂些用户心理学

app中就有很多案例契合用户心智模型,减轻用户的学习成本和记忆负担

QQ阅读的电子书还是保留了翻页效果都是模拟现实翻书的效果,这样大大降低用户理解左右滑控制翻书上下页的理解成本。微信红包设计形式就很像现实中的红包,所以很多人也一下子就理解这是红包,而且点开就是拆红包了。网易云音乐也是做成黑胶唱片的即视感,播放暂停都会相应变化,营造了听歌的氛围。

每个UI设计师需要懂些用户心理学

微信朋友圈广告的样式也是符合用户心智模型,呈现形式与好友发的朋友圈保持一致。以明星作为好友,插入大图,底部还可以看到好友的评论和互动,这样给人的感觉就像好友发了一个状态,而非一条赤裸裸的广告。

还有在支付宝好友对话页面转账的场景中,用户有着不同的使用习惯,他们认为来这里就是转账的,所以有的用户进入对话框后,输入完数字,就认为自己已经转账成功了,其实并没有emmm,于是有了现在改版后的方案;bilili在输入密码的时候2个小人会捂住眼睛,像极了现实中别人输入密码自己会走开不偷看。

每个UI设计师需要懂些用户心理学

2. 和平台规则保持一致性

产品的设计要和平台的规范保持一致,比如ios、Android及网站规范;也需要与竞品保持一致比如同类型的app也会大同小异;

每个UI设计师需要懂些用户心理学

3. 产品内部规范一致性。

其中包括迭代版本保持一致性,同一层级图标颜色字体保持一致性,品牌一致性,交互行为一致性;不同的品牌有自己的调性,可以直接通过设计语言传达给用户,而且能够达到一个良好的品牌辨识度,成熟的产品有自己的设计标准。

4. 遵循用户的操作习惯;

有时候在找某件东西的时候,如果它不在老地方或者看起来和以前不一样,就算在我们眼前,我们也找半天,这也是因为我们受以往的经验影响感知;因此相同或相似产品的用户习惯保持一致,即意味着用户需要更少的时间去学习甚至不需要学习;

微信的iOS和安卓版本不一致,是根据2个终端不一样的交互习惯操作;比如微信2各版本的搜索位置不一致,安卓在右上角,iOS是一长条;发现页iOS是没有搜索和添加的,安卓却有;在iOS系统中,想要删除一条信息只需要向左轻轻一划,而在安卓系统中,需要长按信息在弹出的选项中选择删除选项,然后再按确认删除的选项;安卓左右划可以切换4个tab但iOS却不行,安卓和iOS二级页面的返回键也是不一致,安卓底部有返回操作,iOS则是右滑返回上一级。

每个UI设计师需要懂些用户心理学

2、当前:环境影响感知

周围环境对感知的影响也同样存在于不同感官之间。五个感官任何之一的感知都可能同时影响其他感官的感知。例如:我们听到的能影响我们看到的,反之亦然;我们听到、看到或者闻到的能影响我们的触觉。

总之,对于识别一个字母、一个单词、一张脸或者任何物体的神经活动,都包含了环境刺激产生的神经信号的输入。这个环境包括感知到的其他临近对象和事件,甚至由环境激活的对以往感知到的对象和事件的记忆。

人们经常根据周围的情景去理解事物,视觉感知也是一样的,上下文会影响我们对某一个词的理解;环境有时候会产生歧义。同样的一段话放在不同的语句当中,会有不同的理解。视觉上也是如此:

每个UI设计师需要懂些用户心理学

视觉设计可以通过应用的背景、界面元素的摆放等来烘托情感、主题和气质。比如天猫、京东及拼多多618这种节日活动主场景,也是利用了这种心理将买买买的活动氛围营造出来。

每个UI设计师需要懂些用户心理学

3、将来:目标影响感知

除了视觉,我们的目标还过滤其他感官的感知。

例如:在嘈杂的环境中与人交谈,你能把大部分注意力放在他说的话上,即使身边还有许多人在对话。你对谈话的兴趣越大就越能过滤掉周围的声音。

当用户登录网站执行操作时通常都是带有目的性的去操作,这个过程中会过滤与其达成目标操作无关的东西,当用户在软件或网站上寻找信息或某个功能时,他们并不会认真的阅读,只是快速而粗略的扫描屏幕上与目标相关的东西。他们不是不仅仅忽略掉与目标无关的东西,而是经常不注意它们。

目标影响我们注意什么--感知是主动的,我们动用五官去找到和目标相关的东西。目标使我们的感知系统对某些特性敏感--例如在下图找红色的圆点,大脑对红色就会特别敏感,而其它颜色就几乎不会被注意到,即使我们的确“看到”了它们

每个UI设计师需要懂些用户心理学

目标对感知的过滤在成年人身上特别可靠,他们比儿童对目标更专注。儿童更容易被刺激驱使,目标较少地过滤他们的感知。这种特点使得他们比成年人更容易分心,但也使得他们观察时更不容易被影响。

当用户充分的调动感知来寻找目标的时候,由于用户的注意力处于一种高度的紧张状态,这是一种不好的用户体验,我们要做的是让用户能够轻松的完成目标任务,而不需要有高度的紧张和寻找。

比如淘宝在注册账号的时候,清晰告知用户注册整体流程状态

由于用户在完成某项操作的时候,非常容易忽略和目标任务无关的信息,所以如果需要在用户处理任务的过程中,使用户注意到一些额外的重要信息的话,应该将这些信息做的醒目或者将它们摆放到适当的位置,比如:Behace在用户创建密码时,会贴心在下面把已满足密码项☑️,避免不满足密码要求又被打回

总结:最后对设计有什么影响?

避免歧义

避免显示有歧义的信息,并通过测试确认所有用户对信息的理解是一致的。当无法消除歧义时,要么依靠设计标准或用户习惯,要么告知用户用你期望的方式去理解歧义之处。

保持一致

在一致的位置摆放信息和控件。不同页面上提供的相同功能的控件和数据显示应该摆放在每一页上相同的位置,而且它们还应该有相同的颜色、字体和阴影等。这样的一致性能让用户很快找到和识别它们。一致性的交互设计原则对用户而言可以让信息传达和用户使用体验更好;对产品研发团队来说,也会减少设计的研发成本。

理解目标

理解用户目标,知道它们强烈的要感知什么,从而确保提供必要的信息清晰的对应用户的感知,用户去用一个系统是有目标的。设计者应该了解这些目标,要认识到不同用户的目标可能不同,而且他们的目标强烈左右他们能感知到什么。在一次交互的每个点,确保提供了用户需要的信息,并非常清晰地对应到一个可能的用户目标,使用户能够注意到并使用这些信息。

二、格式塔心理学

“格式塔”是德文“Gestalt”一词的音译,意为“完形”、“整体”。格式塔心理学于1912年诞生于德国。它以反对冯特的元素主义和铁钦纳的构造主义起家,后来又反对桑代克的联结主义和华生等人的行为主义。

格式塔受到康德的“先验论”和胡塞尔的现象学的影响,强调经验和行为的整体性,认为整体大于部分之和,意识不等于感觉元素的集合,行为不等于反射弧的循环。这一思想不仅贯穿格式塔学派的所有研究,而且对后来的人本主义心理学也产生了很大影响。

格式塔理论提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体;人类视觉是整体的,我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状,图像和物体,这些理论叫做视觉感知的格式塔原理。

格式塔原理:接近性

物体之间相对距离会影响我们感知它们是否以及如何组织在一起。相互靠近的物体看起来属于一组,而那些距离较远的就不是。

每个UI设计师需要懂些用户心理学

接近原则告诉我们如果你希望将多个元素进行分类,那么让同一类元素靠近在一起是个不错的选择。利用这个原则,调整距离或者用分割线等来分开不同设计模式的构建。会使设计界面层次有序,视觉清晰,减少视觉噪音。

相互关联的控件和内容之间距离越近,用户越能感知它们的相关性。反之,如果距离太远,用户很难感知到它们是相关的,那么产品在体验上就更加难学也不方便记忆。

比如app设计中都会用到接近性原则:

每个UI设计师需要懂些用户心理学

格式塔原理:相似性

格式塔原理中的相似性通常和接近性一起运用在产品设计中。它指出了影响我们感知分组的另外一个原则:有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式,并且将它们与特定含义或者功能联系在一起。

每个UI设计师需要懂些用户心理学

相似性表达的是元素形式和内容上的接近,包括形状、颜色、大小、运动状态等等。如果在一堆元素中有一些具有某种相同的特征,那么在我们的认知中这些元素具有更强的相关性。在UI设计中,我们经常用到这个原则,主要有3各方面:

1.界面内相同功能的组件保持样式统一,拥有相同功能、含义、层次结构的组件保持样式上的统一可以使用户快速理解这个组件的操作方式,降低用户学习成本;

2. APP内部风格保持统一;统一的风格能够让用户清晰地感知到自己处在同一个APP/网站中,这不仅仅是用户体验的要求,也是视觉上的需求。

3. 特异点更易获得视觉焦;反过来思考,在相似的元素中,突然蹿出一个截然不同的东西,你立马就会被其吸引,这其实也是相似性原理的一种逆向应用的方法。比如很多APP的tab选中状态会比较突出

每个UI设计师需要懂些用户心理学

格式塔原理:连续性

我们的视觉倾向于感知连续的形式,而不是离散的碎片。并且能感知到整个物体的倾向,连续性通过构图来帮助我们感知事物的形状和运动方向。界面中的设计元素,会引导眼睛在平面中的移动,提高界面的可阅读性。创建顺序并且指导用户浏览不同的内容分组。

视觉中这个法则我们在交互设计上用得比较少,但是在视觉设计中会用得多一点,比如有些应用就喜欢把 App Store 上的应用截图做成连续的图片。

每个UI设计师需要懂些用户心理学

格式塔原理:封闭性

人们在观察一个物体的时候,视觉系统倾向于把不完整的局部当作一个整体来感知。将不连续的,敞开的图形自动补充,从而感知到它为完整的物体,而不是分散的碎片。

每个UI设计师需要懂些用户心理学

这个原理和人类的心智模型有相关性,当我们在辨识一个物体的时候,我们会将不完整的物体与我们的认知模型中的原型相匹配,从而达成认知。所以封闭性原则的前提之一是,把握局部不完整物体的尺度,如果太零散,太碎片,就会出现认知混乱。

封闭性在图形设计中有非常多著名的案例,比如苹果 logo。

每个UI设计师需要懂些用户心理学

这个原则也非常适用于界面设计中,运用省略或者减法处理图形,不仅可以节省空间,同时也让用户产生联想,产生趣味性。比如UI界面中的导航栏,卡片模式、银行卡及会员卡。

每个UI设计师需要懂些用户心理学

格式塔原理:对称性

对称的元素简单、和谐且美观,我们的眼睛寻求这些属性以及秩序来了解世界。对称会让人感觉舒服,有助于我们专注于重要的东西。

对称的构图是令人满意的,但它们也会变得有点沉闷和静态。视觉对称往往更具动态性和趣味性。在任意一种对称设计中加入不对称的元素都能让用户对这个元素印象深刻从而吸引到用户的注意力,这种方法非常好用,比如当你希望吸引用户兴趣、或者像促进用户做出操作的时候。比如很多网页设计中

每个UI设计师需要懂些用户心理学

格式塔原理:主体/背景

大脑将视觉区域分为主体和背景,主体包括一个场景中占据我们注意力的所有元素,其余则是背景;这个特征有利于我们对重要信息和次要信息的感知。主体和背景的区别可以从以下两个方面来控制:

场景大小:我们倾向于将处于大场景中的中间小区域部分视为主体,而大场景视为背景;

层级关系:如果在同一个平面中,我们倾向于将处于视觉第一层级的物体视为主体。

此原则可以帮助设计师在设计界面的过程中抓住用户注意力,并且让用户优先看到我们想让他们看到的事物。比如重要信息的弹窗提示,作为用户注意力焦点的内容临时成为了弹窗的背景,弹窗则会短暂成为新的主体;以及弱化背景从而突出内容等界面中都有运用到此原则。很多工具类型的app就会利用这个原则,比如滴滴的首页和高德地图视觉都以大半屏地图为主体,操作都放在下方。

每个UI设计师需要懂些用户心理学

格式塔原理:共同命运

共同命运原理指出我们倾向于将一起运动的物体,感知为一个彼此相关的整体。视觉系统会将运动规则一致的物体感知为一组。这个原则适用于交互动效设计中,当一些元素的动作一致的时候需要保持相似性,或者有相同的运动倾向。

在产品设计中,当我们想要对一些元素操作同样的动作会常常使用到这个原则。比如苹果手机的长按删除 app的交互动作,所有的app都有一致的运动倾向,告知用户界面处于可编辑状态,非常直观。bilibili的一键3连也是这是原理,还有mac os的文件夹拖动,共同的高亮和运动看起来也是一体的。还有在可扩展菜单、折叠条目、小提示、滑块、滚动条和手势操作提示等

每个UI设计师需要懂些用户心理学

三、降低信息噪音,让用户更专注

我们在浏览网站或者APP的时候并不会仔细阅读,而是快速扫描相关信息;而信息呈现方式越是结构化和精炼,我们越能够更快和更容易地扫描和理解。

比如一堆松散信息和结构化信息对比,明显结构化呈现的信息更能快速浏览及理解:

每个UI设计师需要懂些用户心理学

要让信息能够快速地浏览,仅仅把它们变得精炼,结构化和不重复是不够的,它们还必须遵守图形设计的规则(格式塔心理的原则)比如一些常用的规则:

人们在线或离线阅读时,通常是采用从上往下,文字一般都是左对齐,设计页面的时候将一块的内容有序排列,这样用户可以通过接近性原理,一目了然就知道内容都是一组一组的,不用户费劲的去检查。比如爱彼迎的页面就是很好的视觉结构优化:

每个UI设计师需要懂些用户心理学

信息结构优化可以提高了用户浏览速度

即使是少量的信息,也可以通过结构化使其更容易被浏览。最经典的案例就是电话号码以及卡号这种长串数字类型,为了容易浏览和记忆,习惯上这两类号码会被分割为多个部分。结构化的数据明显易于浏览。分隔字段是信息更具有可读性,还能防止输入错误。

可参考的方法有:用户界面明确地为不同部分提供独立字段;界面提供一个字段,但允许用户输入时将号码用空格或者其他符合分隔开。

每个UI设计师需要懂些用户心理学

数据专用控件提供了更多的结构

用适合的控件来显示某个具体类型的数据的值和接收输入,这比(不论是分割还是不分割的)文本输入框要更便于用户输入信息。比如keep页面中和ios的闹钟选择

每个UI设计师需要懂些用户心理学

视觉层次让人专注于相关的信息

将信息分段,把大块整段的信息分割为各个小段;

提取段落关键词,显著标记每个信息段和子段,以便清晰地确认各自的内容;

以一个层次结构来展现各段及其子段,使得上层的段能够比下层更重点地被展示。通过信息结构化及降噪来提高用户浏览速度

当用户查看信息时,视觉层次能够让人从与其目标不想管的内容中立刻区分出与其目标更相关的内容,并将注意力放在他们所关心的信息上。因为他们能够轻松地跳过不相关的信息,所以能更快地找到要找的内容。

四、人天生不爱阅读

对的,你不爱阅读是天生的,别怕大家都不爱阅读,学渣不只是你一个人。我们的大脑没有天生的阅读能力,阅读其实是一种后天人为的,需要通过系统的指导和训练才获得的能力。

每个UI设计师需要懂些用户心理学

普通人在幼童时期,不需要任何专业的训练就能够学会他所在环境下的语言,因为人类大脑逐步进化出了口头语言所需的神经结构。但是,人的大脑没有设计成能够天生学习阅读,若没有适当的阅读指导,我们可能永远无法学会阅读。即使学会阅读,我们也未必善于阅读。

学习阅读就是训练我们的大脑(包括视觉系统)去识别模式,这个模式有一个从低到高的层次。线条、轮廓和形状是大脑先天能够识别的基本视觉特征,我们不需要学习去识别它们。因此,阅读涉及特征和模式的识别。

糟糕的信息设计会影响阅读

使用用户不熟悉的生僻文字、难以辨别的字体、过小的字号、嘈杂背景上的文字、信息被重复的内容淹没、居中对齐的文字、背景和文字的反差度太大或太小。本来不爱阅读的人类,加上不友好的信息设计会扭头就跑。

每个UI设计师需要懂些用户心理学

如何提供良好的阅读支持

1. 使用有限的,高度一致的词汇,说人话,很多APP的上面的提示语就不会太客套官方冷冰冰,而是采用很亲切温暖的词语

2. 使用有限的,高度一致的词汇,说人话,很多APP的上面的提示语就不会太客套官方冷冰冰,而是采用很亲切温暖的词语

3. 将文字格式设计出视觉层次,提升信息反差比(大小对比,颜色对比,主次分明)增强有效信息或弱化次要信息;保障页面内层级的合理布局,帮助用户更有效的判读信息

沉浸式体验的阅读,需要字号反差比较小(反差包括:字号、字色、字重)

每个UI设计师需要懂些用户心理学

4. 除了常见的阅读障碍,很多界面显示的文字都太多了,用户没有必要去阅读。要尽量的减少文字描述,精炼语言,在「别让我思考」里面Krug可用性第三定律:去掉每个页面上一半的文字,然后把剩下的文字再去掉一半。

省略多余文字的好处:1. 可以降低页面的噪声;2. 让有用的内容更加突出;3. 让页面更简短,让用户在每个页面上就能看到更多的内容,而不必滚动屏幕。

真实用户的测试,最后的最后还是需要将设计在目标用户群中测试,从而确保用户能够快速轻松地阅读所有重要信息。

本文由 新媒体之家 作者: Ke设计 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
1

发表评论