完美的著陸頁Landing Page的終極攻略

Photo of author
Written By CMO

判斷一個網站的方方面面最重要的指標是轉化(Conversion),而著陸頁是你首先要重視的頁面,在優化著陸頁的過程中你會學到很多網站轉化率優化的基本方法和最優方法(Best Practice)。

奥巴马的行銷团队非常注重着陆页的设计
奧巴馬的行銷團隊非常注重著陸頁的設計

你可以找到的著陸頁教程很多,國內的,國外的。找這些資源並不難,可是去找的人卻寥寥無幾。因為沒多少人在乎這些,多數人在乎的是自己的網站好看不好看,也不會去分析數據,完全跟著感覺走。能夠開始重視著陸頁,那麼你的成功就已經走了一半了。在本文中,HubSpot One會教你如何設計屬於自己的完美的著陸頁,無論你是初學者還是資深專家(你需要有勇氣這樣說)都可以有一些收穫。在設計你那完美的著陸頁之前,你必須至少知道什麼是著陸頁,這裡有兩句話:

  • 著陸頁(Landing Page)是訪客訪問你的網站/應用所接觸到的第一個頁面,它承載著傳遞第一印象的使命。
  • 著陸頁是用於引導用戶完成單一行為的頁面

即使你不是太理解以上這兩句話也不要緊,我們會貫徹這兩句話進行以下講解。

載入速度和SEO友好性

人可以忍受的最大頁面載入時間的極限臨界值是9秒。 9秒之後如果你的著陸頁還沒有很好地顯示在用戶的屏幕上,那絕大多數人會選擇離開。是的,天朝的網速是很可怕的,多少年來天朝的網民也練就了超人的忍耐能力,仍然會有很多人等待20秒以上來瀏覽某個頁面。然而,你永遠不希望因為頁面載入速度而丟失哪怕5%的訪客。所以你必須保證你的著陸頁能在5秒以內被你的訪客打開。如果你面向內地而把服務器放在美國,那很多情況下這是無法保證的。而且某度僅會收錄Host在國內的網站,國外的網站僅會收錄一個首頁。在此之外你需要優化你的代碼和內容,把js文件放到HTML最後,並優化你的圖片保證載入數據大小不會太大。在Google Analytics中你可以在Audience中查看訪客Location的訊息,也可以在Page Timing報表中查看頁面載入速度。如果發現載入時間過長,那請一定要花精力解決。某度的站長工具中也有測速的功能,提供電信和網通雙線路,非常實用。 SEO友好性中其實涵蓋了載入速度,還包括其他很多方面。

內容的延續性

你應該知道你的訪客為什麼會在你的著陸頁面上著陸,因為大多時候在用戶著陸之前點擊了你在其他媒體上的廣告創意。譬如你是做像WorldFriends這樣的國際交友網站,訪客訪問到你的著陸頁是因為點擊了一個含有美女圖片的廣告圖片,但是如果你的著陸頁面上的圖片和文案講的是英語交流或文化交流就會與訪客的期望產生很大偏差,往往造成流失(Fallout)。在SEM/PPC中更應該為每一個細微分類的廣告創意特別設計一個專門的著陸頁。如果你賣兩種不同路線旅遊產品,去西藏廣告的就請鏈接到西藏旅遊報名的著陸頁,去海南的就鏈接到去海南旅遊報名的著陸頁,提高轉化效率。

分辨率和關鍵的第一屏

網頁熱力分佈圖 Heat Map
網頁熱力分佈圖Heat Map

在這裡你需要知道兩個概念,其一是熱力圖(Heatmap),其二是屏(Fold)。就如下圖顯示的那樣熱力圖顯示了多個訪問者對於頁面上各個縱向部位的關注度。這是通過訪客鼠標滾動,光標移動等記錄統計出來的。從上部的紅色部分到白色部分在訪客屏幕的第一屏(First Fold)中,顯然不用滾動訪客就可以直接查閱這一屏的全部內容,而藍色和黑色部分的曝光率僅為1%。那你是否要把最重要的訊息放在第一屏呢?當然!哪些是最重要的訊息呢?是以下這些元素:品牌,標題,主題圖像/影片,互動控件。你的網頁設計師或者前台開發可能為你做好了各瀏覽器的兼容性,甚至為你做了自適應(Responsive)的頁面已應對不同設備,但是他很有可能為你把最重要的訊息藏在了第一屏外。如果你對這一點產生疑惑,只要你打開Google Analytics,查看下Audience中訪客的Screen Resolution就可以一清二楚,如果你的目標用戶還在使用1024×768的古董顯示分辨率,請不要驚訝。把你的著陸頁調整到他們的視野吧。別忘了,他們中的很多還可能安裝了形形色色的工具欄,真正能看到的頁面大小可能只有500像素高度。

