你当前的位置 主页 > 产品案例 >
产品案例
情感化设计的组成要素及实践案例
来源:http://www.jgjjl.com 编辑:www.kb88.com 2018-08-23 11:04

  零基础学产品,BAT产品总监带,2天线年在线课程,全面掌握优秀产品经理必备技能。了解详情

  Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许,只有当这些细节从产品中消失的时候,我们才会发现并开始怀念它们。

  我(英文原文作者)会特别在意这些细节,因为它们可以触发用户的情感响应。如果运用方式得当,这些细节当中的小魔鬼可以帮助我们打造出更具人格的产品,并使用户在与之进行互动的过程中产生积极的情感响应;而这种积极的态度会有效的促使用户主动传播和拥护你的产品。这种在人格层面与用户建立关联的设计思路也被称作“情感化设计”。

  “情感化设计(Emotional Design)”一词由Donald Norman在其同名著作当中提出。而在Designing for Emotion一书中,作者Aarron Walter将情感化设计与马斯洛的人类需求层次理论联系了起来。正如人类的生理、安全、爱与归属、自尊和自我实现这五个层次的需求,产品特质也可以被划分为功能性、可依赖性、可用性和愉悦性这四个从低到高的层面,而情感化设计则处于其中最上层的“愉悦性”层面当中。

  Etsy会在用户退订之后播放Paul Young的Every Time You Go Away。这种方式无法让用户留下来,但可以给他们留下深刻的印象。当用户再一次在Etsy平台上浏览商品时,多半会想起这个有意思的小环节,或许他们无论在哪里听到这首歌的时候还会想到Etsy呢。

  这方面最经典的案例莫过于Groupon的著名段子,惩罚Derrick。虽然这个过场发生在用户确认退订之后,但它通过真实的人物以及锋利而又自嘲的幽默,切实拉近了用户与网站之间的距离。在这个多多少少会使退订用户产生内疚的段子之后,Groupon还会再怂恿用户重新进行订阅。虽然你清楚的知道这是他们玩的小伎俩,但在如此具有代入感的段子面前,多数用户会觉得非常有趣,正面情绪和状态完全被调动起来。

  Skitch的隐私提示很简短,但其中运用到了两个方面的对比,一是文案当中模拟警告音效的Pssst!,另外还有代表警示的字色。这两者的组合使得提示信息无论在语气还是视觉效果上都与页面当中的其他内容形成了鲜明的对比,在情绪上引起了用户的注意,有效的传达了信息内容。

  Hunch注册页面当中的文案与我们通常能够见到的那种有所不同,他们会在输入邮件的文本框旁边告诉你“垃圾邮件是魔鬼,我们可不干这事”,还会在选择邮件订阅的地方提示你“这会是值得一读的邮件,而且来的不会太频繁”。在这些很普通的地方稍稍花些心思,制造一些细微的差异化,这会增强产品的代入感,使用户的注意力更集中,跟随设计的指引完成操作目标。

  下面的范例来自我的一个个人项目,用户需要邀请码才可以试用这个产品。在提交申请的地方,我使用“我要获取邀请!”来代替传统的“提交”作为按钮当中的文案,希望这可以调动起用户的情绪,并使他们感受到一种更加真实、更加有针对性的互动。另外我也起草了一份简单的说明文案,让用户放心,国际化气质尽显摩拜单车成中国制造标杆,我们绝不会发送垃圾邮件。

  同样来自于Flickr的案例。当系统发生了一些更加严重的问题时,他们会告诉用户:“额,我们的管道堵塞了!”,然后使用非常口语化的文案表示了歉意。除此之外,他们还为用户设置了一个小任务,也就是将当前页面打印出来,为两个圆环填色,然后拍下来,等到站点恢复正常后传到Flickr上;Flickr团队会挑选出优胜者,向他们赠送一年的高级帐号。

  验证工具Captcha在如今被很多网站所使用,但这不意味着用户真的喜欢这东西,很多时候Captcha确实会令人感到烦恼和挫败。我们暂时无法改变这个工具本身的工作机制,但至少可以像Stack Overflow那样通过一幅有趣的图片搭配说明文案,向用户解释为什么要使用这个烦人的工具,籍此获得用户的理解,减少负面情绪的产生。

  故事情节可以有效的吸引人们的注意力。有些产品在讲故事方面做的非常引人入胜,Ben the Bodyguard就是其中一个不错的范例。这是一款用来保护手机当中隐私数据的iPhone应用,整个产品概念都是围绕着一位名叫Ben的法国私家保镖角色来设计的。其minisite通过非常精彩的交互方式让用户跟随这名私家保镖穿行在街道上,随着故事情节的发展来了解这款应用的特色,让你不由自主的沉浸在其中。

  这张图片当中的动画效果是循环的,但在实际站点中,它只会在加载数据的那段时间当中出现。为了看这个动画效果,我甚至会反复加载页面。这样的图标也会让用户在等待加载的时间段里将注意力集中在很酷的动画效果上,使他们对于加载时间的感知有所减弱。当然,对于这类能够吸引注意力的元素,如果运用不当,也会造成负面影响,干扰用户的正常阅读与使用流程。

  Dropbox刚刚起步的时候曾经在Digg中发布了一段demo视频,并宣称自己的产品是“来自麻省理工学院的Google Drive杀手”。虽然口气很大,但他们在视频中精心打造了各种有意思的细节,牢牢的抓住了观众的视线与情绪,例如在演示上传文件的功能时使用了名为“Keira Knightley有够热辣!!”的图片。

  感觉的传达:Gidsy里到处都是复古风格的图片,他们通过反复使用同种风格视觉元素的方式来着重强调产品的人格气质。

  惊喜:浏览到页脚,你会发现鼓励你免费创建活动的图标与文案,当鼠标悬停在图标上的时候,一道绚丽的彩虹会突然冒出来,它的动画效果所指向的正是引导用户这个操作的按钮。

  文案:网站当中随处可见简短而幽默的文案,譬如“你好啊靓人!”、“嘭!你的照片被删除了”等等。

  幽默:在Automattic的“关于”页面中充满了和善幽默的自我介绍,感兴趣的用户在阅读时就能感受到他们那种充满乐趣的工作环境。

  标语:Automattic的标语之一是“比起俳句,我们更擅长写代码”。正是这种看似严肃认真的幽默感,或者说看似幽默的认真,奠定了他们的产品基调。

  文案:在页的页脚当中有一段每次加载页面都会发生变化的签名语,有时是“来自Automattic的产品”,有时变为“来自Automattic的乐章”。这种细节体现了他们对于自己产品的热爱。

  惊喜:在Automattic另外一个产品Jetpack的站点中,每次打开首页都会看到三个背着喷射背包的家伙向天际飞去的动画。这种用心和幽默既能给用户带来有趣的感受,同时还加深了其产品名称所关联的含义在用户头脑中的印象。

  彩蛋:在WordPress的self-comparison当中有个彩蛋。为了防止相同版本的文章进行自我比较,Automattic创建了一个小机制,无论是其中的文案还是视觉风格都模仿了黑客帝国当中的段子。这篇文章会教你怎样在WordPress当中找到这个彩蛋。

  前一段时间,来自Realmac的待办事项类应用Clear非常火爆。它固然不是市面上的第一款待办事项应用,但他们很聪明的瞄准了iPhone用户,特别是其中那些追求个性的设计师们。最小化的界面设计(参考阅读:最小化可用性设计)以及独特的交互方式、视觉效果都使它与市面上的其他同类应用形成了明显的差异化。这正是它所针对的用户群体所追寻的。

  建立预期:Realmac在Clear正式发布之前推出了一段充满创意和惊奇色彩产品演示视频,有效的吊起了用户的胃口,使他们充满期待,并提前帮助产品进行了传播。

  好玩:Clear的一个重要卖点就是新鲜有趣的交互方式。“好玩”成为了这个产品的一个基调。在应用内的引导视图中(参考阅读:具有引导性的移动应用界面设计模式),设计者也强调了Play的概念。

  惊喜、专享:在应用中打开主题设置界面后,安装了Tweetbod的用户会收到一条消息,恭喜他们获得了专享的额外主题。这些用户很可能因为受到了特殊照顾而感到开心,另外,这个群体在口碑传播方面的作用是相当大的。

  我们在本文中并没有谈论到那些相对失败的案例,不过在此我有一点小小的建议:如果你希望产品表现出一种风趣狡黠的个性,那么要记得观察用户的反应。如果某些设计元素没有起到正面效果,一定要及时主动的道歉并改进,以此表现你的诚意,展示愿意聆听意见并改正错误的态度。这可以保证你的产品处于正确的人格位置。

  让用户更好的使用产品,获得更愉悦的体验,并主动向他人分享和推广这些正面的经验。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上海广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。