在使用著陸頁熱圖之前你需要知道的一切

Cormac Kinney 的軟件最初是作為一種幫助華爾街交易員玩弄股票市場的工具。 它將金融數據變成“紅色和藍色方塊的發光馬賽克”，稱為“熱圖”，用顏色向交易者發出何時買入或賣出的信號。

二十多年後，受益於熱圖及其提供的見解的不僅僅是交易者。 營銷人員（以及現在的 Instapage 客戶）也在使用它們。 通過這樣做，他們可以準確了解潛在客戶在其網頁上的行為方式。

什麼是熱圖？

熱圖是一種數據可視化，它展示了訪問者如何使用顏色編碼系統與網頁進行交互。 例如，看看可能是有史以來最著名的熱圖（至少是數字營銷人員），它顯示人們在網絡上以 F 形模式閱讀：

地圖的紅色和黃色部分錶示觀看次數較多的區域。 藍色是遊客最少看到的地方。

這一特定數據是 Nielsen Norman Group 從 2006 年眼球追踪研究中收集的，該研究監測訪問者在遇到網頁上的文本時的注視情況。 但是像這樣的測試並不是您可能會在網絡上看到的那些。

眼球追踪熱圖與鼠標追踪熱圖

來自眼球追踪實驗的熱圖是最準確的，但它們也是最昂貴和最不方便的。 像上面的 Nielsen Norman 那樣的研究通常在受控環境（實驗室、內部）中進行，研究團隊或昂貴的硬件會在訪問者與您的網頁交互時觀察他們的眼睛。 這些運行的成本可能高達數千美元。

因為對於大多數企業來說聘請整個研究人員團隊是不可能的，所以許多企業轉而使用鼠標跟踪軟件。 與監控實際的眼球運動相反，鼠標跟踪軟件監控訪客的鼠標運動，如點擊、滾動和懸停。

由於這種方法不需要正式的實驗室環境或企業的大量預算，因此更容易獲得。 今天，您可以安裝鼠標跟踪軟件並立即開始監控訪問者的行為——並且一些研究表明，幾乎與正式的眼動追踪研究一樣準確。

左邊的熱圖是從一項正式的眼動追踪研究中產生的，而右邊的熱圖是通過鼠標追踪產生的。 根據 ClickTale 的說法，同時使用這兩種技術的實驗表明，它們的結果之間存在 84-88% 的相關性。

基本上，在某些情況下，人們移動鼠標的位置和他們看起來的位置往往重合（稍後會詳細介紹）。

可用的不同類型的鼠標跟踪熱圖

當人們提到“熱圖”時，他們指的是顯示用戶行為的可視化。 但是，用戶行為並不總是相同的。 一些熱圖顯示人們如何滾動，而其他類型可以識別人們用鼠標懸停在屏幕上的位置。 鼠標跟踪熱圖的主要類型如下：

點擊熱圖

點擊地圖顯示訪問者在您的網頁上點擊的位置。 它們對於發現流行鏈接或訪問者可能認為是鏈接但實際上不是的區域特別有價值。

以這張特定的地圖為例，它發現頁面上點擊次數最多的元素是產品的照片：

Brothers Leather Supply Company 的創始人 Adam Kail 解釋了這張地圖如何在產品頁面設計方面改變了企業的重點：

熱圖增強了我們對所有產品頁面上精美圖像的需求。 我們過去常常沉迷於正確的副本——但現在我們花時間讓圖像恰到好處。 每張圖片都顯示了我們包的不同用途或角度......未來的客戶想知道當有人穿著它時，當它裝滿了手提電腦時，手提包會是什麼樣子。

歸根結底，這就是熱圖分析的目標——發現可用於優化用戶體驗的真實訪客行為。 為了說明這一點，讓我們看看另一個來自手機點擊後登陸頁面的點擊地圖：

以紅色輪廓顯示，您會注意到點擊率最高的手機遠低於折疊屏，位於幾個不太受歡迎的型號下方。 那麼，如何使用這張地圖來改善用戶體驗呢？

將折疊上方較不受歡迎的模型之一替換為紅色輪廓的模型。 這樣，人們就不必去尋找它。

也許與點擊後登陸頁面設計最相關的熱圖來自 VWO 對客戶 Pair（現在是 Couple）的案例研究。

這是該應用程序的原始主頁：

