在定價頁面中使用熱圖

讓我們從非 A/B 測試開始“本月 A/B 測試”。 在你跑到互聯網的另一個角落之前，讓我解釋一下為什麼我們將從熱圖開始。

沒有在您的網站上定期使用 A/B 測試的主要原因之一是不知道從哪裡開始：我嘗試了哪些更改、在哪里以及為什麼？ 這些是你會問自己的關鍵問題。 如果您不知道如何回答它們，您將放棄測試。

為了克服這個問題，我建議您做的第一件事是從您的網站中選擇一個頁面開始。 此頁面必須與您的目標相關。 這意味著它是您收到許多訪問的頁面，或者它是您的活動或業務的關鍵頁面。

在今天的示例中，我們選擇從高級插件的定價頁面開始：Nelio A/B 測試和 Nelio Content。 這些頁面是我們業務的關鍵，因為我們公司的收入來自它們兩者。

既然我們已經選擇了頁面，要知道要進行哪些更改以及為什麼要進行更改，最好從運行熱圖測試開始。 我們這樣做是因為熱圖為我們提供了有關訪問者如何與我們的網站互動的真實數據。

當我們真正看到我們的頁面在真實用戶數據下的表現時，就更容易獲得未來運行測試的想法。 這就是為什麼熱圖總是一個好的開始。

如何在 WordPress 中創建熱圖測試

為 WordPress 頁面創建熱圖測試非常簡單。 您只需選擇所選頁面並開始測試。

在 Nelio A/B 測試中，通過從單擊按鈕添加新測試時打開的對話框中選擇此類測試來創建新的熱圖測試。

在測試編輯屏幕上，您可以為測試設置一個名稱，以便以後輕鬆識別。 您還可以添加對要在測試中嘗試的內容的描述。 最後但並非最不重要的一點是，您需要選擇要在其上進行熱圖測試的頁面：

一切準備就緒後（如上一個屏幕截圖所示，這很容易），單擊窗口右上角的按鈕開始測試。 您只需等待訪問者來，以便 Nelio A/B 測試從他們在頁面上的行為中收集數據並處理結果。

熱圖結果

在我們的案例中，我們在網站上同時運行了兩個熱圖測試：一個用於 Nelio A/B 測試的定價頁面，另一個用於 Nelio Content 的定價頁面。

每個測試已經收集了大約 20 天的數據，並分析了大約 500 名訪問者的行為。 這足以得出某些結論並考慮我們可以在這些頁面中運行的未來 A/B 測試。

請記住，這些頁面並不是我們網站上訪問量更多的頁面。 它們是轉換漏斗的最後階段，因此在此過程中會丟失流量。 但請記住，我們之所以選擇它們，是因為它們對我們的業務很重要。 在未來的測試中，我們將研究其他流量更大的頁面，我們將解釋其他原因。

Nelio A/B 測試的定價頁面

讓我們從 Nelio A/B 測試的定價頁面獲得的結果開始。 熱圖測試從三個不同的角度向我們展示了數據：熱圖、滾動圖和五彩紙屑。 在這裡嵌入 3 個完整圖像太多了，因為它們的像素高度非常大。 為了避免強迫你一直上下滾動，我只是在這裡鏈接它們：

• Nelio A/B 測試定價頁面的熱圖。
• Nelio A/B 測試定價頁面的滾動圖。
• Nelio A/B 測試定價頁面上的五彩紙屑。

現在讓我們看一下之前結果中最相關的片段：

正如您在上圖中所見，熱圖是一種圖形表示，它以聚合的方式顯示用戶與頁面元素的交互，並且具有色階，其中暖色表示高度相關。

在 Nelio A/B Testing 的定價頁面中，頁面的第一折是熱點較多的地方。 如果我們詳細分析，基本計劃和專業計劃領域的要素比企業的要素更具相關性。 鑑於此，也許我們可以重新排序定價計劃以首先顯示企業計劃。 請注意，我們習慣於從左到右閱讀，因此首先在定價頁面上顯示最昂貴的計劃可能是在 A/B 測試中嘗試的一個很好的改變。

