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

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万用户的注销行为。

• 经过上述的案例，基本可以说明美学对我们认知、感受和反应都有着举足轻重的影响，并潜移默化影响着我们的决定。