這是該主頁的點擊熱圖的樣子：

你注意到 Pair 的增長營銷人員 Lim Cheng Soon 在這張熱圖中做了什麼嗎？ 他說：

結果，我發現太多人點擊頂部的導航欄而不是點擊轉換按鈕（鏈接到 AppStore 和 Google Play）。 所以我提出了一個理論，認為在轉換按鈕周圍有太多“分心”並不是一個好主意。

因此，我根據消除轉換按鈕周圍“干擾”的理論進行了幾次 A/B 測試。

結果？

• 隱藏按鈕上方的“免費下載”文本可將轉化率提高 10%。
• 隱藏導航菜單提高了 12% 的轉化率

Soon 的“分心太多”的理論根本不是捏造的。 正如其他幾項測試所表明的那樣，導航鏈接會大大降低轉化率。 在您的點擊後登錄頁面上，最好將它們從您的設計中排除。

像上面這樣的點擊地圖特別有價值，因為點擊信號意圖——動作更有可能是有目的的，而不是隨機的。 當有人點擊時，他們這樣做是因為他們想了解更多關於特定元素或其對應的內容（CTA 按鈕、“關於我們”鏈接等）。

滾動熱圖

“你不會讀完這篇文章”是 Slate 在 2013 年發表的一篇文章的標題。在其中，作者 Farhad Manjoo 透露了 Chartbeat 和在線雜誌聯合熱圖分析的結果，該結果表明很少有人閱讀全部通過文章的方式。

儘管令人印象深刻的 86.2% 參與度發生在首屏下方，但只有 25% 的人滾動超過 1600 像素（大多數 Slate 文章的長度約為 2,000 像素）。 像這樣的洞察力是滾動地圖有助於發現的東西——尤其是在較長的頁面上。

在點擊後登陸頁面術語中，這很可能是一個銷售頁面。 這些精心起草的有說服力的營銷材料可以增長到巨大的比例。 例如，這一篇超過 5,000 字（點擊此處查看整頁）：

像這樣的頁面上的滾動圖可以告訴它的創建者人們在閱讀過程中的哪些方面。 Peep Laja 說，有了這些數據，創作者可以假設下降的原因——乏味的副本、煩人的廣告，甚至背景顏色的變化：

如果你有強烈的線條或顏色變化（例如，白色背景變成橙色），這些被稱為“邏輯結束”——人們通常認為後面的內容不再與之前的內容相關聯。

從那裡，優化器可以測試讓人們閱讀整個頁面的潛在方法 - Nielsen Norman Group 的一項實驗表明這當然是可能的：

這是罕見的，但可能。

請記住，上面的地圖是眼球運動，而不僅僅是滾動深度。 這意味著它比您在滾動地圖上看到的更詳細，滾動地圖只會顯示您的訪問者在頁面上前進了多遠。 以下是 RJMetrics 網站上的測試示例：

此網頁上查看次​​數最多的區域（按顏色）是：

• 白色的
• 紅色的
• 黃色
• 綠
• 藍色

我們知道您在想什麼：頁面頂部的瀏覽量怎麼可能低於中間的瀏覽量？

好吧，來自 Chartbeat 的研究表明，許多人傾向於在頁面加載之前就開始滾動，這意味著他們會錯過最頂部。

他們的研究還表明，許多頁面的參與度在折疊以下達到峰值：

這可以解釋為什麼折疊附近的區域是紅色的，而其上方的大部分區域是黃色的。

從這張地圖中，RJMetrics 的前前端開發人員 Stephanie Liu 提出了以下假設：

我的假設是，與原始定價頁面相比，將按鈕移動到白色熱滾動地圖區域會導致設計具有更高的轉化率。 更多的人會關注按鈕，因為他們的眼睛會在那裡停留更長時間。

原始頁面如下所示：

她創造的變體是這樣的：

結果是轉化率提高了 310%。

此滾動地圖測試的兩個重要內容是：

1. 使用滾動地圖，您將不知道人們為什麼滾動得這麼遠。 您和您的團隊必須進行一些假設檢驗才能弄清楚。

2. 有時您不一定需要知道為什麼人們會在他們所在的地方下車。 目標並不總是讓人們更深入地滾動。 在 Stephanie 的案例中，只需將 CTA 按鈕移動到更受關注的區域即可為 RJMetrics 帶來巨大的轉化提升。

