如果您不知道要更改什麼,請嘗試更改網站的顏色
已發表: 2021-10-28提高網站性能的最大問題之一是不知道要進行哪些更改。 這在某個時間點發生在我們所有人身上。 在這種情況下,正確的做法是關注網絡中最關鍵的部分。 我的意思是頁面中最受關注或對您的業務模型最重要的部分。
例如,如果您的目標是讓訪問您網站的人最終填寫表格,請關注表格本身:使其更加突出並儘可能簡化,以便於填寫和提交。 正如我之前所說,首先尋找那些在更改後可能對您的訪問者產生更大影響的元素,因為這樣您會更快地獲得有趣的結果。
如果您仍然不知道要更改什麼,那麼永遠不會令人失望且很容易嘗試的方法是將更改應用於您的網頁顏色。 無意將視障人士放在一邊,很明顯您網站的顏色非常重要。 遠遠超出你的想像。
關於色彩理論和我們人類感知它的方式有幾項研究。 看起來只是對我們的視覺系統(眼睛、視神經和大腦)捕獲的不同波長的解釋,隱藏著巨大的心理背景。
出於這個原因,我鼓勵您嘗試更改網頁(或其中的一些高影響元素)的顏色,並研究訪問者的交互在面對這些變化時如何演變。 這就是我今天要通過我們在本網站上測試的完整真實示例向您解釋的內容。
A/B 測試的定義
要測試您網站上的任何更改,您應該使用 A/B 測試。 通過這樣做,您可以使用真實數據並遵循科學方法來保證所應用的更改比您當前的版本更好(或不更好)。
在今天的示例中,我們要做的是測試 Nelio A/B 測試定價頁面第一折的顏色變化。 第一個折疊對我們的業務產生了很大的影響,因為它負責顯示價格表,我們的訪問者在購買插件時最終通過該價格表成為客戶。
在下面的比較中,您可以看到第一個折疊的原始版本(左側)和替代版本(右側),帶有不同顏色的按鈕和邊距,以及新的背景圖像:


為了測試更改,我們使用 Nelio A/B 測試作為我們的參考 A/B 測試插件。 我們要做的第一件事是創建一個新的頁面 A/B 測試,這是我們要測試的元素。
我們這樣做是因為我們可以通過 WordPress 頁面編輯器本身更改顏色。 如果我們不能那樣做,因為顏色來自主題模板或其他一些不太正統的方式——經驗告訴我們,顏色樣式可以在 WordPress 中以多種方式定義——,另一個總是有效的選擇是使用 CSS 樣式的 A/B 測試,我們可以通過在變體中添加新的 CSS 樣式規則來應用新顏色。
在 A/B 測試的編輯屏幕中,我們選擇要測試的基本頁面(我們的定價頁面)並創建一個新的變體,稍後我們將對其進行編輯:

另一個需要強調的重要方面是定義我們希望 A/B 測試工具跟踪哪些指標,以便以後找出兩個版本中哪個效果更好。 正如您在上面的屏幕截圖中所見,我們在轉換目標和操作部分中對此進行了定義。
在我們的案例中,我們定義了五個目標,這將為同一個 A/B 測試提供五個不同的結果。 首先,我們定義目標來衡量價格表中任何計劃的購買按鈕的點擊量。 然後我們有 3 個額外的目標,分別衡量每個計劃的點擊次數。 最後,我們有一個目標,即在查看被測頁面的每個版本後衡量實際購買次數。
最後,我們編輯頁面的替代版本。 這會將我們帶到我們正在使用的 WordPress 頁面編輯器(在我們的例子中是塊編輯器),如以下屏幕截圖所示:

在這裡,我們只需要更改三列中每一列的操作按鈕的顏色以及用於創建上邊距的元素的顏色。 我們還為已上傳到 WordPress 媒體庫的另一張圖片更改了背景圖片。

一旦包含我們要測試的更改的替代頁面準備就緒,就該返回 A/B 測試編輯屏幕並啟動它了。 這將自動將訪問我們定價頁面的流量分成兩部分。 一半的訪問者將與原始版本進行交互,另一半將看到變體。
通過這種方式,我們可以檢查哪個版本的頁面更適合五個轉換目標。 現在我們只需要等待結果為我們提供我們所尋求的信息。
測試結果分析
最終,如果一種變體比另一種更好,A/B 測試工具本身會告訴我們。 在我們之前描述的A/B測試中,結果已經很清楚了。 新顏色的版本比我們已經擁有的更糟糕。 您可以在以下圖庫中查看測試中定義的五個目標中每個目標的詳細結果:
關於單擊定價表中任何計劃的目標的測試結果。 關於點擊基本計劃目標的測試結果。 關於點擊專業計劃目標的測試結果。 關於點擊企業計劃目標的測試結果。 關於購買目標的測試結果。
該變體不僅減少了對操作按鈕的點擊次數,而且還導致銷售額減少(減少了近 22%)。
這可能看起來很愚蠢,但如果不使用 A/B 測試來測試更改,而是直接在您的網站上更改它們而不進行測試,那麼您就有引入可能效果更差的更改的風險。 這可能是我們的情況,因為我們想要做出的改變並沒有我們想像的那麼好。
您可能會發現在任何給定時間更改顏色是一個很好的解決方案,因為您只是更喜歡新的顏色。 您找到了一個新的調色板,從風格的角度來看,您認為它要好得多,並選擇直接使用它。 但這是一個很大的錯誤。 您喜歡一種顏色多於另一種顏色這一事實並不重要。 重要的是要仔細檢查您的觀眾和訪問者是否確實如此。 您可以通過 A/B 測試在受控環境中執行此操作。
Jeremy Thomas 在 Unsplash 上的特色圖片。