阿里设计师分享:UX设计心理套路

在阿里巴巴国际站,我们对心理学理论进行了客观的数据验证,把科学理论应用至前线设计,提升设计效益。我们沉淀及过滤出一些行之有效的方法及案例与同业共享,希望普惠更多设计师能活化科学理论,共享知识协同促进中国设计走出去。


在阿里巴巴国际站,我们对心理学理论进行了客观的数据验证,把科学理论应用至前线设计,提升设计效益。我们沉淀及过滤出一些行之有效的方法及案例与同业共享,希望普惠更多设计师能活化科学理论,共享知识协同促进中国设计走出去。

阿里设计师分享:UX设计心理套路

一、为什么要像心理学思考?

设计师学习心理学知识能更有效提升设计对用户的深层影响,在分析用户行为数据,用户调研分析和假设方案时能更有科学理据精益化思考。心理学的理论和科学实验为我们解析了很多用户行为,以下的案例中会把多种心理学理论,应用到国际用户体验设计。

二、用户是如何思考的?

我们引用美国普林斯顿大学心理学教授丹尼尔·卡尼曼《思考,快与慢》[1] 的思考决策系统1与系统2。研究显示定义如下,

  • 系统1 的运行是无意识且快速的,不怎么费脑力,没有感觉,完全处于自主控制状态。
  • 系统2 将注意力转移到需要费脑力的大脑活动上来,例如复杂的运算。系统2的运行通常与行为、选择和专注等主观体验相关联。

举一些例子给大家了解如何关联到设计上。

系统1

因为需要省脑力,所以95%的交互决策都会使用系统1的直觉思考。

集中注意力是耗脑力的,所以用户浏览到第2屏后跳出率会上升。

统一的交互和视觉会在大脑形成更快捷的大脑电子路径,所以它更符合省脑力的需求。

系统2

因为复杂的思考,需要主动集中注意力,这样会秏费脑力,所以它只占日常生活中的5%。

用户30%时间注意力都会出现分神,所以需要经常唤醒用户注意力和明确引导下一步。

不一致的交互方式和视觉语言,会激活系统2产生非必要的信息处理,从而会影响到用户对产品的主观感受。

三、如何提升设计效益?

以上的例子简述了西方心理学实验与—些设计关联。下面的设计应用案例,会进一步帮助我们把更多理论活用到设计上。

1、善用人脸吸引注意力,提升运营设计效果

以下有模特儿的设计相对於只有产品图的设计,表现明显较好。

阿里设计师分享:UX设计心理套路

图1 有模特儿假发采购设计

阿里设计师分享:UX设计心理套路

图2 只有产品的假发采购设计

为什么有模特儿的运营效果相对较好?

在你阅读这篇文章时,也许你会被这张模特图片吸引眼球,不自主地快速扫描。设计应用的是大脑对人脸的特殊注意力。研究表示,大脑中有专门识别人脸的梭形脸部区(fusiform face area,FFA),让人脸识别绕过一般的大脑视觉处理系统加快人脸识别。[2] 因此识别人脸和对人脸的关注令用户产生特殊的注意力。

另外,我们还应用了2个心理学原理。

阿里设计师分享:UX设计心理套路

图3 镜像神经反射

模仿心理,人的成长由新生儿开始,模仿是我们学会生存的第一步。所以我们会跟着模特的眼睛指向,引导你注视方向,扫视或注视标题。研究表明,大脑中有一个系统叫镜像神经元,它从猿类时代开始就协助我们由简单模仿进化至复杂的模仿。因此用户会被我们的设计引导,产生模仿行为。

性暗示吸引,案例中我们考虑到国际用户的特点,对图片进行特殊处理,模糊化面孔的种族特点。因为在进化过程中旧脑对于物种优生,提高遗传素质的潜意识需求,所以混血儿的多种族面孔会较易对不同种族的用户产生吸引力。

这是一个简单而常见的设计案例,下面我们会进一步提升深度。

2、应用心理学驱动用户,改变老习惯喜欢新产品