接收大量用戶交互的另一個元素是向下滾動以查看計劃詳細比較的鏈接。 這很好，因為這意味著有興趣查看有關計劃的更多細節。

不好的是在不可點擊的元素中有很多交互。 您可以在五彩紙屑中看到它，這是一種圖形表示，您可以在其中看到訪問者的所有點擊：

在上一個屏幕截圖中可以看到的整個計劃塊中，只有每個計劃中出現的按鈕是可以單擊的元素。 請記住，單擊其他所有內容均無效。 我們當前的界面正在產生混亂。

訪問者正在點擊每個計劃的特徵的文本和圖標，這些是不可點擊的元素。 從這裡我們可以了解到他們試圖找到更多關於它的信息，但是我們在頁面的下方有這些信息。

我們可以在這裡嘗試的另一個 A/B 測試是更改計劃的每個功能，以便它們具有浮動元素，當鼠標懸停在文本上時會出現並為訪問者提供更多上下文信息。 我們可以在上下文幫助下針對當前版本測試這個版本，看看哪一個最終會產生更多購買。

五彩紙屑還為我們提供了訪問者的匯總信息，這些信息是從他們的點擊中提取的。 Nelio A/B 測試包括幾種類型的過濾器，以更好地了解訪問者的不同特徵，您可以在此處看到：

從這些過濾器中，我們提取了以下數據：

• 到目前為止，Chrome 和 Firefox 是我們的訪問者最常用的瀏覽器。 因此，我們必須讓網頁看起來不錯，至少在這些瀏覽器中是這樣。
• 此頁面的一半訪問者來自美國。 這與我們的銷售數據相符。
• 訪客在一周的前 3 天訪問我們的次數更多。 例如，了解這些信息可能有助於在其他日子在網絡的其他區域提供優惠，從而在流量低的日子吸引流量。
• 幾乎 100% 的訪問者通過台式計算機或筆記本電腦訪問該頁面。 我們幾乎沒有來自移動設備的訪問。 這是以後要研究的東西。
• Windows 10 和 Mac OS X 是人們訪問我們的操作系統。 它與之前的數據相匹配，因為我們沒有來自移動設備操作系統的訪問者。
• 我們在工作日有更多的訪客（測試是在芝加哥時區進行的）。 這是有道理的，因為我們的主要客戶來自美國。
• 訪問是在最小寬度大於 1500 像素的屏幕上進行的。 另一個證實訪問來自台式電腦或筆記本電腦的事實。

如果您檢查熱圖和五彩紙屑的完整版本，您會發現 Nelio A/B 測試定價頁面的所有其他部分都不太相關。 考慮到這一點，讓我們檢查以下滾動圖：

如果您檢查完整的滾動圖，您會發現很少有訪問者超出頁面的第一折。 這讓我認為，也許我們應該使用更短版本的 Nelio A/B 測試定價頁面，將相關信息濃縮在首屏。

頁面第一折之後的部分有很多文字，訪問者沒有閱讀它。 不到 20% 的人會看到並與比較計劃的詳細表格進行互動，您可以在網絡底部找到該表格。 所有這些數據都由滾動圖提供：

使用包含更多視覺部分的較短版本的頁面進行測試可以幫助說服潛在買家並使定價頁面更加有效和高效。 這是嘗試進行 A/B 測試的可能更改的另一個想法。

我們已經有了一些可以在未來進行測試的想法，因此很明顯，熱圖為我們提供的信息對於獲得我們可以在 A/B 測試中應用的想法非常有用。

Nelio 內容定價頁面

與 Nelio A/B 測試的定價頁面一樣，這裡有完整的圖像以及 Nelio Content 定價頁面的熱圖結果：

• Nelio Content 定價頁面的熱圖。
• Nelio Content 定價頁面的滾動圖。
• Nelio Content 定價頁面的五彩紙屑。

