著陸頁背後：促進轉化的用戶體驗原則

昨天的營銷活動差點把我的鼠標弄壞了。

如何？

由於讓我感到沮喪，我差點把它扔到房間裡。

在我終於冷靜下來之後，我意識到從我的憤怒中可以學到寶貴的營銷經驗。 這就是它......

可用性應該是您點擊後登錄頁面的重中之重

事情是這樣的：我需要最後一刻的酒店，所以我在谷歌的搜索欄中輸入了“波士頓今晚酒店”。

最終，在點擊付費搜索廣告後，我從 HotelTonight 到達了特定於位置的點擊後登錄頁面。 它看起來像這樣：

在它上面，我的眼睛立即被視覺層次結構中最引人注目的元素所吸引：頁面上最大的文字，上面寫著“波士頓的最後一刻酒店優惠”。

我瞥了一眼下面，看到了一些價格。 然後，我向下滾動以查找更多列表。 這是我看到的：

有酒店，但沒有定價或可用性指標。 所以，我認為我必須選擇一個才能獲得更多詳細信息。 不需要任何奢侈的東西，我點擊了“中城酒店”列表的標題以了解更多信息。

……但什麼也沒發生。

“讓我們再試一次，”我想，然後點擊它下面的副標題，上面寫著“樸實無華的後灣基地”。

…依然沒有。

“如果我點擊‘基本’標籤會怎樣？”

沒有。

“也許這個列表被破壞了。 如果我點擊 Wyndham Boston Beacon Hill 會怎樣？”

再次，什麼都沒有。

那時我很沮喪，瘋狂地點擊整個頁面。 我的下一個想法，我脫口而出：“我可以看看一個該死的清單嗎？！”

為什麼這個頁面這麼難用？

用戶體驗設計的重要性

從美學上講，此頁面沒有任何明顯錯誤。 它看起來足夠可信，可以讓我在瀏覽列表下方。

但是，網頁設計不僅僅是讓事物看起來漂亮。 頁面的“可用性”從用戶的角度描述了它在執行其功能方面的有效性。 根據《不要讓我思考》一書的作者史蒂夫·克魯格 (Steve Krug) 的說法：

它 [可用性] 實際上只是意味著確保某件事情運行良好：能力和經驗一般的人可以將這件事情——無論是網站、烤麵包機還是旋轉門——用於其預期目的，而不會感到絕望。

不幸的是，許多在線（即 HotelTonight 後點擊登錄頁面）和離線設計都沒有針對用戶進行優化。 如果你曾經拉過一扇“推”門，你就會經歷過糟糕的用戶體驗設計。

與其認為自己是個白痴，不如想想為什麼設計師選擇在“推”門上安裝“拉”把手。

不是你； 這是設計。

存在許多其他可用性差的例子。 我們可以有把握地說，如果創建的用戶界面沒有考慮到其受眾，則可能會導致糟糕的用戶體驗，而不是逐一介紹。

在網上，這種糟糕的體驗可能會給您的網站帶來災難性的後果。 來自網絡可用性之父 Jakob Nielsen：

如果網站難以使用，人們就會離開。 如果主頁沒有明確說明公司提供什麼以及用戶可以在網站上做什麼，人們就會離開。 如果用戶在網站上迷路了，他們就會離開。 如果網站的信息難以閱讀或無法回答用戶的關鍵問題，他們就會離開。 請注意這裡的模式？ 沒有用戶閱讀網站手冊或花費大量時間試圖找出界面這樣的事情。 還有很多其他網站可用； 當用戶遇到困難時，離開是第一道防線。

在設計過程中，點擊後登錄頁面創建者經常忘記他們的目標不是展示他們的技能。 相反，它是為了幫助另一個人實現一個目標。

從廣義上講，該目標是評估並可能在您的點擊後登錄頁面上聲明報價。 具體來說，在開始設計之前，您必須問自己以下問題：

• 我對這個點擊後登錄頁面（驅動註冊、下載、購買等）的目標是什麼？
• 一旦我的觀眾登陸它，他們的具體目標是什麼？
• 他們需要什麼來盡可能輕鬆地評估我的報價？
• 我如何使他們能夠輕鬆領取我的報價？

