איך 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 לאחר בדיקה במשך 14 ימים:

נייד (Android)

במקרה של נייד (Android) הנתונים של שיעור העזיבה ומספר הדפים בסשן לא הראו הבדלים גדולים בין המשתמשים שמעדיפים "בהיר", בהשוואה למשתמשים שמעדיפים "כהה":

מחשב שולחני (Windows)

במקרה של מחשב שולחני (Windows), קבוצת המשתמשים שהעדיפו "כהה" באתר נשארה הרבה פחות: שיעור העזיבה היה כמעט פי שניים ויותר ממחצית הדפים באתר, בהשוואה למשתמשים שהעדיפו "בהיר":

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

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

הטמעת עיצוב כהה

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

ב-Tera החליטו לתת יותר שליטה למשתמש: כשהם מזהים שבמכשיר שלהם מופעלת ההגדרה 'העדפה כהה' (דרך שאילתת המדיה), הם מתבקשים לשאול אותם אם הם רוצים לנווט ב'מצב לילה'. כל עוד המשתמש לא דוחה את הבקשה (על ידי לחיצה על הלחצן 'התעלמות'), הוא פועל בהתאם להגדרה של מערכת ההפעלה של המשתמש ומחילים עיצוב כהה מותאם אישית:

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

כך נראה "מצב לילה" של Terra:

מדידת ההשפעה של העיצוב הכהה של טרה

כדי למדוד את ההשפעה של העיצוב הכהה, ב-Tera החליטו להשתמש בקבוצת המשתמשים שהפעילו במכשירים שלהם את ההגדרה 'העדפה כהה'. הם השוו בין מדדי התעניינות כשהעיצוב 'בהיר' היה 'בהיר' לבין מדדי ההתעניינות. אלו התוצאות לניידים (Android) ולמחשבים (Windows):

נייד (Android)

שיעורי העזיבה נשארו דומים, אבל מספר הדפים והסשנים כמעט הוכפל (מ-2.47 ל-5.24) כשהמשתמשים נחשפו לעיצוב כהה:

2_X

דפים נוספים לכל סשן

מחשב שולחני (Windows)

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

60_%

ירידה בשיעורי העזיבה

170_%

דפים נוספים לכל סשן

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

סיכום

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

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

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