MessageCenter是一个老产品,用户平均有4~5年使用习惯。我们在改造这个产品时特别小心,除了一般的竞争产品分析,用户调研等方法外,也应用了一些心理学理论,提升设计有效性。新版本刚上线时用户投诉不少,很多产品也会遇上,我们也不例外。因为改变用户习惯,大脑不能使用系统1,进行快速的直觉操作。引致用户需要启动系统2,主动提升注意力,重新建立脑电思考路径。所以改版项目我们经常会遇上上线初期用户投诉或者行为数据下跌的现象。而我们这项目中产品大概两周后用户反馈转向正面及开始喜欢这次改版,而且新版留存率达90%以上,其中我们用了一些科学理论帮助提升设计效果。

阿里设计师分享:UX设计心理套路

图4 MessageCenter 老版本

阿里设计师分享:UX设计心理套路

图5 MessageCenter 2014

3、项目中我们应用了什么心理学理论呢?

社交智能。研究表示,大脑能记150人以上[4],而记忆一般事项只能稳记3~4项事件[2]。因此我们把原来以事项为记忆单位的沟通平台改为以人为聚合单位,把头像放大了,把人名列在第一个阅读顺序。以人为唤醒记忆的记号,减少了大脑的记忆负荷,提升了用户回忆联系人相关事件的速度。界面设计善用到大脑对信息处理的合适认知模式,能有效影响用户对可用性的主观感受, 因此也直接反映到项目的留存率上。

用户不能精确的说出他们为什么喜欢你的产品, 因为当你访问用户时,他们的大脑会进行记忆重构, 人会选择一个符合大众的客观答案。[4]一次设计改版是一综合因素影响的结果。除此以外我们还应用到一个理论。

70-140字的标题短句。研究表示,短句的信息量会产生较多的多巴胺(想要),而多巴胺会促使用户更目喜欢上产品的感觉产生。[2] 因此预览文案我们控制在有限数量,这个也是刺激用户喜欢和提升学习新产品驱动力的其中一个小细节。

4、新产品上线用户不习惯,需要等多久用户才能回升满意水平?

需要28-60天学习。研究表示,依新习惯的复杂度等因素,会影响新习惯的形成。[3] 因此改版时我们应用到相应研究中的其中一个方法,在原有习惯上附加新习惯,我们保留了不少旧版习惯,结果大概14到20天左右,90%用户建立起新习惯。

5、 为什么用户视而不见?

系统出现错,然后出现提示,这是一个常见的系统小提示,项目中我们发现用户视而不见,点击提示中的功能修复比率很少。我们由原来常态提示窗修改,加强了视觉色彩,图标和动画,最后才能达到我们的目标点击率。

如果你必需打断用户,你可以利用较强烈的方法唤醒用户。因为眼睛分为中央视觉和周边视觉,而案例中周边的提示信息处于周边视觉,这是一个被动注意力区,联动的是进化过程中旧脑自我生存保护系统。[2] 需要使用相对强烈的视觉表现方法吸引用户,例如闪动会比静态的东西更容易吸引注意力。这个也是即时通讯软件旺旺,QQ,在周边闪动,会有效吸引你注意力的原理。

阿里设计师分享:UX设计心理套路

图6 看不见的提示初版

阿里设计师分享:UX设计心理套路

图7 看不见的提示改版

6、目标趋近表单,提升20%填写率

要求用户提供更多资料的表单很常见,但要有效设计提升20%填写率你有把握吗?

我们应用心理学的目标趋近效应(goal- gradient effect),离目标越近人们就越有动力完成。[2] 在我们平台上的多个项目中验证,这类表单比传统表单能提升填写率达平均20%。设定适合挑战难度能最大化边际效益,难度的设计需要配合用户类型和场景进行调节。我们的统计显示,目标趋近表单需要设定有10%以上的初始值,用户会感觉更容易趋近完成,能对填写率产生正面影响。 表单需要展示即时反馈,令用户得到掌握感,产生更多多巴胺(想要),激励和填写能进一步产生驱动力闭环,提升表单填写效益。

