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

เหนือกว่าโทรศัพท์: วิธีที่ JioHotstar สร้าง UX ที่ปรับเปลี่ยนได้

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

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

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

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

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

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

ในการดำเนินการนี้ คุณสามารถใช้ 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 คู่มือ และเอกสารประกอบเพื่อรวมคำแนะนำเหล่านี้เข้าด้วยกัน

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

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

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

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

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