Além do smartphone: como o JioHotstar otimizou a UX para dispositivos dobráveis e tablets

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

O JioHotstar é uma plataforma de streaming líder na Índia, atendendo a 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.000 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 e envolvente em todos os tamanhos de tela.

Desafio de tela grande da JioHotstar

O JioHotstar oferecia 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 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 telas grandes 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 das imagens principais, dos menus e das 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 eles fizeram

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 UI 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 a, então 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 viva-voz.

Para isso, também usando a biblioteca adaptativa do Material 3, o mesmo currentWindowAdaptiveInfo() pode ser usado para consultar o modo de mesa. Quando 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 jogador 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, livros de 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 é adaptável, ajustando-se aos tamanhos e orientações da tela. Eles foram além do simples dimensionamento de imagens e aproveitaram 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