實(shí)例分析:交互設(shè)計(jì)如何提升產(chǎn)品轉(zhuǎn)化率?

9 評(píng)論 15834 瀏覽 195 收藏 14 分鐘

交互設(shè)計(jì)如何提升產(chǎn)品轉(zhuǎn)化率?文章作者通過實(shí)例為大家解讀。

轉(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è)頁面,最終只有5個(gè)用戶注冊(cè)成功了,那么這里的注冊(cè)轉(zhuǎn)化率就是5%。以此類推,還有什么綁卡轉(zhuǎn)化率、投資轉(zhuǎn)化率、下單轉(zhuǎn)化率等等。

可能有設(shè)計(jì)師認(rèn)為提高轉(zhuǎn)化率更多是運(yùn)營和產(chǎn)品的工作,其實(shí)不然,轉(zhuǎn)化率這個(gè)影響因素是多方面的,運(yùn)營手段、產(chǎn)品功能、用戶體驗(yàn)和界面設(shè)計(jì)以及品牌信任度等各方面因素糅合在一起才決定了最終轉(zhuǎn)化率的好與壞。那么作為交互設(shè)計(jì)師,我們?cè)撊绾螢樘岣咿D(zhuǎn)化率從而做出自己的貢獻(xiàn)呢?最近筆者在做一些關(guān)于提升轉(zhuǎn)化率的項(xiàng)目,那么就依此為案例來探討一下在這個(gè)過程中交互設(shè)計(jì)需要思考的方向。

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

第一步:發(fā)現(xiàn)問題

我們通過內(nèi)部數(shù)據(jù)發(fā)現(xiàn),目前app的投資轉(zhuǎn)化率一直處在一個(gè)比較低迷的狀態(tài),然而如何提高投資轉(zhuǎn)化率也一直是我們不停思考的問題,如下圖展示,我們目前的投資轉(zhuǎn)化率大概只有1%不到,100個(gè)人進(jìn)來投資頁,大概有60人有購買意向,但是最終購買成功只有1人不到,這里需要思考的問題是:為什么購買成功率那么低?流程到底出現(xiàn)了什么問題?界面展示信息是不是有問題?抱著這些疑問,開始嘗試去分析一些背后的原因。

第二步:分析問題

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

一般來說分析一個(gè)問題主要考慮以下4個(gè)點(diǎn):框架、流程、內(nèi)容和布局。按照這個(gè)思路重新梳理一下現(xiàn)版本流程的問題。

1、框架,購買投資流程頁面單一,不涉及到框架結(jié)構(gòu)的問題,這里可以先不考慮;

2、流程,產(chǎn)品詳情頁—購買頁—購買成功,這是理想情況下的主流程,實(shí)際上購買頁面的邏輯遠(yuǎn)比想象中復(fù)雜的多,下圖是購買邏輯流程圖:

從上圖可以看出,在購買頁面用戶可能會(huì)被連續(xù)打斷3次,首先驗(yàn)證是否綁卡,未綁卡的話只能強(qiáng)制引導(dǎo)去綁卡;然后再判斷賬戶余額有沒有錢,如果沒錢又強(qiáng)制引導(dǎo)去充值;最后再判斷有沒有設(shè)置交易密碼,如果沒有又強(qiáng)制去設(shè)置交易密碼。就是因?yàn)橛刑鄰?qiáng)制性的門檻導(dǎo)致用戶購買成功率極低,所以這里的流程是一定要重新優(yōu)化的:

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

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

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

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

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

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

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

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

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

產(chǎn)品詳情頁當(dāng)時(shí)設(shè)計(jì)的時(shí)候是這么考慮的:產(chǎn)品詳情頁是決定用戶是否投資的關(guān)鍵頁面,與超市里采購實(shí)體商品一樣,用戶在購買理財(cái)產(chǎn)品的時(shí)候,同樣會(huì)去了解收益率、期限、收益金額、是否有優(yōu)惠、產(chǎn)品安全性如何等等這些信息?,F(xiàn)在模擬一下用戶逛超市的心理場景,用戶在貨架上挑選心儀的物品,綜合對(duì)比后選擇了一個(gè),拿起來看一下詳情,價(jià)格如何,分量多少,對(duì)比一下性價(jià)比,是否有活動(dòng)優(yōu)惠,物品質(zhì)量如何,銷量怎樣,售后如何等等。

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

所以按照這個(gè)思路,我將產(chǎn)品詳情頁劃分為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è)維度來展示,分別為投資記錄,常見問題和安全保障,通過不同的維度來增加用戶的安全感和信任感。

同樣購買頁也相當(dāng)重要,上面流程已經(jīng)說過,加入了第三方的微信支付,好處就是能讓用戶最快地完成購買投資,而不需要強(qiáng)制要求用戶進(jìn)行實(shí)名綁卡。在信息重構(gòu)和頁面布局方面,依舊將內(nèi)容劃分為3塊,從上之下依次為金額輸入和預(yù)期收益區(qū)塊、優(yōu)惠券選擇區(qū)塊、選擇支付方式區(qū)塊,從認(rèn)知心理上來說也符合用戶預(yù)期,輸入購買金額——選擇優(yōu)惠券——選擇支付方式——確認(rèn)購買。

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

