Navegação na TV

Os dispositivos de TV oferecem um conjunto limitado de controles de navegação para apps. Para criar um esquema de navegação eficaz para a interface da TV, considere esses controles limitados e como o usuário navega usando botões de controle remoto em vez de uma tela touchscreen.

Imagem principal da navegação

Destaques

  • O controlador oferece recursos limitados de navegação ( de cima para baixo, à esquerda e à direita). Portanto, preste atenção em como isso pode moldar o design da interface do seu app.
  • A navegação precisa ser natural e familiar.
  • Crie uma experiência de navegação simples com o botão "Voltar" do controle remoto.
  • Se um usuário não tiver um caminho direto para chegar a um controle, considere realocá-lo.

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 abaixo ajudam a definir um valor de referência para uma experiência do usuário consistente e intuitiva em apps de TV.

Eficiente

Acesse o conteúdo de maneira rápida e simples. Os usuários querem acessar o conteúdo rapidamente com um número mínimo de cliques. Organize suas informações de modo a exigir menos telas.

Previsível

Siga as práticas recomendadas e as recomendações para tornar a navegação previsível. Não reinvente os padrões de navegação desnecessariamente, porque isso leva a confusão e imprevisibilidade.

Intuitivo

Torne a navegação simples o suficiente para oferecer suporte à adoção de comportamentos de usuários amplamente adotados. Não complique demais adicionando camadas desnecessárias de navegação.

Controlador

Existem controles de vários 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.

Controlador

  • Botão direcional: o principal método de navegação na TV é pelo botão direcional, que inclui botões físicos direcionais para cima, para baixo, para a esquerda e para a direita.
  • Botão de seleção: seleciona o item em destaque na tela. Você pode usar o gesto de tocar e pressionar para mostrar mais opções.
  • Botão "Página inicial": direciona 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 de microfone: invoca o Google Assistente ou a entrada de texto por voz.

Navegação direcional

Em um dispositivo de TV, os usuários navegam usando um botão direcional de quatro direções: para cima, para baixo, para a esquerda e para a direita. Para criar o app de TV ideal, crie um esquema de navegação em que o usuário possa aprender rapidamente a usar o app com as quatro teclas de seta. O botão direcional move o foco de um elemento para o mais próximo na direção correspondente.

Para testar se a navegação do app funciona bem com um botão direcional em um dispositivo de TV, considere o seguinte:

  • Confira se o usuário consegue navegar para todos os elementos focalizáveis na tela.
  • A direção de navegação precisa ser direta e previsível.
  • Para listas de rolagem, confira se o botão direcional para cima e para baixo rola a lista inteira e se cada item pode ser selecionado.

Botão "Início"

Pressionar o botão home sempre leva o usuário de volta à tela inicial ou ao acesso rápido do Google TV. O app atual seria suspenso em segundo plano por padrão.

Tocar no botão home e mantê-lo pressionado mostra o painel do sistema no Google TV e a grade de apps no Android TV. O comportamento padrão pode variar de acordo com o fabricante.

Botão "Início"

Botão "Voltar"

Para manter a consistência entre os apps na plataforma, verifique se o comportamento do botão "Voltar" segue essas diretrizes.

Usar o comportamento previsível do botão "Voltar"

Para criar uma experiência de navegação previsível, quando o usuário pressionar o botão "Voltar" do controle remoto, ele será direcionado ao destino anterior. Por fim, o usuário precisa ser direcionado à tela inicial ou ao acesso rápido do Google TV se continuar pressionando o botão "Voltar".

App com navegação na parte de cima

O usuário é levado de volta ao topo da página rolando rapidamente e ativa o foco para o menu.

App com navegação na parte de cima
App com navegação à esquerda

O menu do lado esquerdo é ativado, e o foco do usuário é direcionado para o item de menu ativo.

App com navegação à esquerda

Confira se o botão "Voltar" não é controlado por telas de confirmação ou parte de um loop infinito.

Evite o bloqueio de saída. Os usuários devem poder sair do aplicativo sem qualquer confirmação.

Não exibir um botão "Voltar"

Ao contrário dos 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.

Evite mostrar um botão "Voltar" na tela. Os usuários podem usar o botão "Voltar" no controle remoto.

Mostrar botão de cancelamento, se necessário

Se as únicas ações visíveis forem de confirmação, destrutiva ou de compra, é recomendável ter um botão "Cancelar" que retorne ao destino anterior.

Exibir um botão de cancelamento, quando necessário, para permitir que o usuário volte à página anterior.

Destino inicial fixo

A primeira tela que o usuário encontra ao iniciar o app pela 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 com links diretos ou navegando manualmente até um destino específico, os usuários podem usar o botão "Voltar" para navegar de qualquer lugar no app até o destino inicial.

Links diretos simulam a navegação manual

Links diretos para um app a partir de outro simulam a navegação manual. Por exemplo, se o usuário acessar diretamente uma página de detalhes no app Filmestar no Google TV e pressionar o botão "Voltar", ele será direcionado para a página inicial do app.

Limpar caminho para todos os elementos focalizáveis

Permita que os usuários naveguem na interface com uma direção clara. Se não houver um caminho reto para chegar a um controle, é recomendável realocá-lo.

Posicione controles, como a ação de pesquisa, em locais que não se sobreponham a outros elementos clicáveis.
Evite layouts que contenham controles em locais de difícil acesso. Não é fácil alcançar a ação de pesquisa mostrada aqui com o botão direcional.

Eixo

Projete seu layout para aproveitar os eixos horizontais e verticais. Dê a cada direção uma função específica para agilizar a navegação em hierarquias grandes.

As categorias podem ser atravessadas no eixo vertical, e os itens de cada categoria podem ser navegados no eixo horizontal.
Evite hierarquias de layout complexas e aninhadas.