Terra 如何運用深色模式來提高使用者參與度

Terra 向偏好使用裝置深色模式的使用者顯示深色主題，成功將跳出率降低 60%，並將每個工作階段的網頁瀏覽量提高 170%。

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra 是巴西最大的媒體公司之一，每月使用者人數達 7,500 萬。他們為偏好深色模式的使用者提供自訂深色主題，在電腦上將跳出率降低 60%，並將每個工作階段讀取的網頁數提高 170%。

在本文中，我們將分析 Terra 的歷程，從找出「深色模式」同類群組的規模，到套用自訂深色主題，最後評估這項實作對主要 KPI 的影響。

60_%

跳出率降低

170_%

單次工作階段的頁面數量增加

什麼是深色模式？

過去，裝置中的使用者介面會以「淺色模式」顯示，也就是在淺色介面上顯示黑色文字。另一種做法是「深色模式」，在深色背景 (例如灰色或黑色) 上顯示淺色文字。

深色模式可提升使用者體驗。有些人則是基於美觀或無障礙設計的考量而偏好這類設計。這項功能還有其他優點，例如可延長裝置的電池續航力。使用者可以透過裝置中的設定，表示偏好深色模式，具體方式取決於作業系統。舉例來說，下圖顯示在執行 Android Q 的裝置上，深色主題設定選項的樣貌：

Android Q 深色主題設定。

如要為偏好「深色模式」的使用者提供更優質的體驗，您可以使用 prefers-color-scheme 媒體查詢，並將值設為 light 或 dark。這個媒體查詢會反映使用者在裝置中的選擇。接著，您可以為偏好深色系的使用者載入自訂深色主題。例如載入「深色」CSS 檔案，並變更字型和背景顏色等值。以下程式碼為範例：

@media (prefers-color-scheme: dark) {
   // apply a dark theme
}

@media (prefers-color-scheme: light) {
  // apply a light theme
}

瀏覽器支援

• 76
• 79
• 67
• 12.1

資料來源

注意： 本文僅會說明如何套用開發人員提供的自訂深色主題。Chrome 96 在 Android 上推出了「自動深色主題」原始版本，當使用者在作業系統中選擇採用深色主題時，瀏覽器會將自動產生的深色主題套用至淺色主題網站，而不需要開發人員提供相關樣式。如要進一步瞭解「Chrome 自動夜間模式」，請參閱這篇文章。

找出「偏好淺色」和「偏好深色」的使用者同類群組

截至撰寫本文時 (2021 年 12 月)，Chrome 平台狀態顯示，約有 22% 的網站流量來自啟用「偏好深色」設定的使用者。

這是匯總資料，因此實際上偏好深色模式的使用者在網站上的比例可能有所不同。因此，建議您使用內部評估功能，瞭解這個群組的規模。

以下程式碼會建立 Analytics 維度，用於評估偏好 light 與 dark 的使用者效能：

function getColorScheme() {
    let colorScheme = 'Unknown';
    if (window.matchMedia) {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            colorScheme = 'Dark';
        } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
            colorScheme = 'Light';
        }
    }
    return colorScheme;
}

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date; ga('create', 'UA-ID', 'auto');
ga('set', 'color-scheme-preference', getColorScheme());
ga('send', 'pageview');

Terra 在網站中導入這段程式碼，並比較行動裝置 (Android) 和電腦 (Windows) 裝置上的兩組行為。當時 Terra 並未提供自訂深色主題，因此這項實驗的目標如下：

• 判斷偏好深色系的使用者群組大小。
• 找出模式：舉例來說，與偏好淺色系的使用者相比，偏好深色系的使用者是否更快離開網站？

這項資訊可協助您做出決策，例如是否需要提供自訂的深色主題。以下是 Terra 在測試 14 天後獲得的結果：

行動裝置 (Android)

在行動裝置 (Android) 的情況下，使用者偏好「淺色」與「深色」的跳出率和每個工作階段的網頁數量並無太大差異：

顯示模式	跳出率	單次工作階段頁數
偏好淺色主題	25.84%	3.96
偏好深色	26.10%	3.75

電腦 (Windows)

在電腦 (Windows) 上，偏好「深色」的使用者在網站上的停留時間明顯較短：跳出率幾乎是偏好「淺色」的使用者的兩倍，且閱讀的網頁數略多於一半：

顯示模式	跳出率	單次工作階段頁數
偏好淺色主題	13.20%	7.42
偏好深色	24.12%	4.68

根據這項資料，Terra 推測偏好「深色」的使用者會因網站不支援深色主題，而較少使用電腦裝置。

接著，Terra 決定採用「深色主題」策略，看看是否能提高偏好深色主題的使用者參與度。

實作深色主題

大多數網站在實作深色主題時，會採用先前所述的簡單策略，透過 prefers-color-scheme 媒體查詢監聽使用者的設定變更，並據此變更樣式。

Terra 決定讓使用者享有更多控制權：當他們透過媒體查詢偵測到裝置已開啟「偏好深色」設定時，系統會顯示提示，詢問使用者是否要以「夜間模式」進行瀏覽。只要使用者不拒絕提示 (按一下「忽略」按鈕)，系統就會尊重使用者的 OS 設定，並套用自訂的深色主題：

Terra 會偵測使用者是否偏好在裝置上使用深色模式，並顯示提示，詢問使用者是否要以深色模式進行導航。

為補足這項策略，他們在「設定」畫面中提供其他設定選項，讓使用者決定是否要明確選擇「淺色」、「深色」，或是要依據底層裝置設定。

Terra 的主題設定可讓使用者選擇「深色」和「淺色」主題，或依據裝置的設定。

Terra 的「夜間模式」如下所示：

Terra 的深色主題「夜間模式」。

注意： 為求簡單易懂，我們使用了行動裝置的螢幕截圖，但 Terra 在行動裝置和電腦裝置上都採用相同的策略。

評估 Terra 深色主題的影響

為了評估深色主題的影響，Terra 選取了已在裝置上啟用「Prefer Dark」設定的使用者群組，並比較顯示「淺色」主題和「深色」主題時的參與度指標。以下是行動裝置 (Android) 和電腦 (Windows) 的結果：

行動裝置 (Android)

雖然跳出率維持不變，但使用者看到深色主題時，網頁和工作階段數幾乎翻倍 (從 2.47 增加到 5.24)：

顯示模式	跳出率	單次工作階段頁數
偏好淺色主題	26.91%	2.47
偏好深色	23.91%	5.24

2_X

單次工作階段的頁面數量增加

電腦 (Windows)

顯示深色主題後，兩項指標皆有改善：跳出率從 27.25% 降至 10.82%，單次工作階段的網頁數則增加了近三倍 (從 3.7 增加到 9.99)。

顯示模式	跳出率	單次工作階段頁數
偏好淺色主題	27.5%	3.7
偏好深色	10.82%	9.99

60_%

跳出率降低

170_%

單次工作階段的網頁數量增加

根據這些資料，Terra 確認實施深色主題可為使用者帶來的益處，並決定繼續維護這項功能，做為網站的核心功能。

結論

深色模式是使用者可在裝置中開啟的偏好設定，可將螢幕樣式變更為深色主題。這項技術已被證實可改善使用者體驗，並對使用者的裝置帶來各種好處，例如延長電池續航力。

在本文中，我們說明如何為 Terra 的使用者提供自訂深色主題，改善他們在裝置上啟用偏好深色模式設定後的參與度指標。

如果公司有資源可導入替代深色主題，建議採用這種做法。對於沒有時間投入這類功能的使用者，Chrome 開始推出自動夜間模式功能。