為轉換而生——著陸頁設計最佳實踐

已發表: 2022-03-11

登陸頁面是訪問者在點擊營銷號召性用語後到達的任何頁面。 這可以是搜索或展示廣告、電子郵件、社交媒體帖子或附屬鏈接。

一些公司將來自這些引薦來源的流量發送到他們的主頁; 這是一個錯誤。 登陸頁面提供了幾個好處,包括與任何引用來源一致的明確報價。 與簡單地將新訪問者發送到主頁並希望他們弄清楚如何在點擊時找到所提供的內容相比,這會產生更高的轉化率。

通過遵循此處包含的登陸頁面設計最佳實踐,設計師可以創建更有效地轉換的登陸頁面。

強調好處

產品設計師傾向於關注功能; 消費者想知道這些好處。 他們想看看這些功能如何影響他們的體驗。 一個人不買車是因為它有 300 馬力; 他們買它是因為 300 馬力讓他們跑得很快。 這就是為什麼許多汽車廣告提到他們的 0-60 次,而不僅僅是馬力數字。

在登陸頁面上,這意味著使用標題和項目符號列表等元素來突出產品的優勢。 這是用戶首先想知道的:這個產品對我的生活或業務有什麼好處?

著陸頁設計最佳實踐:突出優勢
Teambit 幾乎完全專注於在其著陸頁上為客戶帶來的好處,例如創建高績效團隊。

使用相關圖片

人是視覺動物。 圖像的缺乏可能會讓查看著陸頁的人感到不安。 良好的圖像增加了消費者和公司之間的信任感。

有許多類型的圖像可以有效地用於登錄頁面。 產品圖片是最明顯的選擇。

登陸頁面提示:使用相關圖片
Square 在其登陸頁面上使用其銷售點硬件和軟件的圖像。

隨著用戶對真人照片的反應更好,使用該產品的人的圖像更加引人注目。 另一方面,模型的庫存照片不一定會增加用戶的體驗。

出色的登陸頁面設計:真實人物的圖像表現更好
Airbnb 使用在其著陸頁中包含真實人物的圖片來吸引新房東。

著陸頁設計師應該致力於使用能夠在訪問著陸頁的人中產生情感反應的圖像。

測試你的 CTA

可以說,任何著陸頁最重要的部分是號召性用語。 由於它們的重要性,設計師需要測試他們的 CTA 以確保優化它們以獲得來自訪問者的最高數量的積極響應。

A/B 測試是測試 CTA 的最簡單方法。 設計師可以在一段時間內隨機向訪問者顯示兩個登錄頁面,除了 CTA 本身的差異外,每個頁面都相同。 從那裡,他們可以繼續改進和測試,直到 CTA 獲得所需的結果。

設計人員應該考慮測試諸如 CTA 按鈕顏色、CTA 周圍的語言(以及按鈕本身)以及 CTA 在頁面上的位置等內容。 (著陸頁的其他部分也可以進行 A/B 測試以獲得更好的整體結果。)

高轉化著陸頁:測試 CTA 以獲得最佳效果
Basecamp 以廣泛測試有關其登錄頁面的所有內容而聞名,包括他們的 CTA。

讓它適合移動設備

考慮到有多少人在他們的移動設備上瀏覽網頁,設計師忽略他們的登陸頁面在小屏幕上的外觀是錯誤的。 雖然創建在移動設備上看起來不錯的設計是一種選擇,但簡化登錄頁面使其在移動設備上更有效是一個更好的主意。

移動友好性對於社交媒體帖子和廣告或電子郵件指向的登錄頁面尤為重要。 2017 年,75% 的電子郵件用戶報告說在移動設備上查看了他們的電子郵件(此後這一數字僅上升)。 全球 42% 的人(不僅僅是互聯網用戶)通過他們的移動設備使用社交媒體網站。 此外,在 2018 年,40% 的黑色星期五銷售額來自智能手機或平板電腦。

人們不只是在智能手機上瀏覽社交媒體和閱讀電子郵件。 他們進行購買、註冊服務以及完成公司希望他們執行的其他操作。 忽視這一巨大市場份額的設計師充其量是短視的。

移動登陸頁面設計是必須的
Bench 在移動版和桌面版之間保持消息傳遞一致,但移動版經過精簡和簡化。

確保與引用來源一致

當有人點擊電子郵件中的廣告或鏈接時,必須與他們最終到達的目標網頁保持一致。 這可以通過幾種不同的方式完成,具體取決於引用源是什麼。

例如,如果引薦來源是搜索廣告,那麼在廣告和用戶最終到達的目標網頁之間使用一些相同的語言可以提供一致性。 如果引用來源是電子郵件,那麼使用相似的圖像和配色方案可以提供訪問者所需的一致性。

在設計登陸頁面時,設計師應該知道引用來源是什麼,以確保它們至少在幾個方面匹配。

著陸頁策略:來源應與著陸頁保持一致最佳轉換著陸頁以某種方式與引用來源相匹配
星期一保持他們的廣告和登陸頁面之間的“視覺”消息一致。

包括社會證明

人們想知道他們正在考慮購買的產品是否讓其他客戶滿意。 社會證明是提供這種保證的最佳方式之一。

有幾種方法可以提供社會證明。 一種是在登陸頁面上突出顯示推薦或評論。 另一種方法是包括有關產品的社交媒體對話。 然而,設計人員在這樣做時應該小心,因為自動顯示所有社交提及可能最終會同時顯示好與壞。

登陸頁面內容應包括社交證明
Casper 包括他們在多個網站上的平均評論、推薦以及在其著陸頁顯著位置給予他們五星級評論的客戶數量。

