杀手级用户体验设计的秘诀：一切都在微交互中
已发表: 2016-11-13设计在于细节。
前几天，我给一位老朋友写了一封不容易写的信息，因为这是一条表达我对失去母亲的哀悼的信息。 本周早些时候我们在电话上谈过几次，但我想在 Facebook Messenger 应用程序上给她发一条快速消息，让她知道我在想她。 我写完信息，决定在最后加上一点“心”。
这个简单的敲击心脏的动作最终变成了我手机屏幕上漂浮的红心的令人愉快的爆炸，还伴随着一些愚蠢的声音效果。 这一刻，虽然短暂而短暂，却在困难时期给我带来了几秒钟的惊喜和喜悦。
这是点击红心后我的屏幕发生的情况。
这些微小的细节，也称为微交互，可以使用户与设备/产品之间的体验更有趣、更容易、更有效和更人性化。 我们通常甚至没有注意到这些微交互。
它们巧妙地微妙，有时几乎看不见； 但是，他们可以制作用户喜欢的产品，而不是他们不喜欢的产品。
换句话说，微交互有可能通过情感和人际关系神奇地弥合用户和技术之间的差距，同时也鼓励他们继续回来寻求更多。
什么是微交互？
微交互基于通过为用户提供令人愉快的体验和有用的反馈来完成单个时刻或任务。 这些微时刻最终以直观有效的方式引导用户完成流程。
《微交互》一书的作者兼 Mayfield Robotics 产品副总裁 Dan Saffer 将微交互定义为“围绕单个用例的包含产品时刻——它们有一个主要任务。 每次您更改设置、同步数据或设备、设置警报、选择密码、登录、设置状态消息或收藏或“喜欢”某些内容时，您都在参与微交互。 它们无处不在：在我们携带的设备中，在我们家中的电器中，在我们的手机和台式机上的应用程序中，甚至嵌入在我们生活和工作的环境中。大多数设备和一些应用程序完全围绕一个微交互构建。”
根据 Saffer 的说法，微交互有利于：
- 只完成一项任务和一项任务。
- 与单个数据进行交互，例如温度或歌曲评分。
- 控制正在进行的过程，例如 Spotify 上歌曲的音量
调整设置。 - 查看或创建一小段内容，例如 Facebook 上的状态
打开或关闭一个特性或功能。
为什么要在您的设计中加入微交互？
- 它们有助于鼓励用户与您的网站进行交互，无论是单击按钮、共享内容还是响应消息或通知。
- 他们立即给用户反馈。
- 它们帮助用户浏览网站。
- 它们以直观和简单的方式帮助引导用户完成流程。
Saffer 将微交互的四个部分描述为触发器、规则、反馈、循环和模式。 让我们更深入地了解每个步骤的含义。
扳机
触发器是启动交互的东西。 它是一种提示，视觉或其他方式，鼓励用户采取行动。 触发器可以是图标的飘动，以鼓励用户点击或单击它。 浮动到您的 Twitter 提要顶部的蓝色按钮，上面写着“新推文”，带有一个向上的箭头，会触发您单击它以查看自您离开后发布的所有新推文。
一些最好的触发器是那些实际预测用户需求的触发器，而不必说明他们的需求。 这需要设计人员收集用户研究和行为数据，以帮助预测用户的需求并相应地设计触发器。
规则
触发器与规则互动。 这些规则列出了交互过程中发生的事情。 这些规则应该让用户感觉很自然，并且它们的存在有助于最大程度地减少错误。 一个很好的例子是，如果您尝试通过 Gmail 发送电子邮件而不输入主题行， Gmail 会通知您“电子邮件没有主题行” ，询问您是否仍要发送。
为你推荐：
元界将如何改变印度汽车业
反暴利条款对印度初创企业意味着什么？
教育科技初创公司如何帮助印度的劳动力提高技能并为未来做好准备……
本周新时代科技股：Zomato 的麻烦仍在继续，EaseMyTrip 发布强...
印度初创公司走捷径寻求资金
数字营销平台 Logicserve 获得 80 卢比的资金，更名为 LS Dig...
反馈
反馈基于规则，并为用户提供有关当时正在发生的事情的信息。 我特别喜欢收到的关于为用户设计的表单的反馈。 在正确的上下文中将内联验证纳入您的设计对用户非常有帮助。
例如，在输入用户名时，如果我看到一个绿色复选标记，我知道我可以继续填写密码字段。 我无法告诉你我填写了多少次用户名和密码字段，按提交，并以红色告知用户名或密码不正确。
这种情况的问题是我完全不知道哪个字段或字母不正确。 如果我能在此过程中做出正确的改变，它会使整个过程变得容易得多。 这些小的绿色复选标记，尽管看起来微不足道，但却在用户填写表单过程中和之后的感受上产生了很大的不同，并有可能提高完成率。
Twitter 注册表单是一个很好的简单示例，说明了如何使用内联验证。 当我完成操作时，复选标记出现在表单字段的右侧。 红色的错误信息还告诉我我需要做什么才能正确填写表格，这也证明是有用的。
Hopper travel 应用程序还明智地使用了微交互。 输入我有兴趣了解更多的日期和目的地后，可爱的小兔子会在应用程序“思考”并拉出结果供我查看时四处跳来跳去。 没有人喜欢等待。 然而，看到兔子跳来跳去给短暂的等待体验带来了一点乐趣，同时也让用户知道某些事情正在发生，结果很快就会显示出来。
循环和模式
循环和模式决定了交互的更大的元规则。 如果重复使用微交互，则重要的是要考虑交互如何相应变化。 想想这种交互如何根据用户行为进行调整。 第一次使用微交互和第七次使用微交互有什么区别？
尝试创建随时间变化的循环，使每次交互时体验更加丰富。 Facebook 的 On This Day Memories 功能是一个很好的例子，展示了如何创建每次参与时都能适应的体验。
大多数 Facebook 用户每天都会检查他们的新闻提要数次。 拥有一个偶尔会提取 4 年前状态更新或图片的功能可能会对用户产生情感（希望是积极的）影响。 这种特殊的微交互有可能产生负面影响。 例如，显示可能使用户感到悲伤或压力的旧帖子会产生意想不到的负面后果。 我建议 Facebook 研究如何防止这些负面体验发生。
设计微交互时要记住的事情
不要过度设计。 微交互不应该让人感到奇怪或花费太多时间来加载。 它们应该服务于一个目的，同时在您的整体设计中无缝流动。
某人第一次体验微交互时，他/她不应该与他们第 10 次或第 100 次使用它时的感觉相同。 使微交互适应上下文。 如果这是用户的第一次，请让箭头帮助导航应用程序。 让他们选择不再显示该消息，这样以后就不会变得烦人了。
这让我想到了第三个技巧。 不要白手起家。 通过进行用户研究来了解您的用户、他们的动机和背景。 您收集的信息将为您提供使您的决定更有效和可用所需的信息。 如果他们是第 20 次出现，请弄清楚他们的动机和目标是什么，并根据您的发现创建微交互。
请记住，目标是使这些交互变得微妙而有效。 确保微交互的风格与你的整体界面设计风格自然契合。 交互不应显得格格不入或令人困惑，并且微交互应与应用程序的整体设计相关联。
6 个正确完成的微交互示例
惊喜在你的袖子上
我听说有人形容多年来一直穿着同样柔软、舒适的长袖衬衫。 一天，当穿着同样的长袖衬衫在一条绿树成荫的小路上跑步时，跑步者描述了变得寒冷并拉扯额外的织物，这意味着寒冷的日子里要遮住她的手，把上衣翻到她的手上。 下面的织物显示了“你被爱”的声明。
这些文字，偷偷印在面料的确切位置，被隐藏起来，在这样的时刻显露出来，让穿着它的人带着一丝欣喜的微瞬间。
松弛表情符号
Little Big Details 网站策划了一些很好的微交互示例。 他们展示的其中一个是在 Slack 中搜索表情符号并且您正在寻找的表情符号不存在时，建议选择“哭泣”表情符号。 当用户找不到他们想要的东西时，他们不会生气，“哭泣”表情符号让他们感到很开心。
谷歌翻译
当你在谷歌翻译上第二次按下“听”按钮时，它会以较慢的速度重复翻译，假设你需要一点额外的时间来理解它所说的内容。
谷歌地图上的夜间模式
我一直很喜欢谷歌地图应用程序的背景如何根据时间变黑。 夜间模式旨在帮助提高夜视能力和安全性，并且是完全自动的。
让我脉搏
查看本网站 Make Me Pulse 以获得真正令人愉快的互动体验。 微交互（进度条、声音、颜色）的使用有助于引导用户通过触发器、规则、反馈和循环完成流程。
滚动条
甚至本页右侧的灰色小滚动条也是一个精彩而简单的示例，说明微交互如何有用且有效，让您作为读者了解本文还有多少内容需要阅读。
希望这篇文章能激发您开始将微交互融入您的设计。 他们有可能将您的用户对您的设计的体验从刚刚好的转变为真正令人难忘的东西。
【本文首发于Proto.io，经授权转载。】