如何为无聊的应用设计情感界面

有一条由 1 和 0 组成的涓涓细流线消失在一个大黄色管子后面。 当一只爪子开始指向我浏览器的工具栏时，一只熊从管子里跳了出来，然后出现了一个标题，上面写着：“开始你的熊吼！”

在我哇哇大叫之间，我忘记了我想浏览的内容。

就这一点而言，像 VPN 服务这样的产品很少能引起人们的喜爱——或任何其他情感。 这不是他们的工作，也不是他们的本意。 但是因为 TunnelBear 确实如此，所以我选择它而不是其他任何 VPN 并将它推荐给我的朋友，这样他们就可以在日常工作中获得一些笑声。

人类无法长时间忍受无聊，这就是为什么为非兴奋、重复性任务而设计的产品经常被遗弃并在电脑和手机上积聚灰尘。 但根据心理学家的说法，无聊只是缺乏刺激，是对满足活动的未满足的渴望。 那么如果我们使用界面来给他们那种刺激呢？

我和 MacPaw 的产品设计师坐在一起，他们把醒着的时间花在设计不那么性感的东西上，比如重复查找器和加密应用程序，他们分享了更情感化 UI 的五个秘密：游戏化、幽默、动画、插图和吉祥物。

人们玩的游戏

关于在 UI 中使用游戏化存在一些争论：例如，24 项实证研究就其有效性得出了不同的结论。 但是话又说回来，有效性取决于您通过设计那些闪亮的成就徽章来尝试实现的目标。

对于包括 Akar Sumset 在内的许多产品创建者来说，游戏化的目的不是让用户获得乐趣本身——而是通过所说的乐趣轻轻地推动他们走向某些行为。 成就、排名、排行榜利用了人类对尊重的基本需求，激发了竞争力，并据推测敦促用户做你想让他们做的事，比如取得进步、不断回到应用程序或在社交媒体上分享。

游戏化在这方面可能成功或失败，但它确实实现的是一种情绪反应。 我们的大脑充满了控制多巴胺水平的细胞，多巴胺是快乐的主要神经化学物质之一。 当令人愉快的事情发生时，这些神经元会发光并触发多巴胺释放到血液中，但更好的是，如果这种愉快的事件是有规律的并且可以预测，它们甚至会在它发生之前就发光并释放多巴胺。 这对您的界面意味着什么？ 期待诸如下一个成就之类的令人愉快的事情将使用户在他们使用产品的过程中获得一点快乐。

UI 中的游戏化：Gemini 2 和 Duolingo

在设计 Gemini 2（我们的 Mac 版重复查找器的新版本）时，我们遇到了一个严重的问题。 查看千兆字节的文件非常无聊，一些用户抱怨他们在完成之前就退出了。 因此，我们试图通过成就系统实现的目的是增强待办事项清单上被划掉的项目的感觉，这是乏味任务的唯一好处。 空间主题，不知不觉地设置了应用程序的名称并在界面中被利用，非常适合游戏化。 我们的观众是在《星球大战》和《星际迷航》中长大的，所以受科幻启发的队伍会对他们产生影响。

在发布后的几天内，我们开始收到用户的推文，询问有关复活节彩蛋的线索，以解锁最终成就。 发布一年后，Gemini 2 凭借“清晰和情感”的设计获得了红点奖。 因此，虽然很难衡量我们的成就系统的激励程度，但它肯定不会让人们感到冷漠。

另一个做对了的产品——并且拥有迄今为止我见过的最游戏化的界面——是 Duolingo，一个用于学习语言的在线服务和移动应用程序。 试图从头开始掌握一门外语是令人生畏的，尤其是如果只有你和你的笔记本电脑，没有老师带来的保证。 鉴于人们对他们的语言努力失去兴趣的速度有多快（从这里的经验来看），Duolingo 将不得不竭尽全力让你着迷。 它确实如此。

每当您完成 5 分钟的快速课程时，您将获得 10 分。 连续 30 天上课？ 获得成就。 完成 20 节课而没有一个拼写错误？ 解锁另一个。 对于您迈出的每一步，您的感官都会获得胜利的声音和丰富多彩的图形，这些图形会触发甜美的多巴胺的释放。 最终，你开始将 Duolingo 与成就感和自豪感联系起来——那种你想要回归的感觉。

如果您想深入了解游戏化，Gabe Zichermann 的书“游戏化设计：在 Web 和移动应用程序中实现游戏机制”是一个很好的起点。

你一定是在开玩笑

Victor Yocco 为在网页设计中使用幽默作为创造难忘体验、与用户联系并使您的作品脱颖而出的工具提出了一个可靠的案例。 但笑话的最大力量在于它们是情绪化的。 虽然我们还没有完全理解幽默的本质，但有一点很清楚：它使人类快乐。 根据大脑成像研究，有趣的漫画激活了边缘系统中的奖励网络——与饮食、音乐、性和改变情绪的药物反应相同的网络。 换句话说，一个好的笑话给人一种情绪高涨的感觉。

