互聯(lián)網(wǎng)理財平臺，支付渠道升級，由本來的新浪托管換成富友、寶付支付。這就意味著平臺需要對賬戶資產(chǎn)頁面及交易流程進行重新設(shè)計。

一、項目配景

互聯(lián)網(wǎng)理財平臺，支付渠道升級，由本來的新浪托管換成富友、寶付支付。這就意味著平臺需要對賬戶資產(chǎn)頁面及交易流程進行重新設(shè)計。

用戶在購買理財產(chǎn)品時，只能通過平臺的賬戶余額進行購買。如果賬戶余額不足，則需要先通過第三方支付平臺進行充值到賬戶余額，然后再重新購買產(chǎn)品，賬戶余額支付，輸入交易密碼后訂單申請?zhí)峤怀晒Α?/p>二、遇到了什么問題

根據(jù)產(chǎn)品的需求，設(shè)計了第一版的流程及頁面，，原流程如下：

具體頁面流程如下：

上線后發(fā)現(xiàn)有部分用戶在充值提交成功后誤以為投資完成了。

客服也反饋用戶有遺漏購買的情況，以為本身購買完成了，沒有想到只是做了充值支付，并沒有再用賬戶余額購買產(chǎn)品。

三、我是如何思考的

顯然，用戶不是專家，他不了解平臺賬戶的復(fù)雜的規(guī)則。即使彈窗上面已經(jīng)提示了“賬戶余額不足，請充值后再投資”，用戶也不會花時間去研究你這句話。

那么問題來了，怎么樣才能跟用戶講清楚我們的規(guī)則。

我想到了以下兩點：

1.為了讓用戶能夠完全清楚規(guī)則，就采用最笨的方法：

余額不足，不能投資，請先充值。充值成功后，如果用戶想購買，主動去產(chǎn)品頁面申購，和充值流程完全分開。這樣用戶會很清楚本身當(dāng)前處于哪個階段，在執(zhí)行什么任務(wù)，有什么樣的預(yù)期，一目了然。

但是，這種方案流程會比較繁瑣，會打斷用戶的申購流程。該如何取舍？

首先，本來的流程引起了用戶的誤操作，必需得改。但是否有須要改成稍微復(fù)雜一點的流程呢？這就要看在購買產(chǎn)品時需要充值的用戶大概占多大的比例。終究如果數(shù)量很少的話，采用這種方案也是可以的，雖然繁瑣，但是不會出錯，用戶也覺得清晰、安適。

我們查看了一下用戶使用賬戶余額購買的數(shù)量和在購買過程中需要充值支付的數(shù)量，結(jié)果顯示，有62%的用戶都是在購買產(chǎn)品過程中去選擇充值的?？磥磉€得想想其他的方案。

2.有沒有什么方法能夠像用戶解釋清楚我們的規(guī)則呢？

這樣就可以沿用本來的流程，不需要使用最笨的方法了。為什么我們需要如此努力地去向用戶解釋流程和規(guī)則？一旦開始絞盡腦汁思考這個問題時，其實就說明了你的規(guī)則太復(fù)雜了。如果一個流程需要千方百計去向用戶解釋清楚，那么這就不是一個體驗好的流程。

四、我是如何解決的

方案一：以下是上文提到的第一種思考方案，直接彈窗提示后讓用戶本身去充值入口進行充值。

那么，有沒有更加簡單的流程？

梳理一下交易流程的整個后臺邏輯：

用戶充值完成后數(shù)據(jù)返回給后臺，并在前端做最新展示，用戶再次發(fā)起申購時，后臺進行扣款。從中可以看出，用戶充值后去購買產(chǎn)品，其實只是后臺針對訂單進行扣款，沒有涉及到富友系統(tǒng)的交互。

因此可以在用戶申購時，完成充值后，等資金到達賬戶余額時自動扣款并購買成功，這樣用戶在前臺就可以省掉資金到賬后的重新購買操作。用戶具體操作流程如下：

頁面流程就可以設(shè)計如下：

顯然這種方案會讓用戶在前端的操作減少了很多，不會再有遺漏購買的情況。

五、頁面交互細節(jié)：1.投資頁面輸入金額交互細節(jié)

為確保用戶能夠輸入有效投資金額，鍵盤輸入規(guī)則如下：

首位輸入小數(shù)點，輸入框顯示為“0.”，刪除時同時刪除“0.”首位輸入0，繼續(xù)輸入非0數(shù)字時，不顯示0，直接顯示該數(shù)字；首位輸入“00”時，輸入框顯示“0”，繼續(xù)輸入非0數(shù)字時，直接顯示該數(shù)首位輸入0，繼續(xù)輸入0時不顯示，始終只顯示一個0小數(shù)點后只可輸入兩位小數(shù)，繼續(xù)輸入無反應(yīng)不成輸入兩個小數(shù)點，第二次輸入小數(shù)點時沒反應(yīng)

當(dāng)用戶輸入金額有誤時，分差別情況進行報錯：

a.【超過限額】輸入過程中，未失去焦點時實時判斷

b.【低于起投金額】用戶點擊投資按后報錯

標(biāo)簽：東營 烏魯木齊 林芝 鹽城 九江