懸停熱圖（又名運動熱圖）

您的眼睛會在鼠標光標所在的位置移動——這是建立在懸停熱圖（也稱為“移動”熱圖）基礎上的一般假設。

這些地圖的準確性取決於眼球運動和鼠標運動之間的相關性，早先引用的研究表明，這種相關性約為 84-88%。 然而，其他消息來源並不相信它那麼高。

2010 年，Google 的 Anne Aula 博士發布了她關於懸停熱圖準確性的發現：

• 6% 的人表現出鼠標運動和眼球運動之間的垂直相關性。
• 19% 的人表現出鼠標運動和眼球運動之間的水平相關性。
• 10% 的人將鼠標懸停在特定頁面元素上，同時掃視其周圍區域。

谷歌和卡內基梅隆大學的另一項實驗發現，鼠標運動和眼球運動之間有 64% 的相關性。

毋庸置疑，對運動熱圖的研究無處不在。 但是現實生活中的應用呢？

嗯，這也到處都是。

這是 North Face 用於優化其結帳頁面的懸停熱圖：

在左側，版本 A 似乎顯示右側邊欄上的橫幅比下方的 CTA 按鈕（白色圓圈）更受關注。 版本 B 考慮到這一點並使用按鈕切換橫幅（再次用白色圓圈）。

結果是轉化率提高了 62%。

這是另一個似乎顯示的懸停地圖……好吧……親眼看看：

這張地圖似乎沒有明確的結論。 有很多懸停。 到處。

總的來說，從懸停熱圖研究及其實際應用中最重要的一點是：

使用懸停貼圖為您的設計提供信息，但用 EyeQuant 的 Rory Gallagher 的話來說，“不要過度概括。”

如果您的地圖看起來像 North Face 製作的地圖，那麼您可能有一個用於 A/B 測試的有價值的假設，如下所示：

“我們從懸停熱圖中註意到，結帳頁面 CTA 按鈕上方的區域似乎吸引了更多訪問者的注意力。 因此，我們相信通過切換上面帶有促銷橫幅的按鈕，我們可以提高結賬率。”

但是，如果您從第二個熱圖中得出一個測試假設，那麼您可能犯了確認偏差——從測試中尋找特定結果只是因為它證實了您對某事的信念。 一個錯誤的延伸可能看起來像這樣：

“我們從懸停熱圖中註意到，‘如何做’這個詞似乎比其他任何東西都更能吸引註意力。 因此，我們認為未來所有博客文章的標題都應以“如何做”開頭，以吸引讀者。”

“如何”是開始標題的好方法，但該測試並未表明這一點。 以懷疑的心態處理熱圖結果，只有在有明確理由時才進行測試。

負責任地使用熱圖

熱圖對於揭示人們如何使用您的網頁很有價值，但它們不應該是您用來這樣做的唯一工具。 僅此而已，他們描繪了您用戶的不完整圖片，並依賴他們作為潛在客戶行為的唯一指標可能會誤導您。 Optimizely 的團隊提供了一個示例：

查看表單的熱圖時，它可能會顯示用戶正在單擊第一個字段，而對後續字段的單擊較少。

這可能表明用戶在填寫第一個字段後退出該過程。 然而，熱圖沒有顯示的是，用戶是否使用鍵盤而不是鼠標來瀏覽表單字段。

出於這樣的原因，將您的熱圖與來自其他工具（例如 Google Analytics 或 Instapage Analytics）的洞察力相結合，可以更全面地了解您的潛在客戶在您的點擊後登錄頁面上的行為。

但是，這種“更完整的形象”有什麼價值嗎？ 如果你沒有收集足夠的用戶數據，就不會，Peep Laja 說：

在您相信任何結果之前，您需要每頁/屏幕有足夠的樣本大小。 粗略的估計是每個設計屏幕有 2000-3000 次瀏覽量。 如果熱圖基於 34 個用戶，請不要相信其中的任何一個。

歸根結底，重要的是要記住熱圖不是數據。 它們只是以易於理解的方式組織數據。 它們顯示點擊、滾動和懸停。 這些鼠標移動意味著什麼由您決定。

始終將您的所有廣告連接到個性化的點擊後登錄頁面，以降低您的每次客戶獲取成本。 立即註冊 Instapage Enterprise 演示，開始創建您的專用點擊後頁面。