推薦：我們應該如何優化網頁轉化率(上)

本文來自Facebook、Twitter 及Quora 用戶增長團隊的產品大牛Andy Johns在Quora所寫的文章。千萬不要將所有建議照單全收,做出一個四不像網站。你應該將此看作測試網站的技巧工具箱，了解對你的產品與用戶而言使用這些技巧的優點與缺點何在，以及如何使它們符合你的宏觀產品愿景。

"優化注冊轉化率"這個話題可以扯出一本百科全書的篇幅來。因此我會花大量筆墨來闡述。在此先提醒你們，這將是一篇長文。。（譯者注：差不多等于一章書了，所以拆分成上中下三篇）（Damndigital注：這里將上中篇合并為上篇）

我認為優化注冊轉化率的方法概括起來主要就是兩大類：

第一大類，站內優化。包括網頁設計/文案/布局等。這是個值得深入探討的話題，這也是后面一類方法的基礎。

第二大類，訪問來源優化。有許多種方法可以提升訪問來源的轉化效果（比如SEO，郵件，社交網絡，等等），對此我不會太多展開。但從"訪問來源→用戶最終轉化頁"之間的過程優化同樣很重要。討論站內轉化率優化不可能拋開訪問來源。因為早在用戶進入落地頁之前就已經要開始優化轉化率了。

站內轉化率優化

定義：改善網頁的設計與功能，提高用戶在頁面上執行關鍵行為的可能性。

轉化節點：最常見的轉化節點包括：注冊、登錄、購買、訂閱、分享等（社交媒體增長帶來的結果）。還有其他更加細化的轉化節點，但我主要關注這幾個核心的指標，因為優化的方法可以適用到其他轉化節點上。

1. 按鈕vs. 文字鏈接

按鈕比文字鏈接能獲取更多的點擊率，原因很簡單，因為"更顯眼"。當你需要用文字鏈接的地方，嘗試用按鈕去代替。因為已經有無數的測試證明了少用文字鏈接能讓CTR提升 20%-200%。

這里插一個有趣的題外話：不要期望一個按鈕的A/B測試效果能在數周內保持平穩，尤其是郵件營銷。因為你通常是向一個比較固定的群體發郵件（比如新聞提醒），而按鈕容易會出現"點擊疲勞"的現象——用戶已經習慣了你的設計，很可能意識到了郵件中的文字和按鈕都能鏈接到同一個地方。因為點擊任何文字或按鈕的超鏈接，都可以達到目的地。（延伸閱讀文章：按鈕vs.文字鏈接http://www.aweber.com/blog/case-studies/buttons-vs-text-links.htm）

不過一般情況下，按鈕還是比文字鏈接強，因為盡管數周后CTR增長放緩，按鈕還是提升了CTR。CTR增長的絕對值不一定能夠長期保持在30%，但至少你可以期望增長趨勢能夠持續數周甚至數月。

這并不是說同一個按鈕不可能帶來CTR的持續增長。因為按鈕點擊行為在網頁上和郵件中的表現可能有很大的差別。網頁上的按鈕不太容易產生點擊疲勞。如果你針對網頁按鈕做A/B測試時發現了數據的增長，那么這個增長通常是穩定的。

2. 按鈕位置

第一屏的位置優于其他位置。例如，Chitika 做了一個對比廣告在第一屏與下面位置的CTR的研究，發現廣告在首屏時能達到36%的CTR增長。同樣的道理適用于任何首屏的可點擊動作。一些市場研究者也做了個有趣的研究，在首屏呈現較少的信息，鼓勵用戶翻頁去發現更多內容，并產生轉化點擊的效果。他們的發現是：你完全可以鼓勵用戶去翻頁，并點擊首屏之下的內容。

看看這個布里斯托爾機場網站的眼動熱點圖。這張圖表明，首屏只展現少量內容可以引導更多用戶往下瀏覽及點擊。

從用戶的角度看來，省事才是王道。如果你有把握傳遞足夠的信息和價值，使用戶點擊首屏的按鈕，就應該這么做，而不要故意縮減頁面頭部并使信息堆積在頁面下方。

3. 操作按鈕的尺寸，顏色，對比

操作按鈕應該顯眼而不突兀。Square在這方面做得很好。按鈕的顏色同全屏出血的背景圖及其他頁面元素形成了很好的對比。按鈕很大，但不會大得嚇人，并且按鈕旁邊搭配有很多呼喚用戶點擊的元素）。

如果你想看看更多行為呼喚的樣式與類型，請戳這里http://www.webanddesigners.com/35-creative-call-to-action-buttons-for-inspiration/