在設(shè)計(jì)這個(gè)頁面的時(shí)候,有兩個(gè)點(diǎn)跟其他同事產(chǎn)生了分歧,第一個(gè)是關(guān)于優(yōu)惠券選擇的,一個(gè)方案是用戶進(jìn)來系統(tǒng)默認(rèn)選擇一個(gè)優(yōu)惠券,另一個(gè)方案是讓用戶自己手動(dòng)選擇優(yōu)惠券,第一個(gè)方案好處是能夠減少用戶操作,而第二個(gè)方案雖然增加了用戶操作成本,但是從用戶心理上來說也同樣增加了用戶喜悅感,然而具體選擇何種方式還需要更多數(shù)據(jù)來分析。

另外一個(gè)分歧點(diǎn)在于支付方式的展示,一個(gè)方案就是現(xiàn)在這種全部展開,還有一個(gè)方案是用浮層展示,如下圖:

這兩個(gè)方案各有優(yōu)勢(shì),不過最終還是選擇了方案一,這其中的詳情就暫且不說了。其實(shí)在設(shè)計(jì)的過程中會(huì)發(fā)現(xiàn),一個(gè)看起來簡簡單單的購買頁面,里面其實(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ì)完流程和頁面之后,將流程和頁面串起來,產(chǎn)出最終交互文檔。

方案設(shè)計(jì)完成后,配合產(chǎn)品、設(shè)計(jì)、開發(fā)將方案推進(jìn)執(zhí)行,直到最后上線運(yùn)行。新方案上線之后,通過上線7天的數(shù)據(jù)反饋,我們從原來的1%不到小幅度地上升至3.2%,雖然提升幅度不算特別大,但是數(shù)據(jù)還是驗(yàn)證了我們的思路和方向是對(duì)的,接下來我們還會(huì)繼續(xù)優(yōu)化迭代,探尋更多新的思路和方向。

 

本文由 @小米渣 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 來自上海 回復(fù)
  2. 有幾點(diǎn)疑惑,煩請(qǐng)解釋一下。
    1、使用微信支付是否得先綁定微信賬戶?微信支付有無支付限額?比如購買10萬元以上的理財(cái)是否可行?
    2、目前購買理財(cái)是否只能使用賬戶余額而不支持銀行儲(chǔ)蓄卡?
    3、賬戶余額購買理財(cái)是否有額度限制?(我公司的理財(cái)產(chǎn)品轉(zhuǎn)化率受限于此)

    另外,我覺得您還需要調(diào)優(yōu)非注冊(cè)用戶和未實(shí)名用戶的購買流程。

    來自北京 回復(fù)
    1. 好的,使用微信支付無需綁定微信賬戶,有限額,額度參考微信錢包的限額說明;目前只做了微信支付和余額支付,后續(xù)看產(chǎn)品那邊如何開啟銀行卡這個(gè)入口;我們賬戶的余額購買沒有限制;最后非注冊(cè)用戶和未實(shí)名用戶其實(shí)不涉及到購買流程,這兩步我們盡量提前引導(dǎo)用戶完成,是進(jìn)不到購買頁來的。就這些,謝謝~

      來自廣東 回復(fù)
  3. 有幾點(diǎn)疑惑,希望作者可以解惑。接通微信支付購買P2P理財(cái)產(chǎn)品微信不收取手續(xù)費(fèi)嗎?我記得做B2B平臺(tái)的額時(shí)候都不敢接微信和支付寶,手續(xù)費(fèi)太高,還有就是使用微信支付的信用卡可以購買平臺(tái)的理財(cái)產(chǎn)品嗎?信用卡買理財(cái)理論上是不合規(guī)的。您提到將綁卡放在注冊(cè)流程?這樣是否會(huì)影響注冊(cè)的轉(zhuǎn)化率,您說的轉(zhuǎn)化率提升了3.2%,這個(gè)結(jié)論是單渠道測(cè)試結(jié)果還是全渠道的結(jié)果,這個(gè)轉(zhuǎn)化率提升的樣本量是多少?投資總金額提升了多少?使用微信支付后到期結(jié)轉(zhuǎn),收益和本金如何提現(xiàn)?

    來自北京 回復(fù)
    1. 是這樣,微信支付需要手續(xù)費(fèi),目前是平臺(tái)承擔(dān),費(fèi)用的話目前還可以接受;信用卡目前不支持,需要儲(chǔ)蓄卡,當(dāng)然如果是通過銀行卡支付是提前需要綁卡的;綁卡的流程和注冊(cè)流程是分開的,用戶注冊(cè)成功后才會(huì)引導(dǎo)用戶去綁卡,所以不會(huì)影響注冊(cè)轉(zhuǎn)化率;這里的轉(zhuǎn)化率都是老版本和新版本7日內(nèi)的平均值,樣本量盡量保持一致,交易額這個(gè)每天也有一些浮動(dòng),也只能通過均值來計(jì)算,總體來看還是有所上升的,目前數(shù)據(jù)量有限,后續(xù)還需要更多的數(shù)據(jù)來看;至于微信支付后到賬的問題,不管是通過什么渠道支付,最后到賬肯定是到賬戶余額里面的,提現(xiàn)的話就回到你綁定的銀行卡上面。就這些,不知道有沒有解答你的疑惑,謝謝~

      來自廣東 回復(fù)
  4. 為什么會(huì)有賬戶余額?用戶還需要充值提現(xiàn)?既然綁卡只能與實(shí)名保持一致,為什么還要設(shè)置交易密碼?

    來自廣東 回復(fù)
    1. 沒太明白你表達(dá)的意思,有問題可以私信我交流

      來自廣東 回復(fù)
  5. 可以將可用最大優(yōu)惠劵信息,在訂單頁面直接展示出來

    來自浙江 回復(fù)
  6. 使用優(yōu)惠券后,用戶最后需要支付的金額,我覺得在支付頁面也需要顯示出來的

    回復(fù)