Repensando o design da interface do usuário para a plataforma de TV

Uma introdução aos ingredientes básicos de uma interface do usuário de TV

A grande maioria dos consumidores hoje em dia está cortando o cabo da TV paga, mas isso não significa que eles tenham se esquivado da tela grande para consumir seu conteúdo. De acordo com uma divulgação de dados da Nielsen, os hábitos de visualização dos adultos norte-americanos descobriram que 92% de todas as visualizações ainda ocorrem na tela da TV. Estes são números muito grandes.

Mais de 92% da visualização entre os adultos dos EUA ainda acontece na tela da TV.

O significado de “assistir TV” mudou muito nas últimas décadas. Não estamos mais limitados a um controle remoto e caixa de cabo para preencher nossas telas; estamos usando Smart TVs ou transmitindo usando discos como Roku, Amazon Fire e Apple TV, ou conectando consoles de videogame como Xbox e Playstation. E cada um desses dispositivos permite uma interface de usuário muito mais poderosa do que o antigo guia na tela.

Pagar para assistir a programação de transmissão ou VOD por meio de serviços on-line baseados em assinatura, como Hulu, Netflix ou Amazon, representa 26% dos entrevistados on-line globais (Nielsen). Este é um número significativo. No entanto, 72% dos entrevistados confirmaram que ainda pagam para assistir seu conteúdo por meio de uma conexão de TV tradicional.

Isso significa que a conexão de TV tradicional veio para ficar?

Todos nós parecemos pensar que os cortadores de cabos por aí representariam um número maior. A Nielsen informa que 116,4 milhões de lares nos EUA deveriam assistir TV durante a temporada 2015-16. Este é um número enorme e o relatório também descobriu que cerca de 9,5 milhões dessas casas mudaram para a TV OTA gratuita. De todos os serviços de streaming, o Netflix (60,7%) parece estar à frente do jogo, seguido pelo Amazon Prime Video (49,4%) e pelo Hulu (26%). Acredito que uma das maiores razões pelas quais as pessoas estão cortando o cordão é que só queremos pagar pelo que usamos.

Quando comparado a computadores e até telefones celulares, projetar interfaces de usuário para TV ainda é uma área relativamente nova. É também uma plataforma fundamentalmente diferente e a maneira como consumimos nosso conteúdo é diferente. O design para TV requer um conjunto exclusivo de considerações, incluindo tamanho da tela e distância do espectador, restrições técnicas e contexto de uso. Os usuários estão em uma experiência “inclinada para trás”, sentados a uma média de 10 pés de distância e a interface do usuário e a experiência precisam refletir isso. Ao contrário de tablets e telefones com tela sensível ao toque, as interações nas televisões são feitas via D-pad (pad de controle direcional) usando um controle remoto ou um controlador de videogame, o que aumenta a complexidade.

A Exibição

As televisões não são como tablets e telefones.

As TVs mudaram muito ao longo do tempo, de uma enorme peça de mobília desajeitada para uma tela minimalista e elegante pendurada na parede. Quando os televisores ocupavam toda a sala de estar, eles usavam uma tecnologia que produzia imagens inconsistentes nos aparelhos de TV, especialmente perto das bordas. Para compensar esses problemas, as TVs CRT estavam sujeitas a overscan. Isso significa apenas que as imagens foram levemente ampliadas para que as bordas não ficassem fora dos limites da área de visualização.

Tradicionalmente, as emissoras previam isso e queriam evitar que qualquer informação crítica fosse mostrada muito perto das bordas da tela. Para resolver esse problema, eles criaram uma área segura de título para exibir o texto sem distorção e uma área segura de ação onde a imagem poderia ser exibida com segurança.

Por motivos fora de nosso controle, o overscan ainda é uma coisa… mesmo em suas novas HDTVs. A quantidade de overscan não é consistente entre as TVs. Para garantir que todas as suas informações primárias, como títulos e ações importantes, estejam seguras, mantenha-as dentro das margens seguras.

Atualmente não existe um “padrão” definido para áreas de ação seguras; é definido principalmente pela própria plataforma. O Google mantém sua área segura estreita e a da Apple é um pouco mais generosa. Das minhas muitas pesquisas na web, essas zonas variam entre 85% e 95% de uma tela de televisão do centro. Para atender aos requisitos de todas as plataformas diferentes nas quais você possa estar trabalhando, sugiro usar uma zona segura de margens superior e inferior de 60px e margens laterais de 90px. Isso significa que todas as suas informações primárias precisarão se encaixar nessa área para acomodar todas as telas de TV e atender a todos os requisitos da plataforma.

