本文作者結(jié)合自己所做的一些關(guān)于提升轉(zhuǎn)化率的項(xiàng)目，就此為案例來(lái)探討一下，在這個(gè)過(guò)程中，交互設(shè)計(jì)需要思考的方向。

轉(zhuǎn)化率，這是一個(gè)互聯(lián)網(wǎng)團(tuán)隊(duì)經(jīng)常會(huì)提及的名詞，在某些團(tuán)隊(duì)里，轉(zhuǎn)化率甚至是第一指標(biāo)，比如：電商類、理財(cái)類產(chǎn)品，轉(zhuǎn)化率成為衡量產(chǎn)品優(yōu)質(zhì)與否最重要的指標(biāo)。

那么轉(zhuǎn)化率一般是怎么定義的呢？

舉個(gè)例子：注冊(cè)轉(zhuǎn)化率，假如今天有100個(gè)游客用戶進(jìn)入注冊(cè)頁(yè)面，最終只有5個(gè)用戶注冊(cè)成功了，那么這里的注冊(cè)轉(zhuǎn)化率就是5%。以此類推，還有什么綁卡轉(zhuǎn)化率、投資轉(zhuǎn)化率、下單轉(zhuǎn)化率等等。

可能有設(shè)計(jì)師認(rèn)為提高轉(zhuǎn)化率更多是運(yùn)營(yíng)和產(chǎn)品的工作，其實(shí)不然，轉(zhuǎn)化率這個(gè)影響因素是多方面的，運(yùn)營(yíng)手段、產(chǎn)品功能、用戶體驗(yàn)和界面設(shè)計(jì)以及品牌信任度等各方面因素，糅合在一起，才決定了最終轉(zhuǎn)化率的好與壞。

那么作為交互設(shè)計(jì)師，我們?cè)撊绾螢樘岣咿D(zhuǎn)化率從而做出自己的貢獻(xiàn)呢？

最近筆者在做一些關(guān)于提升轉(zhuǎn)化率的項(xiàng)目，那么就依此為案例來(lái)探討一下，在這個(gè)過(guò)程中，交互設(shè)計(jì)需要思考的方向。

首先介紹一下項(xiàng)目背景，筆者目前在做一款金融理財(cái)類app，現(xiàn)版本的某些流程存在一些問(wèn)題，導(dǎo)致最終投資轉(zhuǎn)化率一直不太理想，于是我們打算開(kāi)啟新版本的流程改造工作，改造的思路大致為：發(fā)現(xiàn)問(wèn)題—分析問(wèn)題—設(shè)計(jì)方案—推動(dòng)執(zhí)行—數(shù)據(jù)分析—優(yōu)化迭代。

第一步：發(fā)現(xiàn)問(wèn)題

我們通過(guò)內(nèi)部數(shù)據(jù)發(fā)現(xiàn)，目前app的投資轉(zhuǎn)化率一直處在一個(gè)比較低迷的狀態(tài)，然而如何提高投資轉(zhuǎn)化率也一直是我們不停思考的問(wèn)題。

如下圖展示：

我們目前的投資轉(zhuǎn)化率大概只有1%不到，100個(gè)人進(jìn)來(lái)投資頁(yè)，大概有60人有購(gòu)買意向，但是最終購(gòu)買成功只有1人不到，這里需要思考的問(wèn)題是：為什么購(gòu)買成功率那么低？流程到底出現(xiàn)了什么問(wèn)題？界面展示信息是不是有問(wèn)題？

抱著這些疑問(wèn)，開(kāi)始嘗試去分析一些背后的原因。

第二步：分析問(wèn)題

上圖為我們當(dāng)前版本的產(chǎn)品購(gòu)買流程，根據(jù)上圖數(shù)據(jù)反饋可知：從產(chǎn)品詳情到購(gòu)買頁(yè)，這一步的轉(zhuǎn)化率為59%，從購(gòu)買頁(yè)到購(gòu)買成功這一步的轉(zhuǎn)化率直接降至1.6%，也就是說(shuō)整個(gè)流程的第二步存在極大的問(wèn)題，從而導(dǎo)致用戶購(gòu)買成功的阻力很大。

