首页->

UE设计中用户体验中的微交互

UE视界网    (1)  (1)

2019-11-26 10:35:24

微交互传达系统状态,支持错误预防并传达品牌。它们是由触发器触发的,具有单一目的,可以使体验引人入胜。


什么是微交互?

我们与计算机系统的许多日常交互都属于微交互的大伞。微交互通常通过传达系统状态或帮助用户防止错误来向用户提供反馈。另外,微交互作用可以用作品牌的载体。


定义:微交互是触发器-反馈对,其中(1)触发器可以是用户操作或系统状态的更改;(2)反馈是针对触发的狭窄针对性响应,并通过用户界面中很小的,高度上下文相关的(通常是可视的)更改进行传达。


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


1574734546337_0.png

指示用户或系统如何触发微交互并通过用户界面中的微小变化导致反馈传达给用户的处理流程。

微交互包含大量数字元素,但并非每个元素都是微交互的一部分。屏幕上始终存在的静态元素不是微交互,因为它们没有明显的触发器。另外,由多个动作组成的流不是微交互。下表描述了微交互作用的一些示例。


1574734646297_3.png

2014年,Dan Saffer出版了《微交互》一书,该书定义了这个概念并概述了设计微交互的模型。


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


为什么微交互很重要?

使用技术的最大乐趣之一来自用户的授权和参与。令人愉悦的体验不仅意味着可用性,还需要参与其中,在这种情况下,微交互可以通过对产品或服务的外观做出积极贡献来发挥宏观作用。


微交互可以通过以下方式改善产品的用户体验:


  • 鼓励参与

  • 显示系统状态

  • 提供错误预防

  • 沟通品牌

与诸如拉动刷新元素之类的现代技术相比,滚动条之类的标准微交互设计的可能性较小。这些新的微交互需要更多的精力和思想来创建有意义的,精心设计的体验。


让我们快速完成一个微交互的案例研究。


为了跟踪日常任务,我使用任务管理工具Asana。我特别喜欢该工具的一些方面,例如标签和视觉设计。但是到目前为止,我最喜欢Asana的方面是当我完成一项任务时,零星的飞行独角兽飞过我的浏览器。这种相互作用是微相互作用的一个例子。


当用户将任务标记为完成时,页面左下角会出现一个小对话框。该对话框提供系统反馈,表明该任务已被标记为已完成,并且提供了一个防止错误的选项,以防该操作出错。此框出现后大约一秒钟,一只独角兽飞过浏览器的左下象限,以庆祝工作出色。在这种情况下,存在两个微交互:实用对话框和游戏化启发的独角兽动画。


1574734698769_1.png

在Asana网站上,当用户将任务标记为已完成时,将出现一个对话框,其中包含确认文本和一个用于撤消操作的按钮。此外,独角兽(或其他神秘动物)偶尔会在屏幕上screen翔。

如果您曾经使用过任务管理工具,那么您可能知道有很多选项可供选择-Asana,Jira,Trello或Wrike,仅举几例。这些产品有很多共同点。他们共享的功能包括将任务分配给团队成员,创建董事会或与其他产品集成的功能。但是,在分析整个体验中嵌入的微交互时,这些产品之间的差异变得非常明显。在Trello中,将任务移至“ 完成”列不会产生额外的夸张声。而且,对于许多人来说,这完全符合期望。我,我渴望完成任务并希望看到独角兽的积极支持。


但是,微交互不仅可以使用户感觉良好。微交互传达系统状态,支持错误预防并传达品牌。这些用例可带来巨大的价值,从而使微交互成为使您的产品与竞争对手区分开来的关键方法。微交互可提供反馈,以使用户保持知情和参与度,而没有它们,您的客户体验将受到影响。


显示系统状态

第一个可用性启发式方法侧重于系统状态的可见性。这种启发式方法增强了对用户透明的需求。通过透明并交流系统的当前状态,用户将感到权力和参与。系统状态的任何显示都是微交互,因为该交互自然包括触发器(用户操作或系统状态更改)和反馈。


沟通进度

进度指示器是微交互的一个子类别,它使用户知道系统仍在努力响应其操作。它们可以显示特定的或不确定的等待时间,并且可以包括线性或圆形进度指示器之类的组件。这些元素鼓励用户在等待某些事情发生时继续致力于产品。


当用户拉动刷新新闻时,LinkedIn使用循环进度指示器。此组件表明系统正在运行,因此用户不必再猜测系统是否已识别其操作。由于这种微交互作用,用户很可能(简短地)等待加载更多帖子,从而继续与LinkedIn互动。


1574734796096_5.png

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

支持

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


例如,在iOS中,当您按住设备主屏幕上的应用程序图标时,系统会通过轻轻摇动所有应用程序来做出响应。此动作表明系统正在等待进一步的操作(即,点击应用程序左上角的“ X”以将其删除,或将图标拖动到屏幕上的其他位置以进行移动) 。


1574735267580_3.png

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

微交互不仅限于网站。在等待用户命令时,基于语音的助手(例如Google Home)使用微交互来传达待机模式。在用户说“嘿Google”之后,设备会显示四个点的圆形动画。几乎瞬间,这些点就以微妙的闪烁动作形成了钻石的形状。通过该视觉反馈,用户可以知道设备正在收听,并且可以提出诸如“天气如何?”之类的问题。


