איך Terra שיפרה את מעורבות המשתמשים הודות למצב כהה

ב-Terra הראו עיצוב כהה למשתמשים שמעדיפים את מצב התאורה הכהה במכשירים שלהם, וכך צמצמו את שיעור העזיבה ב-60% והגדילו את מספר הדפים שקראו בכל סשן ב-170%.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra, אחת מחברות המדיה הגדולות ביותר בברזיל עם 75 מיליון משתמשים בחודש, הציגה עיצוב כהה בהתאמה אישית למשתמשים שמעדיפים מצב כהה, וכך צמצמה את שיעור העזיבה ב-60% והגדילה את מספר הדפים שנקראים בכל סשן ב-170% במחשב.

במאמר הזה נסביר את התהליך שעברו ב-Terra, החל מזיהוי הגודל של הקבוצה המשויכת ל'מצב כהה', דרך החלת נושא כהה בהתאמה אישית, וכלה במדידת ההשפעה של ההטמעה הזו על מדדי ה-KPI העיקריים שלהם.

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) כשהמשתמשים נחשפו לעיצוב כהה:

2_X

יותר דפים לביקור

מחשב (Windows)

שני המדדים השתפרו כשהוצג עיצוב כהה: שיעור העזיבה ירד מ-27.25% ל-10.82%, ומספר הדפים בכל סשן כמעט שילש (מ-3.7 ל-9.99).

60_%

הפחתת שיעורי העזיבה

170_%

יותר דפים לביקור

על סמך הנתונים האלה, ב-Terra יכלו לאשר את היתרונות של עיצוב כהה למשתמשים, והחליטו להמשיך לתחזק אותו כתכונה מרכזית באתר.

סיכום

מצב כהה הוא העדפה שמשתמשים יכולים להפעיל במכשירים שלהם כדי לשנות את הסגנון של המסכים לעיצובים כהים. טכניקה זו מניבה יתרונות לחוויית המשתמש ולמאפיינים שונים של המכשירים של המשתמשים, כמו חיסכון בחיי הסוללה.

במאמר הזה ראינו איך הוספת עיצוב כהה בהתאמה אישית שיפרה את מדדי ההתעניינות של קבוצת המשתמשים ב-Terra שהגדרת המצב הכהה המועדפת שלהם מופעלת במכשירים שלהם.

זו הגישה המומלצת לחברות שיש להן את המשאבים להטמיע עיצוב כהה חלופי. אם אין לכם זמן להשקיע בתכונה כזו, אנחנו מתחילים להשיק ב-Chrome תכונה של מצב כהה אוטומטי.