一般來(lái)說(shuō)分析一個(gè)問(wèn)題主要考慮以下4個(gè)點(diǎn)：框架、流程、內(nèi)容和布局。

按照這個(gè)思路重新梳理一下現(xiàn)版本流程的問(wèn)題：

（1）框架，購(gòu)買投資流程頁(yè)面單一，不涉及到框架結(jié)構(gòu)的問(wèn)題，這里可以先不考慮；

（2）流程，產(chǎn)品詳情頁(yè)—購(gòu)買頁(yè)—購(gòu)買成功，這是理想情況下的主流程，實(shí)際上購(gòu)買頁(yè)面的邏輯遠(yuǎn)比想象中復(fù)雜的多。

下圖是購(gòu)買邏輯流程圖：

從上圖可以看出，在購(gòu)買頁(yè)面用戶可能會(huì)被連續(xù)打斷3次，首先驗(yàn)證是否綁卡，未綁卡的話只能強(qiáng)制引導(dǎo)去綁卡；然后再判斷賬戶余額有沒(méi)有錢，如果沒(méi)錢又強(qiáng)制引導(dǎo)去充值；最后再判斷有沒(méi)有設(shè)置交易密碼，如果沒(méi)有又強(qiáng)制去設(shè)置交易密碼。

就是因?yàn)橛刑鄰?qiáng)制性的門檻導(dǎo)致用戶購(gòu)買成功率極低，所以這里的流程是一定要重新優(yōu)化的。

比如：綁卡流程、充值流程和設(shè)置交易密碼流程，能否在注冊(cè)的時(shí)候，或者在首頁(yè)等其他地方，多一些曝光的入口，讓用戶盡量提前完成這些流程，減輕用戶在購(gòu)買頁(yè)的壓力。再或者增加其他支付方式，避免用戶只能通過(guò)余額來(lái)進(jìn)行支付的尷尬境遇；或者說(shuō)在沒(méi)有設(shè)置支付密碼的時(shí)候，是不是可以用其他方式來(lái)代替，比如：短信驗(yàn)證碼來(lái)驗(yàn)證。

在思考方案的時(shí)候盡量和團(tuán)隊(duì)其他同事多交流，盡可能地探究清楚產(chǎn)生這些問(wèn)題背后真正的原因，因?yàn)橛行┓桨缚赡苌婕暗焦颈旧順I(yè)務(wù)流程，或者技術(shù)實(shí)現(xiàn)問(wèn)題，你至少要確保你的方案最后是實(shí)際可執(zhí)行落地的。

（3）內(nèi)容，其實(shí)頁(yè)面承載的內(nèi)容也是非常重要的，現(xiàn)版本的產(chǎn)品詳情頁(yè)和購(gòu)買頁(yè)內(nèi)容上面有些雜亂無(wú)章，信息沒(méi)有主次，視覺(jué)上面信息引導(dǎo)不充分，用戶真正關(guān)心的內(nèi)容并沒(méi)有很好地表現(xiàn)出來(lái)。

（4）布局，頁(yè)面布局方式主要是跟內(nèi)容結(jié)合起來(lái)的，信息重要度從左至右遞減、從上至下遞減；操作重要度從左至右遞增、從上至下遞增。一些原則性的法則，比如：一致性原則、費(fèi)茨定律、席克法則等等可以去參考交互設(shè)計(jì)的7大定律和尼爾森十大可用性原則，這里就不再贅述了。

第三步：設(shè)計(jì)方案

分析完問(wèn)題所在之后，現(xiàn)在可以開(kāi)始著手設(shè)計(jì)方案了，首先重新優(yōu)化流程。

這是優(yōu)化后的操作流程，用戶的操作路徑被拆分為：瀏覽產(chǎn)品詳情—點(diǎn)擊購(gòu)買—輸入金額—選擇支付方式—點(diǎn)擊支付按鈕—短信驗(yàn)證碼或者輸入交易密碼—購(gòu)買成功。

