菜单 关闭

Microinteractions在用户体验

通过 Alita乔伊斯10月21日2018

简介:Microinteractions传达系统状态,支持错误预防,和品牌沟通。他们是由一个触发器,专用,和可以接触的经验。。


Microinteractions是什么?吗?

我们的许多日常与计算机系统交互microinteractions的大伞下。Microinteractions提供反馈给用户,通常通过输送系统状态或者帮助用户防止错误。此外,microinteractions可以用作一个工具品牌。。

定义:Microinteractionstrigger-feedback对(1)触发的用户操作或改变系统的状态;(2)反馈是一个狭隘的目标反应通过小触发器和沟通,高语境(通常是视觉)用户界面的变化。。

用户发起的触发器可以由一个GUI命令或手势和语音,而系统进行触发涉及会议一组预先确定的条件。当microinteraction引发的GUI命令,视觉反馈元素将通常放置在靠近触发器。。

流程指示如何microinteractions要么是用户或系统触发,和结果反馈传达给用户的一个小改变用户界面。。

Microinteractions包含大量的数字元素,但并不是每个元素是microinteraction的一部分。在屏幕上不断出现的静态元素,不是microinteractions因为他们没有一个明显的触发。此外,不是microinteractions流由多个操作。一些例子microinteractions下表中描述。。

数字元素

这是一个microinteraction吗?吗?

原因

滚动条

是的

用户触发;视觉反馈在页面用户改变位置

数字闹钟

是的

系统触发;听觉和视觉反馈时间条件得到满足

按钮

这取决于

如果没有反馈,当用户单击按钮时,没有microinteraction

Pull-to-refresh动画

是的

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

gif

没有

不引发的系统或用户

滑动动画

是的

用户触发;视觉反馈,用户刷卡一个元素

电子邮件通知

是的

系统触发;为用户提供反馈,一个新的消息已经到来

视频播放器

没有

特性,不是microinteraction;在视频播放器音量控制microinteraction

在2014年,丹Saffer出版了这本书Microinteractions,定义这个概念,概述了模型设计microinteractions。manbetx官方网站手机版。

在这篇文章中,我们关注microinteractions为什么重要的用户体验,并提供几个例子从用户的视角。。

为什么Microinteractions重要?吗?

的最大乐趣之一是通过使用技术用户授权和参与。一种愉快的体验不仅仅意味着可用性——它需要参与,这就是microinteractions可以发挥宏观作用,通过积极促成产品或服务的外观。。

Microinteractions可以提高产品的用户体验:

  • 鼓励参与
  • 显示系统状态
  • 提供错误的预防
  • 品牌沟通

标准microinteractions等滚动条不太会设计不良而现代同行像pull-to-refresh元manbetx官方网站手机版素。正是这些新microinteractions需要更多的努力和想创建一个有意义的,精心设计的manbetx官方网站手机版经验。。

让我们穿过快速案例研究microinteraction做得很好。。

跟踪日常任务,我使用任务管理工具体式。有几个方面的工具,我特别喜欢,标签和视觉设计。manbetx官方网站手机版但到目前为止,体式的我最喜欢的方面是零星的飞行独角兽,翱翔在我的浏览器,当我完成一项任务。这种交互microinteraction就是一个例子。。

当用户标记任务完成,一个小的对话框在页面的左下角。这个对话框提供了系统反馈的任务已经完成和防止错误选项取消该操作,以防这是一个错误。一瞬间后出现这个盒子,独角兽飞跨浏览器的左下象限在庆祝一个工作做得好。在这种情况下,有两种microinteractions:功利主义的对话框和gamification-inspired独角兽动画。。

体式的网站,当用户标记任务完成,出现一个对话框和一个确认按钮文本和撤消操作。此外,独角兽(或另一个神秘的动物)偶尔翱翔在屏幕上。。

