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

JioHotstar es una plataforma de transmisión líder en India que presta servicios a una base de usuarios que supera los 400 millones. Con una vasta 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 premium a su vasto público, JioHotstar optimizó su app para dispositivos plegables y tablets, y así mejoró la experiencia de visualización. Para lograrlo, siguieron la guía de Google sobre apps adaptables y utilizaron recursos como muestras, codelabs, recetarios y documentación para ayudar a 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 según los lineamientos de calidad de las apps para pantallas grandes para comprender las optimizaciones necesarias para extender su experiencia del usuario a tablets y dispositivos plegables. 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 presentan los dispositivos plegables y las tablets, JioHotstar busca ofrecer una experiencia inmersiva 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 las imágenes de héroe, 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 letterboxing, la baja resolución y el espacio no utilizado, en especial en el modo horizontal. Para aprovechar al máximo las capacidades de las tablets y los dispositivos plegables, y brindar una experiencia del usuario optimizada en estos tipos de dispositivos, JioHotstar se enfocó en perfeccionar 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é hizo la empresa

Para brindar una mejor 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 garantizó 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, se invoca la función currentWindowAdaptiveInfo() y, luego, se usan los nuevos diseños 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 ordenados, del más grande al más pequeño, ya que, internamente, la API verifica con un valor 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 brindar la experiencia premium exclusiva de los dispositivos plegables: Modo de mesa. Esta función reubica de forma conveniente 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 brindar una experiencia sin usar las manos.

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 sostiene en el modo de mesa, se puede cambiar el diseño para que coincida con la mitad superior e inferior de la posición 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 del nivel 1. El equipo aprovechó la orientación sobre apps adaptables, utilizando muestras, codelabs, recetarios y documentación para incorporar estas recomendaciones.

Para mejorar aún más la experiencia del usuario, JioHotstar aumentó el tamaño de los objetivos táctiles a los 48 dp recomendados en las páginas de descubrimiento de videos, lo que garantiza la accesibilidad en dispositivos de pantalla grande. Ahora, su página de detalles del video es adaptable y se ajusta a los tamaños y las orientaciones de la pantalla. Fueron más allá del simple ajuste de escala de imágenes y, en cambio, 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 de héroe más adecuada para cada factor de forma, lo que ayudó 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 visual mejorada y altamente optimizada.

"Lograr 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, ya que se trata de mejorar la experiencia de visualización para el público que adopta rápidamente los dispositivos plegables, las tablets y las 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 la innovación de plataformas. Esta colaboración permitió que ambos equipos superaran los límites, abordaran las brechas y crearan en conjunto una experiencia fluida y envolvente en todos los tamaños de pantalla.

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