Além dos smartphones: como a JioHotstar criou uma UX adaptável

A JioHotstar é uma plataforma de streaming líder na Índia, com mais de 400 milhões de usuários. Com uma vasta biblioteca de conteúdo que abrange mais de 330 mil horas de vídeo on demand (VOD) e entrega em tempo real de grandes eventos esportivos, a plataforma opera em uma escala enorme.

Para garantir uma experiência premium para seu público vasto, a JioHotstar elevou a experiência de visualização otimizando o app para dispositivos dobráveis e tablets. A empresa fez isso seguindo as orientações do Google sobre apps adaptáveis e usando recursos como exemplos, codelabs, livros de receitas e documentação para ajudar a criar uma experiência consistente e envolvente em todos os tamanhos de tela.

O desafio da JioHotstar em telas grandes

A JioHotstar ofereceu uma excelente experiência do usuário em smartphones padrão, e a equipe queria aproveitar os novos formatos. Para começar, a equipe avaliou o app de acordo com as diretrizes de qualidade de apps para telas grandes para entender as otimizações necessárias para estender a experiência do usuário a dispositivos dobráveis e tablets. Para alcançar o status de app de tela grande de nível 1, a equipe implementou duas atualizações estratégicas para adaptar o app a vários formatos e diferenciar em dispositivos dobráveis. Ao abordar os desafios exclusivos apresentados por dispositivos dobráveis e tablets, a JioHotstar pretende oferecer uma experiência imersiva e de alta qualidade em todos os tamanhos de tela e proporções.

O que eles precisavam fazer

A interface do usuário da JioHotstar, projetada principalmente para telas de smartphones padrão, enfrentou desafios na adaptação de proporções de imagens principais, menus e telas de programas aos diversos tamanhos e resoluções de tela de outros formatos. Isso geralmente levava ao corte de imagens, letterboxing, baixa resolução e espaço não utilizado, principalmente no modo paisagem. Para aproveitar ao máximo os recursos de tablets e dispositivos dobráveis e oferecer uma experiência do usuário otimizada nesses tipos de dispositivos, a JioHotstar se concentrou em refinar a interface para garantir a flexibilidade ideal do layout, a renderização de imagens e a navegação em uma variedade maior de dispositivos.

O que eles fizeram

Para uma melhor experiência de visualização em telas grandes, a JioHotstar tomou a iniciativa de aprimorar o app incorporando WindowSizeClass e criando layouts otimizados para larguras compactas, médias e estendidas. Isso permitiu que o app adaptasse a interface do usuário a várias dimensões de tela e proporções, garantindo uma interface consistente e visualmente atraente em diferentes dispositivos.

A JioHotstar seguiu esse padrão usando a biblioteca adaptável do Material 3 para saber quanto espaço o app tem disponível. Primeiro, invocando a função currentWindowAdaptiveInfo() e, em seguida, usando novos layouts de acordo com as três classes de tamanho de janela:

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

Os breakpoints estão em ordem, do maior para o menor, já que internamente a API verifica se há um valor maior ou igual a, então qualquer largura que seja pelo menos maior ou igual a EXPANDED sempre será maior que MEDIUM.

A JioHotstar pode oferecer a experiência premium exclusiva de dispositivos dobráveis: o modo de mesa. Esse recurso realoca convenientemente o player de vídeo para a metade superior da tela e os controles de vídeo para a metade inferior quando um dispositivo dobrável é parcialmente dobrado para uma experiência sem usar as mãos.

Para fazer isso, também usando a biblioteca adaptável do Material 3, o mesmo currentWindowAdaptiveInfo() pode ser usado para consultar o modo de mesa. Depois que o dispositivo é mantido no modo de mesa, uma mudança de layout para corresponder à metade superior e inferior da postura pode ser feita com uma coluna para colocar o player na metade superior e os controladores na metade inferior:

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

A JioHotstar agora atende às diretrizes de qualidade de apps para telas grandes do nível 1. A equipe aproveitou as orientações de apps adaptáveis, usando exemplos, codelabs, livros de receitas e documentação para incorporar essas recomendações.

Para melhorar ainda mais a experiência do usuário, a JioHotstar aumentou os tamanhos dos destinos de toque para o valor recomendado de 48 dp nas páginas de descoberta de vídeos, garantindo a acessibilidade em dispositivos de tela grande. A página de detalhes do vídeo agora é adaptável, ajustando-se aos tamanhos e orientações da tela. A empresa foi além do simples dimensionamento de imagens, aproveitando as classes de tamanho de janela para detectar o tamanho e a densidade da janela em tempo real e carregar a imagem principal mais adequada para cada formato, ajudando a melhorar a fidelidade visual. A navegação também foi aprimorada, com layouts que se adaptam a diferentes tamanhos de tela.

Agora, os usuários podem assistir o conteúdo favorito da JioHotstar em dispositivos de tela grande com uma experiência de visualização aprimorada e altamente otimizada.

"Alcançar o status de app de tela grande de nível 1 com o Google é um marco que reflete a força da nossa visão compartilhada. Na JioHotstar, sempre acreditamos que a otimização para dispositivos de tela grande vai além da adaptabilidade. Trata-se de elevar a experiência de visualização para públicos que estão adotando rapidamente dispositivos dobráveis, tablets e TVs conectadas.

Aproveitar as bibliotecas e os guias do Jetpack do Google nos permitiu combinar nossos insights sobre o consumo de conteúdo com a experiência deles em inovação de plataforma. Essa colaboração permitiu que ambas as equipes ultrapassassem os limites, abordassem lacunas e criassem em conjunto uma experiência imersiva e integrada em todos os tamanhos de tela.

Juntos, temos orgulho de oferecer essa experiência aprimorada a milhões de usuários e de definir novas referências em como a Índia e o mundo experimentam o streaming."
- Sonu Sanjeev, engenheiro sênior de desenvolvimento de software