使用 CSS 樣式表進行拆分測試

已發表: 2021-07-19

對網站進行顯著拆分測試的最快方法是在站點範圍的實驗中對級聯樣式表 (CSS) 進行大膽更改。

為什麼 CSS 樣式表很重要css-split-testing-2

網站的主要 CSS 文件是一個中心參考點，它控制每個網頁上所有元素的通用樣式、位置和行為。

主 CSS 文件中包含所有字體、邊距、顏色、對齊方式等的設置。 它是大多數模板化網站上最重要的文件，只需稍加編輯即可徹底改變網站的外觀。

您每次都應該執行的站點範圍拆分測試

網站中有許多共同元素，它們在網站閱讀、使用、導航、突出行動號召和顯示所有關鍵信息的難易程度方面發揮著重要作用。

當用戶決定是否聯繫或在網站上購買時，上述任何一項都可能是阻止該轉換的決定性因素。 以下是站點範圍元素的一些關鍵注意事項：

號召性用語按鈕

所有在線轉化都以行動號召 (CTA) 按鈕、鏈接或小部件開始。 這些 CTA 的大小、顏色、措辭甚至位置對轉換率有很大影響。 例如，某些 CTA 按鈕的顏色可能會與背景混合過多，或者可能會下意識地讓用戶不願點擊它們，這取決於他們認為負面的顏色。 鏈接和按鈕上使用的文本也會有所不同。 例如，簡單地將表單的“提交”按鈕更改為“發送”會產生更好的結果，因為“提交”被認為是一個強有力的詞。 您可以在 VWO.com 上的 CTA 終極指南中閱讀更多相關信息。

用於“立即購買”按鈕的綠色略有變化。組合 2 添加到購物車的產品比原始組合 1 多 1.5%
用於“立即購買”按鈕（突出顯示）的綠色略有變化。 組合 2 將產品添加到購物車的用戶比原始控制多 1.5%，組合 4 差 1.4%

字體大小

這個很少測試的元素在許多用戶的可訪問性方面發揮著重要作用。 字體對於某些用戶來說通常太小而無法閱讀，因此如果他們熟悉它，他們可能必須使用縮放功能，但這在移動設備上並不總是可行或容易。 過大的字體大小也可能是有害的，因為它們會降低閱讀速度，尤其是在適合移動設備的網站上。 在 imarc.com 上閱讀有關字體大小背後的科學的更多信息。

字體類型

同樣，字體的樣式很少在許多網站上進行測試，似乎在開發的初始設計階段就決定了，然後在許多網站上被遺忘了。 不同風格的字體具有不同程度的可讀性。 此外，有些字體僅在某些設備上可用，有些字體在某些設備上以某些大小顯示非常糟糕，而沒有字體光柵化。 您可以使用字體系列來使用一系列字體，從您最喜歡的字體開始，逐漸使用更簡單的字體，例如 Arial，這些字體始終存在於每台設備上 新字體可以通過 JavaScript 或服務包含在網站中，例如谷歌字體。 您可以在 TypeWolf.com 上的這篇關於 2016 年十大網絡字體的帖子中找到更多信息。

字體樣式

行高、下劃線、粗體、顏色和邊距等字體樣式也會影響可訪問性和可讀性。 藍色和帶下劃線的鏈接更有可能被點擊，谷歌和 eBay 多年來精心測試了這一點，谷歌甚至在 2016 年測試了黑色鏈接。 ，那麼應該對它們進行測試，您會發現它們在更改後通常表現出更大的參與度。

只需更改本網站的字體，轉化率就提高了 1.9%
只需更改本網站的字體，轉化率就提高了 1.9%

背景顏色

網站通常是在白色背景上製作的，但如果您查看自己喜歡的新聞網站或社交媒體平台，它通常會帶有輕微的藍色或灰色陰影。 背景顏色可以幫助網頁的某些區域脫穎而出，例如信息框或特價橫幅。 此外，背景顏色可以加強所顯示產品的品牌或類型，這種相關性可以提高轉化率，因為內容看起來更相關。 在 Jimdo.com 上的這篇文章中了解有關網站色彩心理學的更多信息，並了解橙色等顏色如何表示划算（想想亞馬遜），藍色表示中立和技術（想想 Facebook 或 Twitter）。

重新定位或隱藏元素

CSS 文件控製網頁上所有常見元素的邊距和填充，還允許您使用“display:none”命令完全刪除某些項目。 您可以通過嘗試減少垂直浪費的空間、刪除不必要的信息、改變重要 CTA 之間的間距或嘗試刪除某些內容塊來利用這一點。 有時在網頁上越少越好（保持簡單的愚蠢原則），並且在提高轉化率的同時查看可以從網頁中刪除多少內容是一種很好的做法。

將內容添加到此頁面後，參與度提高了 16% 以上
當內容包含在類別頁面中時，參與度提高了 16% 以上

用於在站點範圍內拆分測試 CSS 文件的平台

當每個用戶從一個頁面到另一個頁面時，讓網站上的模闆對於每個用戶保持一致非常重要。 如果只有一頁進行 A/B 拆分測試而其他頁面保持不變，這可能是有害的（當然也是一個糟糕的實驗）。

需要特殊的拆分測試軟件來使每個用戶的頁面之間的 CSS 文件更改保持一致，不幸的是，Google Analytics 的免費“內容實驗”不能滿足這些類型的拆分測試。 以下是您可能想要使用的一些工具：

  • Visual Website Optimiser (VWO) – vwo.com – 我們發現這是最容易實現的拆分測試軟件。 它處理 HTML、CSS 或 JavaScript 上的所有類型的拆分測試，並在需要時生成用戶熱圖。 價格結構可以在這裡找到
  • Optimizely – optimizely.com – 它還可以處理 HTML、CSS 或 JavaScript 上的所有類型的拆分測試，並且可以根據需要進行一些非常高級的拆分測試。 定價信息可以在這裡找到

結論

設置站點範圍的 CSS 拆分測試既簡單又有效，但如果您不熟悉 CSS，則可能需要開發人員 15 分鐘的幫助。

一旦網站擁有正確的字體、樣式和 CTA，您就可以專注於網站的關鍵登陸頁面和其他更多利基元素。 這提高了轉化率並使網站更有效，而無需任何額外的流量。

如果您需要幫助，請隨時與我們聯繫。