数极客首页

使用动画提升支付体验

运用动画提升支付体验

设计表单很容易被看成是一件苦差事,耗费

了我们能够

用在其他更激动

人心部分

的时间。支付是结账流程的一部分

,这时分
用户正处于用信任你和产品的边缘,此时的体验应该是尽可能优秀的愉悦的,而正确运用
动画能够

真正提升用户体验

动画的目的不只
仅是为了文娱
用户,相反响
该辅佐

用户更好天文
解行将
发作
什么事情,以及怎样
高效地运用
你的产品。假定

你禁用动画,那么流程体验将会大打折扣。假定

不是这样,那么可能意味着你的动画是多余的。

这也正是Stripe Checkou背后的团队想要寻觅
的,这也是我们为什么会花大量时间和肉体

来打造Checkout。我们主要关注在Checkout中运用
动画,由于
我们置信
它们会丰厚
应用的中心
体验。为了阐明

动画是怎样
工作的,我将用我们目前曾经
完成
的动画作为示例。

动画添加内容

运用动画提升支付体验

这个过渡演示了动画能够

对用户有用。很显然
,在我们央求

用户添加电话号码作为Remember me步骤中一部分

时,该动画展示

很好地展示

了电话号码输入部分

晃动!晃动!晃动!

运用动画提升支付体验

当创建

表格的时分
,很容易疏忽

用户出错时的体验。这个动画通知
用户他们提供了错误的信息,这也是用户倍感挫败的中央
,也经常会招致
很高的支付流失率。所以我们添加了这个简单的晃动效果。在事情出错时,它同时也能够

减轻用户挫败感。上边这个设计是简单的晃动。

变戏法

运用动画提升支付体验

动画能够

让用户察觉

到事情停顿
比他们想象中的要快很多。当你等候
某个东西时,我们知道

时间相对来说会慢的像蜗牛。上边这个小小的动画能够

让等候
变得愈加
流利
有趣,即便

理论

上时间并没有任何不同。值得留意
的是,这个动画整体上来说是个幻觉–理论

上我们并不知道

什么时分
你收到了信息。

按钮转换

运用动画提升支付体验

巧妙

的动画是我的最爱。“Payment Info”和“Pay $25.00”两种状态之间的转换运用
了滑动效果,呼应

了上边支付细节的过渡。当你完成每个步骤的时分
,突出了链接操作的按钮的改动

当用户点击“Pay”时,在展示

胜利

状态前会呈现
一个短时间持续的spinner。我十分

喜欢这个checkmark动画,它让你觉得很简单就完成了置办

加分项

运用动画提升支付体验

这个动画看起来似乎有点多余,即便

移除了也不会打断运用
流程–这与本文的普通
前提是矛盾的。但是我以为
它在改进

运用
流程方面依然

是有用的。我和大多数人一样,不大置信
那些用起来像是10年前做的网站一样。上边这个动画为整个用户体验赋予了漂亮
的觉得
,它对细节的关注让你忍不住信任它。

我用这些例子阐明

能够

在意想不到的中央
添加动画,从而提升用户体验。不论

你的应用是什么类型的,正确运用
动画能够

让事情愈加
明晰
,衔接
用户操作后的结果,改动
他们对时间的知觉,更重要的是让用户感到愉悦。动画并不只
仅适用于音乐、照片或者天气类应用。

 

文章来源:CocoaChina

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章