Para iniciar seu novo design de interface de usuário de televisão, crie uma nova tela de 1920 x 1080. Seu preenchimento (zona segura) deve ter 90 pixels nas laterais (esquerda e direita) e 60 pixels na parte superior e inferior. Você pode obter o download gratuito do arquivo aqui.

Navegação

Como cima-baixo-esquerda-direita molda as interfaces de TV.

Como designer, o hardware com o qual projetamos definirá alguns de nossos padrões de design. No celular, deslizamos, tocamos, pressionamos longamente, puxamos etc. para realizar ações. Abas e menus são usados ​​como padrões de navegação em nossos dispositivos. A televisão oferece uma grande tela que pode facilmente se tornar excessivamente complexa se não for bem feita. Ver longas filas de conteúdo para maximizar a quantidade visível para os usuários tornou-se um elemento padrão das UIs de televisão.

Ao contrário dos dispositivos móveis que controlamos com os dedos, a maioria das interfaces de usuário da TV são controladas por um D-pad e usadas à distância da tela. Seja em um controle remoto ou em um gamepad, o D-pad limita a navegação a quatro direções: para cima, para baixo, para a esquerda e para a direita.

Cada plataforma também tem suas próprias convenções estabelecidas. No Xbox, por exemplo, os gatilhos fornecem um controle “Page Up” e “Page Down” enquanto os bumpers são usados ​​para guiar entre visualizações de conteúdo. Há também vários botões de “usuário avançado” em cada plataforma com os quais os jogadores mais experientes estão familiarizados.

O outro elemento crítico em UIs de TV é o estado de foco . Sem a capacidade de tocar na tela ou usar o mouse, os usuários devem navegar até o elemento que desejam selecionar. À medida que o usuário navega no aplicativo, diferentes elementos de interface do usuário devem ser destacados, indicando que um elemento de navegação está em foco.

Os estados de foco e destaque ao projetar para televisão são muito importantes. Esse estado de foco é o elemento que destaca um componente selecionável e indica a localização atual na tela do usuário. A forma em que o foco é exibido pode variar; dependendo do componente, no entanto, a consistência sempre será fundamental. Um foco claro e altamente visível ajuda o usuário a reconhecer rapidamente sua localização atual na tela e facilita a navegação. Quando um usuário desvia o olhar momentaneamente da TV e depois retorna o olhar, deve ficar claro automaticamente qual opção está selecionada no momento para navegação. Cada item na tela deve ser acessível pelo cursor, e deve estar sempre claro para onde o cursor pode se mover em seguida.

Exemplos de designs que podem deixar os usuários se perguntando onde estão no aplicativo. Esses exemplos não fornecem indicação visual suficiente (estado de foco) do posicionamento. Os usuários devem poder ver claramente onde estão o tempo todo, sem precisar se mover para cima ou para baixo. Você deve ser capaz de olhar para longe do aparelho de televisão e para trás e ainda saber sua posição.

Tipografia

Lendo a dez metros de distância.

Os aplicativos de TV costumam ser chamados de experiências de três metros, um termo que se refere a uma distância comum entre você e sua televisão. Ao contrário de outros dispositivos, como dispositivos móveis e desktops, a televisão está configurada para ser mais um ambiente de “inclinar-se e relaxar”. Dada essa distância, precisamos tratar uma interface do usuário de maneira um pouco diferente do que faríamos na Web ou em dispositivos móveis.

As telas de TV geralmente são maiores que os dispositivos móveis e os monitores de computador de mesa, mas são vistas de uma distância maior. A legibilidade torna-se uma característica importante, o que significa que o tamanho do texto e outros elementos devem ser ajustados de acordo. Dependendo da sua idade, 18px provavelmente seria o menor tamanho legível e apropriado apenas para rótulos não essenciais, como uma aba de sobrancelha. Mesmo assim, como regra geral, os tamanhos de fonte escolhidos nunca devem ser menores que 24 pts. Isso é o que eu consideraria o tamanho mínimo da fonte para acomodar todo tipo de usuário.

A chave para uma boa tipografia na TV é testar constantemente. O tipo fino e pequeno no seu monitor parecerá limpo e nítido, mas uma vez na TV, pode parecer estourado ou ficar ininteligível.

Linhas de digitalização

O que são linhas de varredura?

Ao contrário das telas de desktop, celular e tablet, a imagem na tela da televisão é composta por linhas de varredura ímpares e pares. A televisão processa essas linhas em fases alternando rapidamente entre linhas de varredura pares e ímpares. Qualquer pixel único (ou linha de pixels) caindo em uma única linha de varredura piscará. Para evitar a cintilação de seus itens na tela, você deve sempre manter suas linhas em números pares e não mais finas que 2 pixels. Isso é algo a ser considerado ao trabalhar em projetos multiplataforma e se preparar para transferir seus designs de dispositivos de toque (celular e tablet), onde muitas vezes você pode criar botões de borda de 1 px para televisão.