整個(gè)用戶操作流程通暢無(wú)阻，盡量減少了不必要的流程干擾，支付方式加入了第三方支付（微信支付），可以在不強(qiáng)制用戶綁卡的同時(shí)并且可以快速完成投資，交易密碼也不強(qiáng)制設(shè)置，讓沒(méi)有設(shè)置交易密碼的用戶通過(guò)短信驗(yàn)證碼的方式進(jìn)行驗(yàn)證，從而提升用戶在購(gòu)買流程上面的效率。

然后再根據(jù)上面流程，進(jìn)行單個(gè)頁(yè)面布局和內(nèi)容的重新梳理，經(jīng)過(guò)仔細(xì)的思考和多次的探索，終于將產(chǎn)品詳情頁(yè)和購(gòu)買頁(yè)進(jìn)行信息結(jié)構(gòu)重組。

產(chǎn)品詳情頁(yè)當(dāng)時(shí)設(shè)計(jì)的時(shí)候是這么考慮的：產(chǎn)品詳情頁(yè)是決定用戶是否投資的關(guān)鍵頁(yè)面，與超市里采購(gòu)實(shí)體商品一樣，用戶在購(gòu)買理財(cái)產(chǎn)品的時(shí)候，同樣會(huì)去了解收益率、期限、收益金額、是否有優(yōu)惠、產(chǎn)品安全性如何等等這些信息。

現(xiàn)在模擬一下用戶逛超市的心理場(chǎng)景，用戶在貨架上挑選心儀的物品，綜合對(duì)比后選擇了一個(gè)，拿起來(lái)看一下詳情，價(jià)格如何？分量多少？對(duì)比一下性價(jià)比，是否有活動(dòng)優(yōu)惠？物品質(zhì)量如何？銷量怎樣，售后如何等等。

一系列的考慮和抉擇后，用戶覺(jué)得不錯(cuò)，然后放入購(gòu)物車，最后結(jié)算。

同理，我們把場(chǎng)景替換成購(gòu)買理財(cái)產(chǎn)品：用戶在理財(cái)平臺(tái)瀏覽產(chǎn)品——發(fā)現(xiàn)一個(gè)有吸引力的產(chǎn)品——進(jìn)入產(chǎn)品詳情了解清楚——看看收益率如何、投資期限多少、加息詳情如何——如果我投資的話具體能賺多少錢呢——有沒(méi)有額外的活動(dòng)優(yōu)惠呢——現(xiàn)在買什么時(shí)候開(kāi)始收益，什么時(shí)候可以到賬——產(chǎn)品安全性如何，能否保證我的錢是安全的呢，看看別人都投了多少（用戶的從眾心理）——投資了之后能否清楚地了解錢的動(dòng)向——用戶經(jīng)過(guò)考慮之后覺(jué)得還不錯(cuò)——去購(gòu)買——然后投資成功。

所以按照這個(gè)思路，我將產(chǎn)品詳情頁(yè)劃分為5大板塊，從上至下依次為：收益加息板塊、收益估算板塊、活動(dòng)優(yōu)惠板塊、投資規(guī)則板塊以及產(chǎn)品安全板塊。

• 收益加息主要展示產(chǎn)品基本的收益率信息以及加息情況；
• 收益估算可以讓用戶快速計(jì)算出自己的實(shí)際收益情況；
• 活動(dòng)優(yōu)惠入口前置，讓這個(gè)入口提前曝光，讓用戶能夠快速了解可以用哪些優(yōu)惠券；
• 產(chǎn)品詳情包含了資產(chǎn)內(nèi)容等大量文字信息，這里只提取了用戶最關(guān)注的投資時(shí)間節(jié)點(diǎn)信息；
• 資產(chǎn)安全區(qū)用三個(gè)維度來(lái)展示，分別為投資記錄，常見(jiàn)問(wèn)題和安全保障，通過(guò)不同的維度來(lái)增加用戶的安全感和信任感。