听到触发器Hey Google后,Google Home会亮起,以告知该设备处于待机状态并等待用户发出命令。

错误预防

错误预防是10种可用性启发式方法中的另一种,其重点是摆脱容易出错的情况并提供确认措施。微交互将这些情况传达给用户,并通过支持撤消和防止返工来促进令人满意的体验。


支持撤消

每个人都会犯错,在数字世界中,这意味着有时我们会无意中点击某些东西。系统应该使撤消操作变得容易,这样用户就不必跳过障碍就可以撤消他们本来不想做的事情。微交互传达UI组件的状态,并建议进一步的交互是可能的。微交互是支持撤消操作的理想方法,因为它们会通知用户状态发生了变化。


Gap.com允许您通过单击产品图片右上角的心形图标将商品添加到收藏夹。这种微交互使用动人的动画来传达您“喜欢”该产品。您可以通过再次单击心脏图标轻松地撤消此操作,该图标随后将恢复为原始的灰色状态。


这种动人的心是动画的一种适当使用,可以引起人们的注意,原因有很多:


  • 它足够巧妙,不会残酷地将用户的注意力从主要任务上移开。(相比之下,具有攻击性的动画将太具有侵入性。)

  • 通过仅在短时间内为心脏设置动画,此效果将保持微交互作用,而不是永久性地过度。

  • 抽气心脏与“常规”有色心脏(来自以前喜欢的项目)之间的区别有助于传达系统状态的变化,并引导用户注意潜在的意外激活的影响(在触摸中太常见了驱动的用户界面)。

1574735397363_0.png

Gap.com使用微交互来传达用户喜欢的产品。

防止返工

在创建帐户的过程中,没有什么比单击最终提交按钮更令人沮丧的了,并且收到错误消息,提示您的密码不符合先前未指定的要求。微交互会向用户传达其密码是否符合所有现场要求,并防止重复工作(即再次填写表格)。如果没有这些微交互,用户就会对产品感到恼火,并且,如果任务不是很关键,则可能会完全脱离。


eBay使用注册表中的微交互功能来防止验证错误。例如,当密码字段处于活动状态时,将显示密码要求列表。键入时,由于密码符合上述所有要求,因此列表会动态更新。如果保留该字段而不满足所有要求,则该字段下方会出现红色错误消息。这一系列的微交互可共同确保用户获得一致的反馈并获得流畅的体验。


1574735446541_3.png

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

传达品牌

微互动不应该蓬松,应该始终有一个目的-但这并不意味着它们不应该体现品牌。如果您的品牌既有趣又丰富多彩,那么可以在您的微互动中展示出来。或者,如果您的品牌是专业且可靠的,则建议不要使用像甜甜圈这样的可笑的东西来进行“拉动式”微交互。就像您的文案写作有声音一样,您的微交互也有声音。(将品牌作为体验的一个很好的例子。)


在Apple的“消息”应用程序上发送生日快乐短信时,气球会充满整个屏幕。苹果公司展示自己是一个创新而又人文的品牌。生日微交互通过创造情感和感官体验来与此个性相符。


1574735516394_5.png

当用户向某人发送“生日快乐”文本时,Messages使用微交互来宣布庆祝活动。

在Snapchat中,微交互用于传达两个Bitmoji用户在同一聊天窗口中的信息。当您的聊天伙伴键入内容时,他的Bitmoji出现,并带有一个思想泡泡。如果他正在阅读消息,则他的Bitmoji会在文本输入字段上达到峰值。在这种情况下,提供的反馈鼓励用户继续对话并保持与应用的互动。


1574735651523_4.png

Snapchat使用微交互显示两个用户在同一个聊天窗口中。当对话伙伴阅读聊天记录时,可以在左下角(左)看到他的Bitmoji。当对话伙伴积极输入内容时,他的Bitmoji出现,并带有一个思想泡泡(右)。

许多品牌都非常依赖视觉效果与我们交流,但声音可能同样强大。如果要求您绘制保险公司的徽标而不是唱他们的商业铃声,那会更容易吗?如果您看很多电视,则很可能首先想到铃声。微交互也可能涉及听觉响应。例如,当用户打开系统电源时,Xbox One控制台会提供听觉和视觉反馈:Xbox按钮点亮,并且系统发出简短的特征性旋律。Xbox One的所有者可能会将这种声音与Xbox的系统关闭音以及其他游戏平台的声音区分开。这种微交互是与系统以及Xbox品牌交互的标志性元素。


当用户打开电源时,Xbox One使用听觉和视觉反馈。对于用户而言,听觉反馈是系统的即时可识别的方面。(在大多数浏览器中,如果控件尚不可见,则将它们悬停在视频上以显示控件。)

结论

设计良好的微交互可以对您的用户体验产生重大影响。它们通过充当与用户沟通的工具来提供价值。微交互提供系统状态的视觉反馈,或帮助用户防止错误。此外,微交互可以通过传播品牌来丰富您的产品,从而鼓励用户选择您的产品,而不是竞争对手。总而言之,这些小细节可以将优质产品转化为优质产品,并让用户脱离参与度。


责任编辑:网络UESJ网:   UE视界网,未经授权不得转载
关键词 >> 交互设计,UE设计

还可以输入0个字

(审核后展示)
打开目录