什么是微观互动?

我们每天与计算机系统的许多交互都属于微观交互的大范畴。微交互通常通过传递信息向用户提供反馈system status或者帮助用户防止错误. 此外,微相互作用还可以作为研究的工具branding

Definition:微观相互作用是触发器 - 反馈对,其中(1)触发器可以是用户动作或系统状态的更改;(2)反馈是对触发的狭窄目标响应,并通过用户界面中的小型高层(通常是视觉)更改传达。

用户启动的触发器可以由GUI命令组成,也可以是基于手势或语音的,而系统启动的触发器涉及满足一组预定条件。当一个微交互被GUI命令触发时,一个视觉反馈元素通常被放置在该触发器附近。

A process flow indicating how microinteractions are either user- or system- triggered, and result in feedback communicated to the user by a small change in the user interface.

微互动包括大量的数字元素,但不是每个元素是微互动的一部分。屏幕上始终存在的静态元素不是微互动,因为它们没有不同的触发器。另外,由多种动作组成的流量不是微互动。微助剂的一些实例描述于下表中。

数字元素

Is it a microinteraction?

原因

Scrollbar

用户触发的;用户在页面中更改位置的视觉反馈

数字报警器

System triggered; auditory (and visual) feedback to time condition being met

Button

这取决于

如果用户单击按钮时没有反馈,则没有微内切换

拉动以刷新动画

用户触发;对用户操作的视觉反馈

礼品

不是由系统或用户触发的

Swipe animation

用户触发;visual feedback that a user has swiped an element

电子邮件通知

系统触发;向用户提供新消息到达的反馈

视频播放器

Feature, not a microinteraction; volume control within the video player would be a microinteraction

2014年,丹·萨弗出版了这本书微观相互作用,定义了这一概念并概述了设计微互动的模型。

在本文中,我们将重点讨论为什么微交互对用户体验很重要,并从用户的角度提供几个示例。

为什么微观互动很重要?

One of the greatest joys of using technology comes through用户授权和参与. 愉快的体验不仅仅意味着可用性——它需要引人入胜,这就是微交互可以发挥宏观作用的地方,通过对产品或服务的外观和感觉做出积极贡献。

微观相互作用can improve a product’s user experience by:

  • 鼓励参与
  • 显示系统状态
  • 提供错误预防
  • 传播品牌

Standard microinteractions such as滚动栏与现代元素(如拉动式更新元素)相比,它们的设计不太可能糟糕。正是这些新的微互动需要更多的努力和思考来创造一种有意义的、精心设计的体验。

让我们在快速案例研究微互动井。

To keep track of day-to-day tasks, I use the task-management tool Asana. There are a few aspects of the tool that I especially enjoy, like the tags and the visual design. But by far, my favorite aspect of Asana is the sporadic flying unicorn that soars across my browser when I complete a task. This interaction is an example of a microinteraction.

当用户将任务标记为已完成时,页面左下角会出现一个小对话框。此对话框提供任务已标记为已完成的系统反馈,以及一个错误预防选项,用于在任务已完成时撤消此操作错误。关于a split second after this box appears, a unicorn flies across the bottom left quadrant of the browser in celebration of a job well done. In this case, there are two microinteractions: the utilitarian dialog box and the gamification-inspired unicorn animation.

On the Asana site, when a user marks a task as completed, a dialog box appears with a confirmation text and a button to undo the action. Additionally, a unicorn (or another mystical animal) occasionally soars across the screen.

If you’ve ever used a task-management tool, you probably know that there are a lot of options to choose from — Asana, Jira, Trello, or Wrike, to name a few. These products have a lot in common. They share features like the ability to assign tasks to team members, create boards, or integrate with other products. However, the differences between these products become quite clear when analyzing the microinteractions embedded throughout the experience. In Trello, moving a task to the多恩列不会产生额外的粉丝。而且,对于许多人来说,完全符合预期。我,我渴望完成任务的积极加强,并希望我看到独角兽。

然而,微交互不仅仅是让用户感觉良好。微交互传递系统状态,支持错误预防,传达品牌。这些用例增加了显著的价值,从而使微交互成为将您的产品与竞争对手区分开来的关键方法。微交互提供反馈,让用户随时了解情况并参与其中,如果没有这些反馈,您的客户体验将受到影响。

显示系统状态

第一个可用性启发式关注system status。这种启发式强化了对用户透明的需要。通过透明和传达系统的当前状态,用户将感到授权和订婚。系统状态的任何显示是微互动,因为交互自然地包括触发器(用户动作或系统状态的变化)和反馈。

沟通进步

进度指标, a subcategory of microinteractions, let users know that the system is still working to respond to their actions. They can show a specific or undetermined wait time and may include components like linear or circular progress indicators. Such elements encourage the user to remain committed to a product while they wait for something to happen.

当用户提取他们的新闻信息时,LinkedIn使用循环进度指标。此组件传达系统正在运行,以便用户不进行第二次猜测系统是否识别其操作。由于这种微互动,用户可能(简要地)等待更多的帖子加载,从而继续与Linkedin接合。

在LinkedIn应用程序中,当用户拉动刷新新闻源时,一个进度指示器会告知系统正在处理请求。

支持

有时系统需要传达它们正在等待进一步的用户输入。初始触发后,微相互作用通知用户系统处于待机状态并需要其他信息。这种类型的微互动促使用户继续与产品相互作用。

例如,在iOS中,当您在设备的主屏幕上按住APP图标时,系统会略微摇动所有应用程序响应。This movement communicates that the system is waiting for further action (that is, either tapping the ‘X’ in the top-left corner of the app to delete it or dragging the icon to a different position on the screen in order to move it).

