本文分享了五个让用户界面更情感化的原则:游戏化、幽默感、动画、插图和吉祥物,来帮助大家如何为无聊的APP设计出情趣化的界面。
用户使用产品执行重复性的任务,很容易就会失去兴趣,而解决这一困境恰是UI的价值所在。接下来,将要探讨一些能够让界面更加情趣化的设计原则。
“随着一连串的“0”和“1”消失在黄色管子后面,一只熊从管子中弹出,管子底部也出现了一行文字:“Startyourbear-owsing!”。最后,一只熊掌出现在屏幕上,并指向我的浏览器工具栏上。”
在一片惊讶声中,我完全忘记了想要浏览的内容。
像VPN这类服务产品很少会引起用户的情感波动,因为这不是它们的工作,它们也不需要这样做。但TunnelBear却做了,因此在众多的VPN中,我选择了它,并将其推荐给我的朋友,这样他们就可以在日常生活中感受到一些快乐。
众所周知,人们不能长时间地忍受枯燥、无聊的情绪,这也是那些不能引起情绪兴奋的、执行重复性任务的产品很容易被人遗忘的原因。
据心理学家研究:枯燥只不过是因为缺乏激励,一种本来应该在活动中得到满足却未得到满足的欲望。
那么,问题来了,如何通过界面设计给用户带来激励呢?
我和MacPaw的产品设计师在我们头脑还比较清醒的时候,一起设计了像重复查找器和加密APP等无趣的产品。同时也分享了五个让用户界面更情感化的原则:游戏化、幽默感、动画、插图和吉祥物。
人们在玩的游戏——游戏化设计
在用户界面设计中应用游戏化设计还存在一些争议:曾经有24个案例来研究游戏化设计应用的效果,可结果却各不相同。但我想说,游戏化设计应用的效果取决于你将其应用的场景。
对于许多像AkarSumset的产品设计师而言,游戏化设计的关键不在于让用户本身获得乐趣,而是通过乐趣引导他们去采取某些行为。比如:成就、等级、排行榜就是利用了人们对自尊的基本需求,激发竞争力,并且敦促用户做你想让他们做的事情;比如:获得成就,用户就会不断的回到应用中或者在社交媒体上分享。
游戏化设计在产品中的使用可能成功也可能失败,但它最终所要达到的是一种情绪反应。我们的大脑充满了控制多巴胺含量的细胞,多巴胺是产生幸福感受的主要神经化学物质之一。
当“愉快事件”发生时,这些神经元就会发挥作用,触发细胞释放多巴胺进入血液。更进一步来说说,如果“愉快事件”是有规律可循并可预测的系列事件(如游戏中玩家等级),那么多巴胺就会在事件发生之前释放。
这对你的界面设计意味着什么呢?
这将使得用户在使用产品的过程中,会因为期待“愉快事件”(如获得新成就)发生而获得快乐。
游戏化设计案例:Gemini2和Duolingo
在设计Gemini2时(一款在Mac上的重复查找器优化版本),我们遇到了一个棘手的问题。查找大文件是件让人精神崩溃的事情,有用户抱怨到他们会在文件查找完成前结束任务。
因此,我们所做的就是尝试利用成就系统来强化用户“划掉”已完成事项的感受(拥有待做事项列表是繁琐任务处理过程中的唯一利好)。
对于游戏化设计来说,外太空相关主题是可以完美应用的,如将相关主题设置为app的名称,并在用户界面的设计中应用这些主题。我们的目标用户是看着“星球大战”和“星际迷航”等太空电影长大的,所以他们对科幻灵感的事物会很熟悉。
在Gemini2发布的几天后,我们开始收到来自用户的推文,要求在复活节彩蛋上提供线索,以解锁最终的成就。发布一年后,因为“清晰而富有情感的设计”,Gemini2获得红点奖。所以,尽管很难衡量成就系统对用户的激励程度,但它确实不会让人感到枯燥。
Duolingo是另一个成功案例,它是一款为用户提供在线学习语言服务的应用,是我见过的最具游戏化界面的产品。我们都知道,从零开始学习外语是多么困难的事情,尤其是在只有一台笔记本电脑却没有老师帮助的情况下。考虑到人们很容易失去学习外语的兴趣,Duolingo就想方设法地让你迷恋外语学习,当然它也做到了。
每当你在Duolingo中完成一个5分钟的课程时,你就可以获得10分,连续上课30天会获得一个成就等级,完成20节课且没有一个错字,就会解锁另一个成就。对于你迈出的每一步,你的感官会感受到欢呼声和绚丽图像的奖励,而这会触发释放快乐的多巴胺。
最终,你开始将Duolingo与成就感和自豪感联系起来,这会促使你继续学习。
你一定是在开玩笑——幽默感设计
VictorYocco设计了一款有着幽默感的成功产品,创造了令人难忘的体验,并且能够让你的工作脱颖而出。幽默感最大的作用在于它们很情绪化。虽然我们还没有完全理解幽默的本质,但有一点很清楚:它会让人感到快乐。
根据脑成像研究:有趣的漫画会激活大脑边缘系统中的奖励神经网络(这是响应饮食、音乐、性和情绪改变药物的神经网络)。换句话说,一个好笑话会给人们一种情感上的升华。
你想让你的界面设计也能使用户产生这种反应吗?
答案是肯定的。但最棘手的问题不仅是主观的幽默感,而且是取决于场景的反馈方式。比如:在开机屏上放一个双关语,肯定会让人混淆。虽然所有人都享受着各种形式的幽默,但了解用户是件至关重要的事情:他们觉得什么是热闹的?什么看起来不合适?粗糙的或不适时的?这与现实生活中的笑话没有什么不同?
幽默感设计案例:AuthenticWeatherandSlack
AuthenticWeather是一款应用幽默感设计用户界面的app,它不是将幽默作为一种附加的戏剧性调剂,而是作为一个独特的“卖点”。天气类app是工具性产品,用来帮助用户获取天气信息。但通过使用AuthenticWeather,你获得远不止于此。
无论天气状况如何,AuthenticWeather都会以像“低温冻结”、“回家过冬”这样尖锐的语句来“打击”用户,而我个人最喜欢的一句话是:
“没关系,向外看了解更多信息。”
当你使用AuthenticWeather时,你不会因为想看天气信息而打开它,而是因为你想看看它接下来会发生什么,就像查看天气这样的日常任务一样成为了早晨期待的事情。
如今,app中的充斥着脏话的评论,不会对我父母那一代人有吸引力。但是,脾气暴躁的千禧一代,却觉得很搞笑,这也证明着如果你了解你的用户,那么幽默将会是很好的设计手段。
另一个兼具好玩和好用的app就是Slack。作为一款与工作紧急相关的app,Slack创造出了更加人性化的体验,不仅是因为它的妙语趣话,而且从屏幕加载到看到所有聊天内容的过程中,当你看不到它的时候,它就会开个玩笑。
对于不同的文化环境,同一个幽默可能是善意的,也可能是恶意的。所以,Slack采用稳妥的双关语和善意的对手的类型,这种笑话并不会使你高兴地在地上打滚,也不会惹恼或冒犯他人。最好的情况,用户会在他们的某个频道中窃笑并分享屏幕截图;最坏的情况,他们只会滚动眼睛。
让世界动起来——动效设计
几乎每个界面都会用到动效,这是从一种状态过渡到另一种状态的自然方式。但界面设计中的动效可以达到更多效果,而不是仅表示状态的改变(比如:它们可以帮助你保持注意力并,传达比静态视觉更好的效果)。动效可以激励视觉和运动知觉的学习,这意味着用户更有可能保持专注并理解如何使用这些东西。
这些都是将动效融入到设计中的好理由,但为什么它会引发用户情感呢?
参与Encrypt和GeminiPhotos两款app设计的SimonGrozyan认为,这是因为在物理世界中,我们将动的事物理解为有生命的:
“我们习惯于看运动中的事物,由于光线的原因,我们周围的一切都在移动或改变外观,静态等于死亡。”
除了可靠和逼真的质量之外,动效能够给用户带来愉悦感,这种愉悦感是与惊喜相同的。因此,将动效用在非常规页面转场的地方,使得你的产品使用起来更有趣。
动效设计案例:EncryptoandShazam
Encrypto是一款小巧精致的Mac应用,它可以对您的文件进行加密、解密,以便您可以安全地将文件发送给别人。对于那些关心数据安全和隐私的人来说,这是一个不可缺少的但又不是时常想到的工具。
尽管如此,从设计方面来说,Encrypto是迄今为止我最喜爱的MacPaw应用,这要感谢矩阵式风格的动画栏:动画栏滑过文件,将其转换为新的安全体。
Encrypto模拟生活中的场景,它不再是你计算机上的一个沉闷的程序,它有着迷人的数字魔法。
Shazam是一款将动效,作为其界面设计中的核心工作的app。当你使用Shazam进行识别音乐时,点击开始按钮后,按钮开始向外发送同心圆。这种类似于跳动的音乐扬声器的设计,让界面看起来很有生命感,就像你在一个强大的声音系统中播放你最喜欢的专辑一样。
艺术无处不在——插画设计
正如BlairCulbreth所言:对于界面而言,光漂亮是不够了。
Sleek,有着专业化的设计,但它的如微笑般的个性化、人性化的细节才是关键,自定义艺术才能成就这些细节。
与普通图形不同的是插图是有情感的,因为它传达的不仅仅是其所包含的意义。它与每个孩童时代看过漫画的人有着积极的关联性,以更有趣、更有想象力的方式展现了一些东西。最重要的是,它包含了艺术家的个性。
我们的产品设计师MaxKukurudziak说过:
“我认为,当一位艺术家创作插图时,他们总会将他们的一些个人经历、背景和故事注入其中。”
这个理论说明了人情味更有可能激发情感。
插画设计案例:GeminiPhotosandGoogleCalendar
我们最新的产品GeminiPhotos是一款iPhone应用,可以帮助您删除手机中一些不需要的照片。就像Gemini2的桌面版一样,有冗长的说明文字,所以即使有一个漂亮的的用户界面,我们也很难吸引的注意力,并且让他们感觉很好。
与我们之前许多app一样,我们使用动画和声音来激活界面,但自定义艺术已成为体验的亮点。如上所述,令人惊喜愉快的事物会导致一种快乐化学物质涌入我们的血液,所以在意想不到的地方使用搞怪的插图,不仅填满了空白的屏幕,也给单调的行为增加了一点乐趣。
另一个可以证明插图如何让产品更可爱的案例就是Google日历。直到最近,网络版和iOSapp之间还是有着明显的差别。虽然前者具有电子表格的吸引力,但后者以一个杀手级的细节,立即赢得了用户的芳心。
对于不同类型的事件,Google日历会根据从事件标题中提取的关键字,用插图进行说明。这样一来,即使你所要做的只是健身和牙医预约,但你本周的计划也会看起来非常令人兴奋。
但这还不是最好的。我注意到,无论何时我创建新事件,我都默默的希望Google日历能够创建它的插图,而当这一幕发生时,我会很开心。而且,很明显,插图实验并不单单适用于我,因为最近Google推出新版网页版的日历也同样采用了。
吉祥物
多年来,模仿产品的可爱角色,一直在网页设计和营销中使用(想想RonaldMcDonald和theMichelinMan)。在界面中,应用还不算多。用户界面中的吉祥物可能被视为侵入性的和烦人的,特别是当它们阻碍用户重要行为或阻断视线时。
微软的Clippy是应用吉祥物的失败案例:它引起的只是恐惧和厌恶(当然,这是情绪,而不是你想的那种)。
同时,研究表明:即使是简单的几何图形,人们也很容易将事物拟人化。栩栩如生的生物就更容易联系和理解其行为,并且通常对其有感觉。
此外,动画角色更容易将个性归因于个人,因此你可以通过该角色来表现产品的特征,使其变得俏皮和愚蠢、热心和乐于助人,或者任何你期望的特征。凭借这种未开发的潜力,吉祥物非常适合非情感的产品。
诀窍是时机。
Clippy非常邻人讨厌的原因,是因为他经常不请自来,打断了完全不相关的任务。但是,如果吉祥物在相对闲置的时间出现。例如:当用户刚刚完成了一项任务时,它做出可爱的动作。
吉祥物设计案例:RememBearandYelp
TunnelBear公司最近推出了形如按钮可爱的产品(不是双关语),RememBear是一个密码管理器,人们是不会拿密码开玩笑。RememBear中的卡通熊的聪明之处在于,当你正在做一些严肃、重要的事情时(比如创建一个新的记录时),它们就不会隐身。
相反,当您完成应用注册的第一阶段但还没有进入第二阶段时,您会得到熊的拥抱,这是保存你的第一个密码。RememBear通过这种方式,在我意想不到的地方搏我一笑。
就像RememBear一样,Yelp(一款广为人知的餐厅评论应用)祥物出现时机也非常完美。有趣的仓鼠首先出现在iOS应用设置的底部,这样用户就像发现复活节彩蛋一样发现它。
Yelp的产品设计经理YoniDeBeule说:
“在Yelp,我们一直努力使我们的产品和品牌让人感到有趣和愉悦。我们要在每件事情上都要表现Yelp的个性,从我们有趣的海报设计、有趣的版本说明,到内部黑客马拉松项目和Yelp精英派对。当我们发现我们的iPhone设置页面在娱乐方面严重缺乏时,我们决定撸起袖子来完善它。”
随后,仓鼠成为了公司app在iOS应用商店里的商标,因为在此之前,该团队为Android版本设计了一个迅猛龙,为网页版设计了一条狗。因此,无论何时何地,当你使用Yelp时,你几乎会看完所有的评论,这样你可以看到另一个令人愉快的角色版本。
总结
并非所有的产品都具有游戏或社交媒体app的天然乐趣,即使是公共事业也不一定只有实用的。处理重复性任务的app通常与留住用户相冲突,因为人们常常感到无聊而放弃它们,而无聊就是缺乏刺激。
通过使用像幽默、动效、插画、游戏化元素和可关联角色等正面激励,我们可以让用户感受到一种更加兴奋、更少分心、更加快乐的不同方式。
原文作者:AliceKotlyarenko
原文链接: