實例分享:互金平臺交易流程設(shè)計改版
互聯(lián)網(wǎng)理財平臺,支付渠道升級,由原來的新浪托管換成富友、寶付支付。這就意味著平臺需要對賬戶資產(chǎn)頁面及交易流程進(jìn)行重新設(shè)計。
一、項目背景
互聯(lián)網(wǎng)理財平臺,支付渠道升級,由原來的新浪托管換成富友、寶付支付。這就意味著平臺需要對賬戶資產(chǎn)頁面及交易流程進(jìn)行重新設(shè)計。
用戶在購買理財產(chǎn)品時,只能通過平臺的賬戶余額進(jìn)行購買。如果賬戶余額不足,則需要先通過第三方支付平臺進(jìn)行充值到賬戶余額,然后再重新購買產(chǎn)品,賬戶余額支付,輸入交易密碼后訂單申請?zhí)峤怀晒Α?/p>
二、遇到了什么問題
按照產(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ù)雜了。如果一個流程需要千方百計去向用戶解釋清楚,那么這就不是一個體驗好的流程。
四、我是如何解決的
方案一:以下是上文提到的第一種思考方案,直接彈窗提示后讓用戶自己去充值入口進(jìn)行充值。
那么,有沒有更加簡單的流程?
梳理一下交易流程的整個后臺邏輯:
用戶充值完成后數(shù)據(jù)返回給后臺,并在前端做最新展示,用戶再次發(fā)起申購時,后臺進(jìn)行扣款。從中可以看出,用戶充值后去購買產(chǎn)品,其實只是后臺針對訂單進(jìn)行扣款,沒有涉及到富友系統(tǒng)的交互。
因此可以在用戶申購時,完成充值后,等資金到達(dá)賬戶余額時自動扣款并購買成功,這樣用戶在前臺就可以省掉資金到賬后的重新購買操作。用戶具體操作流程如下:
頁面流程就可以設(shè)計如下:
顯然這種方案會讓用戶在前端的操作減少了很多,不會再有遺漏購買的情況。
五、頁面交互細(xì)節(jié):
1.投資頁面輸入金額交互細(xì)節(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)用戶輸入金額有誤時,分不同情況進(jìn)行報錯:
a.【超過限額】輸入過程中,未失去焦點時實時判斷
b.【低于起投金額】用戶點擊投資按后報錯
這種情況不需要在用戶輸入時就進(jìn)行報錯,否則用戶從剛開始輸入第一個數(shù)字時,就會被高亮提示你錯了,直到輸入到第四位數(shù)字。
2.結(jié)果頁面反饋設(shè)計
金融產(chǎn)品設(shè)計應(yīng)當(dāng)重視用戶的安全感,尤其是在用戶的資金處于在途處理中的狀態(tài),要明確反饋用戶資金的當(dāng)前所處狀態(tài),并有效管理好用戶的預(yù)期。否則,很容易讓用戶擔(dān)心自己的資金去哪里了?什么時候到賬?是不是哪里出問題了?我的資金還安全嗎?
使用賬戶余額購買產(chǎn)品和購買時充值支付的結(jié)果頁面反饋
a.賬戶余額直接購買產(chǎn)品,可以即時顯示是否申購成功,此時用戶比較關(guān)系的是產(chǎn)品什么時候開始計息及什么時候到期,到期后資金匯款到哪里。
b.而在購買時充值支付,系統(tǒng)需要等資金充值到賬戶才能進(jìn)行成功扣款,因此不能實時顯示購買成功,只能顯示申請已提交,用戶比較關(guān)心什么時候可以投資成功,如果覺得自己銀行卡資金被扣但是投資還在確認(rèn)中不是很放心,可以直接撥打下方的客服電話。
充值或取現(xiàn)等資金在途頁面設(shè)計:
申請取現(xiàn)后,資金不是立刻從賬戶余額到達(dá)用戶銀行卡,需要一個工作日的時間,因此在頁面設(shè)計上,一定要說清楚申請已提交成功,并且寫清楚資金當(dāng)前處于哪一個狀態(tài),還剩下哪些步驟以及預(yù)計完成的時間。為防止用戶有疑問,最好在結(jié)果頁面上提供客服的聯(lián)系方式。
以上是整理的一部分流程,關(guān)于實名認(rèn)證及綁卡等一系列流程改版,會持續(xù)整理中。
謝謝:)
作者:細(xì)水,交互設(shè)計師; ?微信公眾號:交互視角
本文由 @細(xì)水 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
充值完成直接給個彈窗,提示是否購買之前填寫的金額,一鍵搞定
訂單寫的1000 結(jié)果就充值了1塊怎么辦。
下了訂單跳到第三方支付平臺,金額不可修改
如果用戶余額不足,為什么不使用銀行卡直接代扣呢? 樓主現(xiàn)在的平臺接入存管了嗎? 我們現(xiàn)在在對接流程,我們存管前是使用余額不足使用銀行代扣,現(xiàn)在改為充值后才能投資 用戶會很習(xí)慣的認(rèn)為我充值了就等于申購了。所以這快的我一直在思考
以前用的是新浪托管,一年前就不用了
我的看法是投資一定還是需要用戶自行操作比較好,如果充值后用戶不想現(xiàn)在投資了怎么辦?投資不應(yīng)該是系統(tǒng)來代替操作。
你好,現(xiàn)在的方案用戶在操作的時候,并不會覺得是充值,只是想買一個產(chǎn)品,現(xiàn)場做了支付而已。充值后再購買那是后臺的邏輯,而用戶就像淘寶上買個東西,你提了一個訂單,然后在新的頁面輸相關(guān)密碼確認(rèn)后就支付了。
比較大膽的嘗試,有過類似的想法由于是擔(dān)心 1,充值前投資金額只是一個意向,將充值所有金額用于投資而不經(jīng)過確認(rèn),用戶是否會反感。2,投資意向達(dá)成以及產(chǎn)品實際剩余可投可能會帶來投資失敗,產(chǎn)品流標(biāo)等風(fēng)險所以選擇了認(rèn)為較為穩(wěn)妥的做法,就是充值成功自動跳回確認(rèn)投資頁面。讓用戶再輸入交易密碼進(jìn)行確認(rèn)。。。。
作者是多肉理財?shù)拿?,用過就覺得頁面風(fēng)格以及一些細(xì)節(jié)的交互真是不錯!
一看就是同樣做互金的,哈哈
非常贊同:讓用戶知道交易總共分幾步,獎金處在哪步,增強(qiáng)了用戶體驗,減少了運維、運營部門的電話數(shù)量。
學(xué)習(xí)了,辛苦辛苦
辛苦樓主,文章很棒,學(xué)習(xí)了。學(xué)習(xí)過程中有個問題需要向你請教,既然有大部分用戶充完值后,誤以為是已經(jīng)做好了投資(確實這樣也很方便)。那么為什么選擇另外一套流程,而否定掉了這樣充值帶投資的流程呢?
你好,其實從前端頁面流程上來看,改進(jìn)后的方案其實就是原方案中的第1,4,6張頁面,就是順著用戶的操作路徑來的,比當(dāng)初的原方案還要簡潔;不過你說的很有道理,當(dāng)時為什么沒有大膽地將錯就錯,而是想方設(shè)法教育用戶懂得產(chǎn)品的規(guī)則呢?做互聯(lián)網(wǎng)金融設(shè)計,跟資金相關(guān)的不容有錯,有一種沉重的謹(jǐn)慎感……
棒棒的 邏輯無懈可擊
還有一點我很好奇:在鍵盤輸入數(shù)字部分你們有個業(yè)務(wù)規(guī)則是不接受小于1000的金額,又做低于一元的錄入處理,這完全沒必要,因為即使錄入了合法值也無法走通下面的流程,還不如直接不接受首位為零時直接錄入小數(shù)點
交互本人不專業(yè),抱著學(xué)習(xí)的態(tài)度。后臺業(yè)務(wù)邏輯的流程圖畫的實在有些欠思考,余額不足跳去充值再跳回去本來就是個分支而已,居然畫到主干流程了
交互第一次畫后臺業(yè)務(wù)邏輯圖,謝謝你的評論。余額充足畫到主干流程,余額不足的那一大坨感覺無處安放。另外我還在想,案例中百分之六十多的用戶都不是用充足的余額支付的,到底哪個是主流程捏?
余額不足在后臺邏輯里就是下單的一個前置判斷,一個導(dǎo)致反向的if分支,這個分支應(yīng)該指向一個充值子流程,所以不能因為出現(xiàn)頻率高就判斷這個流程是主流程。流程圖里充值成功后重新指向余額是否充足的判斷就行了,沒必要再畫一個。