Os dispositivos de TV oferecem um conjunto limitado de controles de navegação para apps. A criação de um esquema de navegação eficaz para o app para TV depende da compreensão desses controles limitados, bem como das limitações dos usuários ao operar o app. Ao criar o app Android para TV, preste atenção especial em como o usuário navega usando botões do controle remoto em vez de uma tela touchscreen.
Princípios
O objetivo é que a navegação pareça natural e familiar sem dominar a interface do usuário ou desviar a atenção do conteúdo. Os princípios a seguir ajudam a definir um valor de referência para uma experiência do usuário consistente e intuitiva em apps de TV.
Faça com que o acesso ao conteúdo seja rápido e fácil. Os usuários querem acessar o conteúdo rapidamente, com um número mínimo de cliques. Organize suas informações de forma que exija o menor número de telas.
Siga as práticas recomendadas e as recomendações para tornar a navegação previsível para os usuários. Não reinvente os padrões de navegação desnecessariamente, porque isso causa confusão e imprevisibilidade.
Simplifique a navegação para oferecer suporte aos comportamentos dos usuários mais adotados. Não complique demais adicionando camadas desnecessárias de navegação.
Controladores
Existem vários estilos de controles, desde um controle remoto minimalista até controles de jogos complexos. Todos os controles incluem um botão direcional e os botões "Selecionar", "Início" e "Voltar". Outros botões variam de acordo com o modelo.
D-pad
O principal método de navegação na TV é pelo botão direcional, que inclui
os botões direcionais para cima, para baixo, para a esquerda e
para a direita. O botão direcional transfere o foco de um objeto para o objeto
mais próximo na direção em que o botão é pressionado.
Botão de seleção
Seleciona o item na tela em foco.
Botão home
Leva o usuário para a tela inicial do sistema.
Botão "Voltar"
Dá aos usuários uma maneira de retornar à visualização anterior.
Botão de microfone
Invoca o Google Assistente ou a entrada de texto por voz.
Navegação com botão direcional
Em um dispositivo de TV, os usuários navegam usando um botão direcional ou teclas de seta. Esse tipo de controle limita a movimentação para cima, para baixo, para a esquerda e para a direita. Para criar um ótimo app otimizado para TV, é necessário fornecer um esquema de navegação em que o usuário possa aprender rapidamente a navegar no app usando esses controles limitados.
O framework do Android processa a navegação direcional entre elementos de layout automaticamente. Por isso, normalmente você não precisa fazer nada extra no app. No entanto, teste a navegação com um controlador D-pad para descobrir problemas.
Siga estas diretrizes para testar se o sistema de navegação do app funciona bem com um botão direcional em um dispositivo de TV:
- Confira se um usuário com um controlador D-pad pode navegar para todos os controles visíveis na tela.
- Para listas de rolagem com foco, verifique se os botões D-pad para cima e para baixo rolam a lista e se o botão de seleção seleciona um item nela. Verifique se os usuários podem selecionar um elemento na lista e se ela ainda rola quando um elemento é selecionado.
- Confirme se a mudança entre controles é simples e previsível.
Modificar a navegação direcional
O framework do Android aplica automaticamente um esquema de navegação direcional com base na posição relativa de elementos focalizáveis nos layouts. Teste o esquema de navegação gerado no app usando um controlador D-pad. Após o teste, se você decidir que quer que os usuários naveguem pelos layouts de uma maneira específica, configure a navegação direcional explícita para os controles.
O exemplo de código a seguir mostra como definir o controle seguinte para receber foco
para um objeto de layout TextView:
<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />
A tabela abaixo lista todos os atributos de navegação para widgets da interface do usuário do Android:
| Atributo | Função |
|---|---|
nextFocusDown |
Define a próxima exibição a receber foco quando o usuário navega para baixo. |
nextFocusLeft |
Define a próxima exibição a receber foco quando o usuário navega para a esquerda. |
nextFocusRight |
Define a próxima exibição a receber foco quando o usuário navega para a direita. |
nextFocusUp |
Define a próxima exibição a receber foco quando o usuário navega para cima. |
Para usar um desses atributos de navegação explícitos, defina o valor como o
android:id de outro widget no layout. Configure a
ordem de navegação como uma repetição, para que o último controle direcione o foco de volta
para o primeiro.
Oferecer foco e seleção claros
O sucesso do esquema de navegação de um app em dispositivos de TV depende da facilidade do usuário em determinar qual elemento da interface do usuário está em foco. Se você não fornecer uma indicação clara do item em foco e, portanto, em qual item um usuário pode agir, ele poderá se frustrar rapidamente e sair do app. Por esse mesmo motivo, é importante sempre ter um item em foco em que o usuário possa agir imediatamente após a inicialização do app ou a qualquer momento em que estiver inativo.
No layout e na implementação do app, use cor, tamanho, animação ou uma combinação desses atributos para ajudar os usuários a determinar facilmente quais ações podem realizar em seguida. Use um esquema uniforme para indicar o foco em todo o aplicativo.
O Android oferece Recursos de lista de estado de drawables para implementar destaques de controles com foco e selecionados. O exemplo de código abaixo demonstra como ativar o comportamento visual de um botão para indicar que um usuário navegou até o controle e o selecionou:
<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="@drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="@drawable/button_focused" /> <!-- hovered -->
<item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
O exemplo de código XML de layout abaixo aplica o drawable de lista de estado anterior a
um Button:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
Não se esqueça de oferecer padding suficiente dentro dos controles selecionáveis e focalizáveis para que os realces em torno deles fiquem claramente visíveis.
Navegação pelo botão "Voltar"
Para manter a consistência entre os apps da plataforma, confira se o comportamento do botão "Voltar" segue estas diretrizes.
Usar comportamento previsível do botão "Voltar"
Para criar uma experiência de navegação fácil e previsível, quando o usuário pressionar o botão "Voltar" do controle remoto, leve-o ao destino anterior.
Se o usuário navegar de um item de menu para um card no meio da página e pressionar o botão "Voltar", o resultado vai depender do app usar a navegação superior ou a navegação à esquerda:
- O app usa a navegação superior:leve o usuário de volta ao topo da página rolando rapidamente e ativando o foco no menu.
- O app usa a navegação à esquerda:ative o menu lateral esquerdo e concentre-se no item de menu ativo no momento.
Confira se o botão "Voltar" não está controlado por telas de confirmação ou parte de um loop infinito.
O que não fazer.
Evite sair do controle. Permitir que os usuários saiam do app sem confirmação.
O que não fazer.
Nunca entre no loop infinito de fechamento e abertura do
menu. O ideal é pressionar o botão "Voltar" para sair do app. Não
mostre um botão de saída no menu, a menos que seja um caso especial, como um perfil para crianças.
Não mostrar um botão "Para cima" ou "Voltar"
Ao contrário de dispositivos portáteis, o botão "Voltar" no controle remoto é usado para navegar para trás em uma TV. Não é necessário mostrar um botão "Voltar" virtual na tela:
O que não fazer.
Mostrar um botão de cancelamento, se necessário
Se as únicas ações visíveis forem ações de confirmação, destrutivas ou de compra, é recomendável ter um botão Cancelar que retorne ao destino anterior:
O que fazer.
Implementar a navegação de retorno
Em geral, o framework do Android lida bem com a navegação de retorno, assim como no botão direcional. Se você usar o componente Navigation, poderá oferecer suporte a vários gráficos de navegação. Ocasionalmente, pode ser necessário implementar algum comportamento personalizado, como redefinir o foco para o início de uma longa lista com o botão "Voltar".
ComponentActivity,
a classe de base para FragmentActivity
e AppCompatActivity,
permite controlar o comportamento do botão "Voltar" usando o
OnBackPressedDispatcher,
que pode ser recuperado chamando getOnBackPressedDispatcher().
Para mais informações, consulte Oferecer navegação de retorno personalizada.
Controles de reprodução na TV
A reprodução de vídeo é um dos recursos mais importantes da TV. É importante que os players de vídeo em apps no Android TV se comportem da mesma forma. Consulte as diretrizes de controles de reprodução para TVs.
Navegação com guias ativas
Além de obedecer aos requisitos de qualidade para apps de TV, os apps com um feed de TV ao vivo integrado na guia "Ao vivo" também precisam atender aos requisitos de reprodução e retorno direto, conforme descrito nas seções a seguir.
Reprodução sem atrito
A reprodução sem atrito se aplica ao comportamento no app após qualquer link direto de canal linear/ao vivo do Google TV e do Android TV.
Os usuários que clicam em um link direto de canal linear/ao vivo no Google TV e no Android TV precisam ser direcionados à reprodução do canal, sem bloquear ou atrasar as telas do app de destino. Fluxos de login, de inscrição, vídeos de branding e outros atrasos não são permitidos.
No entanto, se o link direto iniciar o carregamento do app de destino em uma inicialização a frio, esse atraso antes da reprodução será permitido. Nesse caso, também é permitido usar um vídeo ou animação de branding na inicialização do app. É improvável que uma experiência de inicialização a frio ocorra mais de uma vez por sessão.
Além disso, se o acesso ao canal com link direto levar alguns segundos, será permitido mostrar o branding do canal e/ou serviço. No entanto, a duração dela precisa ser limitada ao necessário para carregar o canal (e semelhante à média de tempo de carregamento do canal no app).
Se o usuário estiver desconectado ou não estiver inscrito, bloqueie a reprodução de um canal pago para concluir o fluxo de login ou inscrição.
Retorno direto
Quando os usuários iniciam um app de um link direto na guia "Ao vivo" e pressionam o botão "Voltar", eles precisam retornar à guia "Ao vivo" com um único toque, independente do tempo decorrido. Esse comportamento é necessário para todos os links diretos da guia "Ao vivo" no Google TV e no Android TV.
Os links diretos da guia ativa são diferenciados por um parâmetro de link direto anexado:
?exit_on_back=[true|false]. Os apps precisam analisar esse parâmetro para determinar
se foram iniciados na guia "Ao vivo". Se exit_on_back for true,
os apps precisarão implementar o comportamento de retorno direto.
Se o usuário pressionar qualquer botão diferente do botão "Voltar" como o primeiro botão após o link direto, o requisito de retorno direto não será aplicado, e apenas o comportamento do botão "Voltar" padrão será necessário.
Por exemplo, suponha que, depois de seguir um link direto, o usuário pressione o botão direcional de seleção, que mostra uma sobreposição de controles. O usuário espera a sobreposição desaparecer e, em seguida, pressiona o botão "Voltar". Como o primeiro botão pressionado após seguir o link direto foi o botão de seleção do botão direcional, o requisito de retorno direto não se aplica. Em vez disso, a lógica da backstack normal do app é aplicada.
Pressionar o botão "Voltar" repetidamente precisa levar o usuário à raiz do app e depois de volta ao Google TV ou ao Android TV, sem loops infinitos. Para mais informações, consulte a seção Comportamento do botão "Voltar" previsível.
Arquitetura de navegação
Destino inicial fixo
A primeira tela que o usuário vê ao iniciar o app na tela de início também é a última que aparece ao retornar à tela de início depois de pressionar o botão "Voltar".
Links diretos simulam a navegação manual
Seja usando um link direto ou navegando manualmente até um destino específico, os usuários podem usar o botão "Voltar" para navegar até o destino inicial.
Links diretos para um app de outro app simulam a navegação manual. Por exemplo, se o usuário acessar diretamente uma página de detalhes no app Moviestar no Google TV e pressionar o botão "Voltar", ele será direcionado para a página inicial do app Moviestar.
Caminho claro para todos os elementos focalizáveis
Permita que os usuários naveguem na IU com uma direção clara. Se não houver um caminho reto para chegar a um controle, considere realocá-lo.
O que fazer.
Coloque controles, como a ação de pesquisa mostrada aqui, em locais que não se sobreponham a outros elementos clicáveis.
O que não fazer.
Evite layouts que contenham controles em lugares difíceis de alcançar. Alcançar a ação de pesquisa mostrada aqui não é fácil de gerenciar com o botão direcional.
Eixos
Projete seu layout para aproveitar os eixos horizontal e vertical. Dê a cada direção uma função específica, acelerando a navegação em grandes hierarquias.
O que fazer.
As categorias podem ser percorridas no eixo vertical, e os itens de cada
categoria podem ser navegados no eixo horizontal.
O que não fazer.
Evite hierarquias de layout complexas e aninhadas.