菜单

用户体验中的微交互

通过 艾莉塔乔伊斯2018年10月21日

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


什么是微交互?

我们与计算机系统的许多日常交互都属于微交互的大范围微交互通常通过传送向用户提供反馈系统状态或帮助用户防止错误此外,microinteractions可以用作一个工具品牌

定义:Microinteractionsare trigger-feedback pairs in which (1) the trigger can be a user action or an alteration in the system’s state; (2) the feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual (usually visual) changes in the user interface.

用户启动的触发器可以包含GUI命令,也可以是手势或基于语音的,而系统启动的触发器包括满足一组预定条件microinteraction时触发的GUI命令,视觉反馈元素将通常放置在靠近触发器。

流程指示如何microinteractions要么是用户-或系统引发和导致反馈传达给用户的一个小变化的用户界面。

微交互包含大量的数字元素,但并非每个元素都是微交互的一部分在屏幕上不断出现的静态元素,不是microinteractions因为他们没有一个明显的触发另外,由多个动作组成的流程不是微交互微交互的一些例子在下表中描述。

数字元素

它是微交互吗?

原因

滚动条

User triggered; visual feedback to user changing location within a page

数字报警

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

按键

这取决于

如果用户点击按钮时没有反馈,则没有微交互

拉动刷新动画

User triggered; visual feedback to a user action

GIF格式

没有

不是由系统或用户触发的

滑动动画

User triggered; visual feedback that a user has swiped an element

电子邮件通知

System triggered; provides user with feedback that a new message has arrived

视频播放器

没有

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

 

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

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

为什么Microinteractions重要?

使用技术的最大乐趣之一就是用户授权和参与愉快的体验不仅仅意味着可用性 - 它需要具有吸引力,而且微交互可以起到宏观作用,通过积极地促进产品或服务的外观和感觉。

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

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

标准微交互,如滚动条与现代同行相比,像拉动刷新元素相比,它们不太可能是差劲的manbetx官方网站手机版正是这些新的微交互需要更多的努力和思考,以创造一个有意义的,良好的manbetx官方网站手机版经验。

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

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

当用户将任务标记为完成,一个小对话框出现在页面的左下角此对话框提供任务已标记为已完成的系统反馈,以及在以下情况下撤消此操作的错误预防选项错误在此框出现后大约一秒钟,一只独角兽飞过浏览器的左下象限,以庆祝工作做得好在这种情况下,有两个微交互:功利对话框和游戏化启发的独角兽动画。

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

如果你曾经使用过任务管理工具,你可能知道有很多选择可供选择 - Asana,Jira,Trello或Wrike,仅举几例这些产品有很多共同之处它们共享诸如将任务分配给团队成员,创建板或与其他产品集成的功能然而,这些产品之间的差异变得非常清楚在分析microinteractions嵌入整个体验在Trello中,将任务移至完成专栏不会产生额外的大张旗鼓并且,对于许多人来说,这完全符合期望我,我渴望完成一个任务的正强化,希望我看到独角兽。

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

显示系统状态

首先可用性启发式重点关注系统状态这种启发式强化了对用户透明的需求通过透明并传达系统的当前状态,用户将感到被赋予权力和参与系统状态的任何显示都是微交互,因为交互自然包括触发(用户动作或系统状态的改变)和反馈。

沟通进步

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

当用户拉动他们的新闻源时,LinkedIn使用循环进度指示器该组件传达系统正在工作,以便用户不会猜测系统是否识别其操作由于这种microinteraction,用户可能会(简要)等待更多的帖子下载,从而继续与LinkedIn。

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

支持

有时系统需要通信他们正在等待进一步的用户输入在最初的触发,microinteractions通知用户系统处于待机状态和需要额外的信息这种类型的微交互鼓励用户继续与产品交互。

例如,在iOS中,当您按住设备主屏幕上的应用程序图标时,系统会通过轻微摇动所有应用程序进行响应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使用微交互(摇动应用程序图标)。

Microinteractions并不局限于网站基于语音的助手(如Google Home)在等待用户命令时使用微交互来传达待机模式在用户说“嘿谷歌”之后,设备会显示一个四点的圆形动画几乎立即点形成一颗钻石的形状与一个微妙的闪烁的运动通过这种视觉反馈,用户知道设备正在倾听并且可以跟进诸如“天气怎么样?”之类的问题。

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

