Más allá del smartphone: Cómo JioHotstar optimizó su UX para tablets y dispositivos plegables

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, con 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 eventos deportivos importantes, la plataforma opera a gran escala.

Para garantizar una experiencia premium a su gran público, JioHotstar mejoró la experiencia de visualización optimizando su app para tablets y dispositivos plegables. Para lograrlo, siguieron la guía de apps adaptables de Google y utilizaron recursos como ejemplos, codelabs, guías y documentación para crear una experiencia fluida y atractiva en todos los tamaños de pantalla.

El desafío de JioHotstar para las 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 con el objetivo de 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 diferenciarla 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 hero, los menús y las pantallas de programas a los diversos tamaños y resoluciones de pantalla de otros factores de forma. Esto solía provocar el recorte de imágenes, el formato letterbox, la baja resolución y el espacio sin utilizar, en especial 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 enfocó en perfeccionar la IU 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é hizo la empresa

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 y relaciones de aspecto de pantalla, 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 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, de forma interna, la API verifica si hay 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 proporcionar la experiencia premium exclusiva de los dispositivos plegables: modo 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 está parcialmente plegado para brindar una experiencia sin usar las manos.

Para lograrlo, también con la biblioteca de Material 3 Adaptive, se puede usar la misma función currentWindowAdaptiveInfo() para consultar el modo mesa. Una vez que el dispositivo se sostiene en modo mesa, se puede cambiar el diseño para que coincida con la mitad superior y la inferior de la postura con una columna para colocar el reproductor en la mitad superior y los controles 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 de la app adaptable, con muestras, codelabs, guías 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 a los 48 dp recomendados en las páginas de descubrimiento de videos, lo que garantiza la accesibilidad en dispositivos con pantallas grandes. La página de detalles del video ahora es adaptable y se ajusta a los tamaños y las orientaciones de la pantalla. No se limitaron a un simple escalamiento de imágenes, sino que 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 hero más adecuada para cada factor de forma, lo que ayudó a mejorar la fidelidad visual. También se mejoró 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 con una experiencia de visualización mejorada y altamente optimizada.

"Alcanzar el nivel 1 de calidad de las apps para pantallas grandes 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 están adoptando 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 inmersiva y fluida en todos los tamaños de pantalla.

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