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

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

André Cipriani Bandarra
Demián Renzulli
Guilherme Moser de Souza
Guilherme Moser de Souza
X LinkedIn

Terra เป็นหนึ่งในบริษัทสื่อที่ใหญ่ที่สุดของบราซิลซึ่งมีผู้ใช้รายเดือน 75 ล้านคน ลดอัตราตีกลับลง 60% และเพิ่มจำนวนหน้าเว็บที่อ่านต่อเซสชันขึ้น 170% บนเดสก์ท็อปสำหรับผู้ใช้ที่ต้องการโหมดมืดด้วยธีมมืดที่กำหนดเอง

ในบทความนี้ เราจะวิเคราะห์เส้นทางของ Terra ตั้งแต่การระบุขนาดของกลุ่มประชากรตามรุ่น "โหมดมืด" ไปจนถึงการใช้ธีมมืดที่กําหนดเอง และสุดท้ายคือการวัดผลกระทบของการใช้งานนี้ต่อ KPI หลัก

    60%

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

    170%

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

โหมดมืดคืออะไร

ที่ผ่านมาอินเทอร์เฟซผู้ใช้ในอุปกรณ์จะแสดงใน "โหมดสว่าง" ซึ่งมักจะหมายถึงการแสดงข้อความสีดําบนอินเทอร์เฟซสีอ่อน อีกทางเลือกหนึ่งคือ "โหมดมืด" ซึ่งมีข้อความสีอ่อนบนพื้นหลังสีเข้ม เช่น สีเทาหรือสีดํา

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

การตั้งค่าโหมดมืดของ Android Q
การตั้งค่าธีมมืดของ 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
}

การรองรับเบราว์เซอร์

  • Chrome: 76
  • Edge: 79
  • Firefox: 67
  • Safari: 12.1

แหล่งที่มา

การระบุกลุ่มประชากรตามรุ่นของผู้ใช้ที่ "ชอบแบบสว่าง" เทียบกับ "แบบมืด"

ขณะเขียนบทความนี้ (ธันวาคม 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) ตัวเลขอัตราตีกลับและหน้าเว็บต่อเซสชันไม่ได้แสดงความแตกต่างมากนักระหว่างผู้ใช้ที่ชื่นชอบ "แบบสว่าง" กับผู้ใช้ที่ชื่นชอบ "แบบมืด"

โหมดการแสดงผล อัตราตีกลับ จำนวนหน้าเว็บต่อเซสชัน
ต้องการธีมแสง 25.84% 3.96
ชอบธีมมืด 26.10% 3.75

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

ในกรณีของเดสก์ท็อป (Windows) กลุ่มผู้ใช้ที่ชื่นชอบ "แบบมืด" ใช้เวลาในเว็บไซต์น้อยกว่ามาก โดยมีอัตราตีกลับเกือบ 2 เท่าและอ่านหน้าเว็บได้มากกว่าครึ่งเมื่อเทียบกับผู้ใช้ที่ชื่นชอบ "แบบสว่าง"

โหมดการแสดงผล อัตราตีกลับ จำนวนหน้าเว็บต่อเซสชัน
ต้องการธีมแสง 13.20% 7.42
ชอบธีมมืด 24.12% 4.68

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

ขั้นตอนถัดไป Terra จึงตัดสินใจใช้กลยุทธ์ "ธีมสีเข้ม" เพื่อดูว่าจะปรับปรุงการมีส่วนร่วมของกลุ่มผู้ใช้ที่ชอบธีมสีเข้มได้หรือไม่

การใช้ธีมมืด

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

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

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

นอกเหนือจากกลยุทธ์นี้ ยังมีตัวเลือกการกำหนดค่าเพิ่มเติมในหน้าจอ "การตั้งค่า" ซึ่งผู้ใช้สามารถเลือกได้ว่าต้องการใช้ธีม "สว่าง" "มืด" หรือต้องการใช้การตั้งค่าอุปกรณ์พื้นฐาน

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

"โหมดกลางคืน" ของ Terra จะมีลักษณะดังนี้

ภาพหน้าจอของธีมมืดของ Terra
ธีมมืดของ Terra หรือ "โหมดกลางคืน"

การวัดผลลัพธ์ของธีมมืดของ Terra

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

อุปกรณ์เคลื่อนที่ (Android)

แม้ว่าอัตราตีกลับจะยังคงใกล้เคียงกัน แต่หน้าเว็บและเซสชันเพิ่มขึ้นเกือบ 2 เท่า (จาก 2.47 เป็น 5.24) เมื่อผู้ใช้เห็นธีมมืด

โหมดการแสดงผล อัตราตีกลับ จำนวนหน้าเว็บต่อเซสชัน
ต้องการธีมแสง 26.91% 2.47
ชอบธีมมืด 23.91% 5.24

    2X

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

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

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

โหมดการแสดงผล อัตราตีกลับ จำนวนหน้าเว็บต่อเซสชัน
ต้องการธีมแสง 27.5% 3.7
ชอบธีมมืด 10.82% 9.99

    60%

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

    170%

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

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

บทสรุป

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

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

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