恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
实例分享:互金平台交易流程设计改版
0.0°
2017-08-02 原创文章 经验/观点 举报 864 3 1 0


互联网理财平台,支付渠道升级,由原来的新浪托管换成富友、宝付支付。这就意味着平台需要对账户资产页面及交易流程进行重新设计。


一、项目背景

互联网理财平台,支付渠道升级,由原来的新浪托管换成富友、宝付支付。这就意味着平台需要对账户资产页面及交易流程进行重新设计。

用户在购买理财产品时,只能通过平台的账户余额进行购买。如果账户余额不足,则需要先通过第三方支付平台进行充值到账户余额,然后再重新购买产品,账户余额支付,输入交易密码后订单申请提交成功。


二、遇到了什么问题

按照产品的需求,设计了第一版的流程及页面,原流程如下:

Image title


具体页面流程如下:

Image title


上线后发现有部分用户在充值提交成功后误以为投资完成了。

客服也反馈用户有遗漏购买的情况,以为自己购买完成了,没有想到只是做了充值支付,并没有再用账户余额购买产品。


三、我是如何思考的

显然,用户不是专家,他不了解平台账户的复杂的规则。即使弹窗上面已经提示了“账户余额不足,请充值后再投资”,用户也不会花时间去研究你这句话。

那么问题来了,怎么样才能跟用户讲清楚我们的规则。


我想到了以下两点:

1.为了让用户能够完全清楚规则,就采用最笨的方法:

余额不足,不能投资,请先充值。充值成功后,如果用户想购买,主动去产品页面申购,和充值流程完全分开。这样用户会很清楚自己当前处于哪个阶段,在执行什么任务,有什么样的预期,一目了然。

但是,这种方案流程会比较繁琐,会打断用户的申购流程。该如何取舍?

首先,原来的流程引起了用户的误操作,必须得改。但是否有必要改成稍微复杂一点的流程呢?这就要看在购买产品时需要充值的用户大概占多大的比例。毕竟如果数量很少的话,采用这种方案也是可以的,虽然繁琐,但是不会出错,用户也觉得清晰、安全。

我们查看了一下用户使用账户余额购买的数量和在购买过程中需要充值支付的数量,结果显示,有62%的用户都是在购买产品过程中去选择充值的。看来还得想想其他的方案。


2.有没有什么方法能够像用户解释清楚我们的规则呢?

这样就可以沿用原来的流程,不需要使用最笨的方法了。为什么我们需要如此努力地去向用户解释流程和规则?一旦开始绞尽脑汁思考这个问题时,其实就说明了你的规则太复杂了。如果一个流程需要千方百计去向用户解释清楚,那么这就不是一个体验好的流程。


四、我是如何解决的

方案一:以下是上文提到的第一种思考方案,直接弹窗提示后让用户自己去充值入口进行充值。

Image title


那么,有没有更加简单的流程?

梳理一下交易流程的整个后台逻辑:

Image title


用户充值完成后数据返回给后台,并在前端做最新展示,用户再次发起申购时,后台进行扣款。从中可以看出,用户充值后去购买产品,其实只是后台针对订单进行扣款,没有涉及到富友系统的交互。

因此可以在用户申购时,完成充值后,等资金到达账户余额时自动扣款并购买成功,这样用户在前台就可以省掉资金到账后的重新购买操作。用户具体操作流程如下:

Image title


页面流程就可以设计如下:

Image title


显然这种方案会让用户在前端的操作减少了很多,不会再有遗漏购买的情况。


五、页面交互细节:

1.投资页面输入金额交互细节

Image title


为确保用户能够输入有效投资金额,键盘输入规则如下:

首位输入小数点,输入框显示为“0.”,删除时同时删除“0.” 首位输入0,继续输入非0数字时,不显示0,直接显示该数字; 首位输入“00”时,输入框显示“0”,继续输入非0数字时,直接显示该数 首位输入0,继续输入0时不显示,始终只显示一个0 小数点后只可输入两位小数,继续输入无反应 不可输入两个小数点,第二次输入小数点时没反应


当用户输入金额有误时,分不同情况进行报错:

a.【超过限额】输入过程中,未失去焦点时实时判断

Image title


b.【低于起投金额】用户点击投资按后报错

Image title


这种情况不需要在用户输入时就进行报错,否则用户从刚开始输入第一个数字时,就会被高亮提示你错了,直到输入到第四位数字。


2.结果页面反馈设计

金融产品设计应当重视用户的安全感,尤其是在用户的资金处于在途处理中的状态,要明确反馈用户资金的当前所处状态,并有效管理好用户的预期。否则,很容易让用户担心自己的资金去哪里了?什么时候到账?是不是哪里出问题了?我的资金还安全吗?

使用账户余额购买产品和购买时充值支付的结果页面反馈

Image title

a.账户余额直接购买产品,可以即时显示是否申购成功,此时用户比较关系的是产品什么时候开始计息及什么时候到期,到期后资金汇款到哪里。

b.而在购买时充值支付,系统需要等资金充值到账户才能进行成功扣款,因此不能实时显示购买成功,只能显示申请已提交,用户比较关心什么时候可以投资成功,如果觉得自己银行卡资金被扣但是投资还在确认中不是很放心,可以直接拨打下方的客服电话。


充值或取现等资金在途页面设计:

申请取现后,资金不是立刻从账户余额到达用户银行卡,需要一个工作日的时间,因此在页面设计上,一定要说清楚申请已提交成功,并且写清楚资金当前处于哪一个状态,还剩下哪些步骤以及预计完成的时间。为防止用户有疑问,最好在结果页面上提供客服的联系方式。

以上是整理的一部分流程,关于实名认证及绑卡等一系列流程改版,会持续整理中。



谢谢:)


作者:高广淦,交互设计师;  微信公众号:交互视角

本文由 @高广淦 原创发布于UI中国。未经许可,禁止转载。

更新:2017-08-02

收藏

3人已收藏

  • 5

    作品

  • 3

    粉丝

  • 3

    关注

  • 互联网金融:关于红包使用率低的设计思考
  • 表单设计中的下拉菜单设计
  • 移动端电商的搜索控件设计
  • 弹窗设计5条基本原则

    猜你喜欢

      2017-08-02 原创文章 经验/观点 举报 864 3 1 0

      实例分享:互金平台交易流程设计改版

      0.0°

      你确定要举报实例分享:互金平台交易流程设计改版

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录