互联网理财平台交互设计再设计

一、项目背景

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

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

二、遇到了什么问题

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

具体页面流程如下：

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

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

三、我是如何思考的

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

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

我想到了以下两点：

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

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

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

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

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

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

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

四、我是如何解决的

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

那么，有没有更加简单的流程？

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

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

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

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

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

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

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

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

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

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