ไม่ใช่แค่โทรศัพท์: JioHotstar สร้าง UX แบบปรับเปลี่ยนได้ได้อย่างไร

JioHotstar เป็นแพลตฟอร์มสตรีมมิงชั้นนำในอินเดีย ซึ่งให้บริการแก่ฐานผู้ใช้มากกว่า 400 ล้านคน แพลตฟอร์มนี้ดำเนินการในระดับขนาดใหญ่ โดยมีคลังเนื้อหาขนาดใหญ่ซึ่งครอบคลุมวิดีโอออนดีมานด์ (VOD) กว่า 330,000 ชั่วโมง และการถ่ายทอดสดการแข่งขันกีฬาสำคัญๆ แบบเรียลไทม์

JioHotstar ได้ยกระดับประสบการณ์การรับชมด้วยการเพิ่มประสิทธิภาพแอปสำหรับอุปกรณ์พับได้และแท็บเล็ต เพื่อให้มั่นใจว่าผู้ชมจำนวนมากจะได้รับประสบการณ์ระดับพรีเมียม โดยทำได้ด้วยการปฏิบัติตามคำแนะนำเกี่ยวกับแอปแบบปรับได้ของ Google และใช้ประโยชน์จากแหล่งข้อมูลต่างๆ เช่น ตัวอย่าง Codelab Cookbook และเอกสารประกอบ เพื่อช่วยสร้างประสบการณ์การใช้งานที่ราบรื่นและน่าสนใจอย่างสม่ำเสมอในจอแสดงผลทุกขนาด

ความท้าทายของ JioHotstar ในการแสดงบนหน้าจอขนาดใหญ่

JioHotstar มอบประสบการณ์การใช้งานที่ยอดเยี่ยมบนโทรศัพท์มาตรฐาน และทีมต้องการใช้ประโยชน์จากอุปกรณ์รูปแบบใหม่ๆ ในการเริ่มต้น ทีมได้ประเมินแอปของตนตามหลักเกณฑ์ด้านคุณภาพของแอปบนหน้าจอขนาดใหญ่เพื่อทำความเข้าใจการเพิ่มประสิทธิภาพที่จำเป็นในการขยายประสบการณ์ของผู้ใช้ไปยังอุปกรณ์พับได้และแท็บเล็ต เพื่อให้ได้สถานะแอปบนหน้าจอขนาดใหญ่ระดับ 1 ทีมได้ใช้การอัปเดตเชิงกลยุทธ์ 2 รายการเพื่อปรับแอปให้เข้ากับอุปกรณ์รูปแบบต่างๆ และสร้างความแตกต่างบนอุปกรณ์พับได้ ด้วยการรับมือกับความท้าทายที่ไม่เหมือนใครซึ่งเกิดจากอุปกรณ์พับได้และแท็บเล็ต JioHotstar จึงมุ่งมั่นที่จะมอบประสบการณ์คุณภาพสูงและสมจริงในทุกขนาดการแสดงผลและสัดส่วนภาพ

สิ่งที่พวกเขาต้องทำ

อินเทอร์เฟซผู้ใช้ของ JioHotstar ซึ่งออกแบบมาเพื่อการแสดงผลบนโทรศัพท์มาตรฐานเป็นหลัก พบปัญหาในการปรับสัดส่วนภาพฮีโร่ เมนู และหน้าจอรายการให้เข้ากับขนาดและความละเอียดของหน้าจอที่หลากหลายในรูปแบบอื่นๆ ซึ่งมักจะทำให้เกิดการครอบตัดรูปภาพ การใส่แถบดำบนและล่าง ความละเอียดต่ำ และพื้นที่ที่ไม่ได้ใช้ โดยเฉพาะในโหมดแนวนอน JioHotstar มุ่งเน้นการปรับแต่ง UI เพื่อให้มั่นใจว่าเลย์เอาต์จะมีความยืดหยุ่น การแสดงรูปภาพ และการนำทางจะได้รับการปรับให้เหมาะสมในอุปกรณ์หลากหลายประเภท เพื่อช่วยให้ใช้ความสามารถของแท็บเล็ตและอุปกรณ์พับได้อย่างเต็มที่ และมอบประสบการณ์ของผู้ใช้ที่ได้รับการเพิ่มประสิทธิภาพในอุปกรณ์ประเภทต่างๆ เหล่านี้

สิ่งที่พวกเขาทำ

JioHotstar ได้ริเริ่มที่จะปรับปรุงแอปของตนโดยการผสานรวม WindowSizeClass และสร้างเลย์เอาต์ที่เพิ่มประสิทธิภาพสำหรับความกว้างแบบกะทัดรัด ปานกลาง และขยาย เพื่อให้รับชมบนหน้าจอขนาดใหญ่ได้ดียิ่งขึ้น ซึ่งช่วยให้แอปปรับอินเทอร์เฟซผู้ใช้ให้เข้ากับขนาดหน้าจอและสัดส่วนภาพต่างๆ ได้ จึงมั่นใจได้ว่า UI จะสอดคล้องกันและดึงดูดสายตาในอุปกรณ์ต่างๆ

