วิธีที่ Terra ปรับปรุงการมีส่วนร่วมของผู้ใช้ด้วยโหมดมืด

เมื่อแสดงธีมมืดต่อผู้ใช้ที่ต้องการใช้โหมดมืดในอุปกรณ์ Terra ลดอัตราตีกลับได้ 60% และเพิ่มจํานวนหน้าเว็บที่อ่านต่อเซสชันได้ 170%

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

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) เมื่อผู้ใช้เห็นธีมมืด

2_X

หน้าเว็บต่อเซสชันมากขึ้น

เดสก์ท็อป (Windows)

เมตริกทั้ง 2 รายการดีขึ้นเมื่อแสดงธีมมืด โดยอัตราตีกลับลดลงจาก 27.25% เป็น 10.82% และหน้าเว็บต่อเซสชันเพิ่มขึ้นเกือบ 3 เท่า (จาก 3.7 เป็น 9.99)

60_%

อัตราตีกลับลดลง

170_%

หน้าเว็บต่อเซสชันมากขึ้น

จากข้อมูลนี้ Terra ยืนยันได้ว่าการใช้ธีมมืดมีประโยชน์ต่อผู้ใช้ และตัดสินใจที่จะคงธีมนี้ไว้เป็นฟีเจอร์หลักของเว็บไซต์ต่อไป

บทสรุป

โหมดมืดเป็นค่ากำหนดที่ผู้ใช้เปิดในอุปกรณ์เพื่อเปลี่ยนสไตล์ของหน้าจอเป็นธีมมืดได้ เทคนิคนี้ได้รับการรายงานว่ามีประโยชน์ต่อประสบการณ์ของผู้ใช้และในด้านต่างๆ ของอุปกรณ์ของผู้ใช้ เช่น การประหยัดอายุการใช้งานแบตเตอรี่

ในบทความนี้ เราได้เห็นว่าธีมมืดที่กําหนดเองช่วยปรับปรุงเมตริกการมีส่วนร่วมของกลุ่มผู้ใช้ Terra ที่เปิดการตั้งค่าโหมดมืดที่ต้องการในอุปกรณ์ได้อย่างไร

เราขอแนะนําแนวทางนี้สําหรับบริษัทที่มีทรัพยากรในการใช้ธีมมืดทางเลือก สำหรับผู้ที่ไม่มีเวลาปรับแต่งฟีเจอร์ดังกล่าว Chrome กำลังเริ่มเปิดตัวฟีเจอร์โหมดมืดอัตโนมัติ