同樣購(gòu)買頁(yè)也相當(dāng)重要，上面流程已經(jīng)說(shuō)過(guò)，加入了第三方的微信支付，好處就是能讓用戶最快地完成購(gòu)買投資，而不需要強(qiáng)制要求用戶進(jìn)行實(shí)名綁卡。

在信息重構(gòu)和頁(yè)面布局方面，依舊將內(nèi)容劃分為3塊，從上之下依次為：金額輸入和預(yù)期收益區(qū)塊、優(yōu)惠券選擇區(qū)塊、選擇支付方式區(qū)塊。從認(rèn)知心理上來(lái)說(shuō)也符合用戶預(yù)期，輸入購(gòu)買金額——選擇優(yōu)惠券——選擇支付方式——確認(rèn)購(gòu)買。

這里有個(gè)新的想法是輸入金額的同時(shí)下面的預(yù)期收益同步展示，并且將收益拆分為投資收益和優(yōu)惠券收益兩種，讓用戶能夠清晰了解每筆收益的來(lái)源與詳情。

在設(shè)計(jì)這個(gè)頁(yè)面的時(shí)候，有兩個(gè)點(diǎn)跟其他同事產(chǎn)生了分歧：

第一個(gè)是關(guān)于優(yōu)惠券選擇的，一個(gè)方案是用戶進(jìn)來(lái)系統(tǒng)默認(rèn)選擇一個(gè)優(yōu)惠券，另一個(gè)方案是讓用戶自己手動(dòng)選擇優(yōu)惠券。第一個(gè)方案好處是能夠減少用戶操作，而第二個(gè)方案雖然增加了用戶操作成本，但是從用戶心理上來(lái)說(shuō)也同樣增加了用戶喜悅感，然而具體選擇何種方式還需要更多數(shù)據(jù)來(lái)分析。

另外一個(gè)分歧點(diǎn)在于支付方式的展示，一個(gè)方案就是現(xiàn)在這種全部展開(kāi)，還有一個(gè)方案是用浮層展示。

如下圖：

這兩個(gè)方案各有優(yōu)勢(shì)，不過(guò)最終還是選擇了方案一，這其中的詳情就暫且不說(shuō)了。其實(shí)在設(shè)計(jì)的過(guò)程中會(huì)發(fā)現(xiàn)，一個(gè)看起來(lái)簡(jiǎn)簡(jiǎn)單單的購(gòu)買頁(yè)面，里面其實(shí)包含了相當(dāng)復(fù)雜的邏輯規(guī)則。

這3塊內(nèi)容之間相互關(guān)聯(lián)，相互牽制制約，要考慮到各種可能會(huì)報(bào)錯(cuò)的情況，如何避免用戶犯錯(cuò)，金額不同的情況下優(yōu)惠券的展示規(guī)則又是怎樣的，不同的支付方式在輸入金額不同的時(shí)候，默認(rèn)的選擇規(guī)則又是如何的，這其中的細(xì)節(jié)這里就不再講述了。

設(shè)計(jì)完流程和頁(yè)面之后，將流程和頁(yè)面串起來(lái)，產(chǎn)出最終交互文檔。

方案設(shè)計(jì)完成后，配合產(chǎn)品、設(shè)計(jì)、開(kāi)發(fā)將方案推進(jìn)執(zhí)行，直到最后上線運(yùn)行。

新方案上線之后，通過(guò)上線7天的數(shù)據(jù)反饋，我們從原來(lái)的1%不到小幅度地上升至3.2%，雖然提升幅度不算特別大，但是數(shù)據(jù)還是驗(yàn)證了我們的思路和方向是對(duì)的，接下來(lái)我們還會(huì)繼續(xù)優(yōu)化迭代，探尋更多新的思路和方向。

作者：早羽說(shuō)，公眾號(hào)：早羽說(shuō)

鏈接：https://www.jianshu.com/p/993bd92d5109

本文由 @早羽說(shuō) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議