除去無關元素

著陸頁有非常高的引導性。所謂引導性,就是指當頁面受眾瀏覽這個頁面上都會傾向於做某件同樣的事。當飯館菜單上只有陽春面的時候,客人只會有兩種反應:離開飯店(Bounce),或者點一碗陽春面(Conversion)。在規劃著陸頁元素的時候你必須考慮哪些鏈接會讓訪客做出偏離你的目標的行為。一個常見的錯誤是在著陸頁上放入網站導航欄。這樣本來要閱讀著陸頁訊息並註冊的用戶點擊下就走了。有人會說,訪客沒有離開我的網站啊,有什麼不好呢?這不是更說明用戶感興趣麼?那好,請你想一下,著陸頁是你專門用來轉化的頁面不是嗎? (如果不是,為什麼你沒有做好呢?)機率最高的頁面白白損失了轉化機會,你偏要期望其他的頁面來進行轉化麼?說不定那些頁面連轉化控件都沒有。如果你認為用戶是因為感興趣才做出這些不轉化的行為,那麼為什麼你不把他們關心的訊息放到著陸頁之內呢?訪客每一個在你每一個頁面的行為都會有概率產生流失(Exit),就好像一個表格的問卷調查很多人能填完,而一疊厚厚的問卷調查願意配合的人就很少。HubSpot One數字行銷的忠告是:

  • 除了轉化控件(註冊表單,註冊按鈕)請不要放其他任何跳出著陸頁的鏈接。
  • 如果你要放“登錄”按鈕,請低調地放在右上角。
  • 如果你必須放一些鏈接(如,相關商品,給顧客更多選擇),請放在頁面底部。

標題是著陸頁的靈魂

你需要一個好的標題,並且使用能夠接受的最大的字體,並使用最能引人注目的顏色。使用手寫體是一種很好的方法。別忘了使用<H1>標籤。一個好的標題文案會帶動用戶繼續閱讀的興趣。你可以發起一個訪客關心的問題,也可以用祈使句引導訪客的行為。請保證標題的文案與之前訪客進入時所見到的廣告文案保持高度相關性。

主題照片

選圖對訪客視線的引導
選圖對訪客視線的引導

一圖胜千言(A Picture Is Worth A Thousand Words)。你需要好的照片讓訪客第一時間達到高潮。在選擇主題照片的時候,你需要知道的第一條定律是:人物的照片總會比其他照片產生更高的轉化率。你要賣寵物,那去選擇一張人抱著寵物的照片;你要賣上海一日遊,那去選擇一張旅行遊客的笑臉。如果瀏覽你的著陸頁的不是一隻坐在電腦前的猴子的話,人總是會有更多的吸引力。選擇人物照片的時候,傻子都會選擇長得好看的人物照片。是的沒錯,但是你還要挑選更自然的動作表情,盡量避免一些擺拍(Stock Photo)。人物的視線也會影響訪客在頁面上的視線移動,所以你要保證人物看的方向在你認為重要的內容上。右面的熱力圖比較就可以看到第二張圖片對訪客的轉化效果更好。可是,也有例外的時候。當你提供交友服務的時候時,你需要更多的眼神交流(eye contact)。在此時你要選人物正視訪客的圖片,這對轉化更有說服力。呵呵,一般情況下,女神都不正眼看你。

行動控件(Call To Action)

如果說著陸頁的目的是為了引導訪客去完成一些行為,行動控件就是實現該行為的網頁控件。它可以是一個按鈕,一份表單,一段影片或者其他你認為是作為目的標誌的內容。我們前面說了,重要的頁面元素必須要放在第一屏。而行動控件就是這樣的元素。就以按鈕為例,除了保證頁面“只有一個”按鈕以外,你還要確保用戶能在第一屏就能看的它並能夠最終被它“召喚”(當你不是很確定用戶是否會注意到你的行為控件時,請務必加上“箭頭”來幫助引導用戶)。因此,你還需要琢磨好該按鈕的位置、大小、按鈕上的文字和按鈕顏色。

  • 位置:按鈕周圍離其他控件要有一定距離。這好比在一張白紙上留下一滴墨水會更顯眼,一個道理。最佳位置是右下角。符合人眼從左上角到右下角的移動自然規律。
  • 大小:自然是越大越好。但是要比其他控件略窄。有許多設計師喜歡把按鈕和文本輸入框設為同樣寬度,這是經常犯的錯誤。這會使按鈕變得不像按鈕,造成訪客的困擾。
  • 文字:以祈使句短語為主,帶有輕微催促為佳。如果你的服務是免費的別忘了加上“免費”兩字。
  • 顏色:一百個設計師有一百種偏愛,但是科學證明橙色是能夠帶來最高點擊率的顏色。還有要注意的是要凸顯按鈕的顏色,不要使用頁面主色調的顏色。
  • 以上只是一個小小按鈕的使用“竅門”。在面對錶單的時候你還要注意到:
  • 盡量精簡表單:如果是註冊,沒有必要讓用戶再輸一遍密碼。
  • 表單區域加強:可以用一些浮雕或3D的樣式把表單凸顯到背景樣式之外來。注意顏色處理上的差異化(對比度)。
  • 文字標籤:右對齊會更容易幫助使用者填寫。如果文字長度差異較大建議標籤右對齊。
  • 控件選擇:保證彈出提示可以輔助用戶正確填完表單,能用Radio控件的時候不用下拉菜單。