你想要那种对你的界面的反应吗？ 当然。 但棘手的部分是，幽默不仅是主观的，而且我们对它的反应方式在很大程度上取决于上下文。 一件事是在启动屏幕上添加双关语； 完全不同的是在错误消息中胡闹。 虽然所有人都喜欢这种或那种形式的幽默，但了解你的听众是至关重要的：他们觉得什么好笑，什么看起来不合适、粗鲁或不合时宜。 与现实生活中的开玩笑没有什么不同。

UI 中的幽默：真实天气和 Slack

Authentic Weather 是一款使用幽默的应用程序——不仅仅是作为一种补充的喜剧救济，而且作为一种独特的销售主张——是 Authentic Weather。 天气应用程序是实用产品的一个典型例子：它们是人们用来获取信息的东西。 但使用 Authentic Weather，您可以获得的远不止这些。 无论天气如何，它都会用尖刻的评论让你大吃一惊，比如“天气快冻死了”、“冬天回家吧”，以及我个人最喜欢的“没关系”。 在外面寻找更多信息。”

当您使用 Authentic Weather 时会发生什么，您不只是为了预报而打开它——您想看看接下来会发生什么，而像检查天气这样的例行任务变成了早上期待的事情。 现在，该应用程序的喜怒无常的评论，充满了f-words和蔑视，对我妈妈来说可能看起来不那么有趣了。 但作为脾气暴躁的千禧一代，我觉得这很有趣，如果你了解你的听众，这证明幽默是有效的。

另一个有趣的界面是 Slack 的。 对于人们与工作紧急情况相关联的应用程序，Slack 在创造更人性化的体验方面做得很好，尤其是因为它的单线。 从加载屏幕到您最终赶上所有聊天的那一刻，当您看不到它时，它会开个玩笑。

由于人口结构如此多样化，幽默是一种流行和失败，所以 Slack 使用愚蠢的双关语和善意的玩笑很安全——这种笑话不会让你在地板上打滚，但也不会惹恼或冒犯。 在最好的情况下，用户会轻笑并在他们的一个频道中分享屏幕截图； 在最坏的情况下，他们只会翻白眼。

有关幽默的更多信息：Louis R. Franzini 的“开个玩笑：有效地使用幽默”。

让世界动起来

几乎每个界面都使用一种动画形式。 这是从一种状态过渡到另一种状态的自然方式。 但是 UI 中的动画可以提供更多的目的，而不是表示状态的变化——它们可以帮助你引导注意力并传达正在发生的事情，这比静态视觉或副本更好。 这种运动刺激了视觉和动觉学习，这意味着用户更有可能保持专注并弄清楚如何使用这个东西。

这些都是将动画融入设计的充分理由，但究竟为什么它会引发情感呢？ 为我们的应用 Encrypto 和 Gemini Photos 工作的 Simon Grozyan 认为，这是因为在现实世界中，我们将动画事物解释为活着的：

“我们习惯于看到运动中的事物。 我们周围的一切都因为光线而移动或改变外观。 静态等于死。”

除了移动物体的相关性、栩栩如生的品质外，动画还具有令人愉悦且出乎意料的力量，它比同样令人愉悦但令人期待的事物带给我们更多的乐趣。 因此，通过在比过渡更不习惯的地方使用它，您可以获得令人垂涎的刺激，使您的产品使用起来很有趣。

UI 中的动画：加密和 Shazam

Encrypto 是一款小巧的 Mac 应用程序，它可以加密和解密您的文件，以便您可以安全地将它们发送给某人。 对于那些关心数据安全和隐私的人来说，它是必不可少的工具，但不是您会喜欢的那种工具。 尽管如此，就设计而言，Encrypto 是迄今为止我最喜欢的 MacPaw 应用程序，这要归功于 Matrix 风格的动画栏，它可以滑过您的文件并将其转换为新的安全实体。 加密成为现实； 它不再是您计算机上的枯燥过程——它是令人着迷的数字魔法。

动画是另一个出色 UI 的核心：Shazam，您可能在手机上安装的应用程序。 当您使用 Shazam 找出正在播放的内容时，您点击的按钮会开始向外和向内发送同心圆。 这种与跳动的音频扬声器的相似性使得界面几乎是有形的、物理的——就好像你在一个强大的音响系统上播放你最喜欢的专辑一样。

更多关于动画：“功能动画如何帮助改善用户体验”。

艺术无处不在

正如 Blair Culbreth 所说，对于界面来说，抛光已经不够了。 时尚、专业的设计令人期待，但用户微笑并转发给朋友的却是个性化、人性化的细节。 定制艺术可以是这个细节。

与一般图像不同，插图是情绪化的，因为它传达的不仅仅是意义。 它与每个人小时候都看过的卡通片有着积极的联系，以一种更有趣、更富有想象力的方式展示事物，最重要的是，它包含了艺术家的个性。

“我认为，当艺术家创作插图时，他们总是会在其中融入一些个人经历​​、背景和故事，”我们的产品设计师之一 Max Kukurudziak 说。 这个理论听起来是对的——人情味更容易激起感情。

UI 中的插图：Gemini Photos 和 Google Calendar

