Beyond Phones: How JioHotstar Built an Adaptive UX

‫JioHotstar היא פלטפורמת סטרימינג מובילה בהודו, שמשרתת בסיס משתמשים של יותר מ-400 מיליון. הפלטפורמה פועלת בקנה מידה עצום, עם ספריית תוכן נרחבת שכוללת יותר מ-330,000 שעות של תוכן וידאו על פי דרישה (VOD), ועם שידור בזמן אמת של אירועי ספורט חשובים.

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

האתגר של JioHotstar בנושא מסכים גדולים

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

מה הם צריכים לעשות

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

מה הם עשו

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

אפליקציית JioHotstar פעלה לפי הדפוס הזה באמצעות ספריית Material 3 Adaptive כדי לדעת כמה מקום פנוי יש לאפליקציה. קודם מפעילים את הפונקציה currentWindowAdaptiveInfo()‎, ואז משתמשים בפריסות חדשות בהתאם לשלוש קטגוריות הגודל של החלונות:

val sizeClass = currentWindowAdaptiveInfo().windowSizeClass

if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
    showExpandedLayout()
} else if(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
    showMediumLayout()
} else {
    showCompactLayout()
}

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

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

כדי לעשות את זה, אפשר להשתמש באותה פונקציה currentWindowAdaptiveInfo() גם כדי לשאול על מצב שולחן, באמצעות ספריית Material 3 Adaptive. אחרי שמחזיקים את המכשיר במצב שולחני, אפשר לשנות את הפריסה כך שתתאים לחלק העליון ולחלק התחתון של התנוחה. לשם כך, מוסיפים עמודה כדי למקם את הנגן בחלק העליון ואת אמצעי הבקרה בחלק התחתון:

val isTabletTop = currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode) {
   Column {
       Player(Modifier.weight(1f))
       Controls(Modifier.weight(1f))
   }
} else {
   usualPlayerLayout()
}

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

כדי לשפר עוד יותר את חוויית המשתמש, ב-JioHotstar הגדילו את גודל משטחי המגע ל-48dp המומלץ בדפי גילוי הסרטונים, כדי להבטיח נגישות במכשירים עם מסכים גדולים. דף הפרטים של הסרטון שלהם מותאם עכשיו לגדלים ולכיוונים שונים של מסכים. במקום להסתמך על שינוי גודל פשוט של התמונה, הם השתמשו בסיווגים של גודל החלון כדי לזהות את גודל החלון והצפיפות בזמן אמת, ולטעון את תמונת הגיבור המתאימה ביותר לכל גורם צורה, וכך לשפר את נאמנות התמונה. שיפרנו גם את הניווט, והפריסות מותאמות לגדלים שונים של מסכים.

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

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

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

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