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

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

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

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

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

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