เมื่อแสดงธีมมืดต่อผู้ใช้ที่ต้องการใช้โหมดมืดในอุปกรณ์ Terra ลดอัตราตีกลับได้ 60% และเพิ่มจํานวนหน้าเว็บที่อ่านต่อเซสชันได้ 170%
Terra เป็นหนึ่งในบริษัทสื่อที่ใหญ่ที่สุดของบราซิลซึ่งมีผู้ใช้รายเดือน 75 ล้านคน ลดอัตราตีกลับลง 60% และเพิ่มจำนวนหน้าเว็บที่อ่านต่อเซสชันขึ้น 170% บนเดสก์ท็อปสำหรับผู้ใช้ที่ต้องการโหมดมืดด้วยธีมมืดที่กำหนดเอง
ในบทความนี้ เราจะวิเคราะห์เส้นทางของ Terra ตั้งแต่การระบุขนาดของกลุ่มประชากรตามรุ่น "โหมดมืด" ไปจนถึงการใช้ธีมมืดที่กําหนดเอง และสุดท้ายคือการวัดผลกระทบของการใช้งานนี้ต่อ KPI หลัก
60%
อัตราตีกลับลดลง
170%
หน้าเว็บต่อเซสชันมากขึ้น
โหมดมืดคืออะไร
ที่ผ่านมาอินเทอร์เฟซผู้ใช้ในอุปกรณ์จะแสดงใน "โหมดสว่าง" ซึ่งมักจะหมายถึงการแสดงข้อความสีดําบนอินเทอร์เฟซสีอ่อน อีกทางเลือกหนึ่งคือ "โหมดมืด" ซึ่งมีข้อความสีอ่อนบนพื้นหลังสีเข้ม เช่น สีเทาหรือสีดํา
โหมดมืดมีประโยชน์ต่อประสบการณ์ของผู้ใช้ บางคนอาจชอบเพราะเหตุผลด้านความสวยงามหรือความสะดวกในการเข้าถึง รวมถึงมีข้อดีอื่นๆ เช่น ยืดอายุการใช้งานแบตเตอรี่ในอุปกรณ์ ผู้ใช้สามารถแสดงว่าต้องการใช้โหมดมืดผ่านการตั้งค่าในอุปกรณ์ซึ่งขึ้นอยู่กับระบบปฏิบัติการ เช่น ภาพหน้าจอต่อไปนี้แสดงลักษณะของตัวเลือกการกำหนดค่าธีมมืดในอุปกรณ์ที่ใช้ Android Q
หากต้องการให้ผู้ใช้ที่ชื่นชอบ "โหมดมืด" ได้รับประสบการณ์การใช้งานที่ดีขึ้น คุณสามารถใช้ Media Query 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) สถานะแพลตฟอร์ม Chrome ระบุว่าการเข้าชมเว็บประมาณ 22% มาจากผู้ใช้ที่มีการตั้งค่า "ใช้โหมดมืด"
ข้อมูลนี้เป็นข้อมูลรวม ดังนั้นเปอร์เซ็นต์จริงของผู้ใช้ที่ชอบโหมดมืดที่เข้ามายังเว็บไซต์อาจแตกต่างกันไป ด้วยเหตุนี้ เราจึงแนะนําให้ทำการวัดผลในร้านเพื่อทําความเข้าใจขนาดของกลุ่มนี้
โค้ดต่อไปนี้จะสร้างมิติข้อมูลการวิเคราะห์เพื่อวัดประสิทธิภาพของผู้ใช้ที่ชื่นชอบ 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 ติดตั้งใช้งานโค้ดนี้ในเว็บไซต์และเปรียบเทียบลักษณะการทํางานของทั้ง 2 กลุ่มในอุปกรณ์เคลื่อนที่ (Android) และเดสก์ท็อป (Windows) ในขณะนั้น Terra ยังไม่มีธีมมืดที่กำหนดเอง ดังนั้นเป้าหมายของการทดสอบนี้จึงเป็นดังนี้
- การกำหนดขนาดของกลุ่มผู้ใช้ที่ต้องการโหมดมืด
- การระบุรูปแบบ: เช่น ผู้ใช้ที่ชื่นชอบธีมมืดออกจากเว็บไซต์เร็วกว่าผู้ใช้ที่ชื่นชอบธีมสว่างหรือไม่
ข้อมูลนี้ช่วยให้คุณตัดสินใจได้ เช่น จำเป็นต้องมีธีมมืดที่กำหนดเองหรือไม่ ต่อไปนี้คือผลลัพธ์ที่ Terra ได้รับหลังจากการทดสอบ 14 วัน
อุปกรณ์เคลื่อนที่ (Android)
ในกรณีของอุปกรณ์เคลื่อนที่ (Android) ตัวเลขอัตราตีกลับและหน้าเว็บต่อเซสชันไม่ได้แสดงความแตกต่างมากนักระหว่างผู้ใช้ที่ชื่นชอบ "แบบสว่าง" กับผู้ใช้ที่ชื่นชอบ "แบบมืด"
เดสก์ท็อป (Windows)
ในกรณีของเดสก์ท็อป (Windows) กลุ่มผู้ใช้ที่ชื่นชอบ "แบบมืด" ใช้เวลาในเว็บไซต์น้อยกว่ามาก โดยมีอัตราตีกลับเกือบ 2 เท่าและอ่านหน้าเว็บได้มากกว่าครึ่งเมื่อเทียบกับผู้ใช้ที่ชื่นชอบ "แบบสว่าง"
จากข้อมูลนี้ Terra คาดการณ์ว่าผู้ใช้ที่ชอบ "ธีมมืด" ใช้เวลาในอุปกรณ์เดสก์ท็อปน้อยกว่า เนื่องจากเว็บไซต์ไม่รองรับธีมมืด
ขั้นตอนถัดไป Terra จึงตัดสินใจใช้กลยุทธ์ "ธีมสีเข้ม" เพื่อดูว่าจะปรับปรุงการมีส่วนร่วมของกลุ่มผู้ใช้ที่ชอบธีมสีเข้มได้หรือไม่
การใช้ธีมมืด
เว็บไซต์ส่วนใหญ่ใช้ธีมมืดโดยใช้กลยุทธ์ง่ายๆ ที่แสดงก่อนหน้านี้ในการรับฟังการเปลี่ยนแปลงการกำหนดค่าของผู้ใช้ผ่านคิวรีสื่อ prefers-color-scheme
และเปลี่ยนสไตล์ตามนั้น
Terra จึงตัดสินใจให้ผู้ใช้ควบคุมได้มากขึ้น เมื่อตรวจพบว่าผู้ใช้เปิดการตั้งค่า "ใช้โหมดมืด" ในอุปกรณ์ (ผ่าน Media Query) ระบบจะแสดงข้อความแจ้งเพื่อถามว่าผู้ใช้ต้องการไปยังส่วนต่างๆ ใน "โหมดกลางคืน" หรือไม่ ตราบใดที่ผู้ใช้ไม่ปฏิเสธข้อความแจ้ง (โดยคลิกปุ่ม "ละเว้น") ระบบจะยึดตามการตั้งค่าระบบปฏิบัติการของผู้ใช้และใช้ธีมสีเข้มที่กำหนดเอง ดังนี้
นอกเหนือจากกลยุทธ์นี้ ยังมีตัวเลือกการกำหนดค่าเพิ่มเติมในหน้าจอ "การตั้งค่า" ซึ่งผู้ใช้สามารถเลือกได้ว่าต้องการใช้ธีม "สว่าง" "มืด" หรือต้องการใช้การตั้งค่าอุปกรณ์พื้นฐาน
"โหมดกลางคืน" ของ Terra จะมีลักษณะดังนี้
การวัดผลลัพธ์ของธีมมืดของ Terra
ในการวัดผลลัพธ์ของธีมมืด Terra ได้นํากลุ่มผู้ใช้ที่เปิดการตั้งค่า "ใช้ธีมมืด" ในอุปกรณ์มาเปรียบเทียบเมตริกการมีส่วนร่วมเมื่อแสดงธีม "สว่าง" กับธีม "มืด" ผลการค้นหาสำหรับอุปกรณ์เคลื่อนที่ (Android) และเดสก์ท็อป (Windows) มีดังนี้
อุปกรณ์เคลื่อนที่ (Android)
แม้ว่าอัตราตีกลับจะยังคงใกล้เคียงกัน แต่หน้าเว็บและเซสชันเพิ่มขึ้นเกือบ 2 เท่า (จาก 2.47 เป็น 5.24) เมื่อผู้ใช้เห็นธีมมืด
2X
หน้าเว็บต่อเซสชันมากขึ้น
เดสก์ท็อป (Windows)
เมตริกทั้ง 2 รายการดีขึ้นเมื่อแสดงธีมมืด โดยอัตราตีกลับลดลงจาก 27.25% เป็น 10.82% และหน้าเว็บต่อเซสชันเพิ่มขึ้นเกือบ 3 เท่า (จาก 3.7 เป็น 9.99)
60%
อัตราตีกลับลดลง
170%
หน้าเว็บต่อเซสชันมากขึ้น
จากข้อมูลนี้ Terra ยืนยันได้ว่าการใช้ธีมมืดมีประโยชน์ต่อผู้ใช้ และตัดสินใจที่จะคงธีมนี้ไว้เป็นฟีเจอร์หลักของเว็บไซต์ต่อไป
บทสรุป
โหมดมืดเป็นค่ากำหนดที่ผู้ใช้เปิดในอุปกรณ์เพื่อเปลี่ยนสไตล์ของหน้าจอเป็นธีมมืดได้ เทคนิคนี้ได้รับการรายงานว่ามีประโยชน์ต่อประสบการณ์ของผู้ใช้และในด้านต่างๆ ของอุปกรณ์ของผู้ใช้ เช่น การประหยัดอายุการใช้งานแบตเตอรี่
ในบทความนี้ เราได้เห็นว่าธีมมืดที่กําหนดเองช่วยปรับปรุงเมตริกการมีส่วนร่วมของกลุ่มผู้ใช้ Terra ที่เปิดการตั้งค่าโหมดมืดที่ต้องการในอุปกรณ์ได้อย่างไร
เราขอแนะนําแนวทางนี้สําหรับบริษัทที่มีทรัพยากรในการใช้ธีมมืดทางเลือก สำหรับผู้ที่ไม่มีเวลาปรับแต่งฟีเจอร์ดังกล่าว Chrome กำลังเริ่มเปิดตัวฟีเจอร์โหมดมืดอัตโนมัติ