關於您網站的最佳號召性用語按鈕顏色的真相

已發表: 2020-09-01

互聯網上關於網頁上效果最佳的顏色的說法很多。你會發現數以千計的關於它的文章。從用戶詢問哪種顏色更好並收到相互矛盾的答案（多麼令人驚訝，嗯？）的文章，到解釋 Google 對其鏈接使用多種藍色陰影進行的測試的著名文章。

所有這一切背後的現實是，沒有人可以保證特定顏色在不嘗試的情況下在網站上會更好或更差。如果他們不告訴你，他們就是在騙你。我敢肯定你不喜歡被騙。

我也沒有，所以當我從雅虎閱讀這篇文章時！小型企業，他們說按鈕上使用的最佳顏色是紅色、綠色、橙色或黃色，我首先想到的是我應該在我們自己的網站上嘗試一下。

如果您一直關注我每月撰寫的有關 A/B 測試的系列文章，那麼您肯定已經知道我們網站上最重要的頁面之一是 Nelio Content 的登錄頁面，以及它的定價頁面。在這兩個頁面上，我們擁有的號召性用語按鈕都是橙色的。

與我們網站上已用於號召性用語按鈕的橙色相比，紅色或綠色會更好嗎？這是我問自己的問題，我將在這裡用來自訪問者的真實數據來回答。不是主觀意見。真實數據。

我們走吧！

創建 CSS 的 A/B 測試

更改頁面上按鈕顏色的最簡單方法是添加一些額外的 CSS 規則來應用新顏色。你用你想要的顏色給按鈕添加了一個新的background-color規則，就是這樣。十分簡單。

使用 Nelio A/B 測試，您可以創建 CSS 樣式的 A/B 測試，以測試其他 CSS 規則的不同變體。您只需創建一個新測試並在測試類型選擇器中選擇 CSS 選項：

這將帶您進入測試編輯器，您要做的第一件事就是創建變體。請記住，在這種類型的測試中，第一個變體是以當前外觀顯示頁面的變體，沒有額外的 CSS。

然後，您為我們將要測試的每種其他顏色創建一個變體：一種用於綠色，一種用於紅色。第一個變體已經是橙色的，所以我們已經準備好了一切。

對於每個附加變體，您可以對其進行編輯以添加更改按鈕顏色的附加 CSS 規則。您需要的 CSS 規則取決於您在 WordPress 中使用的主題。在 Nelio A/B 測試提供的 CSS 編輯器中，您可以實時查看新的 CSS 規則如何改變您網站的外觀。這將幫助您檢查您是否做對了。

以下是我們正在設置的每個 A/B 測試變體的 CSS 樣式編輯器中操作按鈕的外觀。如前所述，首先您擁有帶有橙色按鈕的原始版本。其他兩個變體包括分別將按鈕變為綠色和紅色的 CSS：

一旦我們準備好變體，就該定義我們想要衡量的轉換目標了。在這種情況下，正如您在測試編輯器的屏幕截圖中看到的那樣，我們有兩個目標。

第一個目標將測量操作按鈕上的點擊，而在第二個目標中，我們也測量這些點擊，但僅測量發生在 Nelio Content 定價頁面上的點擊。

最後，請注意 CSS 的 A/B 測試將影響您網站的所有頁面。要在 Nelio A/B 測試中限制這種行為，在 A/B 測試編輯器的右側邊欄中，您可以選擇限制測試範圍。我已經這樣做了，它只影響 Nelio Content 的主頁和定價頁面。

我們已經準備好開始測試了。完成後，Nelio A/B 測試負責為您拆分訪問這兩個頁面的流量並顯示不同的顏色變體，以及跟踪轉化（點擊按鈕）。

請記住，您只需等待訪問者瀏覽這些頁面即可開始看到結果。

我們已經在我們的網站上對按鈕顏色進行了 A/B 測試，在西班牙網站上運行了一個半月，在英文網站上運行了將近一個月。在英文版本中，我們更早地停止了它，因為我們以高置信度值更快地獲得了統計上顯著的結果。

但是，讓我們從我們網站上的西班牙語測試結果開始：

正如您在上面的屏幕截圖中看到的那樣，為了衡量兩個頁面上的點擊次數，按鈕的綠色和紅色變體似乎比原來的橙色版本表現得更好。然而，統計數據告訴我們，改進並不大，因此，我們不能說這些顏色比橙色更好。

對於第二個目標，它只測量了 Nelio Content 定價頁面上的點擊次數，我們看到也沒有明確的獲勝顏色。我們甚至可以觀察到這裡的綠色表現如何比橙色差。儘管我們無法根據 Nelio A/B 測試從訪問者那裡收集的數據得出強有力的結論：

我們現在去看看英文版頁面的測試結果。在這裡，在第一個目標中，測量 Nelio Content 兩個頁面中的任何一個頁面的點擊量，我們看到綠色和紅色都是產生更好點擊率的顏色。

此外，在這裡我們可以肯定綠色是測試的獲勝顏色。結果具有統計學意義，置信度大於 99%。綠色是我們可以在我們的英文網站上為 Nelio 內容頁面上的按鈕使用的最佳顏色。

如果我們只看 Nelio Content 定價頁面上的點擊（測試的第二個目標），我們會看到結果與測試的第一個目標一致：

看到這一點，我們可以說綠色是在 Nelio 內容頁面上最適合我們的英語觀眾的顏色。然而，對於我們的西班牙觀眾來說，我們還沒有找到一種比我們已經擁有的顏色更好的顏色。

在這裡，我展示了 A/B 測試的結果，其中包含來自瀏覽我們網站兩個最相關頁面的訪問者的真實數據。而且您已經能夠檢查對特定受眾最有效的方法並不需要對不同的受眾最有效。

綠色按鈕最適合我們說英語的訪客。但這並不意味著其他訪客也一樣。為此，我們僅在這些頁面的英文版中將 Nelio 內容頁面的操作按鈕顏色更改為綠色。西班牙語中的那些仍然是橙色的。

如果我告訴您您需要在頁面上使用綠色，那我將是愚蠢的。沒有人應該告訴你。不是我，不是任何人。我不知道綠色是否適合你。

出於這個原因，在關注您會在互聯網上找到的許多大師之前，請自己進行測試。創建 A/B 測試非常簡單。這是發現在您的網站上更好（或不更好）的唯一方法。與你真正的觀眾。

羅伯特·卡茨基 (Robert Katzki) 在 Unsplash 上的特色圖片。