要回答這些問題，您需要三件事：對目標受眾的全面了解、對點擊後登錄頁面可用性最佳實踐的了解，以及深入了解是什麼讓點擊後登錄頁面具有說服力。

第一個，你可以在這裡學習如何開發； 第二個，你會在這篇博文中找到； 第三，您可以在新的 Instapage 資源中發現：構建有說服力的點擊後登錄頁面的終極指南：

點擊後登陸頁面可用性原則

每項業務都是獨一無二的，每項優惠都不同，但提供良好用戶體驗的基礎是相同的。 在設計點擊後登錄頁面以獲得最佳用戶體驗時，請牢記這 5 個 C：

一致性

在構建您的點擊後登錄頁面時，為了在您的競爭中脫穎而出，很容易偏離設計慣例。 這就是為什麼你不應該……

不要試圖重新發明網絡

在互聯網的初期，看到設計師嘗試古怪的佈局和元素並不少見。 看看這些寶石：

當時，還不清楚將如何使用網絡。 因此，側面的“常見問題解答”按鈕和空間背景看起來像是創意。

但是，今天，您將不會再看到這樣的網頁。 那是因為它們違反了我們了解到的設計慣例會降低用戶體驗。 空間背景令人分心，橫向文本不必要地難以閱讀。

這就是為什麼您應該專注於通過清晰的 USP 脫穎而出，而不是試圖重塑網絡的外觀和感覺。 你的按鈕應該看起來像按鈕，而不是星星或停止標誌。 您的徽標應位於頁面的左上角，而不是右下角。

一致性是可用性的最大貢獻者之一。 為了幫助訪問者識別和理解您頁面上的元素，您應該使用他們熟悉的元素——也就是他們在網絡上的其他任何地方都能看到的元素。

讓我們回到我在 HotelTonight 的點擊後登錄頁面上令人沮喪的經歷：我認為我可以通過單擊獲得有關特定列表的更多信息，因為這幾乎是每個酒店點擊後登錄頁面的工作方式。 您單擊一個列表以了解有關它的更多信息。

但是，這不是那樣工作的。 它沒有滿足我對酒店點擊後登錄頁面如何運作的期望，結果是令人沮喪的用戶體驗。

這裡的教訓？

將元素放置在訪問者希望看到的地方。 按照潛在客戶期望的方式設計它們。 別可愛了始終如一。

消息匹配絕對必須存在

點擊後登陸頁面設計師往往忘記的另一件事是：點擊後登陸頁面不是訪問者對您品牌的第一印象——推薦人才是。 這就是為什麼您的點擊後著陸頁需要兌現您的廣告、電子郵件或付費搜索結果做出的承諾。 根據 Smashing Magazine 的聯合創始人 Vitaly Friedman 的說法，如果不這樣做會發生以下情況：

大多數用戶搜索有趣（或有用）和可點擊的東西； 一旦找到一些有希望的候選人，用戶就會點擊。 如果新頁面不符合用戶的期望，則單擊後退按鈕並繼續搜索過程。

為了實現完美的消息匹配，點擊後登陸頁面上的文字、徽標甚至顏色都需要與引薦來源一致。 無視這種設計最佳實踐會讓您的頁面立即被放棄。

明晰

清晰度和一致性是相關的。 當人們認識到一個設計元素時，他們就會知道它是如何運作的。 當那個設計元素也很清楚時，它的目的就沒有問題了。 以下是如何使您的頁面上的所有內容易於訪問者理解和使用的方法：

應為理解而寫副本

文字很難——對寫它們的人來說，對那些閱讀它們的人來說也是如此。 文案撰稿人面臨的挑戰是，當他已經了解報價時，他要試圖清楚地解釋報價。 當讀者目前對報價一無所知時，他們也處於同樣困難的境地，試圖理解報價。 撰寫綜合文案的一些技巧：

• 除非您是為具有高水平技術知識的讀者寫作，否則請刪除所有行話並假設您的潛在客戶閱讀的水平為 6 年級水平。
• 強調您的報價的好處。 “doodads”和“thingamawhats”等產品特徵沒有說服力。 相反，讓人們知道這些功能使他們能夠做什麼。
• 替換有歧義的詞。 “質量”這個詞對某些人來說意味著“高質量”。 對其他人來說，這意味著“令人滿意”。 使用更好的描述符來傳達您的報價的價值。