当用户按住应用程序时,iOS使用微交互(晃动应用程序图标)来传达系统正在等待额外的输入。

微互动并不局限于网站。基于语音的助手,比如googlehome,在等待用户命令时,使用微交互来交流待机模式。当用户说“嘿,谷歌”后,设备会显示一个由四个点组成的圆形动画。这些圆点几乎瞬间就形成了钻石的形状,并伴随着微妙的闪烁运动。通过这种视觉反馈,用户知道设备正在收听,并可以接着问一个问题,如“天气怎么样?”?’

Google Home lights up upon hearing the trigger Hey Google, in order to communicate that the device is on standby and waiting for a command from the user.

错误预防

Error prevention,另一个10可用性启发式,focuses on getting rid of error-prone situations and providing confirmation actions. Microinteractions communicate these situations to users and can facilitate a satisfactory experience by supporting undo and preventing rework.

支持撤消

每个人都犯错误而且,在数字世界,这意味着有时我们会意外地点击东西。系统应该使撤销操作变得容易,这样用户就不必为了撤销原本不想做的事情而跳转。微观相互作用communicate the state of a UI component并暗示进一步的互动是可能的。微交互是支持撤销的最佳方式,因为它们通知用户状态发生了变化。

Gap.com网站通过单击产品图像右上角的心形图标,可以将项目添加到收藏夹中。这种微交互使用心脏跳动的动画来传达你“喜欢”这个产品。您可以通过再次单击心脏图标轻松撤消此操作,然后心脏图标将恢复为原来的灰色状态。

This pulsating heart is anappropriate use of animation to draw attention,原因有多种:

  • 它足以让用户的注意力远离主要任务。(相比之下,激进的动画是太侵扰的。)
  • 通过只在短时间内激活心脏,这种效果仍然是一种微观互动,而不是不适当的永久性。
  • 泵心和“常规”彩色心脏(来自以前喜欢的项目)之间的区别有助于传达系统状态的变化,并将用户的注意力引导到潜在意外激活的效果上(不幸的是,这在触摸驱动的用户界面中太常见了)。
Gap.com网站使用微交互来传达用户对产品的偏好。

Prevent Rework

在帐户创建过程中,很少的东西比点击最终提交按钮更令人沮丧并收到你的错误password不符合先前未指定的要求。微交互向用户传达他们的密码是否满足所有的现场要求以及防止重复工作(即再次填写表格)。没有这些微互动,用户对产品感到恼火,如果任务不重要,可能会完全脱离。

eBay uses microinteractions in the registration form to prevent validation errors. For instance, when the password field is active, a list of password requirements appears. While typing, as the password meets each of these requirements, the list updates dynamically. If the field is left without meeting all requirements, a red error message appears under the field. This series of microinteractions works together to ensure users receive consistent feedback and have a smooth experience.

eBay在注册表格中使用微交互来传达密码是否符合现场要求。

沟通品牌

微观相互作用shouldn’t be fluffy and should always serve a purpose — but that doesn’t mean that they shouldn’t embody a brand. If your branding is fun and colorful, it’s okay to let that show in your microinteractions. Alternatively, if your brand is professional and reliable, using something comical, like a donut, in your pull-to-refresh microinteraction is ill-advised. Just as your copywriting has atone of voice,你的微观互动也有一个基调。(一个很好的例子)品牌即体验.)

在苹果的短信应用程序上发送生日快乐短信时,气球会填满屏幕。苹果以一个创新而人性化的品牌展现自己;生日微互动通过创造情感和感官体验符合这种个性。

Messages uses microinteractions to declare a celebration when a user sends someone a ‘happy birthday’ text.

在Snapchat中,微交互用于通信两个Bitmoji用户在同一个聊天窗口中。当你的聊天伙伴打字时,他的Bitmoji出现了一个思维泡沫。如果他在读信息,他的比特码会在文本输入区达到峰值。在这种情况下,提供的反馈会鼓励用户继续对话,并与应用程序保持互动。

Snapchat使用微交互来显示两个用户在同一个聊天窗口中。当对话伙伴阅读聊天时,可以看到他的Bitmoji在左下角(左)偷看。当对话伙伴积极地打字时,他的Bitmoji出现了一个思想泡沫(右)。

许多品牌严重依赖视觉传达给我们,但声音也同样强大。如果你被要求画一个保险公司的标志,而不是唱他们的商业歌曲,哪一个会更容易?如果你经常看电视,你可能会首先想到叮当声。微观互动也可能涉及听觉反应。例如,当用户打开系统时,Xbox One控制台会提供听觉和视觉反馈:Xbox按钮亮起,系统会发出一段简短、独特的旋律。Xbox One的拥有者可能会将这种声音与Xbox的系统失调以及其他游戏平台的声音区分开来。这种微交互是与系统以及Xbox品牌交互的标志性元素。

Xbox One在用户开机时使用听觉和视觉反馈。对于用户来说,听觉反馈是系统的一个可立即识别的方面。(在大多数浏览器中,如果控件不可见,请将鼠标悬停在视频上以显示它们。)

结论

精心设计的微互动会对您的用户体验产生重大影响。它们通过用作与用户通信的车辆提供价值。微互动提供系统状态的视觉反馈或帮助用户防止错误。此外,微互动可以通过沟通品牌来丰富您的产品,从而鼓励用户在竞争对手中选择您的产品。总而言之,这些小细节可以将良好的产品转换为一个伟大的产品,并将用户脱离到有关用户中。

参考

Saffer, D. (2014).微观相互作用奥莱利媒体。