מעבר לסמארטפון: איך JioHotstar שיפרה את חוויית המשתמש במכשירים מתקפלים ובטאבלטים

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

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

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

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

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

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