一气呵成、很难犯错-QQ绑卡的交互体验

因为好奇,体验手Q红包功能时,偶然发现“绑卡”分支流程设计得极为惊艳。它山之石可以攻玉,保留下来。

一气呵成、很难犯错-QQ绑卡的交互体验_第1张图片
qq红包的绑卡入口

需要的6个信息项如下:

1、银行卡号
2、姓名
3、证件类型及证件号
4、手机号
5、手机验证码
6、支付密码

1-4项为了验明正身,5有时间差,6是额外的安全设置,所以划分为三个页面是合理的。

一气呵成、很难犯错-QQ绑卡的交互体验_第2张图片
输入卡号

1-4项全摆出来可能会吓到用户,所以先拿一项让用户热身,把最有可能输入不成功的信息放在前面

一气呵成、很难犯错-QQ绑卡的交互体验_第3张图片
输入卡号-智能识别开户行

智能提醒让用户减少了输入长串数字时的焦虑,软件还这么智能有种小惊喜

一气呵成、很难犯错-QQ绑卡的交互体验_第4张图片
输入身份验证信息1

卡号输入足位后,2-4项自然浮现在页面底部,焦点自动放到姓名栏。

一气呵成、很难犯错-QQ绑卡的交互体验_第5张图片
输入身份验证信息2

证件号输入足位后,焦点自动跳转手机号码;手动点击本页的下一步,进入短信验证码输入页;

一气呵成、很难犯错-QQ绑卡的交互体验_第6张图片
验证手机

此时未输入任何信息,“下一步”不能点;

一气呵成、很难犯错-QQ绑卡的交互体验_第7张图片
验证码短信

验证码直接出现在短信头部,哇,简直太贴心了。就好像是我张开嘴就有人喂我吃葡萄一样;

一气呵成、很难犯错-QQ绑卡的交互体验_第8张图片
输入验证码

验证码输入足位,此时下一步按钮变为可点击状态;明示我下一步该点这个按钮了。

一气呵成、很难犯错-QQ绑卡的交互体验_第9张图片
设置手机支付密码-首次

第一次输入6位支付密码后,无需按任何按钮,直接进入重复输入确认的页面,此时一个明显的“下一步”按钮赫然在目。

此时全部搞定:)省掉了每一次用户多余的点击操作,将使用成本降至最低!

有一个问题:为什么不把支付密码做成明文,省掉二次确认支付密码这一步,做到极致呢?这是考虑了哪种场景呢,谁能回答?

你可能感兴趣的:(一气呵成、很难犯错-QQ绑卡的交互体验)