Table of Contents
登陸網頁的設計哲學
登陸網頁（Landing Page）作為線上購買產品的熱點，它說得上是主宰線上營業額的重要角色。因此，設計登陸網頁或銷售頁面所需要的思維，與網站裡其他的頁面並不一樣。
這次，我們將會從Sparka Digital其中一個客戶個案中，總結出4個提升登陸網頁轉化率的方法，幫助你獲得更多線上顧客。
客戶個案
今次的客戶是一間開發手機App的公司。他們的收入主要來自訂閱應用程式中Premium Membership的用戶。除了優化他們的Facebook廣告之外，我們亦為了提升應用程式的下載量而重建了他們的網站，包括登陸頁面。
由於客戶自己並沒有開發網頁的經驗，因此他們在網上自學WordPress的基礎知識後，便自行搭建了一個較為簡陋的登陸頁面。
說真的，筆者第一次到訪他們網頁的時候，心底裡覺得網頁的設計真的頗為糟糕（不要見怪～）。基本上，所有常見的設計錯誤都出現了在他們的登陸頁面之上。但往好的方向去看，筆者亦因此在項目開始前，已經大概預計到網頁翻新後的進步幅度會很大。
接下來我們將會談談，4個在個案中見到的常犯錯誤，和對應的解決方法來提升網頁的轉化率。
錯誤1：為寫而寫的內容
不少人以為一個好的網頁必須具備豐富的文字內容。但其實真正重要的，是網頁的內容能否為到訪者帶來價值/引起他們的興趣，而並非文字的分量。
如果1-2句的文字就能夠概括產品賣點的話，那麼筆者先恭喜你！因為至少你的產品定位應該較為清晰。記著，千萬不要為了拖長內容，而加入大量對讀者沒有價值的內容。
以我們的客戶為例，其實他們的應用程式只有2個簡單的賣點，但他們卻為了令登陸網頁的內容看上去更加飽滿，而把介紹產品的文案拖長至400字左右（我們把文案重寫後只有39字）。
今時今日，大多數人瀏覽網頁時的注意力都非常有限，如果我們讓讀者連續看見幾段他們不太在乎/欠缺價值的內容，他們很可能就會直接離開網站，因此，無論如何都不要把登陸頁面的內容拖長。
錯誤2：只有一個CTA按鈕
外國有一些A/B Test證實了嵌入兩個或以上的CTA按鈕於網頁內，可以明顯提升網頁的轉化率。到底為什麼重複的CTA按鈕可以提升網頁的轉化率？
這是因為很多時候，觀眾並不會記住網頁元素的位置，包括CTA（Call to Action）按鈕。
因此，最好的做法就是無論到訪者滑動到網頁什麼位置，都有一個CTA按鈕在附近，方便他們決定採取行動（例如購買產品）時，可以很輕鬆地找到CTA按鈕。
簡單來說，如果你的登陸網頁比較長的話（網頁長度超出顯示範圍），最好在不同具有關鍵內容的位置加入CTA按鈕，方便用家即時採取行動。至於關鍵內容所指的，就是可以大幅度提升用戶信心的部分（例如：用家證言，產品好處等）。
在個案裡，客戶舊版網頁只有一個置於底部的CTA按鈕。更新後，網頁分別在頂部，中段和底部都嵌入了導向下載界面的CTA按鈕。
以外國網站The Futur為例，課程登陸網頁的開首，底部，和頂部導覽列都有CTA按鈕。
錯誤3：描述功能，而不是方案
另一個登陸頁面的常犯錯誤，就是不斷描述產品的功能和特性，卻完全沒有提及它可以為用戶解決什麼問題。
例如，如果你推廣的應用程式是用來製作購物清單的話，那麼它真正的價值就是減少用戶需要把瑣碎事項記下的煩惱，讓用戶可以放心處理重要的事情。如果你的登陸網頁只是不斷描述應用程式的功能（例如資料備份）的話，其實到訪者很難感受到產品的價值。
因此，利用網頁內容來描述用家平常會遇到的問題，以及產品/服務能夠如何解決這些煩惱，才是提升轉化率的關鍵。
以個案為例，客戶舊版的網頁差不多花了7成的篇幅來介紹手機App的功能，效率，甚至開發過程，卻甚少描述用戶遇到的問題。翻新之後，絕大部分的文案都集中用作點出用戶的痛點，還有用戶利用該App解決這些問題後的感覺。
錯誤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的方案。
如何預覽Responsive Design
基本上不同瀏覽器都會提供預覽Responsive Design的功能，有需要的話可以自行搜尋個別瀏覽器的預覽步驟。
筆者在這裡以Google Chrome作為例子示範一次：
- 按F12（Window/Linux），或Ctrl+Opt+I（Mac）來打開Developer Tools
- 按Toggle device toolbar
- 在上方揀選預覽的屏幕尺寸
- 重新載入網頁就可以看到網頁在這個尺寸的佈局
筆者協助個案裡的客戶重新開發網站後，登陸網頁的轉化率由大約1.6%提升至7.4%，換句話說，在網頁更新前，超過75%的流量都不幸被浪費了。由此可見，登陸網頁的設計錯誤可以嚴重拖垮網頁把到訪者轉化成用家的成效，亦因此多花一點時間來開發登陸網頁絕對是值得的。
Sparka Digital是位於香港的Digital Marketing Agency。提供廣告製作，廣告投放，社交媒體營銷，及網頁開發服務。如果你希望提升產品/服務銷量，或者遇到Digital Marketing的問題，歡迎找我們來聊聊！