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

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