在結帳按鈕中測試不同的樣式

已發表: 2020-12-02

今天我給大家帶來另一個我們已經運行了幾個月的 A/B 測試。與往常一樣，在本月刊系列文章中，我們將詳細了解我們所做的改進假設、通過在我們的網站上創建頁面的變體來應用它以及我們獲得的結果。

前段時間，我們正在研究 Nelio Content 主頁上操作按鈕的顏色。由於對 CSS 樣式進行了 A/B 測試，我們能夠看到綠色如何最適合該頁面的說英語的訪問者。

我們不能假設任何頁面都是這種情況。這就是為什麼今天我們要從出現在 Nelio A/B 測試購買頁面上的定價表中測試結帳按鈕的顏色和大小。

A/B 測試的定義

我們改進的假設是，更改 Nelio A/B 測試定價表中結帳按鈕的顏色和大小將獲得更多點擊這些按鈕，因此，我們將獲得更多銷售額。

Nelio A/B 測試定價表的原始版本顯示了我們銷售的三個計劃，每個計劃都有價格、詳細信息和訂閱服務的按鈕。您可以在以下屏幕截圖中看到它：

按鈕是灰色的，除了專業計劃外，沒有什麼突出的，它有一個深藍色按鈕，與其他兩個相比，這個計劃更加強調這個計劃。

我們要檢查的第一件事是更改這些按鈕的顏色以使其更醒目是否更好。為此，我們提出的替代版本包括使用新顏色更改 CSS 樣式，如下所示：

我們一直強調專業計劃，但現在其他計劃是深藍色，而這個中間計劃有一個更突出的橙色。根據色彩心理學的研究，橙色是動作按鈕的不錯選擇，因此我們決定選擇您在上圖中看到的這種橙色作為專業計劃。

正如我們的假設所述，按鈕的大小也會影響它們的性能，我們保留了先前變體中提出的顏色變化，以創建一個增加了按鈕大小的新顏色。您可以在以下屏幕截圖中看到此更改：

因此，我們有三個不同版本的 Nelio A/B 測試定價表的 CSS 樣式：

完成所有這些工作後，我們可以將其轉化為 CSS 樣式的 A/B 測試。為此，Nelio A/B 測試允許您創建不同 CSS 樣式的 A/B 測試，您可以使用它輕鬆測試 WordPress 中的樣式更改。

我們創建了新的 CSS A/B 測試和其中的三個備選方案。事實上，您之前看到的變體屏幕截圖是 Nelio A/B 測試包含的 CSS 樣式編輯器的屏幕截圖，用於創建替代方案。

正如您在上面的屏幕截圖中看到的那樣，我們將測試範圍限制在 Nelio A/B 測試定價頁面，並且我們定義了在測試中要衡量的五個目標：

創建所有這些後，您不會花費超過 10 分鐘的時間，我們開始測試並等待結果出來。現在輪到 Nelio A/B 測試來做這項工作了。我們的插件負責在不同變體之間分配傳入流量，併計算 A/B 測試中定義的每個目標中的轉化次數。

這個 A/B 測試在我們的網站上運行了三個月。結果如下所示。我們將詳細分析每個目標，以了解我們從該測試中得出的結論。

第一個目標是衡量對定價表中任何計劃按鈕的點擊次數。在這種情況下，結果顯示顏色改變的變體獲得了 17.2% 的點擊次數。另一方面，改變顏色和大小的變體比頁面的原始版本差 15%。

然而，這些數字都沒有達到足夠的統計置信度來清楚地確定該目標的獲勝版本。

第二個目標只計算基本計劃按鈕的點擊次數。在這種情況下，結果與之前的目標相似。我們有改變顏色的版本是三者中最好的，顏色和尺寸最差的版本。

同樣，統計數據也無法以足夠的信心將具有新顏色的版本確定為明顯的贏家。

第三個目標（我們在專業計劃中衡量點擊次數）的情況略有不同。和以前一樣，有顏色的版本更好，結合顏色和尺寸的版本更差。然而，現在的統計數據告訴我們，顯然獲勝的版本有足夠的信心。

我們可以說，通過使用更突出的顏色，我們獲得了更多的點擊次數。橙色按鈕比我們之前的藍色按鈕效果更好。

在企業計劃中點擊的情況下，這裡我們回到與前兩個目標相同的狀態。但是在這裡，原始變體和顏色改變的變體之間的差異可以忽略不計。看起來更糟糕的版本是包含顏色和大小變化的版本。

所有這些點擊的東西都很好。但是，如果我們只看以前的結果，我們將對現實有一個部分的看法。

出於這個原因，我添加了最後一個目標，我們衡量每個變體實現的購買數量。您可以獲得獲得更多點擊的變體，但如果它也無法獲得更多銷售，您將選擇一個虛假的贏家。

在以下結果中，我們看到這正是發生的情況。帶有新顏色的版本的銷售額減少了 24.5%，而結合顏色和尺寸的版本的銷售額比我們頁面的當前版本（沒有變化的版本）減少了 16.6%。

有了這些結果，我們必須看到的是，轉化漏斗是複雜的，雖然我們經常將其劃分為階段併計算微轉化，但我們不能忽視整體情況。

創建多目標 A/B 測試的優勢在於，我們可以從所有視角全面了解我們網站的表現如何（或差）。只有這樣，我們才能有信心從 A/B 測試結果的數據中完全放心地選擇獲勝者。

Grooveland Designs 在 Unsplash 上的特色圖片。