用户体验-美学如何影响用户行为?-《怦然心动-情感化交互设计指南》

Stephen P. Anderson
为什么要使交互变得诱人?
美学、美和行为
玩耍的诱惑
诱惑是一种含蓄的艺术
令人心动的游戏

为什么要使交互变得诱人?

  • 在交互设计工作中,我们时常会遇到这样的问题:“如何提高网站转换率,如何引导用户完善信息,如何促使用户买完商品后给予评价?”,要想解答这些问题,那我们必须要让交互足够的有趣、诱人。
  • 如何通过有趣好玩的活动来影响人类行为?
行为拆分 当把复杂的任务分解成较简单的任务时,使其更容易采取行动
适度挑战 有挑战才有乐趣,不能太简单那样会人觉得无聊,难度要适中
地位 我们常常对比他人和自己的最佳纪录,通过交互加强或削弱用户的地位
成就 制造成就感
  • 通过创造有吸引力的交互改善以下情况

高弹出率、低使用率、低注册率、高度同质化、低推荐率、宣传邮件低点击率。

反馈回应 当自己的行为得到了有效的反馈,此时我们便被吸引。
好奇心 当我们发现一处有趣的内容,人们就想知道更多。
模式识别 就算没有模式存在,我们的大脑也能找到组织和简化复杂信息的方法。
视觉意向 视觉优于其他任何感觉,是最直接的感知方式。
识别优于回忆 从我们曾经接触过的事物中识别目标比纯粹使用回忆记起目标更容易。
  • 设计师把用户的动机看得比工具的可用性更重要—比起摩擦力,更重视拉力。

有这样的一个例子,网页管理员让你填一张很长的表格,询问了很多无谓的信息,但是,如果你完成了这个表格,你的名字就会出现在一个人气网站上。这时候你是否有更大的动力完成这份表格?
了解人们的动机是一个很强大的设计工具。

利用用户的动机,移除阻碍
  • 体验决定一切:当基础需求得到满足,用户体验便开始主宰一切。
  • 寻找用户潜在动机,从中提取行为原则,运用到设计中去。
实用 移动电话摆脱了传统电话线的束缚,让人可以随时随地打电话。
可靠 保证一切正常可靠,提供高质量的服务,比如高铁票需要实时刷新获取最新的余票信息,天气预报需要精准报道天气状况。
可用&易用 可用,用起来没有障碍。易用,超级便于使用符合心理预期。
令人心动 加入幽默元素以及激发人们的好奇心,创造流畅的体验,平衡游戏机制等等其他类似策略。
意义深远 比如索尼大法好、果粉买买买一个道理,优秀品牌代表一种标签或一种生活态度
用户体验需求等级模型

美学,美和行为

  • 美学是用户体验的一部分,外表很重要但不能仅仅因为视觉表象作出仓促的商业决定。
  • 视觉设计不仅仅是一种风格、皮肤,美学与可用性是一个整体,相互呼应。
  • 我们考虑能够影响使用者交互一切因素:视觉传达、动作、声音、甚至是触觉。
  • 美学检验了我们对物体或现象的反应,美学不仅仅关注网页按钮或别的视觉元素的艺术价值,更关注用户对这些元素做出的反应。

你的设计是否易于理解?

  • 识别是一个认知的过程。它基于模仿和经验,我们学会了怎样理解我们周遭的世界。
  • 根据我们经验以下哪个更像一个按钮?


    按钮对比

很显然,美学在表达功能。右边的那个示意图更像一个真实的按钮。它的倒角及渐变的阴影都毫无疑问地表明了这一点。这就是“感知的功能可见性”(perceived affordances),暗示着这必须是一个按钮。

  • 大脑如何理解颜色、阴影、底纹这些自然规律?

颜色:绿色代表畅通、红色穿传达冲突、黄色则代表需要思考,不同的颜色代表不同的情绪情景
窗口:想象一下,我们电脑常见的一个窗口,活动与非活动时候所呈现的阴影,正在暗示着你打开的窗口中哪个正在为你服务。

窗口阴影

你的产品可信吗?

  • 所有的美学经历都来源于我们真实世界所具备的属性当中。
  • 影响一个网站可信度的公认因素是什么?

网站整体的视觉传达设计:包括版面设计、排版方式、字体大小和颜色。

  • 外观印象可信度的情况在现实生活中同样存在,下面哪家加油站更能让你掏出钱包加油,这已经很明显了。


    糟糕的加油站

    崭新的加油站

除去最基本的信息,左边呈现出来的感觉是年久失修、不可靠,总会担心出故障。右边则是表现出崭新而稳定,让人觉得在此消费更可靠。
我们常常能看到一些设计,使用着不同意的字体、奇怪的颜色、行距、过份压缩的图片质量,这些难道不会影响我们对产品的看法?我们思考下。

