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 增加到 9.99,幾乎是原來的三倍。
60%
跳出率降低
170%
單次工作階段的頁面數量增加
根據這些資料,Terra 確認實施深色主題可為使用者帶來的好處,因此決定繼續維護這項功能,並將其做為網站的核心功能。
結論
深色模式是使用者可在裝置中開啟的偏好設定,可將螢幕樣式變更為深色主題。這項技術已被證實可改善使用者體驗,並對使用者的裝置帶來各種好處,例如延長電池續航力。
在本文中,我們將說明如何為 Terra 的使用者提供自訂深色主題,改善他們在裝置上啟用偏好深色模式設定後的參與度指標。
如果公司有資源可導入替代深色主題,建議採用這種做法。對於沒有時間投入這類功能的使用者,Chrome 開始推出自動夜間模式功能。