Os dispositivos de TV oferecem um conjunto limitado de controles de navegação para apps. Para criar um esquema de navegação eficaz para o app para TV, é preciso entender esses controles limitados, bem como as 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 de 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 para TV.
Acesse o conteúdo de maneira rápida 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 maneira que exija o menor número de telas.
Siga as práticas recomendadas e sugestões para tornar a navegação previsível para os usuários. Não reinvente os padrões de navegação desnecessariamente, porque isso gera confusão e imprevisibilidade.
Torne a navegação simples o suficiente para oferecer compatibilidade com os comportamentos amplamente adotados dos usuários. Não complique demais adicionando camadas desnecessárias de navegação.
Controladores
Os controles estão disponíveis em diversos estilos, desde um controle remoto minimalista até controles de jogos complexos. Todos os controles incluem um botão direcional, além dos botões "Selecionar", "Início" e "Voltar". Outros botões variam de acordo com o modelo.
D-pad
O método de navegação principal na TV é pelo botão direcional, que inclui
botões de hardware 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 do botão pressionado.
Botão de seleção
Seleciona o item em foco na tela.
Botão home
Leva o usuário para a tela inicial do sistema.
Botão "Voltar"
Oferece aos usuários uma maneira de retornar à visualização anterior.
Botão do 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. Portanto, normalmente não é necessário fazer mais nada no app. No entanto, você precisa testar minuciosamente a navegação com um controlador D-pad para descobrir problemas.
Siga estas diretrizes para testar se o sistema de navegação do seu app funciona bem com um botão direcional em um dispositivo de TV:
- Verifique se um usuário com controlador D-pad pode navegar para todos os controles visíveis na tela.
- Para listas de rolagem com foco, confira se os botões direcional para cima e para baixo rolam a lista e se o botão de seleção seleciona um item na lista. 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 seus 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, pode configurar uma navegação direcional explícita para seus 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 a seguir lista todos os atributos de navegação disponíveis 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
android:id de outro widget no layout. Configure a
ordem de navegação como um loop, para que o último controle direcione o foco de volta
ao primeiro.
Oferecer foco e seleção claros
O sucesso do esquema de navegação de um app em dispositivos de TV depende da facilidade para um usuário 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. Pelo mesmo motivo, é importante sempre ter um item em foco que o usuário possa realizar ações imediatamente após o início 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 estados de drawables para implementar destaques para controles com foco e selecionados. O exemplo de código a seguir 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 estados anterior a
um Button:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
Forneça padding suficiente dentro dos controles focalizáveis e selecionáveis para que os destaques ao redor deles fiquem claramente visíveis.
Navegação com o botão "Voltar"
Para manter a consistência entre os apps na plataforma, garanta que o comportamento do botão "Voltar" siga estas diretrizes.
Usar o 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 cartão no meio da página e pressionar o botão "Voltar", o resultado dependerá de o app usar a navegação superior ou a 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 do menu ativo.
Confira se o botão "Voltar" não é controlado por telas de confirmação ou parte de um loop infinito.
O que não fazer.
Evite o bloqueio de saída. 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 mostre um botão "Para cima" ou "Voltar"
Ao contrário dos dispositivos portáteis, o botão "Voltar" do 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 Cancel que retorne ao destino anterior:
O que fazer:
Implementar a navegação de retorno
O framework do Android geralmente gerencia bem a navegação de retorno, assim como o botão direcional. Se você usa o componente de navegação, pode oferecer suporte a vários gráficos de navegação. Ocasionalmente, pode ser necessário implementar algum comportamento personalizado, como fazer com que o botão "Voltar" redefina o foco para o início de uma lista longa.
ComponentActivity,
a classe de base para FragmentActivity
e AppCompatActivity,
permite controlar o comportamento do botão "Voltar" usando o
OnBackPressedDispatcher,
que você pode extrair 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 TV.
Navegação com a guia "Ao vivo"
Além de obedecer aos requisitos de qualidade de apps para TV, os apps com um feed de TV ao vivo integrado à guia "Ao vivo" também precisam atender aos requisitos fáceis de reprodução e retorno, conforme descrito nas seções a seguir.
Reprodução sem atrito
A reprodução simples se aplica ao comportamento no app depois de qualquer link direto de canal ao vivo/linear do Google TV e do Android TV.
Os usuários que clicam em um link direto de canal ao vivo/linear do Google TV e do Android TV precisam ser direcionados diretamente à reprodução do canal, sem bloquear ou atrasar telas do app de destino. Fluxos de login e 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 de inicialização antes da reprodução será permitido. Um vídeo ou animação da marca de inicialização do app também é permitido nesse caso. É improvável que essa experiência de inicialização a frio ocorra mais de uma vez por sessão.
Além disso, se demorar alguns segundos para sintonizar o canal de link direto, será permitido exibir o branding do canal e/ou serviço. No entanto, a duração precisa ser o tempo necessário para carregar o canal, semelhante aos tempos médios de carregamento do canal no app.
Se o usuário estiver desconectado ou não estiver inscrito, você pode bloquear a reprodução de um canal pago para concluir um fluxo de login ou inscrição.
Volta
Quando os usuários iniciam um app usando um link direto na guia "Ao vivo" e pressionam o botão "Voltar", eles precisam retornar a essa guia com um único toque no botão "Voltar", independentemente do tempo decorrido. Esse comportamento de retorno direto é obrigató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 o app foi iniciado 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 que não seja o botão "Voltar" quando o primeiro botão "Voltar" for pressionado após o link direto, o requisito de "Voltar" não será aplicado, e apenas o comportamento padrão do botão "Voltar" será necessário.
Por exemplo, suponha que, depois de seguir um link direto, o usuário pressione o botão de seleção do botão direcional, que abre uma sobreposição de controles. O usuário espera que a sobreposição desapareça e pressiona o botão "Voltar". Como o primeiro botão pressionado depois de seguir o link direto foi o de seleção por botão direcional, o requisito de retorno direto não se aplica. Em vez disso, a lógica normal da backstack do app é aplicada.
Pressionar o botão "Voltar" repetidamente precisa levar o usuário à raiz do app e depois 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 quando retorna à tela de início depois de pressionar o botão "Voltar".
Links diretos simulam a navegação manual
Seja com links diretos ou navegando manualmente até um destino específico, os usuários podem usar o botão "Voltar" para navegar pelos destinos de volta ao destino inicial.
Criar links diretos para um app de outro app simula 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á levado para a página inicial do app Moviestar.
Caminho claro para todos os elementos focalizáveis
Permita que os usuários naveguem pela interface com uma direção clara. Se não houver um caminho reto para chegar a um controle, considere realocá-lo.
O que fazer.
Posicione 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 locais difíceis de acessar. Não é fácil alcançar
a ação de pesquisa mostrada aqui com o botão direcional.
Eixos
Projete o layout para aproveitar os eixos horizontal e vertical. Dê a cada direção uma função específica, acelerando a navegação em hierarquias grandes.
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.