让等待变成享受

  • 在迪士尼的设计师们对排队路线进行了非常巧妙的设计,玩家可以通过电子等候牌知道自己所处位置与剩余的等待时间,但最终实际的等待时间比电子牌显示的时间要短10分钟左右。这类设计既减少用户焦虑,同时还能达到超出用户预期的效果。从而使得漫长的等待看上去非常短暂。


    在迪士尼排队的人群
  • 同样的原理,我们可以运用在常见的进度条上《新科学家》杂志做了一个实验,通过九种不同的进度条来测试哪个看起来等待的时间更短。


    加载中的进度条

渐变处为加载中的水波纹效果,加载中水波纹会在进度条上循环进行,通过测试观察到“水波纹循环次数更少的看起来比循环次数更多”给人的感觉更快完成加载。
这是因为我们大脑更倾向计算周期,而不是时间。水波纹循环次数更多,给人的感觉时间更长。

感觉很重要

  • 综上所述,感觉的时间、可信度都非常重要。
  • 另外在2007年芝加哥人类交互大会上也展示了一个针对不同搜索引擎的相同搜索结果。在所有搜索引擎搜索结果都一致的情况下,人们还是倾向于使用Google,更少的人使用Bing和Yahoo,这是因为Google搜索引擎比其他两个更好吗?

其实不然,这仅仅是感觉上更好,这种来自于感觉而非理性的结果说明了品牌的可信度更高、个性更突出、感觉更好,则被认为更可靠。不得不说,大多数时候人们更倾向于相信自己经验而非实验结果。

Google·Bing·Yahoo

有魅力,更给力

  • 在日本曾经有位研究人员在两台自动提款机上做了一个实验,两台功能完全一致只是其中一台软件界面做得更有吸引力。

研究人员发现,更有吸引力的机器在使用中遇到的问题更少,更好地帮助了用户进行提款。
研究人员后来解释道:这是进化生物学理论和大脑工作的原理,当我们放松的时候,我们大脑更为灵活,并能够完成更为复杂的问题找到解决方法。相反,当我们感到沮丧和紧张时则呈现出相反的结果。

提款机A
提款机B.jpg

关于美学中的联想

  • 在我们大脑处理的所有事情的过程中,往往会将认知和情感的联系在一起。


    弹窗选项A

    弹窗选项B

当我们看到上图弹窗时,右边按钮是一个非常严肃的选项,似乎在暗示我们,注意这是一个危险的选项,该选项需要我们谨慎对待。

  • 类似的美学联想也在Apple的其他产品也得到应用


    Mac呼吸灯

当我们的Mac电脑进入“休眠”状态的时候,会出现舒缓睡眠指示灯,这个LED指示灯闪烁频率与一般成年人呼吸频率基本一致,大概是每分钟12~20次。这是巧合吗?Apple拥有呼吸状态LED指示灯专利(US6 658 577B2),这个专利名称“模拟出动人的呼吸韵律”。

当美学不再吸引人?

  • 如果你决定在近郊平民区开一家“甜甜圈的店”你会将采用以下哪种logo设计?


    Donuts店铺logo

我们想想,在大部分连锁店“甜甜圈店”logo都非常相似,一般
似上图的红色或黄色的字母类,而下图的logo则显得较为特别。它更像一家高档的甜甜圈店铺,我们未踏进店铺里面,就能够想象出里面的装潢及食品价格。
大家觉得在近郊平民区更倾向物美价廉、还是高档奢华?显然美学影响我们的感觉、判断和行为。
不难看出,一个优秀的设计会有意地适时选择“俗气”的美学设计。

  • 美的三种模式:公认的、文化的、主观的
    1. 公认的美,与基本的设计美学原则有关,如对称、协调、三分法则和黄金比例,这些是美观设计的传统基础。我们的视觉系统趋于在事物中组织信息、寻找模式和建立秩序。
    2. 文化的美,指的是在某个时刻从某种方面我们发现某种文化的迷人之处。玛丽莲·梦露是世界上最有名的人物之一。不过,如果她现在还活着,她会不会成为美的典范就很难说了。在网上,思考不同时代流行于不同群体间的各种文体风格。
    3. 主观的美,就是你个人觉得对象具有美,这与你个人的品味经历、偏好有关。

    Bowles则暗示这三种模式具有等级关系,主观的美压倒文化的美,文化的美胜过公认的美。所以萝卜白菜各有所爱,就不难理解了。

人脸的魔力

  • 利用人脸保住留存率?


    Facebook注销页面

Facebook注销页面利用了人脸的神奇效果
最早期,Facebook注销账号的时候,页面显得非常无聊。仅是简单陈述:“我们非常遗憾您的离开,告诉我们您离开Facebook的原因?”
直到某位设计师建议:“想象一下我们离开夏令营时依依不舍”一个有你所有朋友、你不想离开的地方。“
受到启发,设计团队重新设计了注销页面,增加了好友的头像,并在每个好友头像上增加:“你确定要注销账户吗?”这样做的影响是什么?这直接使注销率减少了7%,阻止至少100万用户的注销行为。

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

推荐阅读更多精彩内容