獎項和證詞(Testimonials)

相比你獨自吹噓,你所獲得的獎項和來自用戶/行業的證詞會更好地對你的產品服務進行評價。如果你獲得了一些如VeriSign或者E-trust的安全認證你也應該表現在你的頁面上。特別是靠近你按鈕的位置,你應該相應放置一些使用戶安心放心購買/登記的內容。來自用戶的推薦和褒獎會使訪客產生共鳴並增加對你的服務產品的信任。

影片,截屏和圖表

圖文並茂相當重要
圖文並茂相當重要

我們從這裡開始講一些較次要的元素。人們總是傾向於更少地閱讀,所以在著陸頁上放置過多大段文字是很沒有必要的。如果你有良好的內容,並且載體是影片或者截圖的話就應該展現在訪客面前。讓他們花費最短的時間了解你的產品。如果你的圖形設計師擅長畫圖表的話那就更好了。因為訪客總會對圖表數據有自然的親和力。如右圖所示,超過45%的人會因為鏈接附帶了一個圖表而去點擊,更有30%的人會把此轉發給別人(即便自己都沒看懂)。

BONUS:我們的鄰居日本不但喜歡畫漫畫而且也喜歡用圖形來構建著陸頁。當然這也和他們全球最高帶寬有關,他們可以毫無顧慮放置超多圖片。在這裡你可以得到很多參考。

互惠交換

你或許作為訪客有過這樣的經歷,你去找一份SEO教程,通過搜索引擎找到之後點擊“下載”,然後在彈出框中輸入了自己的名字和電郵地址。之後你每週都會收到該網站的訊息了。這是一個典型的交換(Trade-off)。為了提高網站的轉化率,許多公司都會提供一些免費的資料“釣你上鉤”。如果我們不能在30秒內決定勝敗的話,我們也可以把轉化週期拉長。在未來的幾個星期甚至幾個月內通過後續的電郵將訪客轉化。

聯繫人訊息

如果你對SEO或者SEM有少許了解的話,你應該懂得在頁面上提供地址電話都會是“加分”的行為。在轉化的角度上說,這也提供了O2O的一種轉化。因此如果你的頁面受眾更期望致電來詢問你的產品服務,何不把你的電話和地址訊息提供在你的頁面上呢?

社群媒體

我一直不贊成把“關注我們”放在著陸頁上,因為這樣會對訪客進行干擾降低轉化率。特別是實際上只有幾個關注時,這反而成為了負面的內容。如果你沒有使用這些社群媒體作為SSO(Single Sign On),登錄或者註冊的話,還是不要考慮這些吧。

“真正完美的著陸頁”

Google Analytics Experiment:原Google Website Optimizor
Google Analytics Experiment:原Google Website Optimizor

好了,還沒寫完時就有被指出不存在完美的著陸頁了。但完美的著陸頁離你其實並不遠。打開你的Google Analytics,找到Behavior(或者是Content,如果你還在舊版本上),然後點擊Experiments。你可以建立一個實驗。是的,這就是一個很好的A|B測試工具。我們通常採用95%以上的置信率。你把分流代碼和跟踪代碼安裝好以後就可以開始測試了。如果你覺得以上所說的有任何地方說的不確定,歡迎進行測試。你可以考驗是不是真的橙色的按鈕轉化率最高,也可以測試表單放在左下角和右下角哪個轉化率更高。不管你對自己目前的著陸頁是否滿意,你都會毫不放棄地進行下一個測試。你得到的會是很精準的數據,可操作的能讓你進行決策並逐步讓你的著陸頁臻於完美。