• 用情感化交互为你的产品注入灵魂
    时间:2012-04-23   作者:Ven   出处:mrven.com

    什么使我们成为网站和app的忠实用户?思考这个问题时,我们发现那些令人喜爱的网站和app都拥有一样东西:灵魂。他们是有灵性的,他们的用户体验中被置入了情感化智能,并且这种情感化智能通过交互设计和反馈机制得以体现。

    这些要素将“个性”赋予了网站或app产品,并让产品最终在用户心中留下深刻的印象。不得不说,在赢得忠实用户这件事上,产品的灵魂确实扮演了一个挺重要的角色。本文中,我们将通过一些优秀的例子来了解情感化交互,以及“个性”和“灵魂”是如何灌注进产品的。

    什么是情感化交互?

    情感化交互设计是一种状态,指在网站或app在显示信息或实现功能时,包含了能产生人性化用户体验的种种细节。这些交互可能是大的体验(例如网站整个宕掉时),或者是小的体验(例如在表单元素旁显示的错误信息)。它可以体现在不同的要素中,例如提示信息、颜色、设计、对用户输入的响应,以及系统信息输出。将这每一种体验混合起来,就为网站创造了灵魂和个性,这种和用户间的情感联系能带来忠诚持久的狂热“粉丝”。

    情感化交互范例

    说明:以下部分范例来自Little Big Details(需翻墙)这个天才的网站,我强烈推荐你上去看看,一定有收获。

    Bottlenose

    这是一个基于Web的Twitter客户端,它给用户提供了一种新的探索和使用Twitter的方式。这家网站在用户初次使用时的引导方面做得很出色,用清晰而幽默的方式向用户介绍它的功能。网站在确认按钮上使用了诸如“Make senese”,“Got it”一类的词句,让用户感到有个性,和产品自身的“自信”感,这比简单的“Next”强多了。

    image

    Wufoo

    Wufoo混合了俏皮的提示信息和触动人心的UI元素,为用户营造了一种友好和私人化的体验。例如:

    • 每个页面的标题里会包含一句诗。虽然是随机显示的,但诗句强化了Wufoo典雅的产品形象,让枯燥的任务(创建表单)变得个性生动。
      image
    • 注意“New Form”后面的感叹号。提到“form”,人们总是联想到无尽的填写,但Wufoo放了一个感叹号在这里,让这个元素充满了能量和乐趣。
      image
    • 表单报告界面没有数据时,Wufoo并没有简单给出一个空白界面,而是通过提示信息传递出真正有个性的东西,并且鼓励和督促你创建第一份报告。
      image

    MailChimp

    作为最好的情感化交互的范例之一,MailChimp从不放过每一个可以向产品注入灵魂的机会。

    • 404页
      MailChimp的404页面很有才:准确的告诉用户目前发生了什么,并积极号召用户采取下一步行动,继续先前的流程体验。这招很聪明、有效,并且化解了404的尴尬。
      image
    • 发送邮件活动(Email Campaign)
      用户发送了一个邮件活动后,MailChimp总是会给予用户庆祝和鼓励。“This is your moment of glory”这句文案很好的缓解了用户在创建邮件活动时的恐惧和期待。
      image
    • Twitter页面
      最近,如果MailChimp宕机了,他们的Twitter页就会换上一个特别的背景图:一只悲伤的黑猩猩正在努力修复问题。现在人们习惯去Twitter了解到底出了什么事,而这张背景图正好强化了这个Twitter账号的个性,给用户带来情感化交互体验。

    Pinterest

    这个当下火热的社交媒体网站在注册账号时,使用了一种有深度的交互设计。不同于传统的即时表单验证信息,当用户输入合法的邮箱和密码时,网站会给出“Looks good!”的提示信息。虽然这只是一个很小的触动,但足以使注册流程显得人性化,并让产品与正在注册的用户产生共情反应。

    image

    Path

    Path的注册按钮上有一个向右的箭头,而当鼠标点上去后,箭头会变成笑脸。这样,当用户与网站第一次产生交互时,就获得了一个亲切而个性的欢迎。这是一个有深度的细节,一般设计者和用户都会忽略这个地方,而当它真的出现了,就为接下来的体验定下了良好的基调。

    image

    Hootsuite

    这只友好的猫头鹰是Hootsuite的吉祥物,吉祥物不仅仅是一张可爱的脸,它甚至代表了服务本身,如同MailChimp的那只黑猩猩。Hootsuite调用Twitter的API把数据拉到自己的应用上,由于Twitter有API调用次数限制,Hootsuite会在用户长时间不活动时停止向Twitter请求数据。此时,猫头鹰会出现,告诉你它正在休息,如果你需要它的话,可以让它立刻醒来。这招巧妙的把负面体验变成了正面体验,塑造了品牌形象,并为产品带来了个性和灵魂。

    image

    Feedburner

    在Feedburner中,新创建的RSS Feeds由于数据积累不够,状态页中没有东西显示。大部分网站不会在意这个情形,因为出现这种状况这并不是网站的错,而Feedburner则抓住了这个机会,因为他们知道虽然状态页还没有数据,但大多数新用户非常想立刻看到当前的Feed状态。于是他们创造了这段文案,告诉用户状态页还没准备好,在这一过程中和用户建立了情感联系,让用户觉得安心。相对于一个毫无生气的、没有任何数据的空白页面,Feedburner的这个做法是一种巨大的进步。

    image

    OS X

    在“关注细节”这个问题上,Apple一直有着良好的声誉,并且会精细到你想不到、甚至似乎没必要的地方。例如Text Edit的小图标,放大后看,上面密密麻麻的文字其实真的是有意义的(彩蛋)——笔记本上写的是“Think Different”宣言。这是向他们传奇创始人的致敬,同时也提醒人们他们为什么爱Apple。

    image

    Highrise iOS

    在安装37Signal的Highris应用时,你可以和电脑玩一把九宫棋。用户体验设计师常常考虑如何用一些心理学原理去解决等待时间过长这个问题,而事实上,在等待的过程中给他们一个好玩的东西,谁还在乎等待呢?37Signals的这个方法非常简单和有效,在用户体验的“死局”上展示出了高超的情感化智能。

    image

    Mint.com

    Mint的网站维护界面在本应该倍感压力的时候为用户创造了迷人的体验。不能访问财务信息会让你焦虑,而Mint借用这个机会,以一种搞笑的方式告诉你,虽然网站不能访问了,但你的钱和信息都是安全的。

    image

    Deviant Art

    Deviant Art用肖像画框作为用户个人信息设置的交互背景。这么做不仅贴合了网站的主题(美术家社区),同时对新用户用户完成个人信息有鼓励作用。

    image

    Tumblr

    当你在Tumblr里听音频文件时,URL里会包含“请不要下载这个音频文件,不然Tumblr就没法继续在网站放音频文件了”的字样。不得不说,这是一种更聪明的与用户交流的方式,而不像js弹窗那么冷冰冰。

    image

    为你的网站注入灵魂

    产品设计人员需要关注那些通常被忽视的用户体验小细节,通过对这些细节的优化,app将产生个性,同时建立稳定的忠实用户群。重温一下上面提到的案例,或许能帮你在未来的项目中举一反三。细节确实能决定网站或app的成败。努力创造良好的体验是我们所知的赢得用户的最佳方式,并且能为你的网站带来生命和灵魂。

    本文系译作,原文 Give Your Website Soul With Emotionally Intelligent Interactions ,译者 Ven

    网友留言/评论

    我要留言/评论

    相关文章

    一位营销总监的辞职信,含评论(非常精辟):某企业,曾花了半年时间,到另一家著名企业去挖来了一位营销总监。在不到三个月的时间里,这位年仅26岁的营销总监就把工作搞得有声有色颇有成绩。然而,就在大家都普遍看好这位年轻的营销总监时,他却毅然决然地辞职而去。这是为什么呢?
    职业化-成长的必经之路:首先声明,这里的职业化不是“磨平自己,去掉个性,变得更圆滑”等等的P话,而是觉得每个人在职业生涯中该做到的一些行为,甚至相比专业技能更为重要的一些事情。毕竟专业技能可以靠兴趣,追求来自我督促的学习,提升,而职业化更多的是靠心态,习惯,同时一般是要靠他人发现,提出,并自我改进来获得进步的技能。
    项目经理的“势能”培养:我很早之前就听说过,做为一个项目经理,至少要在公司工作两年以上,且年龄不小于三十岁。我当时还年轻,对这两点很不屑。而现在,我却很理解。在公司工作时间短,对人员不熟悉,将很难横向协调资源;年纪过轻则不够沉稳、练达,难以实现快速沟通。
    如何写好你的技术文章?:最近看到很多这方面的文章,我就想了想,我认为的好的技术文章是什么样的?这文章主要是写给自己的,对我以后的技术文章有警醒作用。
    OAUTH中的腿,2-legged 与 3-legged 的差別:OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。
    6本值得一读的JavaScript英文电子书:Web开发行业是一个快节奏的行业。新趋势、技术和API不时出现,我们必须去学习。作为一名Web开发人员,我常认为这是我们责任的一部分,或者说我们需要把这个作为一种习惯,以坚持学习或给自我 升级,不能满足现状。我们是为了探索和发现更多的解决方案。
    怎样打造高性能的移动用户体验:在新家一点点安顿了下来,不过心里还是缺乏踏实的方向感;猫猫们也都有些瞻前顾后草木皆兵的样子,有待继续习惯;希望大家都好好的。话说眼前的这篇候选文章貌似已然有同行做过译文,不过正像 “关于BeForWeb”中所说的,我只挑那些我喜欢的 、对我自己有学习和收藏价值的内容来做译文,其他方面的因素和我没有半毛钱的关系。不多说,直接进入正题。
    程序员需要谨记的九大安全编码规则:历史已经证明,软件设计的缺陷一直是导致其漏洞被利用的最主要的罪魁祸首。安全专家发现,多数漏洞源自常见软件中相对有限的一些漏洞。软件开发者和设计者应当严格检查程序中的各种错误,尽量在软件部署之前就减少或清除其中的漏洞。
    25 个非常棒的 CSS3 菜单教程:本文收集了 25 个超棒的 CSS3 菜单教程,同时提供在线演示以及打包下载。
    百度统计流量研究院设计小结 - 可视化的快乐:百度统计流量研究院为了将数据更好的传达给用户,我们采用了动态数据可视化的方式(Interactive Infographic)。希望我们的设计能将用户带入到新鲜、愉悦的氛围之中。当然,我们在设计的过程中也体会到了可视化的快乐,并且希望与大家一同分享。