如果他們不明白為什麼他們應該轉換，那麼您的潛在客戶就不可能理解。

CTA 按鈕應該讓訪問者知道點擊會做什麼

如果您創建了一個可識別的按鈕，那麼您已經贏了一半。 另一半是讓訪問者知道他們點擊你的按鈕後會發生什麼。 為此，請考慮您的報價。

如果它不需要訪問者付款，請通過問自己以下問題來選擇一個引人注目的 CTA：“聲稱它可以讓訪問者做什麼或成為什麼？”

對於有關點擊後登錄頁面設計的電子書，請考慮使用“發送我的電子書”作為您的號召性用語，或者甚至更具體的內容，例如“讓我成為設計專家”。 這是艾米波特菲爾德的一個例子：

另一方面，如果確實需要信用卡號，最好放棄像上面那樣的描述性標題，而是使用諸如“購買”或“捐贈”之類的基本標題。 您最不想要的就是一大群揮舞乾草叉的客戶，他們不知道他們的卡會在點擊“讓我成為設計專家”按鈕時被收取費用。

表單標籤和反饋應該是描述性的

要填寫您的表格，訪問者需要確切地知道您想從他們那裡得到什麼。 雖然這些提示似乎是常識，但仍有很多形式不遵循它們。

• 不要使用消失的佔位符文本作為標籤。 它已被證明會混淆前景並挑戰他們的記憶。 相反，標籤應位於它們對應的字段上方。
• 標籤應放置在最靠近它們對應的表單字段的位置。 模糊的白色間距，或與另一個字段的等距間距，可以讓潛在客戶質疑他們應該提交什麼信息。
• 條目應該是 8 個帶有特殊字符的字母嗎？ 表格可以不處理星號嗎？ 如果一個字段需要特定的輸入，標籤應該讓訪問者知道。
• 錯誤消息應該引人注目並具有描述性。 不要只使用紅色，而是使用許多信號來指示輸入問題，例如粗體文本和錯誤字段周圍的輪廓。 確保他們知道自己犯了什麼錯誤，以便他們第二次改正。
• 明確區分可選字段和必填字段。

您的報價應易於理解

為什麼人們用信用卡消費更多？ 因為花錢感覺更真實。

刷卡，不換手； 這筆費用直到稍後才會出現在您的銀行對帳單上； 如果您不檢查您的帳戶餘額，就好像購買從未發生過一樣。

考慮在 ING 員工的金融教育課程期間進行的一項研究實驗。 兩組參與者被問到：

1. 如果他們參加 401k 計劃。
2. 他們願意定期儲蓄多少。

第一組只提出了這些問題。 然而，第二組得到了一個額外的指示：想像一下如果你儲蓄更多，你生活中會發生的所有積極的事情。

結果是第 2 組的入學人數增加了 20%，人們的儲蓄金額增加了 4%。

這對您的點擊後登錄頁面報價意味著什麼？

如果你想讓人們理解它的價值，你必須以一種清楚地解釋它的好處的方式來呈現它。 很多時候，這意味著使用視覺輔助工具而不是文本。

對於某些優惠，信息圖表效果最好。 對於其他人，解說視頻或英雄鏡頭會做得更好。

您選擇哪個取決於您的受眾和報價。 展示而不是講述，並進行測試，直到您發現什麼最適合您的產品或服務。

簡潔

設計頁面時要記住的最重要的事情也可能是最常被忽視的事情：您正在為沒有時間和注意力的人設計。

沒有人會為了好玩而瀏覽您的點擊後登錄頁面。 他們點擊了電子郵件中的廣告或鏈接，他們想盡快了解您的報價是否值得購買。 這意味著……

應針對略讀優化文本

“去掉每頁上一半的單詞，然後去掉剩下的一半，”克魯格在他的書中說。 一旦您將點擊後登錄頁面副本的 50% 刪減，重要的是讓剩餘的內容可以略讀，因為人們不喜歡閱讀。