错误预防

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

支持撤消

每个人都会犯错误而且,在数字世界中,这意味着有时我们会偶然点击一下系统应该可以轻松撤消操作,这样用户就不必跳过箍来扭转他们本来不想做的事情。Microinteractions传达UI组件的状态并建议进一步的互动是可能的微交互是支持撤销的完美方式,因为它们告知用户状态发生了变化。

Gap.com允许您通过单击产品图像右上角的心形图标将项目添加到收藏夹这种微交互使用抽心式动画来传达您对产品的“青睐”您可以通过再次单击心形图标轻松撤消此操作,然后该图标将恢复为原始灰色状态。

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

  • 它非常微妙,不会残酷地将用户的注意力从主要任务中拉出来(相比之下,积极的动画会过于干扰。)
  • 通过仅在短时间内激活心脏,这种效果仍然是微交互,而不是不恰当的永久性。
  • The distinction between the pumping heart and the “regular” colored heart (from previously favorited items) is helpful in communicating the change in system state and directing the user’s attention to the effect of a potential accidental activation (something that’s sadly all too common in touch-driven user interfaces).
Gap.com使用微交互来传达用户偏爱产品的信息。

防止返工

创建帐户的过程中,有一些事情比这更令人沮丧点击最后一个提交按钮和接收,你的一个错误密码does not meet requirements that were not previously specifiedMicrointeractions与用户沟通他们的密码是否符合所有现场要求防止重复工作(即再次填写表格)如果没有这些微交互,用户会对产品感到恼火,如果任务不重要,可能会完全脱离。

易趣使用注册表中的微交互来防止验证错误例如,当密码字段被激活时,就会出现一个密码要求清单键入时,由于密码符合这些要求,列表会动态更新如果该字段未满足所有要求,则字段下会显示红色错误消息这一系列微交互协同工作,确保用户获得一致的反馈并获得流畅的体验。

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

沟通品牌

微交互不应该蓬松,应该始终有用 - 但这并不意味着它们不应该体现品牌如果你的品牌很有趣和丰富多彩,那么可以在你的微交互中展示它或者,如果您的品牌是专业和可靠的,使用滑稽的东西,如甜甜圈,在您的拉动刷新微交互中是不明智的就像你的文案有一个说话的语气,你的microinteractions基调(一个很好的例子品牌体验。)

在Apple的消息应用程序上发送生日快乐短信时,气球将填满整个屏幕Apple presents itself as an innovative yet humanistic brand; the birthday microinteraction is in line with this personality by creating an emotional and sensory experience.

当用户向某人发送“生日快乐”文本时,消息使用微交互来声明庆祝。

在Snapchat中,微交互用于表示两个Bitmoji用户在同一个聊天窗口中当您的聊天伙伴正在打字时,他的Bitmoji会出现一个思想泡泡If he’s reading the message, his Bitmoji peaks over the text-input field在这种情况下,鼓励用户提供的反馈继续交谈,保持与应用。

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

许多品牌在很大程度上依赖视觉沟通,但是声音一样强大If you were asked to draw the logo of an insurance company versus sing their commercial jingle, which would be easier? If you watch a lot of television, the jingle will likely come to mind first微交互也可以涉及听觉反应例如,当用户打开系统时,Xbox One控制台提供听觉和视觉反馈:Xbox按钮亮起,系统发出短暂的特征旋律Xbox One的用户可以将这种声音与Xbox的系统音调以及其他游戏平台的声音区分开来这microinteraction是一个标志性的元素与系统的交互以及Xbox的品牌。

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

结论

Well-manbetx官方网站手机版微交互可以对您的用户体验产生重大影响它们通过充当与用户通信的载体来提供价值微交互提供系统状态的可视反馈或帮助用户防止错误此外,品牌沟通microinteractions可以丰富你的产品,从而鼓励用户选择你的产品在你的竞争对手总而言之,这些小细节可以将优质产品转化为优质产品,并使用户脱离参与用户。

参考

萨弗,D(2014)。Microinteractions奥莱利媒体。