นอกเหนือจากสมาร์ทโฟน: วิธีที่ JioHotstar เพิ่มประสิทธิภาพ UX สำหรับอุปกรณ์แบบพับได้และแท็บเล็ต

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

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

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

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

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