阿里设计师分享:UX设计心理套路

图8 目标趋近表单

7、减少选择,提升40%转化率

—个常见的路径,成功注册后从电邮回到平台的确认页面。这个项目页面能引流到不同的产品上,就像旺旺,QQ,360登录广告,它们会天天给你推送不同的资讯入口。 这个多入口分流现象在国内很常见,但到了国际产品显然并不通用。在Alibaba.com我们要面对国际用户,他们有不同的用户习惯和文化,这次改版我们控制产品分流数量,保持在3-4个选择,结果页面总体转化率提升了40%。

我们应用了希娜.S.艾杨格博士和马克.R.莱珀博士(2000)在加利福尼亚门洛帕克的果酱选择数量实验。他们对比24个和6个口味果酱选择对购买率的变化进行实验。研究发现,24个口味的访问率较高,但6个口味的购买率更高,两者相比选择数量较少的高12%购买率。[2]

可控制感是大脑进化中旧脑生存的底层需求,可控制意味着生存的主导权。太多的选择会产生失控感,令用户放弃意向增加,而多少的选择才是合适呢? 大脑的短暂记忆在3-4个是最佳。因此驱动用户选择的优质数量,控制在3-4个对用户是相对合适的数量,在项目中我们也验证出这数量对设计的有效性明显提升。

结语

文艺复兴时,艺术家需要学习人体骨骼,肌肉结构,才能制作出良好的作品。今天用户体验设计师也需要学习用户的心理构成,大脑神经对信息处理的运作,才能成为良好的设计师。因为商业原因我们不方便全面公开实验方法和数据,但希望这里的故事还是对你有所帮助。

时代一直改变,但设计的精神如一,艺术和科学走在—起才是完整的专业设计。希望我们的分享能帮助你提升国际用户体验设计的有效性。

参考文献

[1] [美]丹尼尔· 卡尼曼 (Daniel Kahneman),著。《思考,快与慢》。胡晓姣,李爱民,何梦莹,译。中信出版集团股份有限公司,2012年7月,第1版,ISBN978-7-5086-3355-8/ F. 2633,电子书版本

[2] [美] Susan M. Weinschenk,Ph.D.,著。《设计师要懂心理学》。徐佳,马迪,余盈亿译。人民邮电出版社,2013,ISBN: 978-7-115-31308-9,电子书版本

[3] [美] Susan M. Weinschenk,Ph.D.,著。《说服人要懂心理学》。刘吉熙, 杨硕,译。人民邮电出版社,2014,ISBN: 978-7-115-33957-7,电子书版本

[4][美] 列纳德· 蒙洛迪诺,著。赵崧惠,译。《潜意识:控制你行为的秘密》,北京:中国青年出版社, 2013.5,ISBN 978- 7-5153-1492- 1,电子书版本

ps:《像心理学家思考,提升设计效益》成文于 2015年12月,出版于《国际用户体验设计》

 

作者:周铭汉,来自阿里国际UED的UX设计师

本文由 @周铭汉 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22641/

(0)
CatherineCatherine
上一篇 2017-05-02 12:12
下一篇 2017-05-02 14:07

