من خلال عرض مظهر داكن للمستخدمين الذين يفضّلون الوضع الداكن على أجهزتهم، نجحت Terra في تقليل معدل الارتداد بنسبة 60% وزيادة عدد الصفحات المقروءة لكل جلسة بنسبة 170%.
شركة Terra هي إحدى أكبر الشركات الإعلامية في البرازيل التي تضم 75 مليون مستخدم شهريًا، نجحت في خفض معدل الارتداد بنسبة 60% وزيادة عدد الصفحات المقروءة في كل جلسة بنسبة 170% على أجهزة الكمبيوتر المكتبي للمستخدمين الذين يفضلون الوضع الداكن من خلال توفير مظهر داكن مخصص.
في هذه المقالة، سنحلّل رحلة Terra بدءًا من تحديد حجم المجموعة النموذجية "الوضع الداكن" وصولاً إلى تطبيق مظهر داكن مخصّص، وأخيرًا قياس تأثير هذا التنفيذ في مؤشرات الأداء الرئيسية الأساسية.
%60
تقليل في معدلات الارتداد
%170
مزيد من الصفحات في كل جلسة
ما هو "الوضع الداكن"؟
في السابق، تُعرَض واجهات المستخدم على الأجهزة من خلال "الوضع الفاتح"، ما يعني عادةً عرض نص باللون الأسود على الواجهات ذات اللون الفاتح. والخيار البديل هو "الوضع الداكن" مع نص فاتح على خلفية داكنة، مثل الرمادي أو الأسود.
يتميّز "الوضع الداكن" بمزايا لتحسين تجربة المستخدم. يفضله بعض الأشخاص لأسباب جمالية أو سهولة الوصول. وله مزايا أخرى، مثل الحفاظ على عمر البطارية في الأجهزة. يمكن للمستخدمين التعبير عن أنّهم يفضّلون الوضع الداكن من خلال أحد الإعدادات في أجهزتهم وذلك حسب نظام التشغيل. على سبيل المثال، تعرض لقطة الشاشة التالية كيف يبدو خيار ضبط المظهر الداكن في الأجهزة التي تعمل بنظام Android Q:
لتقديم تجربة أفضل للمستخدمين الذين يفضّلون "الوضع الداكن"، يمكنك استخدام طلب البحث عن الوسائط 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 هذا الرمز في موقعها وقارنت سلوك المجموعتين على الأجهزة الجوّالة (Android) وأجهزة الكمبيوتر المكتبي (Windows). في تلك اللحظة، لم تكن Terra توفّر مظهرًا داكنًا مخصّصًا، لذلك كانت أهداف هذه التجربة هي:
- تحديد حجم مجموعة المستخدمين الذين يفضلون اللون الداكن.
- تحديد الأنماط: على سبيل المثال، هل يغادر المستخدمون الذين يفضّلون الألوان الداكنة الموقع الإلكتروني بسرعة أكبر مقارنةً بمن يفضّلون الإضاءة؟
بالاستناد إلى ذلك، يمكنك اتّخاذ قرارات مدروسة، مثلاً ما إذا كان من الضروري توفير مظهر داكن مخصّص. في ما يلي النتائج التي حصلت عليها Terra بعد الاختبار لمدة 14 يومًا:
الأجهزة الجوّالة (Android)
في الأجهزة الجوّالة (نظام التشغيل Android)، لم تُظهر أرقام معدّل الارتداد والصفحات لكل جلسة اختلافات كبيرة بين المستخدمين الذين يفضّلون "الضوء"، مقارنةً بالمستخدمين الذين يفضّلون "الداكنة":
الكمبيوتر المكتبي (نظام التشغيل Windows)
في أجهزة الكمبيوتر المكتبي (نظام التشغيل Windows)، بقيت مجموعة المستخدمين الذين يفضّلون "المظهر الداكن" أقل بكثير على الموقع الإلكتروني: معدل الارتداد وقرأوا أكثر بقليل من نصف الصفحات مقارنةً بالمستخدمين الذين يفضّلون "الضوء":
استنادًا إلى هذه البيانات، افترضت Terra أنّ المستخدمين الذين يفضّلون استخدام "المظهر الداكن" يبقون أقل استخدامًا على أجهزة الكمبيوتر المكتبي، وذلك بسبب عدم توفّر المظهر الداكن في موقعهم الإلكتروني.
كخطوة تالية، قرّرت Terra استخدام استراتيجية "المظهر الداكن" لمعرفة ما إذا كان بإمكانها تحسين التفاعل مع مجموعة المستخدمين الذين يفضّلون المظهر الداكن.
تطبيق مظهر داكن
تستخدم معظم المواقع الإلكترونية مظهرًا داكنًا باستخدام الاستراتيجية البسيطة الموضّحة سابقًا والتي كانت تتمثل في الاستماع إلى التغييرات التي أجراها المستخدم على الإعدادات من خلال الاستعلام عن الوسائط في prefers-color-scheme وتغيير الأنماط بناءً على ذلك.
قرّرت Terra منح المستخدم مزيدًا من التحكّم: فعندما يتم رصد تفعيل خيار "تفضيل الوضع الداكن" على أجهزته (عبر الاستعلام عن الوسائط)، يتم عرض إشعار للمستخدم يسأله ما إذا كان يريد الانتقال في "الوضع الليلي". طالما أنّ المستخدم لا يرفض الطلب (بالنقر على زر "تجاهل")، فهو يراعي إعدادات نظام التشغيل لدى المستخدم ويطبّق مظهرًا داكنًا مخصّصًا:
وتتكامل هذه الاستراتيجية مع توفير خيارات ضبط إضافية في شاشة "الإعدادات"، والتي يمكن للمستخدم من خلالها تحديد ما إذا كان يفضّل صراحةً "الإضاءة" أو "الداكنة" أو يريد الاعتماد على إعدادات الجهاز الأساسية.
هكذا يبدو "الوضع الليلي" في Terra:
قياس تأثير المظهر الداكن لـ Terra
لقياس تأثير المظهر الداكن، اختارت Terra مجموعة من المستخدمين الذين فعّلوا الإعداد "تفضيل غامق" على أجهزتهم وقارنت مقاييس التفاعل عند عرض مظهر "فاتح" مقابل "مظهر داكن". في ما يلي النتائج المخصّصة للأجهزة الجوّالة (Android) وأجهزة الكمبيوتر المكتبي (Windows):
الأجهزة الجوّالة (Android)
وفي حين ظلّت معدّلات الارتداد متشابهة، فقد تضاعفت الصفحات والجلسات تقريبًا (من 2.47 إلى 5.24) عند ظهور مظهر داكن للمستخدِمين:
2X
مزيد من الصفحات في كل جلسة
الكمبيوتر المكتبي (نظام التشغيل Windows)
تحسن كلا المقياسين عند عرض مظهر داكن: ارتفع معدلات الارتداد من 27.25% إلى 10.82% وتضاعفت عدد الصفحات في الجلسة ثلاث مرات تقريبًا (من 3.7 إلى 9.99).
%60
تقليل في معدلات الارتداد
%170
مزيد من الصفحات في كل جلسة
استنادًا إلى هذه البيانات، تمكنت Terra من تأكيد المزايا التي سيحصل عليها المستخدمون من تنفيذ المظهر الداكن، وقرّرت مواصلة الحفاظ عليه كميزة أساسية في الموقع الإلكتروني.
الخلاصة
"الوضع الداكن" هو خيار مفضَّل يمكن للمستخدمين تفعيله على أجهزتهم لتغيير نمط الشاشات إلى مظاهر داكنة. وقد أبلغ هذا الأسلوب عن فوائد تجربة المستخدم وجوانب مختلفة من أجهزة المستخدم، مثل توفير عمر البطارية.
في هذه المقالة، رأينا كيف أدى توفير مظهر داكن مخصّص إلى تحسين مقاييس التفاعل لمجموعة مستخدمي Terra الذين فعّلوا إعداد الوضع الداكن المفضّل على أجهزتهم.
وبالنسبة إلى الشركات التي تمتلك الموارد اللازمة لتنفيذ مظهر داكن بديل، هذا هو الأسلوب الموصى به. بالنسبة إلى المستخدمين الذين لا يتوفّر لديهم الوقت لاستثمار هذه الميزة، سيبدأ Chrome في طرح ميزة "الوضع الداكن التلقائي".