通過消除蓬鬆的副詞和常用短語來最大限度地減少冗長。 使用要點和副標題來分解令人生畏的文本塊。 添加粗體和斜體等效果，使重要的詞引人注目。

視覺層次應該傳達重要性

頁面內容的排列和操作方式與訪問者看到的內容和錯過的內容有很大關係。 在 HotelTonight 的點擊後登錄頁面上，我沒有看到號召性用語，但注意到標題是“波士頓的最後一刻酒店優惠”。

為什麼？

因為它的尺寸使其成為折疊上方最引人注目的元素。 當用戶的時間很少（總是如此）時，他們會使用位置、顏色、大小等視覺提示來確定頁面上的重要內容。 一些示例：

• 更大=更重要
• 更高的位置 = 更重要
• 更大的對比度 = 更重要

在此處了解有關使用視覺層次結構引導訪問者使用 CTA 按鈕的更多信息。

您的表格應盡可能簡短且易於填寫

在您的點擊後登錄頁面表單上捕獲各種潛在客戶信息是很誘人的——從姓名和電子郵件到角色和預算。 但是，如果您不是絕對需要所有這些信息，則不應該要求它。

最好的潛在客戶生成是由營銷團隊完成的，這些團隊知道他們對潛在客戶的資格所需的最低限度。 對於某些人來說，這將是三個領域的信息價值。 對於其他人，它將是十個。

無論您的表格有多長，您都應該讓填寫變得輕鬆。 允許訪問者通過一鍵社交自動填充提交他們的信息，並預填充通常使用相同輸入回答的字段（例如，如果您捕獲“國家/地區”並知道您的大部分潛在客戶來自美國，則預填充“美國”是一個很好的做法）。

此外，以單列佈局呈現字段以避免破壞訪問者的向下勢頭，除非它們是相關字段（如城市、州和郵政編碼）。 然後，將它們並排放置可以在概念上幫助訪問者，並縮短表單的感知長度。

應該消除乾擾

簡潔地展示您的報價的一部分是消除周圍所有可能降低您的轉化率的其他因素。 這意味著擺脫……

• 你的導航菜單
• 徽標中指向您主頁的鏈接
• 宣傳其他優惠的競爭性號召性用語
• 頁腳中的出站鏈接

當我們有太多選項無法點擊網頁時，一個被稱為希克定律的原則就會發揮作用。 Miles Soegaard 在 Interaction Design Foundation 博客上清楚地解釋了這一點：

希克定律是一個簡單的想法，它表示您向用戶提供的選擇越多，他們做出決定所需的時間就越長。

但研究人員希娜·艾揚格發現，選擇過多不僅可以增加做出決定所需的時間，還可以做更多的事情。

在一項具體的實驗中，她和同事 Mark Lepper 在一家雜貨店設置了一張展示桌，每罐果醬都可以給品嚐到的人減 1 美元。 第一天，他們為購物者提供了 24 種不同品種的價差。 第二天，他們只提供了6個。

在實驗結束時，他們發現大顯示器吸引了更多的注意力，但它產生的銷售額卻減少了 10 倍。

此外，當人們獲得更多選擇時，她發現他們更有可能：

• 延遲選擇，即使這違背了他們的自身利益
• 做出更糟糕的選擇
• 選擇讓他們不太滿意的事情，即使他們客觀上表現更好

在 TED 演講中，她特別指出：

事實上，我們越來越多地看到，如果你願意削減——擺脫那些無關緊要的、多餘的選擇——嗯，銷售額會增加； 成本降低； 選擇體驗有所改善。

觀看下面的整件事，了解其他涉及選擇優化的令人大開眼界的要點：

公信力

可信度在點擊後登錄頁面上的作用比在普通網頁上的作用更大。 點擊後登錄頁面專門設計用於讓訪問者分享個人信息，在某些情況下，還包括金錢。 這意味著你需要讓他們信任你。 就是這樣：

你的權威應該通過設計來傳達

在評估某人的權威時，心理學家羅伯特·西奧迪尼 (Robert Cialdini) 建議我們具體尋找三件事：

