Thumbnail of Sparka Digital's blog post about conversion rate optimization of landing pages

白白浪費75%的網頁流量!客戶個案分析【登陸頁面設計】

Table of Contents

登陸網頁的設計哲學

登陸網頁(Landing Page)作為線上購買產品的熱點,它說得上是主宰線上營業額的重要角色。因此,設計登陸網頁或銷售頁面所需要的思維,與網站裡其他的頁面並不一樣。

這次,我們將會從Sparka Digital其中一個客戶個案中,總結出4個提升登陸網頁轉化率的方法,幫助你獲得更多線上顧客。

客戶個案

今次的客戶是一間開發手機App的公司。他們的收入主要來自訂閱應用程式中Premium Membership的用戶。除了優化他們的Facebook廣告之外,我們亦為了提升應用程式的下載量而重建了他們的網站,包括登陸頁面。

由於客戶自己並沒有開發網頁的經驗,因此他們在網上自學WordPress的基礎知識後,便自行搭建了一個較為簡陋的登陸頁面。

說真的,筆者第一次到訪他們網頁的時候,心底裡覺得網頁的設計真的頗為糟糕(不要見怪~)。基本上,所有常見的設計錯誤都出現了在他們的登陸頁面之上。但往好的方向去看,筆者亦因此在項目開始前,已經大概預計到網頁翻新後的進步幅度會很大。

接下來我們將會談談,4個在個案中見到的常犯錯誤,和對應的解決方法來提升網頁的轉化率。

錯誤1:為寫而寫的內容

不少人以為一個好的網頁必須具備豐富的文字內容。但其實真正重要的,是網頁的內容能否為到訪者帶來價值/引起他們的興趣,而並非文字的分量。

如果1-2句的文字就能夠概括產品賣點的話,那麼筆者先恭喜你!因為至少你的產品定位應該較為清晰。記著,千萬不要為了拖長內容,而加入大量對讀者沒有價值的內容。

以我們的客戶為例,其實他們的應用程式只有2個簡單的賣點,但他們卻為了令登陸網頁的內容看上去更加飽滿,而把介紹產品的文案拖長至400字左右(我們把文案重寫後只有39字)。

今時今日,大多數人瀏覽網頁時的注意力都非常有限,如果我們讓讀者連續看見幾段他們不太在乎/欠缺價值的內容,他們很可能就會直接離開網站,因此,無論如何都不要把登陸頁面的內容拖長。

The landing page of Apple introducing iPhone 11
以Apple的官網為例,其實介紹產品的文案絕對不需要很冗長

錯誤2:只有一個CTA按鈕

外國有一些A/B Test證實了嵌入兩個或以上的CTA按鈕於網頁內,可以明顯提升網頁的轉化率。到底為什麼重複的CTA按鈕可以提升網頁的轉化率?

這是因為很多時候,觀眾並不會記住網頁元素的位置,包括CTA(Call to Action)按鈕。

因此,最好的做法就是無論到訪者滑動到網頁什麼位置,都有一個CTA按鈕在附近,方便他們決定採取行動(例如購買產品)時,可以很輕鬆地找到CTA按鈕。

簡單來說,如果你的登陸網頁比較長的話(網頁長度超出顯示範圍),最好在不同具有關鍵內容的位置加入CTA按鈕,方便用家即時採取行動。至於關鍵內容所指的,就是可以大幅度提升用戶信心的部分(例如:用家證言,產品好處等)。

在個案裡,客戶舊版網頁只有一個置於底部的CTA按鈕。更新後,網頁分別在頂部,中段和底部都嵌入了導向下載界面的CTA按鈕。

以外國網站The Futur為例,課程登陸網頁的開首,底部,和頂部導覽列都有CTA按鈕。

The purchase screen of The Futur's website about a typography course
開首的CTA按鈕
The purchase screen of The Futur's website about a typography course
底部和頂部導覽列的CTA按鈕

錯誤3:描述功能,而不是方案

另一個登陸頁面的常犯錯誤,就是不斷描述產品的功能和特性,卻完全沒有提及它可以為用戶解決什麼問題。

例如,如果你推廣的應用程式是用來製作購物清單的話,那麼它真正的價值就是減少用戶需要把瑣碎事項記下的煩惱,讓用戶可以放心處理重要的事情。如果你的登陸網頁只是不斷描述應用程式的功能(例如資料備份)的話,其實到訪者很難感受到產品的價值。

因此,利用網頁內容來描述用家平常會遇到的問題,以及產品/服務能夠如何解決這些煩惱,才是提升轉化率的關鍵。

以個案為例,客戶舊版的網頁差不多花了7成的篇幅來介紹手機App的功能,效率,甚至開發過程,卻甚少描述用戶遇到的問題。翻新之後,絕大部分的文案都集中用作點出用戶的痛點,還有用戶利用該App解決這些問題後的感覺。

The landing page of ConvertKit
ConvertKit官網開首的部分很強調用戶遇到的問題/痛點

錯誤4:沒有顧及手機界面

時至今天,主流的網頁到訪者,都是使用手機來瀏覽網頁的。因此,使用響應式設計(Responsive Design)是提升網頁轉化率的重要一環。

簡單而言,使用Responsive Design的網頁,內容元素在不同尺寸的屏幕顯示時,會使用不同的佈局,方便瀏覽者光靠垂直滑動就可以看到所有內容,而不用把畫面向橫滑動/調整大小。

從執行層面來看,Responsive Design需要設計者標明每一個網頁元素在不同尺寸的屏幕,需要佔用多大的空間。例如,在Desktop屏幕上顯示網頁的時候,一張圖片可能只佔25%的寬度,而在手機上顯示的時候,就佔了100%的寬度。這樣設定的話,用家使用不同尺寸的屏幕,就會看到不同的佈局。

Responsive Design能夠令瀏覽網頁的體驗變得非常順暢,因此我們不難理解Responsive Design為何可以大幅提升網頁的轉化率。

以下是筆者以插畫形式講述Responsive Design的Instagram內容:

如果你是使用WordPress或其他主流CMS來搭建網站的話,不少Page Building的插件(例如Elementor等)都提供Responsive Design的功能。如果你希望自行編寫網頁的話,不少前端框架(例如Bootstrap)都提供Responsive Design的方案。

The landing page of Bootstrap. a front-end development framework
Bootstrap前端框架提供Responsive Design的方案

如何預覽Responsive Design

基本上不同瀏覽器都會提供預覽Responsive Design的功能,有需要的話可以自行搜尋個別瀏覽器的預覽步驟。

筆者在這裡以Google Chrome作為例子示範一次:

  1. 按F12(Window/Linux),或Ctrl+Opt+I(Mac)來打開Developer Tools
  2. 按Toggle device toolbar
  3. 在上方揀選預覽的屏幕尺寸
  4. 重新載入網頁就可以看到網頁在這個尺寸的佈局
A screenshot of Google Chrome's Developer Tool preview
在Chrome預覽手機版面

筆者協助個案裡的客戶重新開發網站後,登陸網頁的轉化率由大約1.6%提升至7.4%,換句話說,在網頁更新前,超過75%的流量都不幸被浪費了。由此可見,登陸網頁的設計錯誤可以嚴重拖垮網頁把到訪者轉化成用家的成效,亦因此多花一點時間來開發登陸網頁絕對是值得的。

Sparka Digital是位於香港的Digital Marketing Agency。提供廣告製作,廣告投放,社交媒體營銷,及網頁開發服務。如果你希望提升產品/服務銷量,或者遇到Digital Marketing的問題,歡迎找我們來聊聊!

分享內容

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email