4. 提升網頁加載速度

落地網頁的速度通常是轉化率優化中容易被忽視但卻非常重要的一個環節。許多測試數據表明網站速度是至關重要的。例如，2007年亞馬遜發布的一個研究顯示網站每100ms的加載延遲就會導致銷售額下降1%。戳這里看更多關于網站速度的研究：http://www.conversionmedic.com/website-performance-optimization/。想辦法降低（尤其是關鍵頁面）加載時間，例如可以減少圖片/CSS/ JavaScript等等的負載。或者想辦法切分頁面不同的加載項，讓關鍵元素優先加載。通過在Facebook 和 Twitter參加過的許多測試，我親身看見了速度提升能夠如何顯著地提高轉化率。我真心認為糟糕的網站速度是導致MySpace沒落的原因。想想看，一個速度慢的網站意味著更少的朋友請求，更少的狀態更新，更少的圖片上傳，更少的廣告點擊，更少的邀請發送，等等，等等。所有這些操作都是形成社交網絡效應的積累基礎。網站速度阻止了網絡效應的飛速勢頭，由此導致了越來越少的增長，而增長的減少意味著失敗的風險增加。Facebook來了，它更快，更簡單，而且有了更好的網絡效應。通過專注于改進網站速度等關鍵要素，Facebook打下成功的基石。

谷歌提供了一個很好的網頁速度測試工具，任何人都可以使用：http://developers.google.com/speed/pagespeed/insights/。它可以生成詳細的報告，給出具體的網速建議。YSlow也是發現網速問題的很好的工具。

如果你是一個WordPress網站站主，網速是個現實存在的問題（特別是對插件重度使用用戶）。你可以嘗試使用Plugin Performance Profiler來查找插件對個人站點網速的影響。它可以生成如下的報告，幫助你診斷每個插件對延遲的影響。

