Más allá de los teléfonos: Cómo JioHotstar creó una UX adaptable

JioHotstar es una plataforma de transmisión líder en la India que presta servicios a una base de usuarios que supera los 400 millones. Con una amplia biblioteca de contenido que abarca más de 330,000 horas de video on demand (VOD) y la transmisión en tiempo real de los principales eventos deportivos, la plataforma opera a gran escala.

Para garantizar una experiencia de calidad para su amplio público, JioHotstar mejoró la experiencia de visualización optimizando su app para dispositivos plegables y tablets. Para ello, siguió los lineamientos de Google sobre apps adaptables y utilizó recursos como muestras, codelabs, libros de cocina y documentación para crear una experiencia coherente, fluida y atractiva en todos los tamaños de pantalla.

El desafío de JioHotstar en pantallas grandes

JioHotstar ofrecía una excelente experiencia del usuario en teléfonos estándar, y el equipo quería aprovechar los nuevos factores de forma. Para comenzar, el equipo evaluó su app en función de los lineamientos de calidad de las apps para pantallas grandes para comprender las optimizaciones necesarias para extender la experiencia del usuario a dispositivos plegables y tablets. Para alcanzar el estado de app para pantallas grandes de Nivel 1, el equipo implementó dos actualizaciones estratégicas para adaptar la app a varios factores de forma y diferenciarse en dispositivos plegables. Al abordar los desafíos únicos que plantean los dispositivos plegables y las tablets, JioHotstar tiene como objetivo ofrecer una experiencia envolvente y de alta calidad en todos los tamaños de pantalla y relaciones de aspecto.

Qué debían hacer

La interfaz de usuario de JioHotstar, diseñada principalmente para pantallas de teléfonos estándar, tuvo dificultades para adaptar las relaciones de aspecto de la imagen principal, los menús y las pantallas de programas a los diversos tamaños y resoluciones de pantalla de otros factores de forma. Esto a menudo provocaba el recorte de imágenes, el efecto letterbox, la baja resolución y el espacio no utilizado, en particular en el modo horizontal. Para aprovechar al máximo las capacidades de las tablets y los dispositivos plegables, y ofrecer una experiencia del usuario optimizada en estos tipos de dispositivos, JioHotstar se centró en mejorar la IU para garantizar una flexibilidad óptima del diseño, la renderización de imágenes y la navegación en una gama más amplia de dispositivos.

Qué hicieron

Para mejorar la experiencia de visualización en pantallas grandes, JioHotstar tomó la iniciativa de mejorar su app incorporando WindowSizeClass y creando diseños optimizados para anchos compactos, medianos y extendidos. Esto permitió que la app adaptara su interfaz de usuario a varias dimensiones de pantalla y relaciones de aspecto, lo que garantiza una IU coherente y visualmente atractiva en diferentes dispositivos.

JioHotstar siguió este patrón con la biblioteca adaptable de Material 3 para saber cuánto espacio tiene disponible la app. Primero, invocó la función currentWindowAdaptiveInfo() y, luego, usó diseños nuevos según corresponda para las tres clases de tamaño de ventana:

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()
}

Los puntos de interrupción están en orden, del más grande al más pequeño, ya que, internamente, la API verifica si es mayor o igual que, por lo que cualquier ancho que sea al menos mayor o igual que EXPANDED siempre será mayor que MEDIUM.

JioHotstar puede proporcionar la experiencia premium exclusiva de los dispositivos plegables: el modo de mesa. Esta función reubica convenientemente el reproductor de video en la mitad superior de la pantalla y los controles de video en la mitad inferior cuando un dispositivo plegable se pliega parcialmente para una experiencia con manos libres.

Para lograr esto, también con la biblioteca adaptable de Material 3, se puede usar el mismo currentWindowAdaptiveInfo() para consultar el modo de mesa. Una vez que el dispositivo se mantiene en el modo de mesa, se puede realizar un cambio de diseño para que coincida con la mitad superior e inferior de la postura con una columna para colocar el reproductor en la mitad superior y los controladores en la mitad inferior:

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

JioHotstar ahora cumple con los lineamientos de calidad de las apps para pantallas grandes de Nivel 1. El equipo aprovechó los lineamientos de apps adaptables y utilizó muestras, codelabs, libros de cocina y documentación para incorporar estas recomendaciones.

Para mejorar aún más la experiencia del usuario, JioHotstar aumentó los tamaños de los objetivos táctiles al valor recomendado de 48 dp en las páginas de descubrimiento de videos, lo que garantiza la accesibilidad en dispositivos con pantallas grandes. Su página de detalles de video ahora es adaptable y se ajusta a los tamaños y las orientaciones de la pantalla. Dejaron de usar el simple ajuste de escala de imágenes y, en su lugar, aprovecharon las clases de tamaño de ventana para detectar el tamaño y la densidad de la ventana en tiempo real y cargar la imagen principal más adecuada para cada factor de forma, lo que ayuda a mejorar la fidelidad visual. También se mejoró la navegación, y los diseños se adaptaron para ajustarse a diferentes tamaños de pantalla.

Ahora, los usuarios pueden ver su contenido favorito de JioHotstar en dispositivos con pantallas grandes con una experiencia de visualización mejorada y altamente optimizada.

"Alcanzar el estado de app para pantallas grandes de Nivel 1 con Google es un hito que refleja la solidez de nuestra visión compartida. En JioHotstar, siempre creímos que la optimización para dispositivos con pantallas grandes va más allá de la adaptabilidad, se trata de mejorar la experiencia de visualización para los públicos que adoptan rápidamente dispositivos plegables, tablets y TVs conectadas.

Aprovechar las bibliotecas y guías de Jetpack de Google nos permitió combinar nuestras estadísticas sobre el consumo de contenido con su experiencia en innovación de plataformas. Esta colaboración permitió que ambos equipos superaran los límites, abordaran las brechas y crearan en conjunto una experiencia envolvente y fluida en todos los tamaños de pantalla.

Juntos, nos enorgullece ofrecer esta experiencia mejorada a millones de usuarios y establecer nuevos parámetros de referencia en la forma en que la India y el mundo experimentan la transmisión."
- Sonu Sanjeev, ingeniero sénior de Desarrollo de Software