Más allá de los teléfonos: cómo JioHotstar creó una experiencia de usuario adaptativa

JioHotstar es una plataforma de streaming líder en la India que presta servicio a más de 400 millones de usuarios. La plataforma opera a gran escala, ya que cuenta con una amplia biblioteca de contenido que incluye más de 330.000 horas de vídeo bajo demanda (VOD) y ofrece en tiempo real los principales eventos deportivos.

Para ofrecer una experiencia premium a su amplia audiencia, JioHotstar ha mejorado la experiencia de visualización optimizando su aplicación para dispositivos plegables y tablets. Para ello, siguieron las directrices de Google sobre aplicaciones adaptables y utilizaron recursos como ejemplos, codelabs, recetarios y documentación para crear una experiencia coherente, fluida y atractiva en todos los tamaños de pantalla.

El reto de JioHotstar en pantallas grandes

JioHotstar ofrecía una experiencia de usuario excelente en teléfonos estándar y el equipo quería aprovechar los nuevos factores de forma. Para empezar, el equipo evaluó su aplicación según las directrices de calidad de aplicaciones para pantallas grandes para saber qué optimizaciones eran necesarias para ampliar la experiencia de usuario a tablets y plegables. Para conseguir el estado de aplicación para pantallas grandes de nivel 1, el equipo implementó dos actualizaciones estratégicas para adaptar la aplicación a varios formatos y diferenciarla en dispositivos plegables. Al abordar los retos únicos que plantean los dispositivos plegables y las tablets, JioHotstar pretende ofrecer una experiencia inmersiva y de alta calidad en pantallas de todos los tamaños y relaciones de aspecto.

Qué tenían que hacer

La interfaz de usuario de JioHotstar, diseñada principalmente para pantallas de teléfonos estándar, tuvo problemas para adaptar las relaciones de aspecto de las imágenes destacadas, los menús y las pantallas de series a los diferentes tamaños y resoluciones de pantalla de otros factores de forma. Esto a menudo provocaba que las imágenes se recortaran, se mostraran con bandas negras, tuvieran una baja resolución y no se aprovechara el espacio, sobre todo en el modo de vista horizontal. Para aprovechar al máximo las funciones de las tablets y los dispositivos plegables, y ofrecer una experiencia de usuario optimizada en estos tipos de dispositivos, JioHotstar se centró en perfeccionar la interfaz de usuario para garantizar una flexibilidad de diseño, una renderización de imágenes y una navegación óptimas en una gama más amplia de dispositivos.

Qué hicieron

Para ofrecer una mejor experiencia de visualización en pantallas grandes, JioHotstar tomó la iniciativa de mejorar su aplicación incorporando WindowSizeClass y creando diseños optimizados para anchuras compactas, medias y extendidas. Esto permitió que la aplicación adaptara su interfaz de usuario a diferentes dimensiones de pantalla y relaciones de aspecto, lo que garantizó una interfaz de usuario coherente y atractiva en distintos dispositivos.

JioHotstar siguió este patrón usando la biblioteca adaptativa Material 3 para saber cuánto espacio tenía disponible la aplicación. Primero, invoca la función currentWindowAdaptiveInfo() y, después, usa los nuevos diseños según 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 de mayor a menor, ya que la API comprueba internamente si el ancho es mayor o igual que el valor, por lo que cualquier ancho que sea al menos mayor o igual que EXPANDED siempre será mayor que MEDIUM.

JioHotstar puede ofrecer una experiencia premium única para dispositivos plegables: el modo Mesa. Esta función cambia cómodamente la ubicación del reproductor de vídeo a la mitad superior de la pantalla y los controles de vídeo a la mitad inferior cuando un dispositivo plegable se pliega parcialmente para ofrecer una experiencia de manos libres.

Para ello, también se puede usar la misma biblioteca adaptativa de Material 3 y la misma función currentWindowAdaptiveInfo() para consultar el modo de mesa. Una vez que el dispositivo esté en el modo Mesa, se puede cambiar el diseño para que coincida con la mitad superior e inferior de la postura. Para ello, se puede usar una columna para colocar el reproductor en la mitad superior y los mandos en la inferior:

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

JioHotstar ahora cumple las directrices de calidad de las aplicaciones para pantallas grandes de nivel 1. El equipo aprovechó las directrices de aplicaciones adaptativas y utilizó ejemplos, codelabs, libros de cocina y documentación para incorporar estas recomendaciones.

Para mejorar aún más la experiencia de usuario, JioHotstar aumentó el tamaño de las áreas táctiles a 48 dp, que es el tamaño recomendado, en las páginas de descubrimiento de vídeos, lo que garantiza la accesibilidad en dispositivos con pantallas grandes. Su página de detalles del vídeo ahora es adaptable y se ajusta a los tamaños y las orientaciones de las pantallas. En lugar de limitarse a escalar las imágenes, 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 destacada más adecuada para cada factor de forma, lo que les ayudó a mejorar la fidelidad visual. También se ha mejorado la navegación, con diseños que se adaptan a diferentes tamaños de pantalla.

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

"Conseguir el nivel 1 de aplicaciones para pantallas grandes con Google es un hito que refleja la solidez de nuestra visión compartida. En JioHotstar, siempre hemos creído que optimizar el contenido para dispositivos con pantallas grandes va más allá de la adaptabilidad. Se trata de mejorar la experiencia de visualización de los usuarios que están adoptando rápidamente los dispositivos plegables, las tablets y las televisiones conectadas.

Gracias a las bibliotecas y guías de Jetpack de Google, hemos podido combinar nuestras estadísticas sobre el consumo de contenido con su experiencia en innovación de plataformas. Esta colaboración permitió a ambos equipos superar los límites, abordar las carencias y crear conjuntamente una experiencia fluida e inmersiva en todos los tamaños de pantalla.

Estamos orgullosos de ofrecer esta experiencia mejorada a millones de usuarios y de establecer nuevos estándares en la forma en que la India y el resto del mundo disfrutan del streaming".
- Sonu Sanjeev, ingeniero sénior de desarrollo de software