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

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.000 horas de vídeo on demand (VOD) e transmissão 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. Para isso, a empresa seguiu as orientações do Google sobre apps adaptáveis e usou recursos como exemplos, codelabs, livros de receitas e documentação para 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 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 do usuário 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 e proporções de tela, 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 a largura é 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 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 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. 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 da empresa em inovação de plataformas. Essa colaboração permitiu que ambas as equipes ultrapassassem limites, abordassem lacunas e co-criassem uma experiência integrada e imersiva em todos os tamanhos de tela.

Juntos, temos orgulho de oferecer essa experiência aprimorada a milhões de usuários e de definir novos parâmetros de referência na forma como a Índia e o mundo assistem streaming."
- Sonu Sanjeev, engenheiro sênior de desenvolvimento de software