มากกว่าโทรศัพท์: JioHotstar สร้าง UX ที่ปรับเปลี่ยนตามอุปกรณ์ได้อย่างไร

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

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

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

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

สิ่งที่ต้องทำ

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

สิ่งที่ทำ

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

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

หากต้องการทำเช่นนี้ ให้ใช้ไลบรารี Material 3 Adaptive ด้วย โดยใช้ 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 บนอุปกรณ์หน้าจอขนาดใหญ่ด้วยประสบการณ์การรับชมที่ปรับปรุงแล้วและเพิ่มประสิทธิภาพอย่างมาก

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

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

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