Nelio Content 的定價頁面比 Nelio A/B 測試的定價頁面更簡單、更短。 除其他原因外，此頁面只有一個計劃，而對於 Nelio A/B 測試，我們有 3 個不同的計劃。

如果您查看完整的熱圖並將其與 Nelio A/B 測試的熱圖進行比較，您會發現在這種情況下，除了第一個折疊部分之外，頁面的其他部分還有更多熱點。

在上圖中，我們看到比較計劃表中的操作按鈕具有特殊的相關性。 這很好，因為我們有他們在那裡。 但是，請注意，表中的Starter計劃只不過是 Nelio Content 的免費版本，具有特殊的相關性。

這裡的問題是我們是否應該在我們的定價頁面中有一個指向 WordPress 插件目錄的鏈接，以便訪問者可以下載 Nelio Content 的免費版本。 現在我們有了它，但熱圖顯示可能有幾個訪問者正在離開我們的定價頁面去購買免費版本。

這個話題是有爭議的，也是我們會議中長時間討論的來源。 一方面，保留鏈接並不好，因為您在定價頁面內失去了可能的直接銷售。 但即使訪問者離開我們的網站，免費試用 Nelio Content 也可能是件好事。 用戶可能會喜歡該工具，並在測試後最終購買它。 在 Nelio，我們已經多次討論過這個問題，我想今天不會是我們最後一次這樣做？ 就目前而言，鏈接仍然存在。 你怎麼看待這件事？

我們還看到該視頻引起了很多關注。 我們製作了一個非常酷的視頻，也許我們可以在頁面的前面展示它。 我們可以通過 A/B 測試來嘗試這種更改，因為第一次折疊之後的部分也沒有那麼大的相關性。

另一方面，我們在滾動圖上看到，當我們向下滾動頁面時，訪問者的流失不那麼突然。 這證實瞭如果我們希望訪問者看到盡可能多的內容，那麼較短的定價頁面可能會更好。

此外，結合之前的熱圖我們看到，第一折之後的兩個部分，討論具體特徵和表達人們的意見，可能需要重新設計。 它們是文本過多且不會引起太多關注的部分。 我們可以嘗試一個更直觀、更直接的替代版本。

關於點擊五彩紙屑的圖形，有趣的是看到在頁面第一折內的不可點擊區域中進行的不正確點擊的數量：

儘管這些點擊中的大多數都無法避免（是的，假設人們在滾動時點擊側面區域，尤其是右側區域），但還有其他一些是訪問者感到困惑的結果。 這就是您在上一個屏幕截圖中看到的每月價格數字的點擊情況。 該價格不是可點擊的項目； 您必須改為單擊橙色按鈕。 但是，下面顯示的年度價格數字是一個正確的鏈接。

我們必須尋找另一種不那麼令人困惑的方式來顯示兩種價格，並且兩種情況的交互作用相同。 這是我們可以在此頁面上運行的另一個 A/B 測試。

現在呢？

我們一開始並不知道我們可以在我們的網站上運行哪些 A/B 測試。 我們已經看到熱圖可以幫助我們輕鬆獲得想法，以便在我們的頁面上進行 A/B 測試。 一旦我們有了這些測試想法，我們要做的就是根據我們的需要對它們進行優先級排序。

請記住，頁面第一折中的更改更快地測試，因為更多的人會看到它們，因此您將更快地獲得結果。 您可以開始優先考慮嘗試更改頁面該部分的 A/B 測試。

這裡最重要的教訓是：一旦開始測試，就不要停止。 在測試過程的每次迭代之後，您都會從您的網站和訪問者那裡學到一些新東西。

下個月見，我們將在其中分析真實結果的另一種類型的測試。 記得給我留言，告訴我你對這篇文章和我在這裡解釋的一切的看法。 您會在您網站的哪個頁面上運行熱圖？

史蒂夫·哈拉馬 (Steve Halama) 在 Unsplash 上的精選圖片。