Bằng cách hiển thị giao diện tối cho những người dùng thích chế độ tối trên thiết bị, Terra đã giảm tỷ lệ thoát xuống 60% và tăng số trang đọc trong mỗi phiên lên 170%.
Terra, một trong những công ty truyền thông lớn nhất Brazil với 75 triệu người dùng hằng tháng, đã giảm tỷ lệ thoát xuống 60% và tăng số trang được đọc trong mỗi phiên thêm 170% trên máy tính đối với những người dùng thích chế độ tối bằng cách cung cấp giao diện tối tuỳ chỉnh.
Trong bài viết này, chúng ta sẽ phân tích hành trình của Terra từ việc xác định kích thước của nhóm thuần tập "chế độ tối" cho đến việc áp dụng giao diện tối tuỳ chỉnh và cuối cùng là đo lường tác động của việc triển khai này đối với các KPI chính của họ.
60%
Giảm tỷ lệ thoát
170%
Số trang mỗi phiên
Chế độ tối là gì?
Trước đây, giao diện người dùng trên thiết bị hiển thị ở "chế độ sáng", có nghĩa là hiển thị văn bản màu đen trên giao diện sáng. Lựa chọn thay thế là "chế độ tối", với văn bản sáng trên nền tối, chẳng hạn như màu xám hoặc đen.
Chế độ tối có các lợi ích mang lại trải nghiệm người dùng. Một số người thích tính năng này vì lý do tính thẩm mỹ hoặc khả năng tiếp cận. Tính năng này có các ưu điểm khác, chẳng hạn như duy trì thời lượng pin trong thiết bị. Người dùng có thể thể hiện rằng họ thích chế độ tối thông qua một chế độ cài đặt trong thiết bị tuỳ thuộc vào hệ điều hành. Ví dụ: ảnh chụp màn hình sau đây cho thấy tuỳ chọn cấu hình Dark Theme (Giao diện tối) trong các thiết bị chạy Android Q:
Để mang lại trải nghiệm tốt hơn cho những người dùng thích "chế độ tối", bạn có thể sử dụng truy vấn nội dung nghe nhìn prefers-color-scheme, với giá trị light hoặc dark. Truy vấn nội dung đa phương tiện này phản ánh lựa chọn của người dùng trên thiết bị của họ. Sau đó, bạn có thể tải giao diện tối tuỳ chỉnh cho những người thích màu tối. Ví dụ: bằng cách tải tệp CSS "tối" và thay đổi các giá trị như phông chữ và màu nền. Mã sau đây cho thấy ví dụ về điều đó:
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
Xác định nhóm thuần tập "ưu tiên người dùng sáng" và "tối"
Tại thời điểm viết bài (tháng 12 năm 2021), Trạng thái nền tảng Chrome xác định rằng khoảng 22% lưu lượng truy cập web đến từ những người dùng sử dụng chế độ cài đặt "ưu tiên dữ liệu tối".
Đây là dữ liệu tổng hợp, do đó, tỷ lệ phần trăm thực tế người dùng thích truy cập vào một trang web tối có thể thay đổi. Do đó, để biết quy mô của nhóm này, bạn nên tiến hành đo lường nội bộ.
Đoạn mã sau đây sẽ tạo một phương diện phân tích để đo lường hiệu suất của những người dùng ưu tiên light so với 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 đã triển khai đoạn mã này trên trang web của họ và so sánh hành vi của cả hai nhóm trên thiết bị di động (Android) và máy tính (Windows). Tại thời điểm đó, Terra chưa cung cấp giao diện tối tuỳ chỉnh. Vì vậy, mục tiêu của thử nghiệm này là:
- Xác định quy mô của nhóm người dùng thích màu tối.
- Xác định đặc điểm: chẳng hạn như người dùng thích màu tối có muốn rời khỏi trang web nhanh hơn so với những người thích màu sáng không?
Việc biết được điều này có thể giúp bạn đưa ra quyết định, chẳng hạn như liệu có cần cung cấp giao diện tối tuỳ chỉnh hay không. Sau đây là kết quả mà Terra thu được sau khi thử nghiệm 14 ngày:
Thiết bị di động (Android)
Trong trường hợp thiết bị di động (Android), số liệu cho tỷ lệ thoát và số trang mỗi phiên không cho thấy sự khác biệt lớn giữa những người dùng thích "sáng" so với những người dùng thích "tối":
Máy tính (Windows)
Trong trường hợp máy tính để bàn (Windows), nhóm người dùng thích "tối" ít hơn nhiều trên trang web: họ có tỷ lệ thoát gần gấp 2 lần và đọc hơn một nửa số trang so với những người dùng thích "sáng":
Dựa trên dữ liệu này, Terra đưa ra giả thuyết rằng những người dùng thích "tối" ít sử dụng thiết bị máy tính hơn vì trang web của họ không hỗ trợ giao diện tối.
Ở bước tiếp theo, Terra quyết định nghiên cứu chiến lược "giao diện tối" để xem liệu chúng có thể cải thiện mức độ tương tác cho nhóm người dùng ưa thích màu tối hay không.
Triển khai giao diện tối
Hầu hết các trang web triển khai giao diện tối bằng cách sử dụng chiến lược đơn giản đã trình bày trước đó để theo dõi các thay đổi về cấu hình của người dùng thông qua truy vấn phương tiện prefers-color-scheme và thay đổi kiểu dựa trên điều đó.
Terra quyết định trao cho người dùng nhiều quyền kiểm soát hơn: khi phát hiện thấy họ bật chế độ cài đặt "ưu tiên màu tối" trên thiết bị (thông qua cụm từ tìm kiếm nội dung đa phương tiện), họ hiện lời nhắc hỏi xem họ có muốn đi theo chỉ dẫn ở "chế độ ban đêm" hay không. Miễn là người dùng không từ chối lời nhắc (bằng cách nhấp vào nút "Bỏ qua"), họ sẽ tuân theo chế độ cài đặt hệ điều hành của người dùng và áp dụng giao diện tối tuỳ chỉnh:
Bổ sung cho chiến lược này, chúng cung cấp các tuỳ chọn cấu hình bổ sung trong màn hình "cài đặt". Tại đây, người dùng có thể quyết định rõ ràng là họ thích "sáng", "tối" hay muốn dựa vào các chế độ cài đặt cơ bản của thiết bị.
"Chế độ ban đêm" của Terra trông như sau:
Đo lường tác động của giao diện tối trên Terra
Để đo lường tác động của giao diện tối, Terra đã chọn ra nhóm người dùng đã bật chế độ cài đặt "Ưu tiên giao diện tối" trên thiết bị của họ và so sánh các chỉ số tương tác khi hiển thị giao diện "Sáng" với giao diện "DarK". Dưới đây là kết quả cho thiết bị di động (Android) và máy tính để bàn (Windows):
Thiết bị di động (Android)
Mặc dù tỷ lệ thoát vẫn tương tự, nhưng số trang và số phiên đã tăng gần gấp đôi (từ 2,47 lên 5,24) khi người dùng tiếp xúc với giao diện tối:
2X
Số trang mỗi phiên
Máy tính (Windows)
Cả hai chỉ số đều được cải thiện khi hiển thị giao diện tối: tỷ lệ thoát tăng từ 27,25% lên 10,82% và số trang mỗi phiên tăng gần gấp ba (từ 3,7 lên 9,99).
60%
Giảm tỷ lệ thoát
170%
Số trang mỗi phiên
Dựa trên dữ liệu này, Terra có thể khẳng định được những lợi ích mà người dùng nhận được khi triển khai giao diện tối và đã quyết định tiếp tục duy trì giao diện này làm tính năng cốt lõi của trang web.
Kết luận
Chế độ tối là một lựa chọn ưu tiên mà người dùng có thể bật trên thiết bị để thay đổi kiểu màn hình thành giao diện tối. Kỹ thuật này đã báo cáo những lợi ích từ trải nghiệm người dùng và cho các khía cạnh khác nhau của thiết bị của người dùng, chẳng hạn như tính năng tiết kiệm pin.
Trong bài viết này, chúng ta đã tìm hiểu cách cải thiện chỉ số tương tác cho nhóm người dùng của Terra đã bật chế độ tối ưu tiên trong thiết bị của họ bằng việc cung cấp giao diện tối tuỳ chỉnh.
Đối với các công ty có tài nguyên để triển khai giao diện tối thay thế, đây là phương pháp được đề xuất. Đối với những người không có thời gian đầu tư vào tính năng như vậy, Chrome sẽ bắt đầu ra mắt tính năng Chế độ tối tự động.