چگونه Terra تعامل کاربر را به لطف حالت تاریک بهبود بخشید

Terra با نمایش یک تم تیره برای کاربرانی که حالت تاریک را در دستگاه های خود ترجیح می دهند، نرخ پرش را تا 60 درصد کاهش داد و صفحات خوانده شده در هر جلسه را 170 درصد افزایش داد.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra، یکی از بزرگترین شرکت های رسانه ای برزیل با 75 میلیون کاربر ماهانه، با ارائه یک تم تاریک سفارشی، نرخ پرش را 60 درصد کاهش داد و صفحات خوانده شده در هر جلسه را 170 درصد در دسکتاپ افزایش داد.

در این مقاله، ما سفر Terra را از شناسایی اندازه گروه «حالت تاریک» تا اعمال یک تم تاریک سفارشی و در نهایت اندازه‌گیری تأثیر این پیاده‌سازی بر KPIهای اصلی آن‌ها، تحلیل می‌کنیم.

60 _درصد

کاهش نرخ پرش

170 _%

صفحات بیشتر در هر جلسه

حالت تاریک چیست؟

از لحاظ تاریخی، رابط‌های کاربری در دستگاه‌ها در «حالت نور» نمایش داده می‌شوند، که معمولاً به معنای نمایش متن سیاه در بالای رابط‌های روشن است. گزینه جایگزین "حالت تاریک" است، با متن روشن در پس زمینه تیره، مانند خاکستری یا سیاه.

حالت تاریک مزایایی برای تجربه کاربر دارد. برخی افراد آن را به دلایل زیبایی شناختی یا دسترسی ترجیح می دهند. مزایای دیگری مانند حفظ عمر باتری در دستگاه ها دارد. کاربران می توانند بیان کنند که حالت تاریک را از طریق تنظیماتی در دستگاه های خود ترجیح می دهند که به سیستم عامل بستگی دارد . برای مثال، تصویر زیر نشان می‌دهد که گزینه پیکربندی تم تیره در دستگاه‌هایی که Android Q را اجرا می‌کنند چگونه است:

تنظیمات تم تیره اندروید Q.

برای ارائه تجربه بهتر به کاربرانی که «حالت تاریک» را ترجیح می‌دهند، می‌توانید از عبارت prefers-color-scheme media query با مقدار light یا dark استفاده کنید. این درخواست رسانه انتخاب کاربر را در دستگاه خود منعکس می کند. سپس می توانید یک تم تاریک سفارشی را برای کسانی که تیره را ترجیح می دهند بارگیری کنید. به عنوان مثال، با بارگذاری یک فایل CSS "تاریک" و تغییر مقادیری مانند رنگ فونت و پس زمینه. کد زیر نمونه ای از آن را نشان می دهد:

@media (prefers-color-scheme: dark) {
   // apply a dark theme
}

@media (prefers-color-scheme: light) {
  // apply a light theme
}

پشتیبانی مرورگر

• 76
• 79
• 67
• 12.1

منبع

توجه: این مقاله فقط تکنیک اعمال یک تم تیره سفارشی ارائه شده توسط توسعه دهنده را پوشش می دهد. کروم 96 نسخه آزمایشی اولیه را برای «تم های تیره خودکار» در اندروید معرفی کرده است که برای آن مرورگر یک تم تیره تولید شده به صورت خودکار را برای سایت هایی با مضمون روشن اعمال می کند، در صورتی که کاربر تم های تیره را در سیستم عامل انتخاب کرده باشد، بدون نیاز به ارائه توسط توسعه دهنده. سبک هایی برای آن برای اطلاعات بیشتر در مورد «حالت تاریک خودکار Chrome»، این مقاله را بررسی کنید.

شناسایی گروه‌های کاربر «روشن را ترجیح می‌دهد» در مقابل «تاریک».

