本文作者結合自己所做的一些關于提升轉化率的項目，就此為案例來探討一下，在這個過程中，交互設計需要思考的方向。

轉化率，這是一個互聯網團隊經常會提及的名詞，在某些團隊里，轉化率甚至是第一指標，比如：電商類、理財類產品，轉化率成為衡量產品優質與否最重要的指標。

那么轉化率一般是怎么定義的呢？

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

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

那么作為交互設計師，我們該如何為提高轉化率從而做出自己的貢獻呢？

最近筆者在做一些關于提升轉化率的項目，那么就依此為案例來探討一下，在這個過程中，交互設計需要思考的方向。

首先介紹一下項目背景，筆者目前在做一款金融理財類app，現版本的某些流程存在一些問題，導致最終投資轉化率一直不太理想，于是我們打算開啟新版本的流程改造工作，改造的思路大致為：發現問題—分析問題—設計方案—推動執行—數據分析—優化迭代。

第一步：發現問題

我們通過內部數據發現，目前app的投資轉化率一直處在一個比較低迷的狀態，然而如何提高投資轉化率也一直是我們不停思考的問題。

如下圖展示：

我們目前的投資轉化率大概只有1%不到，100個人進來投資頁，大概有60人有購買意向，但是最終購買成功只有1人不到，這里需要思考的問題是：為什么購買成功率那么低？流程到底出現了什么問題？界面展示信息是不是有問題？

抱著這些疑問，開始嘗試去分析一些背后的原因。

第二步：分析問題

上圖為我們當前版本的產品購買流程，根據上圖數據反饋可知：從產品詳情到購買頁，這一步的轉化率為59%，從購買頁到購買成功這一步的轉化率直接降至1.6%，也就是說整個流程的第二步存在極大的問題，從而導致用戶購買成功的阻力很大。

一般來說分析一個問題主要考慮以下4個點：框架、流程、內容和布局。

按照這個思路重新梳理一下現版本流程的問題：

（1）框架，購買投資流程頁面單一，不涉及到框架結構的問題，這里可以先不考慮；

（2）流程，產品詳情頁—購買頁—購買成功，這是理想情況下的主流程，實際上購買頁面的邏輯遠比想象中復雜的多。

下圖是購買邏輯流程圖：

從上圖可以看出，在購買頁面用戶可能會被連續打斷3次，首先驗證是否綁卡，未綁卡的話只能強制引導去綁卡；然后再判斷賬戶余額有沒有錢，如果沒錢又強制引導去充值；最后再判斷有沒有設置交易密碼，如果沒有又強制去設置交易密碼。

就是因為有太多強制性的門檻導致用戶購買成功率極低，所以這里的流程是一定要重新優化的。

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

在思考方案的時候盡量和團隊其他同事多交流，盡可能地探究清楚產生這些問題背后真正的原因，因為有些方案可能涉及到公司本身業務流程，或者技術實現問題，你至少要確保你的方案最后是實際可執行落地的。

（3）內容，其實頁面承載的內容也是非常重要的，現版本的產品詳情頁和購買頁內容上面有些雜亂無章，信息沒有主次，視覺上面信息引導不充分，用戶真正關心的內容并沒有很好地表現出來。

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

第三步：設計方案

分析完問題所在之后，現在可以開始著手設計方案了，首先重新優化流程。

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

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

然后再根據上面流程，進行單個頁面布局和內容的重新梳理，經過仔細的思考和多次的探索，終于將產品詳情頁和購買頁進行信息結構重組。

產品詳情頁當時設計的時候是這么考慮的：產品詳情頁是決定用戶是否投資的關鍵頁面，與超市里采購實體商品一樣，用戶在購買理財產品的時候，同樣會去了解收益率、期限、收益金額、是否有優惠、產品安全性如何等等這些信息。

現在模擬一下用戶逛超市的心理場景，用戶在貨架上挑選心儀的物品，綜合對比后選擇了一個，拿起來看一下詳情，價格如何？分量多少？對比一下性價比，是否有活動優惠？物品質量如何？銷量怎樣，售后如何等等。

一系列的考慮和抉擇后，用戶覺得不錯，然后放入購物車，最后結算。

同理，我們把場景替換成購買理財產品：用戶在理財平臺瀏覽產品——發現一個有吸引力的產品——進入產品詳情了解清楚——看看收益率如何、投資期限多少、加息詳情如何——如果我投資的話具體能賺多少錢呢——有沒有額外的活動優惠呢——現在買什么時候開始收益，什么時候可以到賬——產品安全性如何，能否保證我的錢是安全的呢，看看別人都投了多少（用戶的從眾心理）——投資了之后能否清楚地了解錢的動向——用戶經過考慮之后覺得還不錯——去購買——然后投資成功。

所以按照這個思路，我將產品詳情頁劃分為5大板塊，從上至下依次為：收益加息板塊、收益估算板塊、活動優惠板塊、投資規則板塊以及產品安全板塊。

• 收益加息主要展示產品基本的收益率信息以及加息情況；
• 收益估算可以讓用戶快速計算出自己的實際收益情況；
• 活動優惠入口前置，讓這個入口提前曝光，讓用戶能夠快速了解可以用哪些優惠券；
• 產品詳情包含了資產內容等大量文字信息，這里只提取了用戶最關注的投資時間節點信息；
• 資產安全區用三個維度來展示，分別為投資記錄，常見問題和安全保障，通過不同的維度來增加用戶的安全感和信任感。

同樣購買頁也相當重要，上面流程已經說過，加入了第三方的微信支付，好處就是能讓用戶最快地完成購買投資，而不需要強制要求用戶進行實名綁卡。

在信息重構和頁面布局方面，依舊將內容劃分為3塊，從上之下依次為：金額輸入和預期收益區塊、優惠券選擇區塊、選擇支付方式區塊。從認知心理上來說也符合用戶預期，輸入購買金額——選擇優惠券——選擇支付方式——確認購買。

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

在設計這個頁面的時候，有兩個點跟其他同事產生了分歧：

第一個是關于優惠券選擇的，一個方案是用戶進來系統默認選擇一個優惠券，另一個方案是讓用戶自己手動選擇優惠券。第一個方案好處是能夠減少用戶操作，而第二個方案雖然增加了用戶操作成本，但是從用戶心理上來說也同樣增加了用戶喜悅感，然而具體選擇何種方式還需要更多數據來分析。

另外一個分歧點在于支付方式的展示，一個方案就是現在這種全部展開，還有一個方案是用浮層展示。

如下圖：

這兩個方案各有優勢，不過最終還是選擇了方案一，這其中的詳情就暫且不說了。其實在設計的過程中會發現，一個看起來簡簡單單的購買頁面，里面其實包含了相當復雜的邏輯規則。

這3塊內容之間相互關聯，相互牽制制約，要考慮到各種可能會報錯的情況，如何避免用戶犯錯，金額不同的情況下優惠券的展示規則又是怎樣的，不同的支付方式在輸入金額不同的時候，默認的選擇規則又是如何的，這其中的細節這里就不再講述了。

設計完流程和頁面之后，將流程和頁面串起來，產出最終交互文檔。

方案設計完成后，配合產品、設計、開發將方案推進執行，直到最后上線運行。

新方案上線之后，通過上線7天的數據反饋，我們從原來的1%不到小幅度地上升至3.2%，雖然提升幅度不算特別大，但是數據還是驗證了我們的思路和方向是對的，接下來我們還會繼續優化迭代，探尋更多新的思路和方向。

作者：早羽說，公眾號：早羽說

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

本文由 @早羽說 授權發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議