Terra 向偏好使用裝置深色模式的使用者顯示深色主題,成功將跳出率降低 60%,並將單次工作階段的網頁瀏覽量提高 170%。
Terra 是巴西最大的媒體公司之一,每月使用者人數達 7,500 萬。他們為偏好深色模式的使用者提供自訂深色主題,在電腦上將跳出率降低 60%,並將每個工作階段讀取的網頁數提高 170%。
在本文中,我們將分析 Terra 的歷程,從找出「深色模式」同類群組的規模,到套用自訂深色主題,最後評估這項實作對主要 KPI 的影響。
60%
跳出率降低
170%
單次工作階段的頁面數量增加
什麼是深色模式?
過去,裝置中的使用者介面會以「淺色模式」顯示,也就是在淺色介面上顯示黑色文字。另一種做法是「深色模式」,在深色背景 (例如灰色或黑色) 上顯示淺色文字。
深色模式可為使用者體驗帶來好處。有些人偏好美術或無障礙設計。還有其他優點,例如延長裝置的電池續航力。使用者可以透過裝置中的設定,表示偏好深色模式,具體做法取決於作業系統。舉例來說,以下螢幕截圖顯示「深色主題」設定選項在搭載 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
}
找出「偏好淺色」和「偏好深色」的使用者同類群組
撰寫本文時 (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) 方面,使用者偏好「淺色」與「深色」的跳出率和每個工作階段的網頁數量並無太大差異:
電腦 (Windows)
在電腦 (Windows) 中,偏好「黑暗」的使用者在網站上停留的時間遠低於極少,相較於偏好「輕度燈型」的使用者,他們的跳出率將近一倍,閱讀量只有一半:
根據這項資料,Terra 推測偏好「深色」的使用者會因網站不支援深色主題,而較少使用電腦裝置。
接著 Terra 決定調整「深色主題」策略,看看是否能為偏好深色模式的使用者提升參與度。
實作深色主題
大多數網站在實作深色主題時,會採用先前所述的簡單策略,透過 prefers-color-scheme
媒體查詢監聽使用者的設定變更,並據此變更樣式。
Terra 決定讓使用者享有更多控制權:當他們透過媒體查詢偵測到裝置已開啟「偏好深色」設定時,系統會顯示提示,詢問使用者是否要以「夜間模式」進行瀏覽。只要使用者不拒絕提示 (按一下「忽略」按鈕),系統就會尊重使用者的 OS 設定,並套用自訂的深色主題:
為與這項策略相輔相成,該公司可在「設定」畫面提供額外設定選項,讓使用者決定是否要明確偏好「淺色」、「深色」,還是要仰賴基礎裝置設定。
Terra 的「夜間模式」外觀如下:
評估 Terra 深色主題的影響
為了評估深色主題的影響,Terra 選取了已在裝置上啟用「Prefer Dark」設定的使用者群組,並比較顯示「淺色」主題和「深色」主題時的參與度指標。以下是行動裝置 (Android) 和電腦 (Windows) 的結果:
行動裝置 (Android)
雖然跳出率維持不變,但使用者看到深色主題後,網頁和工作階段數幾乎翻倍 (從 2.47 增加到 5.24):
2X
單次工作階段的頁面數量增加
電腦 (Windows)
以深色主題顯示時,這兩項指標都有所改善:跳出率從 27.25% 降至 10.82%,單次工作階段頁數則幾乎可達 3.7% (從 3.7% 降至 9.99)。
60%
跳出率降低
170%
單次工作階段的頁面數量增加
根據這些資料,Terra 確認實施深色主題可為使用者帶來的好處,因此決定繼續維護這項功能,並將其做為網站的核心功能。
結論
深色模式是使用者可在裝置中開啟的偏好設定,可將螢幕樣式變更為深色主題。這項技術已被證實可改善使用者體驗,並對使用者裝置的不同層面帶來好處,例如延長電池續航力。
本文說明如何針對已在裝置上啟用偏好的深色模式設定的 Terra 使用者,改善了參與度指標。
如果公司有資源可導入替代深色主題,建議採用這種做法。如果沒有時間投入這類功能,Chrome 會開始推出自動深色模式功能。