كيف حسّنت Terra تفاعل المستخدمين بفضل "الوضع الداكن"

من خلال عرض مظهر داكن للمستخدمين الذين يفضّلون الوضع الداكن على أجهزتهم، خفّض تطبيق Terra معدّل الارتداد بنسبة% 60 وزاد عدد الصفحات المقروءة لكل جلسة بنسبة %170.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

شركة 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 تقريبًا من زيارات الويب تأتي من مستخدمين ضبطوا الإعداد "استخدام المظهر الداكن".

هذه بيانات مجمّعة، لذا يمكن أن تختلف النسبة الفعلية للمستخدمين الذين يفضّلون المظهر الداكن والذين يزورون موقعًا إلكترونيًا. لهذا السبب، لفهم حجم هذه المجموعة، من المستحسن إجراء قياس داخلي.

ينشئ الرمز التالي سمة "إحصاءات Google" لقياس أداء المستخدمين الذين يفضّلون 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 أنّ المستخدمين الذين يفضّلون "المظهر الداكن" يمكثون لفترة أقصر على أجهزة الكمبيوتر المكتبي، وذلك بسبب عدم توفّر مظهر داكن في موقعهم الإلكتروني.

كخطوة تالية، قرّرت "تيرا" العمل على استراتيجية "المظهر الداكن" لمعرفة ما إذا كان بإمكانها تحسين التفاعل مع مجموعة المستخدمين الذين يفضّلون المظهر الداكن.

تنفيذ مظهر داكن

تطبّق معظم المواقع الإلكترونية مظهرًا داكنًا باستخدام الاستراتيجية البسيطة الموضّحة سابقًا المتمثّلة في الاستماع إلى تغييرات الإعدادات التي يجريها المستخدم من خلال طلب الوسائط prefers-color-scheme وتغيير الأنماط استنادًا إلى ذلك.

قرّرت Terra منح المستخدم مزيدًا من التحكّم: عندما ترصد أنّه تم تفعيل الإعداد "استخدام الوضع الداكن" على أجهزته (من خلال طلب البحث عن الوسائط)، تعرض عليه رسالة تطلب منه تحديد ما إذا كان يريد التنقّل في "الوضع الليلي". ما دام المستخدم لا يرفض الطلب (بالنقر على الزر "تجاهل")، فإنّه يلتزم بإعداد نظام التشغيل للمستخدم ويطبّق مظهرًا داكنًا مخصّصًا:

وكمكمل لهذه الاستراتيجية، يوفّر التطبيق خيارات ضبط إضافية في شاشة "الإعدادات"، حيث يمكن للمستخدم تحديد ما إذا كان يفضّل صراحةً "الإضاءة الساطعة" أو "الإضاءة الداكنة" أو يريد الاعتماد على إعدادات الجهاز الأساسية.

في ما يلي كيفية ظهور "الوضع الليلي" في Terra:

قياس تأثير المظهر الداكن في Terra

لقياس تأثير المظهر الداكن، اختارت Terra مجموعة المستخدمين الذين فعّلوا الإعداد "استخدام المظهر الداكن" على أجهزتهم وقارنت مقاييس التفاعل عند عرض مظهر "فاتح" مقارنةً بمظهر "داكن". في ما يلي النتائج الخاصة بالأجهزة الجوّالة (Android) وأجهزة الكمبيوتر المكتبي (Windows):

الأجهزة الجوّالة (Android)

في حين ظلّت معدّلات الارتداد متشابهة، تضاعفت الصفحات والجلسات تقريبًا (من 2.47 إلى 5.24) عندما شاهد المستخدمون المظهر الداكن:

2_X

المزيد من الصفحات في كلّ جلسة

الكمبيوتر المكتبي (نظام التشغيل Windows)

تحسّن كلا المقياسَين عند عرض مظهر داكن: انخفض معدّل الارتداد من% 27.25 إلى% 10.82، وزاد عدد الصفحات لكل جلسة بمقدار ثلاثة أضعاف تقريبًا (من 3.7 إلى 9.99).

‫60_%

انخفاض معدّلات الارتداد

170_%

المزيد من الصفحات في كلّ جلسة

استنادًا إلى هذه البيانات، تمكّنت Terra من تأكيد فوائد استخدام المظهر الداكن للمستخدمين، وقررت مواصلة الحفاظ عليه كميزة أساسية للموقع الإلكتروني.

الخاتمة

"الوضع الداكن" هو إعداد مفضّل يمكن للمستخدمين تفعيله على أجهزتهم لتغيير نمط الشاشات إلى مظاهر داكنة. وقد أظهرت هذه التقنية فوائد من تجربة المستخدم ومن جوانب مختلفة من أجهزة المستخدم، مثل توفير عمر البطارية.

في هذه المقالة، لاحظنا أنّ توفير مظهر داكن مخصّص ساهم في تحسين مقاييس التفاعل لمجموعة مستخدمي Terra الذين تم تفعيل إعداد "الوضع الداكن" المفضّل لديهم على أجهزتهم.

وهذه هي الطريقة التي ننصح بها الشركات التي لديها الموارد اللازمة لتنفيذ مظهر داكن بديل. وبالنسبة إلى المستخدمين الذين ليس لديهم الوقت للاستثمار في مثل هذه الميزة، يبدأ Chrome في طرح ميزة "الوضع الداكن التلقائي".