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