Design para TV: quais cuidados devo ter ao criar minha interface?

O mercado de Smart TVs cresce em ritmo acelerado. Nos últimos anos ultrapassaram o número de TVs convencionais, representaram 73% das vendas de televisores em 2017 e cerca de 91% dos consumidores possuem a TV conectada à internet. Junto à isso a demanda por aplicativos está em crescimento também.

No Brasil, esse aumento de aplicativos vem despertando a atenção de todos e é isso que me motivou à criar esse artigo contando um pouco do que aprendi ao longo de algumas experiências com apps para Smart TV.

Usuário

Antes de mais nada, procure pesquisar mais sobre o perfil dos usuários, identificar suas personas. O público-alvo pode ser o mais variado possível, desde um usuário que respira tecnologia, até um senhor que acabou de adquirir a sua primeira Smart TV e não sabe nem instalar um app.

É preciso entender suas dores, frustrações, e cada perfil tem suas particularidades, sua curva de aprendizado, até mesmo seu grau de curiosidade (se ele fuça muito, ou se espera que o app lhe mostre as coisas), e tudo isso precisa ser tratado para que não tenham problemas ao interagir com seu aplicativo.

Além do usuário que é parte essencial do processo, seguem abaixo alguns guidelines gerais para vocês, que irão melhorar a interface e a usabilidade dos seus aplicativos:

1. Distância

Distância média entre a TV e o usuário

Uma das primeiras barreiras que enfrentei trabalhando com TVs foi a proporção dos elementos visuais na tela. A distância média entre o usuário e a televisão é de 3 metros, e por mais que tenhamos televisores enormes, dependendo de como você dispor os elementos eles continuarão pequenos aos olhos do usuário. Portanto sempre tenha muita atenção com:

• Tamanho das fontes, botões, cores e ícones (vou explicar mais pra frente como fazer isso…).
• Affordances e Destaques (elemento que o usuário está focado naquele momento).

2. Navegação

É importante lembrar que o controle de uma televisão possui suas limitações e não possui os recursos de um teclado. Sendo assim, pensar em uma navegação simples e objetiva é essencial. Tente sempre explorar de recursos como o botão “Voltar” do controle, que muitas vezes é utilizado como botão de escape caso o aplicativo trave.

Lembrando que não temos a ação de rollover, procure evitar navegações mega complexas e que envolvam combinações de botões, isso vai confundir o usuário e levá-lo a desistência. Tenha essa conversa junto com o desenvolvedor que atuará no projeto, essa troca de conhecimento é fundamental nesses momentos.

3. Foco

Mudanças no tamanho, na cor e na borda são as principais características utilizadas para ajudar o usuário a se localizar na tela. Levando em conta a diversidade de usuários que o podem utilizar seu aplicativo, esse item tem prioridade alta na hora de planejar a interface.

Foco no botão (Apple TV)

Pense no seguinte cenário: o usuário está navegando no aplicativo e foi ao banheiro, quando retornar, a interface do aplicativo deve lhe mostrar onde foi sua última ação, para que ele volte a navegar sem nenhum impacto. Levando em conta isso, em qual dos casos abaixo o usuário conseguirá localizar o foco mais rápido?

4. Simplicidade

Essa item é algo universal na hora de se criar uma interface. Tenha sempre em mente de que uma tela cheia de conteúdos e navegações complexas tendem a dificultar o entendimento do usuário e a facilidade em encontrar as informações.

É nítida a diferença entre as duas telas abaixo, tanto pela estruturação dela quanto pela quantidade de informações que cada uma traz. Da forma que a segunda tela está desenhada, até a navegação dela ficaria complexa com diversas interações se sobrepondo.

5. Continuidade

Seguindo a lei da continuidade de Gestalt, é muito importante dar a noção de que tem mais informação para o usuário. Uma forma simples de fazer isso é “cortando” o último elemento de um card, por exemplo, de modo que ele saiba que é possível navegar além do que ele já tem na tela. Isso traz também suavidade ao caminho natural que o componente tende à seguir.

Continuidade do conteúdo em um trilho

6. Proximidade

Mantenha os elementos na tela sempre agrupados (outra lei de Gestalt ai!) de forma que o usuário consiga interpretar os diferentes tipos de conteúdo, independente da distância que ele estiver do dispositivo. Quanto menor for a distância entre os elementos, mais agrupados eles estarão.

Através da proximidade é possível diferenciar os tipos de conteúdo presentes na tela

Conclusão

Muitas das coisas que devemos levar em consideração na interface de um app para TV são técnicas universais para todos os outros tipos de interface (web, mobile, etc), como simplicidade e clareza nas informações. Além disso aprendi que:

• Nem tudo no mundo é touchscreen hahaha ;D
• Ainda existe muita coisa que não possui pattern ou referência. Houveram componentes onde tive que estudar suas aplicações web e transformá-los para utilização nas TV’s (exemplo abaixo).

Tabela de jogos no app SporTV 4K na Rússia

• Entenda quem vai utilizar seu aplicativo! Isso vai facilitar muito na hora de definir os fluxos de navegação, as interações e até mesmo as informações que serão exibidas e quando serão exibidas;
• A interação com os desenvolvedores é essencial em diversos pontos do processo, desde discussões sobre navegação, até como as informações serão trazidas pela API;
• Testar! Testar! E testar! Nunca deixe de aplicar testes de usabilidade no seu produto, é essencial para validar se a sua solução está aderente ao seu público-alvo. Tem feedback melhor que esse? Esse cenário é pouco explorado e toda informação colhida agrega de forma positiva ao resultado final do produto.

Esse cenário ainda é pouco explorado tornando-se uma oportunidade bem bacana para nós designers definirmos patterns e boas práticas que serão utilizadas por outras pessoas no futuro quando forem construir algo para TV #ficadica.