相关推荐

  • 十种正确的可用性度量方法(上)

    现在大家在做产品、谈需求、讲体验时,都说不能拍脑门儿要用说数据说话。好,那问题来了,针对不同的问题我们要什么样子的数据来说话呢?这确实需要我们好好思考,下文将通过一些小栗子为大家做一个简单的梳理。

    2017-05-28
  • Day 5 | 关于 [交互设计] 的一些思考

    你知道坚持做一件事的动力是什么吗?除去喜欢,那应该就是大家的反馈与交流。我不会分享干货,也没有能力分享干货,只是觉得有一个平台能够表达自己的思考与想法,并能够和大家交流,这样成长很快不是吗?坚持了几天写完个人思考的文章后,收到很多回复,特别感动的就是收到特别认真的回复hhh,比如:有人问了我一句:交互设计是做什么的呀?其实这个时候自己脑子里飘过很多词,什么用户体验,用户研究啊,UX,UED啊,使用流程啊,人机交互啊,操作逻辑啊等等,就是...

    2018-04-26
  • 无形的设计!聊聊为应用创建「一致性设计」的几个原则

    「一致性」可以理解为统一或者更通俗的规范,这篇文章有一定深度,作者从多方面阐述了一致性对于UI设计的重要性。最后给出了为应用创建“一致性设计”的几个原则。下面让我们来阅读发表在Medium上的,由交互设计师兼工程师的Joe Toscano创作的文章。我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24
  • Axure学习笔记 | 初识Axure

    本文结构:辰安笔记—01—说点题外话唠叨之语:这个是我在B站上看学习视频自己整理的笔记。话说我的学习笔记基本上是从视频上扒下来,然后加入一些自己的思考。我在规划做分享Axure的时候也想过,网上资源那么多,我做这个有必要吗?有用吗?思考一番,做这件事情虽然艰苦,费力不讨好,但是有收益。我现在就是把自己当作一个产品来打造。通过这些事情有以下收益:1.对自己来说,知识更加系统,当然也可能会让我更加僵化,这个我会注意;2.对招聘者来说,TA可...

    2018-04-29
  • 腾讯大神教你写出合格的产品交互文案

    做产品的时间越久,越发现文案的重要性;今天我们来聊聊交互文案。 文案最初是桌子的指代,后来演变成一种职业;现在说起文案一般指以文字表现创意策略。交互中当然会涉及文案,虽说在整个前端展示中并不算突出,但…

    2016-01-13
  • 网页设计中,如何突破栅格的限制又保持协调?

    想要打破栅格又保持网页的协调,是有技巧的,并非任何“破格”的设计都是好的。

    2017-05-09
  • 你的QQ暴露了你的心——QQ大数据及其应用介绍PPT

    PPT概述: QQ大数据规模: QQ月活跃用户数超过 8.4亿 QQ最高同时在线超过 2.0亿 QQ空间月活跃用户数超过 6.5亿 QQ好友关系链对超过 900亿 活跃数据: 一天QQ总发消息超过 100亿 一天发空间说说、个签超过 1亿 数据…

    2016-01-27
  • 从揽胜星脉身上,能看到哪些车内交互设计趋势?| 车展干货

    在日内瓦车展上,有那么几个品牌的展台格外引人关注,捷豹路虎就是其中之一。不少人是冲着前几天刚刚发布的路虎揽胜星脉来的,作为一辆真正全新的车型,同时又是揽胜家族的第四款产品,它受到关注几乎是必然。大家…

    2017-08-02
  • 快速用 Sketch 绘制30个图标

    长得好看的人都已关注操作分解:一个正方形,两个同等直径的圆形即可完成,最后旋转多选矩形 Edit 后可以一起改圆角正方形不停地裁剪一个椭圆加长方形,复制即可圆角矩形加两个不同大小的圆合成小矩形旋转角度,最后拉下 Radius 即可选中锚点删掉,调下倾斜度,复制合成添加锚点一拉一调添加左右两个锚点的时候放大比较容易处理号细节锚点的 radius合成后记得 Flatten 下,就可以选择锚点加 radius添加钢笔锚点,并且 Show Gr...

    2018-04-09
  • AxureUX后台业务管理系统原型模板发布

    这是一套基于电商产品的后台业务管理系统原型模板,包含了商品、订单、库存、用户、促销、运营、内容、统计、财务、设置、权限等十多个电商后台系统管理模块。模板中提供了多套登录界面和布局框架方案,同时整理出了后台系统中各类常用的交互元素及组件,可以方便快速的复用到任何中大型系统项目原型方案中。模板框架采用了自适应布局处理,可以在各种屏幕分辨率下达到最佳的兼容性和浏览效果,同时所有功能模块二级界面都是单独设计并使用内联框架嵌入,可极大的提升输出效...

    2018-03-06