در زمان نگارش این مقاله (دسامبر 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 این کد را در سایت خود پیاده سازی کرد و رفتار هر دو گروه را در دستگاه های موبایل (اندروید) و دسکتاپ (ویندوز) مقایسه کرد. در آن لحظه Terra یک تم تاریک سفارشی ارائه نمی کرد، بنابراین اهداف این آزمایش عبارت بودند از:

• تعیین اندازه گروهی از کاربرانی که تیره را ترجیح می دهند.
• شناسایی الگوها: به عنوان مثال، آیا کاربرانی که تاریکی را ترجیح می دهند در مقایسه با کسانی که نور را ترجیح می دهند سریعتر سایت را ترک می کنند؟

دانستن این موضوع می تواند به تصمیم گیری ها کمک کند، به عنوان مثال: اگر لازم است یک تم تاریک سفارشی ارائه کنید. اینها نتایجی است که Terra پس از آزمایش به مدت 14 روز به دست آورد:

موبایل (اندروید)

در مورد تلفن همراه (اندروید)، اعداد برای نرخ پرش و صفحات در هر جلسه تفاوت زیادی بین کاربرانی که "نور" را ترجیح می دهند، در مقایسه با کاربرانی که "تاریک" را ترجیح می دهند نشان نمی دهد:

حالت نمایش	نرخ پرش	صفحات در هر جلسه
نور را ترجیح می دهد	25.84٪	3.96
تاریکی را ترجیح می دهد	26.10٪	3.75

رومیزی (ویندوز)

در مورد دسکتاپ (ویندوز)، گروهی از کاربرانی که «تاریک» را ترجیح می‌دادند، بسیار کمتر در سایت ماندند: آنها تقریباً دو برابر نرخ پرش داشتند و کمی بیش از نیمی از صفحات را نسبت به کاربرانی که «نور» را ترجیح می‌دادند مطالعه می‌کردند . :

حالت نمایش	نرخ پرش	صفحات در هر جلسه
نور را ترجیح می دهد	13.20٪	7.42
تاریکی را ترجیح می دهد	24.12٪	4.68

بر اساس این داده‌ها، Terra این فرضیه را مطرح کرد که کاربرانی که «تاریک» را ترجیح می‌دهند، کمتر در دستگاه‌های دسکتاپ می‌مانند، به دلیل عدم پشتیبانی از یک تم تیره در سایت خود.

به عنوان گام بعدی، Terra تصمیم گرفت تا روی یک استراتژی «موضوع تاریک» کار کند تا ببیند آیا می‌تواند تعامل گروهی از کاربران را که تیره را ترجیح می‌دهند بهبود بخشد.

پیاده سازی یک تم تاریک

اکثر وب سایت ها با استفاده از استراتژی ساده ای که قبلاً نشان داده شده بود، گوش دادن به تغییرات پیکربندی کاربر از طریق پرس و جوی رسانه prefers-color-scheme و تغییر سبک ها بر اساس آن، یک تم تیره را پیاده سازی می کنند.

Terra تصمیم گرفت کنترل بیشتری را به کاربر بدهد: وقتی متوجه شدند که تنظیمات "ترجیح تاریک" را در دستگاه‌های خود روشن کرده‌اند (از طریق پرسش رسانه‌ای)، به آنها پیامی نشان می‌دهند تا از آنها بپرسند که آیا می‌خواهند در "شب" پیمایش کنند. حالت". تا زمانی که کاربر درخواست را رد نکند (با کلیک بر روی دکمه "نادیده گرفتن")، تنظیمات سیستم عامل کاربر را رعایت می کند و یک تم تیره سفارشی را اعمال می کند:

Terra پیامی را به کاربر نشان می‌دهد که از کاربر می‌پرسد آیا می‌خواهد در حالت تاریک حرکت کند، پس از اینکه تشخیص داد تاریکی را در دستگاه‌های خود ترجیح می‌دهند.

به عنوان مکمل این استراتژی، آنها گزینه های پیکربندی اضافی را در صفحه "تنظیمات" ارائه می دهند، جایی که کاربر می تواند تصمیم بگیرد که آیا صراحتاً "روشن"، "تاریک" را ترجیح می دهد یا می خواهد به تنظیمات اصلی دستگاه تکیه کند.

پیکربندی‌های تم Terra به کاربران این امکان را می‌دهد که بین تم‌های «تاریک» و «روشن» یکی را انتخاب کنند یا به تنظیمات دستگاه تکیه کنند.

"حالت شب" Terra به این شکل است:

تم تاریک Terra، "حالت شب".

توجه: ما از اسکرین شات های موبایل برای سادگی استفاده کرده ایم، اما Terra از همین استراتژی در دستگاه های موبایل و دسکتاپ استفاده کرده است.

اندازه گیری تاثیر تم تاریک Terra

برای اندازه‌گیری تأثیر تم تیره، Terra گروهی از کاربران را انتخاب کرد که تنظیمات «ترجیح ترجیح می‌دهند» را در دستگاه‌هایشان روشن کرده‌اند و معیارهای تعامل را هنگام نمایش تم «روشن» در مقابل «تاریک» مقایسه کردند. در اینجا نتایج برای موبایل (اندروید) و دسکتاپ (ویندوز) آمده است:

موبایل (اندروید)

در حالی که نرخ پرش مشابه باقی ماند، صفحات و جلسات تقریبا دو برابر شدند (از 2.47 به 5.24) زمانی که کاربران در معرض یک موضوع تیره قرار گرفتند:

حالت نمایش	نرخ پرش	صفحات در هر جلسه
نور را ترجیح می دهد	26.91٪	2.47
تاریکی را ترجیح می دهد	23.91٪	5.24

2 _X

صفحات بیشتر در هر جلسه

رومیزی (ویندوز)

هر دو معیار هنگام نمایش موضوع تیره بهبود یافتند: نرخ پرش از 27.25٪ به 10.82٪ و صفحات در هر جلسه تقریباً سه برابر شد (از 3.7 به 9.99).

حالت نمایش	نرخ پرش	صفحات در هر جلسه
نور را ترجیح می دهد	27.5٪	3.7
تاریکی را ترجیح می دهد	10.82%	9.99

60 _درصد

کاهش نرخ پرش

170 _%

صفحات بیشتر در هر جلسه

بر اساس این داده ها، Terra می تواند مزایای اجرای یک تم تیره را برای کاربران تایید کند و تصمیم گرفته است که آن را به عنوان یکی از ویژگی های اصلی سایت حفظ کند.

نتیجه گیری

حالت تاریک ترجیحی است که کاربران می توانند آن را در دستگاه های خود روشن کنند تا سبک صفحه نمایش ها را به تم های تیره تغییر دهند. این تکنیک مزایایی را از تجربه کاربری و جنبه های مختلف دستگاه های کاربر مانند صرفه جویی در عمر باتری گزارش کرده است.

در این مقاله دیدیم که چگونه ارائه یک تم تیره سفارشی معیارهای تعامل را برای گروهی از کاربران Terra که تنظیمات حالت تاریک ترجیحی را در دستگاه‌هایشان روشن کرده‌اند، بهبود می‌بخشد.

برای شرکت هایی که منابع لازم برای اجرای یک تم تاریک جایگزین را دارند، این رویکرد توصیه شده است. برای کسانی که زمان سرمایه گذاری روی چنین ویژگی را ندارند، Chrome شروع به ارائه یک ویژگی حالت تاریک خودکار کرده است.