如果您曾经使用过一个任务管理工具,你可能知道有很多选项可供选择——体式,Jira,Trello,或Wrike,等等。这些产品有很多共同点。他们分享等功能将任务分配给团队成员的能力,建立董事会,或与其他产品的集成。然而,这些产品之间的差异变得非常清楚在分析microinteractions嵌入整个体验。在Trello,移动的任务完成列生成没有额外的宣传。而且,对许多人来说,,完全符合预期。我,我渴望完成一个任务的正强化,希望我看到独角兽。。

然而,microinteractions做的不仅仅是让用户感觉良好。Microinteractions传达系统状态,支持错误预防,和品牌沟通。这些用例添加有意义的价值,从而使microinteractions区分你的产品和竞争对手的一个重要途径。Microinteractions提供反馈让用户了解和参与,如果没有他们,你的客户体验将受到影响。。

显示系统状态

第一个可用性启发式关注的可见性系统状态。这种启发式方法强化了需要与用户是透明的。通过透明和交流系统的当前状态,用户体会和参与的权利。任何显示系统状态是microinteraction因为自然的交互包括触发器(用户操作或系统状态的变化)和反馈。。

沟通进展

进度指标,microinteractions的子类别,让用户知道系统仍在对自己的行为作出回应。他们可以显示一个特定的或不确定的等待时间和可能包括组件如线性或圆形进度指标。这些元素鼓励用户继续致力于一个产品,当他们等待事情发生。。

LinkedIn用户pull-to-refresh订阅时使用圆形进度指标。这个组件通信系统工作系统,以便用户不猜测是否认出了他们的行动。由于这个microinteraction,用户可能会(简要)等待更多的帖子负载,从而继续与LinkedIn。。

LinkedIn的应用,当用户pull-to-refresh他们的文章,一个进度指示器通信系统正在请求。。

备用

有时系统需要进一步沟通,他们等待用户输入。在最初的触发之后,microinteractions通知用户,系统备用和需要额外的信息。这种类型的microinteraction鼓励用户继续与产品进行交互。。

例如,在iOS,当你按住设备的主屏幕上的一个应用程序图标,略微颤抖的系统响应的所有应用程序。这个运动通信系统正在等待进一步的行动(即或者点击左上角的“X”的应用删除它或在屏幕上拖动图标到另一个位置来移动它)。。

iOS使用microinteraction(摇晃的应用程序图标)当用户presses-and-holds应用通信系统正在等待额外的输入。。

Microinteractions并不局限于网站。语音助手谷歌等家用microinteractions沟通待机模式时等待用户命令。用户说,后“嘿,谷歌,的设备显示一个循环动画四个点。几乎立即点形成一颗钻石的形状与一个微妙的闪烁的运动。通过这种视觉反馈,用户知道设备是听力和可以跟进的问题如“天气怎么样?”

谷歌点亮回家听到触发器嘿谷歌,为了沟通设备待命,等待用户命令。。

错误的预防

错误的预防,另一个10可用性启发式,关注摆脱容易出错的情况,并提供确认的行为。Microinteractions这些情况传达给用户,可以促进一个令人满意的经验通过支持撤销和防止返工。。

支持撤消

每个人都会犯错而且,在数字世界中,这意味着我们有时点击偶然的事情。系统应该使它容易撤销行动,这样用户不需要百依百顺扭转他们不想做的事情放在第一位。MicrointeractionsUI组件的状态进行沟通和建议进一步交互是可能的。Microinteractions是完美的方式来支持撤销,因为他们通知用户状态发生的变化。。

差距。com允许您将项目添加到您的收藏点击心脏图标在右上角的产品形象。这个microinteraction使用核心动画交流你的受欢迎的产品。你可以取消这个动作心脏再次点击图标,然后把它放回原来的灰色状态。。

