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% (從 3.7% 降至 9.99)。

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

    60%

    跳出率降低

    170%

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

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

結論

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

本文說明如何針對已在裝置上啟用偏好的深色模式設定的 Terra 使用者,改善了參與度指標。

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