Cách Terra cải thiện mức độ tương tác của người dùng nhờ Chế độ tối

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 đọc trên mỗi phiên lên 170%.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra, một trong những công ty truyền thông lớn nhất của 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 trên mỗi phiên lên 170% trên máy tính cho 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 quy mô của nhóm thuần tập "chế độ tối", đế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 nhiều hơn trên mỗi phiên

Chế độ tối là gì?

Trước đây, giao diện người dùng trong các thiết bị được hiển thị ở "chế độ sáng", thường có nghĩa là hiển thị văn bản màu đen trên giao diện sáng. Giải pháp 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 mang lại lợi ích cho trải nghiệm người dùng. Một số người thích cách này vì lý do thẩm mỹ hoặc hỗ trợ tiếp cận. Phương thức này cũng 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ị của họ, tuỳ thuộc vào hệ điều hành. Ví dụ: ảnh chụp màn hình sau đây cho thấy giao diện của tuỳ chọn cấu hình Giao diện tối trên 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ị là 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 đối với 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 giao diện tối. Ví dụ: bằng cách tải tệp CSS "dark" (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 người dùng "ưu tiên giao diện sáng" so với "giao diện 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 có chế độ cài đặt "ưu tiên chế độ tối".

Đây là dữ liệu tổng hợp, vì vậy, tỷ lệ phần trăm thực tế của những người dùng thích giao diện tối truy cập vào một trang web có thể khác nhau. Vì lý do đó, để hiểu rõ quy mô của nhóm này, bạn nên chạy tính năng đo lường nội bộ.

Mã sau đây 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 thích 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 mã này trong 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 không 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 chế độ tối.
• Xác định mẫu: ví dụ: người dùng thích giao diện tối có rời khỏi trang web nhanh hơn so với người dùng thích giao diện sáng không?

Thông tin này có thể giúp bạn đưa ra quyết định, ví dụ: 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 14 ngày thử nghiệm:

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 trên 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 (Windows), nhóm người dùng thích giao diện "tối" dành ít thời gian hơn trên trang web: họ có tốc độ thoát gần gấp đôi và đọc nhiều hơn một chút so với một nửa số trang so với những người dùng thích giao diện "sáng":

Dựa trên dữ liệu này, Terra đưa ra giả định rằng những người dùng thích chế độ "tối" hơn sẽ ít dùng máy tính, vì trang web của họ không hỗ trợ giao diện tối.

Tiếp theo, Terra quyết định triển khai chiến lược "giao diện tối" để xem liệu họ có thể cải thiện mức độ tương tác của nhóm người dùng ưa thích giao diện tối hay không.

Triển khai giao diện tối

Hầu hết trang web đều triển khai giao diện tối bằng cách sử dụng chiến lược đơn giản như đã thấy trước đó về việc lắng nghe các thay đổi về cấu hình của người dùng thông qua truy vấn nội dung nghe nhìn prefers-color-scheme và thay đổi kiểu dựa trên điều đó.

Terra quyết định trao thêm quyền kiểm soát cho người dùng: khi phát hiện thiết bị của họ đã bật chế độ "ưu tiên tối" (thông qua truy vấn nội dung đa phương tiện), họ sẽ đưa ra 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 thủ 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, các chế độ này cung cấp các tuỳ chọn cấu hình bổ sung trong màn hình "cài đặt", nơi người dùng có thể quyết định xem họ có ưu tiên "sáng", "tối" hay muốn dựa vào chế độ cài đặt cơ bản của thiết bị hay không.

"Chế độ ban đêm" của Terra có giao diện như sau:

Đo lường tác động của giao diện tối của Terra

Để đo lường mức tác động của giao diện tối, Terra đã lấy 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" so với giao diện "Tối". Sau đây là các kết quả cho thiết bị di động (Android) và máy tính (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 nhìn thấy giao diện tối:

2_X

Số trang nhiều hơn trên mỗi phiên

Máy tính (Windows)

Cả hai chỉ số đều cải thiện khi hiển thị giao diện tối: tỷ lệ thoát giảm từ 27,25% xuống 10,82% và số trang mỗi phiên tăng gần gấp ba lần (từ 3,7 lên 9,99).

60_%

Giảm tỷ lệ thoát

170_%

Số trang nhiều hơn trên mỗi phiên

Dựa trên dữ liệu này, Terra có thể xác nhận lợi ích của việc triển khai giao diện tối cho người dùng và quyết định tiếp tục duy trì giao diện này làm một 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 trong thiết bị của họ để thay đổi kiểu màn hình thành giao diện tối. Kỹ thuật này đã được báo cáo là mang lại lợi ích cho trải nghiệm người dùng và cho nhiều khía cạnh khác nhau của thiết bị của người dùng, chẳng hạn như tiết kiệm thời lượng pin.

Trong bài viết này, chúng ta đã thấy cách cung cấp giao diện tối tuỳ chỉnh giúp cải thiện các chỉ số tương tác cho nhóm người dùng Terra đã bật chế độ cài đặt chế độ tối ưu tiên trên thiết bị của họ.

Đối với những công ty có đủ tài nguyên để triển khai một 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 một tính năng như vậy, Chrome đang bắt đầu triển khai tính năng Chế độ tối tự động.