謝謝unbounce.com提供上述網站速度分析工具。(http://unbounce.com/conversion-rate-optimization/how-to-improve-conversions-by-increasing-page-speed-tips-tools/).

5. 標題，子標題，正文文案

能夠向用戶傳達核心價值觀的突出標題很重要。我可以想象如果Square, Inc.去掉了注冊表單上的"馬上開始綁定信用卡"（Start accepting credit cards today），注冊轉化率會立馬下降。

嘗試在你的頭條里使用其他文案，看看有什么反響。如果你還沒有積累足夠的用戶量來支持網站的快速A/B測試，那就試試使用Google AdWords 或者 Facebook Ads 作為測試文案的平臺，找到用戶反響最好的那一個（因為你能相對快速地獲得大量點擊，尤其是Facebook Ad）。得到最高CTR的Facebook Ad頭條可能是你網站主頁的理想文案。說到正文文案，原則是：少即是多。不要讓讀者面對滿屏密集的文字。

我在谷歌搜索了"小型商業網站"并且點擊了幾條廣告，看看他們落地頁是什么樣子。其中一個是下圖的樣子，有清晰的行為呼喚，不太擁擠，少量供閱讀的文字，以及一些用戶的證詞，甚至還有一個產品的視頻介紹，是一個很不錯的頁面：

來源: http://www.volusion.com/

但另外一個廣告讓我看到了下面的落地頁。我的第一反應就是想馬上離開，因為這看起來太復雜了！當我看到撲面而來都是文字，或者看不到數據、圖表、要點列表等有價值信息的博客或郵件的時候，都會有同樣的想法。這個網頁對比用得很爛。"訪談網站"的關鍵動作鏈接不如上面網站"14天免費試用"的黃色動作按鈕明顯：

來源：http://www.webhostingfreereviews.com/

當然，這個頁面呈現了一些行為呼喚元素。因為他們在對一個昂貴的關鍵詞進行競價，肯定期望得到盡可能高的投資回報率。但是看到這么密集的文字，我確信他們的轉化率一定受到了影響。大多數情況下，對于用戶而言，少即是多。記住，你應該向快餐品牌(In-n-Out)學習簡便快捷，展示價值明確的少量優秀產品，而不是一大堆連你都難以消化的垃圾。

6.想想顏色如何影響心境，情緒與決策

正如Colm Tuite在"配色有科學依據嗎？還是純粹主觀的？"問題里的回答，網站配色的運用可以定下驅動轉化的基調。下面是西方國家用戶眼中顏色的含義：

7. 圖片使用

增加圖片可能會降低轉化率。我做過幾次A/B測試，發現主頁的可點擊圖片會降低總注冊量（甚至計算30天內回訪也是如此，已排除先前訪問數據）。我覺得Pinterest知道這個道理，所以不會讓用戶在諸如"申請邀請碼"頁面（http://pinterest.com/landing/）跳過關鍵動作。

注意頁面底部的輪播圖插件。它們是不可點擊的，所以用戶不會從注冊啟動頁跳轉走。從我的經驗來看，如果這些圖片可點擊，該頁面的郵件地址提交率估計會下跌5%。我過去測試過登出頁面的可點擊圖片與不可點擊圖片，在每種情況下，不可點擊圖片的轉化率都要高5%-7%，而且測試組用戶與控制組用戶的質量是保持一致的。

圖片同樣可以用來提高轉化率。網絡營銷的其中一個說法是"有雞就有點擊"(Chicks get clicks)（"色情有市場"的粗俗說法）。咨詢公司ion interactive為一家游戲公司做了一次測試，發現下面的設計的轉化率比沒有強調巨乳的同款設計竟然高出了35%。

這就是兩個被測試的落地頁，右邊的頁面注冊率多了35%：

 

來源：http://www.neurosciencemarketing.com/blog/articles/sex-sells-sometimes.htm

這不是說所有網站都應該將半裸美女放在落地頁上（不管是真人還是虛擬的）。因為這一手段顯然只適用于游戲開發商。比如Zynga就在黑幫戰爭(Mafia War)等游戲廣告中成功運用了這一手法。

但通常來說，通過圖片驅動轉化率有一些要點，特別是針對銷售產品的網站：

使用高質量的剪貼畫，避免顯得低價的圖片
嘗試圖片旋轉輪播或360度圖片旋轉
默認放大的產品圖片，和瀏覽更多產品的縮略圖鏈接

更多信息見這里：http://conversionxl.com/how-images-can-boost-your-conversion-rate/

8. 提供名人認可/客戶口碑

有時提供口碑信息可以促進對產品效果的認可，尤其是對于電商產品。Mint.com在首頁上展示了名人認可和客戶口碑。我沒有關于這種方案有效性的數據，但你可以考慮向他們學習。口碑信息并不是總有用。比如Facebook就從不會標榜這個，但對于財務服務類產品而言，口碑就很可能是有用的。

來源: https://www.mint.com/

9. 發揮視頻對產品展示與轉化驅動的杠桿作用

這個主題是William-Wai-Wong提出的，他對視頻測試有著豐富深刻的理解。當用來解釋產品和闡述其價值的時候，視頻是一種重要的資產。我認為，當產品與用戶的個人財務、健康或與敏感信息有關的時候，視頻是相當有價值的。Dropbox主頁里有一個視頻，直接放在"下載Dropbox"按鈕下面：

Dropbox改版為基于視頻的落地頁是被廣泛稱道的成功案例。Path.com為首次訪問者自動播放iPhone應用介紹的方式也樹立了一個好榜樣。視頻在Path身上是相當有用的，因為用戶普遍對越來越多的社交網絡感到疲勞，并對分享個人信息變得愈加小心。而這個視頻充分地展示出Path的愿景——專注于更親近、更可控的朋友關系。事實上他們在主頁上提供了許多視頻：

使用視頻的國際化問題與代價

在跳到制作視頻的一步前有一些事情是要考慮的。首先，這些視頻并不便宜。我跟幾個供應商談過，1-3分鐘的視頻的制作花費可能會達到$5,000–20,000。對于一個創業團隊，這可是一大筆開銷。在做此決定之中，你應該盡可能多地去嘗試其他免費的轉化率優化方法。視頻或許并不是必要的，你通過其他方法也能達到足夠的轉化率優化。

其次，想想國際化的問題。如果你準備擴張到全球的幾個國家地區，你需要（1）為你的產品視頻翻譯成各種當地語言，（2）考慮其他國家低寬帶網絡對視頻播放延時的影響。對于舊金山的網民來說，加載一個視頻不算什么。但你不能假定巴西和印度等市場的環境也這么好。他們的網絡建設還剛起步，寬帶普及率遠不如歐美國家。記住，延遲時間是轉化率的致命因素。一段播放不流暢的視頻可能意味著高放棄率及低注冊率，這兩個指標通常是高度相關的。在使用CRO工具的時候想想這些后果。

10. 匹配落地頁的意圖與內容

當William Wai Wong第一次加入本地團購創業網站 Bloomspot時，他首先觀察到行業里的每個競爭者都在抄襲Groupon用于所有營銷活動的通用落地頁。

除了買下一大堆搜索關鍵詞（"SPA"、"按摩"、"晚餐"等等），在Facebook上對大量人群做定向營銷，并且占據了其他許多的網絡展示位，Groupon和其他團購網站都采用了通用的落地頁背景。這確實可以節省開發時間，但是實際上，并不會花費很長時間來建立一個通用的模板，然后根據垂直細分領域測試不同的文字、背景圖、及其他運營元素。這正是Bloomspot的策略。

結果顯示Bloomspot轉化率一度高達20%。

示例：Groupon等團購網站為某些（按摩優惠、餐廳優惠、健身優惠）關鍵詞使用通用的落地頁背景。

Bloomspot則基于垂直內容，采用與消費目標匹配的背景圖與文案，轉化率得到顯著提升。

正如William Wai Wong指出的，適合競爭對手的主流玩法不一定適合你。實際上你的玩法可能比主流玩法更精明。
簡化注冊表單

對于用戶注冊而言，有幾個實踐效果最佳的方法。我曾經做到的幾次最大的客戶增長就是通過改進注冊表單實現的。

11. 去除不必要的表單項

我覺得雅虎是專門產出可怕的注冊表并要求冗余信息的傻X之一。看看這個申請郵箱賬號的注冊表單：

來源: http://www.unmatchedstyle.com

他們并不需要用戶填寫性別和生日。這類數據完全是為了雅虎自己的利益，因為他們可以使用這些數據來做定向廣告。對于同一個IP地址的第一次注冊，他們可以摒棄驗證碼（驗證碼失敗率通常能有10%）。對于同一個IP幾分鐘之內的二次注冊才需要識別驗證碼，因為那可能是機器在嘗試批量注冊。但一個IP的首次注冊幾乎可以斷定是一個真實用戶而不是機器，因此不應該讓他們填寫驗證碼。更不用說這個表單這么長，關鍵的行為呼喚都在首屏以下。

12. 自動填充表單，使用行內驗證

Twitter在注冊表驗證與自動填充上做得很好。主頁開始時你只需輸入你的姓名，郵箱地址與密碼。當你點擊提交按鈕以后，他們會引導你到注冊第二頁，上面有提供建議的表單項（例如選擇用戶名），以及其它你已經填寫正確的驗證信息：

然后他們使用一個簡單的算法來推薦用戶名。用戶可以直接點擊選擇。假如你有一個類似Melissa Anderson這種爛大街的名字，你可能是第53個用這名字注冊Twitter的人，肯定不可能再用anderson.melissa, melissa.anderson, melissa1…等姓名排列，因為這些早就被用過。Twitter會在未被占用的用戶名中給你推薦一個。這樣就能提高注冊率。

13. 提供社交網站賬號注冊，使用社交驅動

使用Facebook或Twitter認證注冊給用戶帶來了方便。你可以從Facebook和Twitter API中調用用戶賬號、郵箱等信息，自動填入表單，然后只需要讓用戶確認授權，或者設置個密碼。

Digg在借用社交網絡上做得很好，他們利用Facebook的Open Graph提示社交網絡上的讀者信息（使用Facepile插件）的同時，突出顯示了"使用Facebook 賬號登錄"的注冊選項。Mixcloud聲稱通過使用Facepile和Facebook賬號登錄，他們注冊的轉化率增長了200%-300%( http://www.netmagazine.com/news/report-f8-london-part-2-111504)。盡管大多數的網站不會有同樣的提升效果，但根據我與其他開發者和設計師的交流來看，帶有Facepile的注冊按鈕能帶來20%-50%的注冊增長率。以下是Digg的做法：

Hipmunk在這方面也做得很好，他們在注冊對話框中提供了社交登錄選項：

你可能想要看一下通過不同社交網絡賬號注冊的用戶的后續價值如何。通常可以發現來自Facebook或者其他選項的單個用戶價值存在差別。根據用戶產生的價值再來考慮主推哪一種社交網站注冊按鈕。

此外，你還可以根據用戶訪問來源來聚焦呈現某一個社交注冊按鈕。比如，當我通過Facebook上的鏈接訪問了Hipmunk時，我會測試以Facebook賬號連接為主要注冊渠道的頁面。因為注冊過程發生在用戶來源網站的相關背景下，這種方法或許可以優化注冊率。

原文：Andy Johns
譯文：微博UDC（上篇）、（中篇）
源文：http://www.damndigital.com/archives/103520

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：156982）分享實戰經驗。
設計微博：擁有粉絲量55萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：