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

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

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 วิศวกรอาวุโสฝ่ายพัฒนาซอฟต์แวร์