• 頭銜——博士、教授、博士、總裁、創始人、首席執行官、行業專家
• 衣服：制服、西裝、服裝（軍裝、昂貴的西裝、實驗室外套）
• 裝飾品：具有特定角色的配飾（例如警察徽章、宗教徽章、念珠、漂亮的汽車等）

然而，在網上，如果沒有經營企業的人的照片或知識，潛在客戶無法尋找這些東西。 相反，他們會評估您的設計。

如果您的頁面看起來像是 2002 年由一名從事網頁設計的實習生構建的，那麼您就不會給人以權威的印象。 例如，這看起來像飢餓遊戲的暢銷書作者 Suzanne Collins 的網站嗎？

不可能吧？

它可以，而且確實如此。

研究表明，在網上，94% 的第一印象主要與設計有關，只有 4% 與網站的實際內容有關。 確保您的網頁外觀和感覺符合用戶的期望。

信譽徽章應顯眼地展示

權威是看角色，但可信度證明你有能力。 如果可能，請盡可能多地展示以下內容：

• 您獲得的任何獎項
• 您曾出現在/上的著名出版物或節目
• 你有的經驗
• 與值得信賴的公司合作
• 來自滿意客戶的評論

這是 HomeBay 的一個很好的例子：

使用可信度指標是一種簡單的方法，可以證明您與您所說的一樣合格； 因為告訴別人你是最好的而不向他們展示不會讓他們相信任何事情。

方便

在一個用戶期望高度可訪問的頁面並且搜索流量的主要來源懲罰那些不是的世界中，您只有一個選擇：適應或失敗。

如果您的頁面為了方便而不遵循這些規則，其跳出率將會飆升。

您的頁面應該可以快速加載

來自谷歌的數據表明，如果加載時間超過三秒，53% 的人會放棄頁面。 從那裡，反彈的概率變得更高：

考慮到平均移動點擊後登陸頁面在 22 秒內加載，他們的數據是有問題的。 通過採取以下提示，避免失去大多數訪問者：

• 最小化頁面元素。 據谷歌稱，他們測試的頁面中有 70% 超過 1MB，36% 為 2MB，12% 超過 4MB。 通過快速 3G 連接，加載 1.49MB 大約需要 7 秒。 原因是頁面元素過多（圖片、標題、按鈕等）。
• 制定績效預算。 確定您希望頁面加載的速度——也就是“預算”。 根據該預算，確定您可以在頁面上包含的元素以滿足它的要求。
• 減少圖像。 網站圖標、徽標和產品圖像很容易占頁面大小的 ⅔。 高轉換率頁麵包含的圖像減少 38%。
• 少用 JavaScript。 JS 停止解析 HTML 代碼，這會減慢向訪問者顯示點擊後登錄頁面的速度。 AMP 和 AMP 等廣告程序為開發人員提供了一個無需 JavaScript 即可構建頁面的框架，使它們幾乎可以立即加載。

有關如何加快點擊後登錄頁面的更多提示，請閱讀這篇文章。

可訪問範圍應優先考慮

不用說，但我還是要提醒您：如果人們無法在他們選擇的設備上訪問您的頁面，他們就根本不會使用它。 他們不會捏來縮放，也不會笨手笨腳地使用您的號召性用語按鈕。

你的頁面應該是響應式設計的，這意味著它應該適應任何設備的屏幕。 它的所有元素都應該易於使用。

如果字段太小，用拇指填寫表格會很痛苦。 如果 CTA 按鈕的面積沒有您的指尖那麼大，那麼點擊它是很困難的。 桌面不再是互聯網的第一大流量來源，因此如果您尚未針對移動設備優化頁面，那麼現在是時候去做了。

每個頁面的用戶體驗都不同

無數的點擊後登陸頁面設計元素——從顏色和形狀到文字和佈局——影響人們體驗您的點擊後登陸頁面的方式。

確定它們對您的轉化率的影響的最佳方法是通過測試來查看人們在您的頁面上的具體行為。 請記住：訪問者今天使用您頁面的方式可能不是他們明天使用它的方式。 所以永遠不要停止測試。

要開始輕鬆測試和優化點擊後登錄頁面的用戶體驗，請立即註冊 Instapage Enterprise 演示。