我们的最新产品 Gemini Photos 是一款 iPhone 应用程序，可帮助您清除不需要的照片。 就像桌面版 Gemini 2 一样，它涉及到一些繁琐的用户审查，所以即使有一个方便而漂亮的 UI，我们也很难吸引他们的注意力并让他们感觉良好。

与我们之前的许多应用程序一样，我们使用动画和声音来活跃界面，但自定义艺术已成为体验的亮点。 如上所述，科学证明令人惊讶的令人愉悦的事物会导致这种幸福化学物质流入我们的血液，因此通过在意想不到的地方使用古怪的插图，我们不只是填满了一个空白的屏幕——我们在其他方面增加了一点乐趣单调的活动。

插图如何使产品更可爱的另一个例子是谷歌日历。 直到最近，网络版和 iOS 应用程序之间还存在显着差异。 虽然前者具有电子表格的吸引力，但后者以一个致命的细节立即赢得了我的心。 对于许多类型的活动，Google 日历会根据从活动标题中提取的关键字来说明它们。 这样一来，你本周的计划看起来会更令人兴奋，即使你要做的只是去健身房和看牙医。

但这甚至不是最好的事情。 我意识到，每当我创建一个新活动时，我暗暗希望 Google 日历能够为它提供艺术，并在它出现时感到由衷的高兴。 就像那样，使用日历不再是必需品，而是成为积极情绪的来源。 而且，显然，插图实验并不适合我一个人，因为谷歌最近推出了具有相同艺术的网页版日历。

有关插图的更多信息：Greg Houston 的“有效的插图：艺术和商业成功的专业技术”。

什么性格

模仿产品的可爱角色多年来一直用于网页设计和营销（想想麦当劳叔叔和米其林人）。 在接口中——没有那么多。 UI 中的吉祥物可能会被认为是侵入性和烦人的，尤其是当它们分散用户对重要动作的注意力或阻碍视图时。 一个臭名昭著的吉祥物出错的例子是微软的 Clippy：它只唤起了恐惧和厌恶（当然，这是情绪，但不是你想要的那种）。

同时，研究表明，人们很容易将事物拟人化，即使它们只是几何图形。 栩栩如生的生物更容易产生联系，更容易理解它们的行为，并且通常会有某种感觉。 此外，动画角色更容易赋予个性，因此您可以通过该角色传播产品的特征——让它变得有趣和愚蠢、热心和乐于助人，或者任何你需要的东西。 吉祥物具有尚未开发的潜力，非常适合非情感产品。

诀窍是时机。

Clippy 之所以如此令人讨厌，是因为他显得不请自来，打断了完全不相关的任务，而且通常会挡道。 但如果吉祥物出现在一个相对空闲的时刻——例如，用户刚刚完成了一项任务——它就会完成它可爱的工作。

UI 中的吉祥物：RememBear 和 Yelp

TunnelBear Inc. 最近推出了另一个像按钮一样可爱的实用程序（不是双关语）。 RememBear 是一个密码管理器，密码应该不是开玩笑的。 但 RememBear 中熊卡通的精彩之处在于，当您执行严肃、重要的事情（例如创建新条目）时，它们将无处可见。 相反，当您完成注册应用程序的第一阶段并且尚未进入第二阶段 - 保存您的第一个密码时，您会得到一个拥抱。 通过将吉祥物放在这个位置，RememBear 避免了挡路，但在我最意想不到的时候让我微笑。

就像 RememBear 一样，Yelp - 一个广为人知的餐厅评论应用程序 - 为其吉祥物提供了完美的时机。 有趣的仓鼠首先出现在 iOS 应用程序设置的底部，这样用户就会像复活节彩蛋一样发现它。

“在 Yelp，我们一直在努力让我们的产品和品牌感觉有趣和令人愉悦，”Yelp 的产品设计经理 Yoni De Beule 说。 “从有趣的海报设计和有趣的发行说明到内部黑客马拉松项目和 Yelp 精英派对，我们都体现了 Yelp 的个性。 当我们发现我们的 iPhone 设置页面在乐趣部门严重缺乏时，我们决定卷起袖子修复它。”

iOS 应用程序中的仓鼠后来得到了陪伴，因为该团队为 Android 版本设计了一只迅猛龙，为网络设计了一只狗。 因此，无论何时何地——你使用 Yelp，你几乎都想用完推荐，这样你就可以看到另一个版本的令人愉快的角色。

如果您想学习如何创建自己的吉祥物，可以在 Envato Tuts+ 上找到 Sirine（又名“Miss ChatZ”）的精彩教程。

把它包起来……

并非所有产品都像游戏或社交媒体应用程序那样天生就很有趣，但即使是实用程序也不必仅仅是实用性的。 处理重复性任务的应用程序通常难以留住用户：人们因为感到无聊而放弃它们，而无聊只是缺乏刺激。 通过使用幽默、动作、独特艺术、游戏元素和相关角色等积极刺激，我们可以让用户以不同的方式感受——更兴奋、更少分心，最终更快乐。

延伸阅读

• “情感设计：为什么我们喜欢（或讨厌）日常事物，”唐诺曼
• “诱人的交互设计：创造有趣、有趣和有效的用户体验（重要的声音），”斯蒂芬 P. 安德森