Design para controle remoto: o que muda quando o input é um DPAD
Por que interfaces feitas para mouse e touch falham em TV Box, e como o WatchHub foi projetado desde o foco até o card grid pensando em quem só tem 5 botões.
A maioria dos apps que você abre no TV Box é, na verdade, um app mobile com layout esticado. O sintoma é fácil de identificar: foco que some, botões que não destacam quando selecionados, gestos de scroll que só funcionam com toque, formulários que parecem feitos para serem digitados num teclado de notebook.
O WatchHub foi desenhado de forma diferente desde o começo. Este post é sobre o que muda quando você assume que o usuário só tem cinco botões: cima, baixo, esquerda, direita e OK.
A premissa: 5 botões, 1 input
DPAD não é teclado, não é mouse, não é touch. É uma máquina de estado direcional. Cada tela tem que responder à pergunta: "se o foco está aqui, para onde vai cada uma das 4 direções?"
Aplicações desktop e mobile resolvem foco de forma reativa — quando o usuário clica/toca, o foco vai pra lá. No DPAD, o foco precisa ser antecipado: antes do usuário pressionar uma direção, a interface tem que saber para onde o foco vai.
Isso muda tudo no layout.
Foco visível, sempre
A primeira regra é trivial e quase nenhum app respeita: o item focado precisa ser óbvio. Não é "pintar a borda em azul claro". É:
- Escala maior. O item focado fica 5-10% maior que os outros.
- Destaque de cor saturado. Não basta alterar opacidade — tem que ter contraste real.
- Sombra ou glow. Profundidade ajuda o olho a fixar.
- Animação suave de transição. O foco "viaja" entre itens, não "salta".
Se o usuário abre o app, mexe o controle e tem que procurar visualmente onde está o foco, o app falhou.
Layout em grade, sempre
Cards em grid funcionam. Listas longas funcionam. Carrosséis horizontais funcionam.
O que não funciona em DPAD: dropdowns flutuantes, menus radiais, drag-and-drop, qualquer interação que dependa de posição absoluta de cursor. O WatchHub evita esses padrões por princípio — toda navegação é direcional dentro de uma grade previsível.
Distância entre itens importa
Em mobile, você toca o que quer. Em DPAD, você precisa viajar até o item. Cada pressionada de direção é um custo cognitivo pequeno mas real. Multiplique por 200 itens numa grade e você tem um app cansativo.
Algumas decisões concretas que tomamos:
- Items grandes na primeira fileira. O item mais provável de ser usado fica no caminho mais curto.
- Atalhos de canal. Botões numéricos do controle pulam direto para itens específicos sem percorrer a grade.
- Memória de posição. Voltar de uma tela restaura o foco no último item visitado, não na origem.
Confirmação ≠ acidente
OK no controle remoto é fácil de pressionar sem querer. O DPAD recebe muito mais pressões "exploratórias" que clique de mouse — o usuário vai testando.
Em momentos críticos (logout, deletar, comprar), o WatchHub pede confirmação dupla. Não é overkill — é prevenção. O custo de uma confirmação extra é muito menor que o custo de desfazer uma ação acidental no controle remoto.
Texto curto, tipografia grande
Tela de TV é assistida a 2-3 metros de distância. Tudo precisa ser legível dali:
- Fontes ≥ 16px, idealmente 18-20px para corpo de texto.
- Títulos com peso bold 600+. Light fonts somem na distância.
- Linhas curtas. Texto que ocupa 80% da tela é ilegível a 3m. Coluna estreita ganha sempre.
- Contraste real. WCAG AA é o mínimo. Em TV, prefira AAA.
Detalhes de UI escondidos em texto pequeno não existem do ponto de vista do usuário final.
O que não cabe no DPAD: digitação
Digitação no controle remoto é tortura. É por isso que o WatchHub:
- Usa login por código (1 campo numérico curto).
- Não pede preenchimento de formulários no app.
- Toda configuração é feita no painel web pelo revendedor.
Quando digitação é inevitável (busca, por exemplo), o teclado virtual aparece com sugestões grandes em primeiro plano — você navega entre as sugestões, raramente precisa digitar caractere por caractere.
Por que isso importa
Aplicações que ignoram o DPAD funcionam — mas custam paciência. Multiplique essa paciência pela quantidade de vezes que seu cliente final abre o app por semana, e o custo é altíssimo. Um app que respeita o DPAD diminui chamados de suporte, aumenta retenção e protege a percepção de qualidade da revenda.
Não é por estética. É por engenharia de uso.