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

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

Demián Renzulli
Demián Renzulli
Guilherme Moser de Souza
Guilherme Moser de Souza

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

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

    60%

    跳出率降低

    170%

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

什麼是深色模式?

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

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

Android Q 深色模式設定。
Android Q 深色主題設定。

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

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

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

瀏覽器支援

  • Chrome:76。
  • Edge:79。
  • Firefox:67。
  • Safari:12.1 版。

資料來源

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

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

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

以下程式碼會建立 Analytics 維度,用於評估偏好 lightdark 的使用者效能:

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 的深色主題「夜間模式」。

評估 Terra 深色主題的影響

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

行動裝置 (Android)

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

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

    2X

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

電腦 (Windows)

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

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

    60%

    跳出率降低

    170%

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

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

結論

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

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

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