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

O JioHotstar é uma plataforma de streaming líder na Índia, com uma base de usuários de mais de 400 milhões de pessoas. 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 dos principais eventos esportivos, a plataforma opera em grande escala.

Para garantir uma experiência premium para o grande público, a JioHotstar otimizou o app para dispositivos dobráveis e tablets. Para isso, eles seguiram as orientações do Google sobre apps adaptáveis e usaram recursos como exemplos, codelabs, receitas e documentação para criar uma experiência consistente, agradável e envolvente em telas de todos os tamanhos.

O desafio da tela grande da JioHotstar

O JioHotstar oferecia uma excelente experiência do usuário em smartphones comuns, 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 e entendeu as otimizações necessárias para estender a experiência do usuário a dobráveis e tablets. Para alcançar o status de app para tela grande do nível 1, a equipe implementou duas atualizações estratégicas para adaptar o app a vários formatos e se diferenciar em dispositivos dobráveis. Ao lidar com os desafios exclusivos apresentados por dispositivos dobráveis e tablets, o 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 do JioHotstar, projetada principalmente para telas de smartphone padrão, enfrentou desafios na adaptação das proporções de imagens principais, menus e telas de programas aos diversos tamanhos e resoluções de tela de outros formatos. Isso geralmente resultava em corte de imagem, 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 flexibilidade ideal de layout, renderização de imagens e navegação em uma variedade maior de dispositivos.

O que a equipe fez

Para melhorar a experiência de visualização em telas grandes, o 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 adaptativa do Material 3 para saber quanto espaço o app tem disponível. Primeiro, invoque a função currentWindowAdaptiveInfo() e use 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 pontos de interrupção estão em ordem, do maior para o menor, já que internamente a API verifica com um valor maior ou igual. Portanto, qualquer largura que seja pelo menos maior ou igual a EXPANDED será sempre maior que MEDIUM.

O JioHotstar oferece uma experiência premium exclusiva para dispositivos dobráveis: o modo de mesa. Esse recurso reposiciona o player de vídeo na metade de cima da tela e os controles na metade de baixo quando um dispositivo dobrável é parcialmente dobrado para uma experiência sem usar as mãos.

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

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

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

Para melhorar ainda mais a experiência do usuário, o JioHotstar aumentou os tamanhos dos destinos de toque para os 48 dp recomendados 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 é adaptativa e se ajusta aos tamanhos e orientações da tela. Eles foram além do simples dimensionamento de imagens, aproveitando 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 do JioHotstar em dispositivos de tela grande com uma experiência de visualização aprimorada e altamente otimizada.

"Alcançar o status de app para telas grandes 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 melhorar a experiência de visualização para públicos que estão adotando rapidamente dispositivos dobráveis, tablets e smart TVs.

Ao aproveitar as bibliotecas e os guias do Jetpack do Google, foi possível combinar nossos insights sobre consumo de conteúdo com a experiência deles em inovação de plataforma. Essa colaboração permitiu que as duas equipes ultrapassassem limites, abordassem lacunas e cocriassem uma experiência integrada e imersiva em todos os tamanhos de tela.

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