Outra maneira de evitar essas linhas ou formas borradas é garantir que seus designs sejam sempre perfeitos em pixels. O exemplo abaixo é um bom exemplo de linhas criadas usando números ímpares. Como você pode ver, podemos ver claramente os efeitos disso, e isso se torna inquietante para os olhos.

Cor

As telas de TV têm limites.

O primeiro elemento a ter em mente é que os televisores têm um valor gama muito maior do que os dispositivos de desktop, tablet e aparelho. A melhor maneira de descrever como a gama afeta a qualidade da imagem é que a gama representa o nível de diferença de brilho entre cada etapa na escala de cinza, ou quão “rápido” os pretos ficam mais brilhantes. Percebemos o dobro da luz como sendo apenas uma fração mais brilhante. Diferentes marcas e modelos de TVs variam muito quando se trata de brilho, tela e outras configurações. Assim como o tipo, a cor deve ser testada cedo e frequentemente nas TVs.

Algumas diretrizes a serem seguidas ao escolher suas cores: Cores brilhantes podem prejudicar os olhos ao assistir televisão à noite ou em um quarto escuro. Evite o uso excessivo de cores saturadas (especialmente vermelho) e o uso intenso de branco em grandes elementos ou fundos. O branco puro criará halos e outras distrações visuais. Ao escolher brancos, é recomendado escolher um valor hexadecimal #f1f1f1 para evitar qualquer cintilação. Para aumentar a legibilidade, certifique-se de criar contraste suficiente entre seus elementos

A regra geral é evitar bordas afiadas entre cores altamente contrastantes (especialmente cores brilhantes ao lado de cores escuras) e evitar cores “quentes”, como vermelhos e amarelos muito saturados. Eles sangrarão mais facilmente do que cores menos saturadas ou cores mais frias, como azuis e verdes.

Sempre teste as cores em uma televisão real para entender como suas escolhas de cores se traduzem na tela grande. Se possível, visualize seu aplicativo em várias TVs, pois as cores podem variar drasticamente entre os modelos de televisão. Basta conectar o cabo HDMI do seu aparelho de TV e testá-lo.

O básico

Pequenas coisas a considerar.

Esses elementos devem ser usados ​​para orientar seus projetos como um todo. As maiores considerações ao projetar suas interfaces de usuário de TV são a simplicidade e a interação leve.

Embora muitos dos fundamentos e práticas recomendadas para o design de interação ainda se apliquem, a televisão é usada de maneira mais descontraída, diferente de um computador ou dispositivo móvel. A interface do usuário em uma televisão deve ser clara, simples e visual. O design requer simplicidade e clareza com baixa densidade de informações. Os elementos precisam ser grandes e espaçados o suficiente para serem lidos à distância. Apresente um conjunto claro de ações ou opções para cada tela.

Este design é limpo e simples, usando bons tratamentos de cartão grande. Os estados de foco são alcançados com escala e sombras projetadas que são alinhadas com o restante do design limpo. Os metadados também são visíveis apenas ao passar o mouse, o que permite que os usuários permaneçam focados no cartão atual.

Coloque o conteúdo ou as opções mais importantes primeiro na tela para que sejam facilmente visualizados e navegáveis ​​pelo usuário. Níveis de tela desnecessários devem ser removidos. Entrar em diferentes níveis e sair de novo deve ser fácil e óbvio.

O fator mais crucial ao projetar um aplicativo de TV é incluir uma navegação clara e precisa para as operações do usuário. Se a navegação for ambígua, os usuários se sentirão confusos e inseguros.

Resumindo, os usuários devem sempre saber exatamente onde estão dentro de um aplicativo. Lembre-se, o usuário está usando apenas controles básicos para navegar. Mover, Retornar, Entrar e outras funções básicas de navegação devem estar claras. Os usuários devem poder usar as operações que desejam com essas ações.

Como designers, nosso trabalho é criar e projetar interfaces de usuário que dêem aos usuários acesso ao conteúdo de uma forma clara e fácil de navegar. Não podemos esperar que os usuários adaptem novos hábitos apenas para que possam ver nosso conteúdo. Em vez disso, temos que adaptar nossas interfaces de usuário para que possam ser operadas no escuro por alguém que está nos dando menos do que sua intenção total e com um dispositivo de entrada muito limitado. É um grande desafio, mas a recompensa potencial é enorme. Divirta-se projetando!

• • •

Leia mais no Blog Toptal Design:

• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• A Importância do Design Centrado no Homem no Design de Produto
• Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
• Princípios heurísticos para interfaces móveis
• Design Antecipatório: Como criar experiências de usuário mágicas