מעבר לטלפונים: איך ב-JioHotstar בנו חוויית משתמש דינמית

‫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 במכשירים עם מסכים גדולים, וליהנות מחוויית צפייה משופרת ומותאמת במיוחד.

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

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

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