当前位置:首页 > 网站用户体验专题

微交互:网站详细设计

2020-01-02

“最好的产品在两方面做得很好:功能和细节。功能是吸引人们使用您的产品的原因;细节是让它们在那里的原因。” Dan Saffer说。细节的重要性不能过分强调。详细信息使用户喜欢或讨厌应用或网站。微交互就是那些细节。在全局设计方案中,它们可能很容易被忽略,但实际上它们将整个体验结合在一起。

在本文中,我将解释什么是微交互作用,为什么它们如此重要并提供一些出色的例子。

 

什么是微交互

微交互是围绕完成单个任务的微妙时刻。我们周围几乎所有的应用程序都充满了微交互。

微交互的最著名例子早在发明计算机之前就已经存在。开/关开关通常是人们与产品接触的第一个微交互。


特定微相互作用的其他一些示例包括:

  • 当您将iPhone切换为静音时,振动通知以及静音模式图标将显示。
  • 一键刷新UI模式。通过将用户寻找更多内容的愿望与刷新动作联系起来,体验变得更加无缝。


图片来源:Ramotion

  • 社交网络上的“喜欢”按钮,通过使用交互式动画突出显示更改。这样的反馈通知用户他们在喜欢该帖子的人的列表中。


图片来源:Dribbble

 

他们为什么工作

简而言之,微交互使用户界面的机器更少,更人性化,从而改善了用户体验。很多时候,我们都会考虑外观,以及外观与设计之间的关系。当我们考虑微交互时,它们几乎平衡了用户对产品,服务或品牌的感受。微交互可通过以下方式微调以人为本的设计:

  • 提供即时反馈 -视觉反馈吸引了用户对确认的自然渴望。用户立即知道他们的动作已被接受,并且他们希望通过视觉奖励感到高兴。
  • 充当交互的促进者 —微交互具有鼓励用户实际交互的能力。他们可以指导用户如何使用该应用程序。
  • 带来乐趣 —微交互是在不减损主要体验的前提下,为设计带来更多额外乐趣的绝佳机会。

 

额外的好处

由于微交互本质上是短暂的,因此必须将其设计为可重复使用。精心设计的微交互功能可以创建:

习惯循环

微交互是习惯循环的关键组成部分。当人们反复执行相同的动作时,就会形成习惯。典型的习惯循环包含三个元素:

  1. 提示—启动动作的触发器
  2. 常规-根据提示,您执行一个操作
  3. 奖励-完成例行活动所获得的好处,完成操作的理由

奖励越强,习惯就越强。

Facebook关于新朋友请求的通知是习惯循环的一个很好的例子:红色徽章和白色图标(cue)表示有一个新请求,这使用户单击该图标(例程)以查看有关该人的信息(奖励)。一段时间后,用户在看到红色徽章时会自动单击图标。

签名时刻

如果做得好,微交互可以成为增加客户忠诚度的标志性时刻。签名时刻是微交互,已被提升为品牌的一部分。考虑一下Facebook的“赞”按钮。它成为Facebook界面的自然组成部分。如果Facebook突然删除了此功能,则用户会注意到它并认为该应用已损坏。

 

识别机会

微交互的优点之一是,它们可以围绕任何潜在的动作插入各种位置。微交互有利于:

突出变化

微交互可以吸引用户的注意在许多情况下,使用动画来吸引用户对重要细节(即通知)的关注。


图片来源:Dribbble

减少用户的工作量

自动完成是微交互的一个很好的例子。键入具有很高的交互成本;即使使用完整的键盘(在触摸屏上更是如此),它容易出错且耗时。自动完成功能可帮助用户更快地提供正确的答案,而不会出现印刷错误。键入每个字母时,系统将对您要查找的单词做出最佳猜测。


图片来源:fancy.surge.sh

提供反馈以表明已完成的工作

微交互可以增强用户正在执行的动作。通过遵循“ 显示,不说”的原则,您可以使用动画反馈来显示已完成的工作。Stripe的示例中,当用户单击“付款”时,微调器会在应用程序显示成功状态之前短暂出现。复选标记动画使用户觉得自己很容易付款,并且用户确实喜欢这些重要的细节。

提供状态信息

雅各布·尼尔森(Jakob Nielsen)提出的第一个可用性启发式原则指出:系统应始终使用户了解正在发生的事情。聊天中的键入指示器是提供状态信息的微交互的一个很好的例子。在聊天中编写消息时,它会显示在您的好友的屏幕上。


图片来源:Dribbble

验证用户数据

高端网站设计表单设计中最重要且经常被忽略的方面之一但是,犯错误是人的天性,您的表格也可能不受人为错误的影响。用户不满意填写表单的过程,只是在提交时才发现错误。这是验证微交互在用户友好形式中发挥作用的地方。实时在线验证可立即通知用户所提供数据的正确性。这种方法使用户可以更快地更正他们犯的错误,而不必等到按下提交按钮才能看到错误。如果做得正确,它可以将模棱两可的互动变成清晰的互动。

免费获取报价

  • 29923329

  • 杭州市丰庆路498号北软智慧科创大厦203

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2021 杭州派迪科技有限公司  Copyright © 2008-2020  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号