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

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

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

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