JioHotstar ทำตามรูปแบบนี้โดยใช้ไลบรารีแบบปรับอัตโนมัติของ Material 3 เพื่อดูว่าแอปมีพื้นที่ว่างเท่าใด ก่อนอื่น ให้เรียกใช้ฟังก์ชัน currentWindowAdaptiveInfo() จากนั้นใช้เลย์เอาต์ใหม่ตามความเหมาะสมสำหรับคลาสขนาดหน้าต่าง 3 คลาส

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 สามารถมอบประสบการณ์ระดับพรีเมียมที่เหมาะสำหรับอุปกรณ์แบบพับได้โดยเฉพาะ นั่นคือโหมดตั้งโต๊ะ ฟีเจอร์นี้จะย้ายวิดีโอเพลเยอร์ไปที่ครึ่งบนของหน้าจอและตัวควบคุมวิดีโอไปที่ครึ่งล่างของหน้าจออย่างสะดวกเมื่อพับอุปกรณ์แบบพับได้เพียงครึ่งเดียวเพื่อประสบการณ์การใช้งานแบบแฮนด์ฟรี

หากต้องการดำเนินการนี้ คุณสามารถใช้ไลบรารี Adaptive ของ Material 3 เช่นกัน โดยใช้ currentWindowAdaptiveInfo() เดียวกันเพื่อค้นหาโหมดบนโต๊ะ เมื่อถืออุปกรณ์ในโหมดบนโต๊ะแล้ว คุณจะเปลี่ยนเลย์เอาต์ให้ตรงกับครึ่งบนและครึ่งล่างของท่าทางได้โดยใช้คอลัมน์เพื่อวางเพลเยอร์ในครึ่งบนและคอนโทรลเลอร์ในครึ่งล่าง ดังนี้

val isTabletTop = currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode) {
   Column {
       Player(Modifier.weight(1f))
       Controls(Modifier.weight(1f))
   }
} else {
   usualPlayerLayout()
}

ตอนนี้ JioHotstar เป็นไปตามหลักเกณฑ์ด้านคุณภาพสำหรับแอปบนหน้าจอขนาดใหญ่สำหรับระดับที่ 1 แล้ว ทีมได้ใช้คำแนะนำเกี่ยวกับแอปที่ปรับเปลี่ยนได้ โดยใช้ตัวอย่าง Codelab Cookbook และเอกสารประกอบเพื่อรวมคำแนะนำเหล่านี้

JioHotstar ได้เพิ่มขนาดเป้าหมายการสัมผัสเป็น 48dp ตามที่แนะนำในหน้าการค้นพบวิดีโอ เพื่อปรับปรุงประสบการณ์ของผู้ใช้ให้ดียิ่งขึ้น และรับประกันการเข้าถึงในอุปกรณ์ที่มีหน้าจอขนาดใหญ่ ตอนนี้หน้ารายละเอียดวิดีโอของ JioHotstar สามารถปรับเปลี่ยนได้ตามขนาดและการวางแนวหน้าจอ นอกจากนี้ JioHotstar ยังได้ก้าวข้ามการปรับขนาดรูปภาพแบบธรรมดาไปใช้คลาสขนาดหน้าต่างเพื่อตรวจหาขนาดและความหนาแน่นของหน้าต่างแบบเรียลไทม์ และโหลดรูปภาพหลักที่เหมาะสมที่สุดสำหรับรูปแบบของอุปกรณ์แต่ละรูปแบบ ซึ่งช่วยเพิ่มความเที่ยงตรงของภาพ นอกจากนี้ยังมีการปรับปรุงการนำทางด้วย โดยเลย์เอาต์จะปรับให้เหมาะกับขนาดหน้าจอต่างๆ

ตอนนี้ผู้ใช้สามารถดูเนื้อหาโปรดจาก JioHotstar บนอุปกรณ์หน้าจอขนาดใหญ่พร้อมประสบการณ์การรับชมที่ได้รับการปรับปรุงและเพิ่มประสิทธิภาพอย่างมาก

"การบรรลุสถานะแอปหน้าจอขนาดใหญ่ระดับ 1 กับ Google เป็นก้าวสำคัญที่แสดงให้เห็นถึงความแข็งแกร่งของวิสัยทัศน์ร่วมของเรา ที่ JioHotstar เราเชื่อมาโดยตลอดว่าการเพิ่มประสิทธิภาพสำหรับอุปกรณ์หน้าจอขนาดใหญ่ไม่ได้มีแค่การปรับเปลี่ยน แต่เป็นการยกระดับประสบการณ์การรับชมสำหรับผู้ชมที่หันมาใช้โทรศัพท์แบบพับได้ แท็บเล็ต และทีวีที่เชื่อมต่ออินเทอร์เน็ตอย่างรวดเร็ว

การใช้ประโยชน์จากไลบรารีและคำแนะนำของ Jetpack จาก Google ช่วยให้เราสามารถรวมข้อมูลเชิงลึกเกี่ยวกับการบริโภคเนื้อหากับความเชี่ยวชาญด้านนวัตกรรมแพลตฟอร์มของ Google การทำงานร่วมกันนี้ช่วยให้ทั้ง 2 ทีมก้าวข้ามขีดจำกัด อุดช่องโหว่ และร่วมกันสร้างประสบการณ์ที่ราบรื่นและสมจริงในทุกขนาดหน้าจอ

เราภูมิใจที่ได้ร่วมกันมอบประสบการณ์ที่ดียิ่งขึ้นนี้แก่ผู้ใช้หลายล้านคน และสร้างมาตรฐานใหม่ในวิธีที่อินเดียและทั่วโลกรับชมสตรีมมิง"
- Sonu Sanjeev วิศวกรอาวุโสฝ่ายพัฒนาซอฟต์แวร์