實例分享：互金平台交易流程設計改版

互聯網理財平台，支付渠道升級，由原來的新浪託管換成富友、寶付支付。這就意味著平台需要對賬戶資產頁面及交易流程進行重新設計。

一、項目背景

互聯網理財平台，支付渠道升級，由原來的新浪託管換成富友、寶付支付。這就意味著平台需要對賬戶資產頁面及交易流程進行重新設計。

用戶在購買理財產品時，只能通過平台的賬戶餘額進行購買。如果賬戶餘額不足，則需要先通過第三方支付平台進行充值到賬戶餘額，然後再重新購買產品，賬戶餘額支付，輸入交易密碼后訂單申請提交成功。

二、遇到了什麼問題

按照產品的需求，設計了第一版的流程及頁面，原流程如下：

具體頁面流程如下：

上線后發現有部分用戶在充值提交成功后誤以為投資完成了。

客服也反饋用戶有遺漏購買的情況，以為自己購買完成了，沒有想到只是做了充值支付，並沒有再用賬戶餘額購買產品。

三、我是如何思考的

顯然，用戶不是專家，他不了解平台賬戶的複雜的規則。即使彈窗上面已經提示了「賬戶餘額不足，請充值后再投資」，用戶也不會花時間去研究你這句話。

那麼問題來了，怎麼樣才能跟用戶講清楚我們的規則。

我想到了以下兩點：

1.為了讓用戶能夠完全清楚規則，就採用最笨的方法：

餘額不足，不能投資，請先充值。充值成功后，如果用戶想購買，主動去產品頁面申購，和充值流程完全分開。這樣用戶會很清楚自己當前處於哪個階段，在執行什麼任務，有什麼樣的預期，一目了然。

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

首先，原來的流程引起了用戶的誤操作，必須得改。但是否有必要改成稍微複雜一點的流程呢？這就要看在購買產品時需要充值的用戶大概佔多大的比例。畢竟如果數量很少的話，採用這種方案也是可以的，雖然繁瑣，但是不會出錯，用戶也覺得清晰、安全。

我們查看了一下用戶使用賬戶餘額購買的數量和在購買過程中需要充值支付的數量，結果顯示，有62%的用戶都是在購買產品過程中去選擇充值的。看來還得想想其他的方案。

2.有沒有什麼方法能夠像用戶解釋清楚我們的規則呢？

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

四、我是如何解決的

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

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

梳理一下交易流程的整個後台邏輯：

用戶充值完成後數據返回給後台，並在前端做最新展示，用戶再次發起申購時，後台進行扣款。從中可以看出，用戶充值後去購買產品，其實只是後台針對訂單進行扣款，沒有涉及到富友系統的交互。

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

頁面流程就可以設計如下：

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

五、頁面交互細節：

1.投資頁面輸入金額交互細節

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

• 首位輸入小數點，輸入框顯示為「0.」，刪除時同時刪除「0.」
• 首位輸入0，繼續輸入非0數字時，不顯示0，直接顯示該數字；
• 首位輸入「00」時，輸入框顯示「0」，繼續輸入非0數字時，直接顯示該數
• 首位輸入0，繼續輸入0時不顯示，始終只顯示一個0
• 小數點后只可輸入兩位小數，繼續輸入無反應
• 不可輸入兩個小數點，第二次輸入小數點時沒反應

當用戶輸入金額有誤時，分不同情況進行報錯：

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

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

這種情況不需要在用戶輸入時就進行報錯，否則用戶從剛開始輸入第一個數字時，就會被高亮提示你錯了，直到輸入到第四位數字。

2.結果頁面反饋設計

金融產品設計應當重視用戶的安全感，尤其是在用戶的資金處於在途處理中的狀態，要明確反饋用戶資金的當前所處狀態，並有效管理好用戶的預期。否則，很容易讓用戶擔心自己的資金去哪裡了？什麼時候到賬？是不是哪裡出問題了？我的資金還安全嗎？

使用賬戶餘額購買產品和購買時充值支付的結果頁面反饋

a.賬戶餘額直接購買產品，可以即時顯示是否申購成功，此時用戶比較關係的是產品什麼時候開始計息及什麼時候到期，到期后資金匯款到哪裡。

b.而在購買時充值支付，系統需要等資金充值到賬戶才能進行成功扣款，因此不能實時顯示購買成功，只能顯示申請已提交，用戶比較關心什麼時候可以投資成功，如果覺得自己銀行卡資金被扣但是投資還在確認中不是很放心，可以直接撥打下方的客服電話。

充值或取現等資金在途頁面設計：

申請取現后，資金不是立刻從賬戶餘額到達用戶銀行卡，需要一個工作日的時間，因此在頁面設計上，一定要說清楚申請已提交成功，並且寫清楚資金當前處於哪一個狀態，還剩下哪些步驟以及預計完成的時間。為防止用戶有疑問，最好在結果頁面上提供客服的聯繫方式。

以上是整理的一部分流程，關於實名認證及綁卡等一系列流程改版，會持續整理中。

謝謝:)

作者：細水，交互設計師；

本文由 @細水 原創發佈於人人都是產品經理。未經許可，禁止轉載。