这种脉动的心是一个适当使用动画吸引注意力,多个原因:

  • 微妙地不是残忍地把用户的注意力从最主要的任务。(相比之下,咄咄逼人的动画太烦人。)
  • 只有动画心脏在短时间,这种影响仍然是一个microinteraction,而不是不当永久性的。。
  • 泵的心脏和“之间的区别常规”彩色的心收藏次数(从以前项目)有助于交流系统状态的变化和指导用户的关注潜在的意外活化的影响(可悲的是司空见惯的东西touch-driven用户界面)。。
差距。com使用microinteractions沟通用户受欢迎的产品。。

防止返工

创建帐户的过程中,很少有东西比这更令人沮丧点击最后一个提交按钮和接收,你的一个错误密码不符合要求,没有先前指定的。Microinteractions交流需求和用户密码是否符合所有字段避免重复工作(我。e。填写表单)。如果没有这些microinteractions,用户与产品变得生气,如果这个任务不是关键,可能完全脱离。。

eBay在注册表单中使用microinteractions防止验证错误。例如,当密码字段是活跃的,密码要求的列表出现。虽然打字,满足这些需求的密码,动态更新列表。如果字段是没有满足所有的需求,下面会出现一个红色的错误消息。这一系列microinteractions一起工作,以确保用户得到一致的反馈和有一个平滑的体验。。

eBay使用microinteractions登记表的沟通密码是否符合现场要求。。

品牌沟通

Microinteractions不该蓬松,应该为一个目的——但这并不意味着他们不应该体现一个品牌。如果你的品牌是有趣的,丰富多彩的,没关系,让你microinteractions显示。另外,如果你的品牌是专业的和可靠的,用滑稽的东西,像一个甜甜圈,在你pull-to-refresh microinteraction是不明智的。就像你的文案的语气,你的microinteractions基调。(一个很好的例子品牌体验。)

消息发送生日祝福短信时在苹果的应用程序,气球填满屏幕。苹果还礼物本身作为一个创新人文品牌;生日microinteraction符合这个性通过创建一个情感和感官体验。。

消息使用microinteractions宣布庆祝当用户发送“生日快乐”的文本。。

在Snapchat,microinteractions用于交流两个Bitmoji用户在同一个聊天窗口。当你的伴侣是打字聊天,他的Bitmoji似乎认为泡沫。如果他的阅读消息,他的领域向Bitmoji山峰。在这种情况下,鼓励用户提供的反馈继续交谈,保持与应用。。

Snapchat使用microinteractions表明两个用户在同一个聊天窗口。当读取聊天对话伙伴,他可以看到Bitmoji窥视的左下角(左)。当谈话伙伴积极打字,他的Bitmoji似乎认为泡沫(右)。。

许多品牌在很大程度上依赖视觉沟通对我们来说,但是声音一样强大。如果你被要求画出保险公司的商标和商业叮当声歌唱,这将是更容易吗?如果你经常看电视,叮当可能会涌上心头。Microinteractions也可以涉及到听觉的反应。例如,Xbox一个控制台提供听觉和视觉反馈当用户将系统:Xbox按钮照亮,系统发出一个短的,旋律特征。Xbox的所有者可以区分这声音从Xbox的系统优化,以及其他游戏平台的声音。这microinteraction是一个标志性的元素与系统的交互以及Xbox的品牌。。

Xbox听觉和视觉反馈当用户使用权力。它的用户,听觉系统的反馈是一个让人一眼就能认出来的方面。(在大多数浏览器,悬停在视频显示控制如果他们不是已经可见。)

结论

设计良好的manbetx官方网站手机版microinteractions可以对用户体验产生很大的影响。他们提供价值作为车辆与用户沟通。Microinteractions提供视觉反馈系统状态或帮助用户避免错误。此外,microinteractions交流可以丰富你的产品品牌,从而鼓励用户选择你的产品在你的竞争对手。总而言之,这些小细节可以将好的产品转换为一个伟大的产品,和闲散用户进入一个用户。。

参考

Saffer,D。(2014)。。Microinteractions。。O ' reilly媒体。。