不要讓登陸頁面做不止一項工作

一個著陸頁應該只有一項工作要做,這應該在設計之前確定。 一個要求訪問者購買東西但也註冊時事通訊的登錄頁面正在分散該訪問者的注意力。 這使得他們不太可能採取最理想的行動。

設計師應該考慮什麼是行動號召,並確保登陸頁面上沒有提示其他操作。 甚至像其他導航元素這樣的東西也會引起訪問者的注意並阻止他們完成所需的操作。

登陸頁面元素應專注於單一目的
Freckle 的登錄頁面保持整潔,只專注於讓人們註冊免費帳戶。

不要要求提供比要求更多的信息

要求太多信息可能是讓訪問者從登錄頁面反彈的一種快速方法。 然而,通常會看到登錄頁面的表單不僅要求提供姓名和電子郵件地址,還要求提供電話號碼、公司名稱、職位等。

最佳著陸頁示例不包含過長的表單
這種形式需要任何想要下載“免費”電子書的人提供大量信息,這可能會阻止許多訪問者註冊。

除非訪問者可以立即看到提供該信息的價值,否則會大大增加他們從頁面跳出的機會。 為了降低著陸頁的跳出率,設計師應該只要求提供最少的信息以完成報價。

一個簡單的登陸頁面更有效
Shopify 使他們的初始註冊表單保持簡單:他們只需要一個電子郵件地址。

登陸頁面表單上常見的另一個關鍵可用性問題是它們沒有針對移動設備進行優化。 表單字段的編碼方式應為每個字段提示適當的鍵盤佈局。

這意味著,例如,當用戶輸入他們的電子郵件地址時,鍵盤會在主屏幕上顯示“@”符號; 或者當請求電話號碼時,鍵盤切換到數字輸入。 這個小細節極大地改善了移動設備上的用戶體驗。

不包括導航欄

不包括導航欄直接與單一目的登錄頁面的想法有關。 導航是登錄頁面上的視覺混亂,可能導致用戶在未完成所需操作的情況下單擊站點上的不同頁面。

消除導航欄有助於保持訪問者的任務。 如果設計師關心向訪問者提供更多信息,則應將其包含在目標網頁本身或頁面下方的鏈接中,最好在第一次號召性用語之後。

通過給他們其他選項來分散準備註冊或購買的用戶的注意力是沒有意義的。 儘管如此,許多登陸頁面都包含額外的導航選項。

交互式登陸頁面元素吸引用戶注意力
Muzzle 的登陸頁面去掉了除下載按鈕之外的所有導航選項(以及發布說明幫助的幾個微妙鏈接)。

不要弄亂頁面

登陸頁面應僅包含登陸該頁面的人員完成所需任務所需的信息。 訪問者需要的投資越多,在大多數情況下,需要的信息就越多。

例如,不要求提供付款信息的免費試用是一個相當低風險的提議,並且不需要提供太多信息。

但是,請求用戶進行購買的頁面通常需要向用戶提供更多信息。 隨著價格的上漲,信息量只會增加。

登陸頁面佈局應該簡單整潔
Asana 的登錄頁面簡單明了,帶有標題、號召性用語、產品圖片和大量空白區域。

設計師在創建登陸頁面時應該遵循良好的設計原則,就像他們對任何其他頁面所做的那樣。 極簡主義和簡單的設計通常是首選,只要它們適合相關品牌。 內容周圍的空白區域可防止用戶不知所措,並使他們能夠專注於重要的事情。

不要偏離既定模式

人們對登陸頁面有一定的期望。 他們想知道好處,他們想要一個明確的價值主張,他們想要一個易於完成的號召性用語。

當設計師偏離已建立的登錄頁面模式太多時,他們可能會疏遠用戶並干擾他們完成手頭的任務。 實驗性設計很棒,但通常更適合其他類型的頁面和網站。

登陸頁面設計最佳實踐包括使用已建立的模式
Zoho 的會計軟件登陸頁面堅持久經考驗的模式:標題、一些額外信息、號召性用語以及產品圖片在頁面上占主導地位。

不要通用

雖然堅持既定模式是個好主意,但這並不意味著登錄頁面必須是通用的。 設計師應該考慮如何在登陸頁面中加入額外的細節和設計元素來改善用戶體驗,抓住用戶的注意力,並加強產品的價值。

這可能包括視頻內容、動畫、幻燈片或許多其他設計元素。 適用於一種產品或服務的東西不一定適用於另一種產品或服務。 設計師應該在其著陸頁上隨意嘗試非傳統的內容,但要準備好針對更傳統的方法進行 A/B 測試,以確保它們不會將訪問者趕走。

偉大的登陸頁面設計是獨一無二的,沒有非常規
Landbot 的登錄頁面使用與他們的產品完美契合的動畫聊天滾動。 它使頁面保持有趣和獨特,而不會增加混亂。

結論

登陸頁面是任何在線營銷活動的重要組成部分。 他們的獨特目的有助於在不分散訪問者註意力的情況下推動轉化。

遵循著陸頁最佳實踐的設計師可以通過創建轉化率高於競爭對手的頁面,為他們所服務的品牌創造更多價值。 保持登陸頁面簡單,專注於 CTA,保持表單簡短,以及其他已經提到的指導方針,將使登陸頁面更有效地執行,同時也改善用戶體驗。

• • •

進一步閱讀 Toptal 設計博客:

  • 如何設計有效的登陸頁面
  • 使用這些著陸頁靈感轉換訪問者
  • 美學和感知——如何處理用戶體驗圖像
  • 設計原則及其重要性
  • 設計師的有效溝通策略