Stripe如何设计付款流程动画

来源  :   Z派生活     2020-06-09 01:12:27

2020-06-09

Stripe如何设计付款流程动画

昨天我们 介绍了 Stripe 这家虽然年轻却备受瞩目的线上金流公司 ,提到在技术之外他们也非常重视设计,创办人兼执行长 Patrick Collison 还会跟设计师合作,写程式微调网站上 demo 结帐流程的动画。另一位 Stripe 设计师 Michaël Villar 则是在 〈 Improve the payment experience with animations 〉 谈如何处理结帐流程中填写付款表单的动画,以及背后的用意。

Michaël Villar 认为,如果使用者已经走到结帐流程、开始填写付款的表单,那幺等于是决定信任这个网站、信任你的公司,因此整个体验当然要尽可能地做到最好。动画的功能在此不是为了要用娱乐效果取悦客户,相反的,动画是要帮助他们更容易了解你的产品。如果拿掉动画整个流程也不受影响,那幺这个动画就是多余的。

Stripe 负责设计结帐的团队决定从一开始就要使用动画,他们相信动画可以强化整个核心体验。

Stripe如何设计付款流程动画
影片连结

这个动画是要告诉使用者,电话号码就是「记住我」这个步骤所需要的资讯,而且是在使用者勾选「记住我」选项之后才会随之出现。

摇啊摇
Stripe如何设计付款流程动画
影片连结

表单设计者很容易就可以告诉使用者所填写的资讯在内容或是格式上是否有误,但如果直接在每个栏位对使用者说:「嘿,你填错啰。」不仅会让使用者感到挫折,还可能因此提高使用者放弃结帐的机率,所以透过这个小动画,不仅可以减轻使用者的挫折感,还可以告诉他们可能哪里出了问题——基本上就是这张表单在对你摇头 XD

魔术
Stripe如何设计付款流程动画
动画版本

Stripe 的机制是会寄送验证码到使用者的手机,然后要求使用者在这份表单中填入收到的号码。其他像是 LINE 帐号注册、Google 帐号两步骤验证等等,都会採类似的方式。只是我们也都知道,等待的时间会突然变得很长,因此如何让使用者感觉时间过得快一点很重要,这时动画的目的就是要製造错觉——即便实际上时间一点也没缩短 ,那怕我们也不知道简讯何时会寄到,就像我们不知道张无忌何时会到大都

按键转换
Stripe如何设计付款流程动画
动画版本

这个在「付款资讯」与「支付 25 美元」之间切换的动画就是在告诉使用者在填完付款资讯后会进入下一个阶段,检视完自己填写的资料后按下付款,并透过第三个动画告诉使用者付款完成。Michaël Villar 说自己最喜欢第三个打勾的动画,这会让使用者有一种自己轻易地圆满完成某种任务的感觉。

加分
Stripe如何设计付款流程动画
动画版本

Well,上面这个动画似乎违反了 Michaël Villar 自己文章的主旨,看起来有点多余。不过呢,他说自己跟大多数人一样,比较不信任「看起来很老旧」的网站,殊不知台湾这边很多 IE Only、看起来像是 Google 还没上市时那个年代的设计 。所以他认为先进一点的动画有助于增进使用者的信任,使得整体的体验更加完善。

Nest 的结帐设计细节

不只 Stripe,「结帐」过程中各种细微之处显然是网站必须非常重视的环节。Amazon 的一键付款即是一例。而 Facebook 的产品经理 Dirk Stoop 上个月曾经在自己的 Facebook 上分享了一个 Nest 网站结帐设计的小细节。

通常,网站的表格会长这样:

Stripe如何设计付款流程动画

在栏位中告诉使用者要填入哪一项资讯。但是一旦使用者开始输入资料后,原本的文字通常就会消失,于是 Nest 的设计师做出以下的设计,告诉使用者正在填写的栏位是什幺:

Stripe如何设计付款流程动画

如果使用者忘了填写某些栏位,当然表单也会告诉你:

Stripe如何设计付款流程动画
Stripe如何设计付款流程动画
Square 的万能输入框

另一家 以重视设计闻名的 Square,曾经为了使用者在手机上输入的方便,设计出单一输入框即可完成信用卡类型、卡号、有效期限、CVV和邮递区号的填写。我们在 〈 Square 的巧妙设计——单一文字框搞定信用卡讯息输入 〉 一文中介绍过:

下方是 Zachary Forrest 利用网页前端技术模拟出来的示範影片:

或是您也可以到 这个网页 试试看。

欢迎加入「Inside」Line 官方帐号,关注最新创业、科技、网路、工作讯息
Stripe如何设计付款流程动画

相关推荐

胃真的会越撑越大越饿越小?这3大习惯很伤胃再不改就晚了

胃真的会越撑越大越饿越小?这3大习惯很伤胃再不改就晚了

很多减肥的人都把节食放在第一步,以为饿着饿着,胃变小了,吃得就少,离瘦又更近一步。的确,很多人觉得只
胃经:腹胀、消化不良?女中医:按这穴位当天改善

胃经:腹胀、消化不良?女中医:按这穴位当天改善

中医师易磊分析,胃与脾都是化生气血的地方,想要治疗疾病,或是保健养生、长寿康泰,除了脾经还要顾好胃经
胃老化:胃胀、打嗝拉警报!5招启动抗老保胃战

胃老化:胃胀、打嗝拉警报!5招启动抗老保胃战

胃是我们熟悉的身体器官,当我们饮食失调、紧张压力大,胃就会向我们发出胃胀、胃痛等各式各样的讯息。若长