Design De Iu
Repensando a interface do usuário para a plataforma de TV
Uma introdução aos ingredientes básicos de uma interface de usuário de TV
A grande maioria dos consumidores atualmente está cortando o cabo com a TV paga, mas isso não significa que eles tenham fugido da tela grande para consumir seu conteúdo.
De acordo com um comunicado de dados da Nielsen , Os hábitos de assistir adultos nos EUA descobriram que 92% de todas as visualizações ainda ocorrem na tela da televisão. Esses números são muito grandes.
Mais de 92% da audiência entre os adultos americanos ainda está na tela da televisão.
O significado de 'assistir televisão' mudou muito nas últimas décadas. Não estamos mais limitados a uma caixa com fio e remota para preencher nossas telas; estamos usando Smart TV, ou streaming 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 seu antigo guia na tela.
Pagar para assistir a uma transmissão ou programação VOD por meio de serviços online baseados em assinatura, como Hulu, Netflix ou Amazon, representa 26% dos entrevistados online 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 com a TV tradicional veio para ficar?
Todos parecemos pensar que os cortadores de corda representariam um número maior. Nielsen relata que 116,4 milhões de lares nos Estados Unidos devem assistir televisão 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 TV OTA gratuita. De todos os serviços de streaming disponíveis, o Netflix (60,7%) parece estar à frente do jogo, seguido pelo Amazon Prime Video (49,4%) e o Hulu (26%). Acho que uma das maiores razões pelas quais as pessoas estão cortando o cordão é que só queremos pagar pelo que usamos.
Em comparação com computadores e até mesmo telefones celulares, o design de interface do usuário para televisão ainda é uma área relativamente nova. Também é uma plataforma fundamentalmente diferente e a forma como consumimos nosso conteúdo é diferente. Projetar para TV requer um conjunto único de considerações, incluindo tamanho da tela e distância do visualizador, limitações técnicas e contexto de uso. Os usuários estão em uma experiência 'relaxada', 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 dos tablets e telefones com tela sensível ao toque, as interações nas televisões são feitas via D-pad (controle direcional) por meio de um controle remoto ou controlador de videogame, o que torna os anúncios mais complexos.
O monitor
As televisões não são como tablets e telefones.
As televisões mudaram muito ao longo do tempo, de uma grande peça de mobiliário a uma tela minimalista elegante pendurada em uma parede. Quando os televisores ocupavam toda a sala de estar, eles usavam tecnologia que produzia imagens inconsistentes nos televisores, especialmente perto das bordas. Para compensar esses problemas, as televisões CRT foram sujeitas a overscan. Isso significa apenas que as imagens foram ligeiramente aumentadas para que as bordas não ficassem fora dos limites da área de visualização.
Tradicionalmente, as emissoras previam isso e queriam evitar que suas informações críticas fossem exibidas muito perto das bordas da tela. Para resolver esse problema, eles criaram uma área segura para um título para exibir o texto sem distorção e uma área de ação segura onde a imagem poderia ser exibida com segurança.
Por razões além do nosso controle, overscan ainda é uma coisa ... mesmo em suas HDTVs mais recentes. A quantidade de overscan não é consistente nas TVs. Para garantir que todas as suas informações primárias, como títulos e ações importantes, estejam protegidas, mantenha-as dentro de margens seguras.
Atualmente, não existe um 'padrão' para áreas de ação segura, pois é definido principalmente pela própria plataforma. O Google mantém sua área segura estreita e a Apple é um pouco mais generosa. De acordo com 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 com as quais você pode estar trabalhando, sugiro usar uma zona de segurança de 60px nas margens superior e inferior e 90px nas laterais. Isso significa que todas as suas informações primárias precisarão caber nessa área para acomodar todas as telas de televisão e atender a todos os requisitos da plataforma.
Para iniciar seu novo design de interface de usuário de TV, crie uma nova tela 1920 x 1080. Seu preenchimento (zona de segurança) deve ser de 90 pixels nas laterais (esquerda e direita), bem como 60 pixels na parte superior e inferior. Você pode obter seu arquivo grátis baixando aqui .
Navegação
Como 'topo-fundo-esquerda-direita' formam as interfaces de TV.
Como designers, o hardware com o qual projetamos definirá alguns de nossos padrões de design. No celular, passamos, pressionamos, pressionamos longamente, puxamos, etc., para realizar ações. As guias e menus são usados como padrões de navegação em nossos dispositivos. A televisão oferece uma tela grande que pode facilmente se tornar muito complexa se não for feita corretamente. A visualização de longas filas de conteúdo para maximizar a quantidade do que é visível para os usuários se tornou um elemento padrão das interfaces de usuário de televisão.
Ao contrário dos dispositivos móveis que controlamos com os dedos, a maioria das interfaces de usuário de TV são controladas por um direcional e usadas à distância da tela. Seja em um controle remoto ou 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 alternar entre as exibiçõ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 estariam familiarizados.
O outro elemento crítico nas interfaces de usuário de TV é o status de foco. Sem a capacidade de tocar na tela ou usar o mouse, os usuários devem navegar até o item que desejam selecionar. Conforme o usuário navega no aplicativo, diferentes elementos da interface do usuário devem ser destacados para indicar que um elemento de navegação está em foco.
Foque e destaque os estados ao projetar para a televisão, pois eles são muito importantes. Esse estado de foco é o item que destaca um componente selecionável e indica a localização atual do usuário na tela. A forma como o foco é exibido pode variar; dependendo do componente, entretanto, a consistência sempre será a chave. Um foco claro e altamente visível ajuda o usuário a reconhecer rapidamente sua localização atual na tela e torna a navegação mais fácil. Quando um usuário se afasta momentaneamente da TV e olha de volta para ela, deve estar claro qual opção está selecionada para navegação. Cada item na tela deve ser acessível pelo cursor e deve sempre estar claro para onde o cursor pode se mover a seguir.
Exemplos de layouts que podem deixar os usuários se perguntando onde estão no aplicativo. Esses exemplos não fornecem uma indicação visual suficiente (status do foco) do posicionamento. Os usuários devem ser capazes de ver claramente onde estão o tempo todo, sem precisar mover para cima ou para baixo. Você deve conseguir desviar o olhar da TV e vice-versa e ainda saber sua posição.
Tipografia
Leia a três metros de distância.
Os aplicativos de TV costumam ser chamados de experiências de dez pés, um termo que se refere a uma distância comum entre você e sua televisão. Ao contrário de outros dispositivos, como celulares e desktops, a televisão foi configurada para ser um ambiente mais para “relaxar e aproveitar”. Dada essa distância, precisamos tratar uma interface de usuário ligeiramente diferente da que faríamos na web ou móvel.
As telas de TV geralmente são maiores do que dispositivos móveis e monitores de computador desktop, mas vistas de uma distância maior. A legibilidade se torna um recurso importante, o que significa que o tamanho do texto e outros elementos devem ser ajustados de acordo. Dependendo da sua idade, 18 px seria provavelmente o menor tamanho legível e apropriado apenas para marcas não essenciais, como um cílio de sobrancelha. Ainda assim, como regra geral, os tamanhos de fonte escolhidos nunca devem ser inferiores a 24 pt. Isso é o que eu consideraria o tamanho mínimo de fonte para acomodar cada tipo de usuário.
A chave para uma boa tipografia na televisão é testar constantemente. O tipo pequeno e fino em seu monitor ficará limpo e nítido, mas uma vez em uma TV, pode parecer estourado ou ser ininteligível.
A chave para uma boa tipografia na TV é testar constantemente. Tipos finos e pequenos em seu monitor parecerão limpos e nítidos, mas uma vez na TV, pode parecer estourado ou se tornar ininteligível.
Linhas de Exploração
O que são linhas de varredura?
Ao contrário das telas de desktops, celulares e tablets, a imagem em uma tela de televisão é composta por linhas de varredura ímpares e iguais. A televisão transforma essas linhas em fases, alternando rapidamente entre linhas de varredura pares e ímpares. Qualquer pixel (ou linha de pixels) que caia em uma única linha de varredura piscará. Para evitar a oscilação de seus elementos na tela, você deve sempre manter suas linhas de números pares e não mais finas do que 2 pixels. Isso é algo a se considerar quando se trabalha em projetos multiplataforma e se prepara para transferir seus designs para dispositivos sensíveis ao toque (celular e tablet), onde muitas vezes você pode encontrar a criação de botões de borda de 1px, para televisão.
Outra maneira de evitar essas linhas ou formas borradas é garantir que seus designs sejam sempre perfeitos em pixels. A ideia a seguir é um bom exemplo de linhas criadas com números irregulares. Como você pode ver, podemos ver claramente os efeitos disso, e isso se torna assustador para os olhos.
Cor
Monitores de TV têm limites.
O primeiro item a ter em mente é que as televisões têm um valor de gama muito mais alto do que computadores, tablets e telefones. A melhor maneira de descrever como o gama afeta a qualidade da imagem é que gama representa o nível de diferença no brilho entre cada etapa da escala de cinza ou como os pretos 'rápido' ficam mais brilhantes. Percebemos a luz duas vezes como apenas uma fração mais brilhante. Diferentes marcas e modelos de televisores variam amplamente no que diz respeito ao brilho, tela e outras configurações. Assim como o tipo, a cor deve ser testada cedo e freqüentemente em televisores.
Algumas diretrizes a serem seguidas ao escolher suas cores: As cores brilhantes podem ser prejudiciais aos 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 espaços em branco, é recomendável 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 nítidas entre cores altamente contrastantes (especialmente cores brilhantes ao lado de cores escuras) e evitar cores “quentes”, como vermelhos e amarelos altamente saturados. Eles sangram com mais facilidade do que cores menos saturadas ou cores mais frias, como azuis e verdes.
Sempre teste as cores em uma TV real para entender como suas escolhas de cores se traduzem na tela grande. Se possível, visualize seu aplicativo em várias televisões porque as cores podem variar drasticamente entre os modelos de televisão. Basta conectar o cabo HDMI da TV e experimentar.
O básico
Algumas pequenas coisas a considerar.
Esses elementos devem ser usados para orientar seus projetos como um todo. As considerações mais importantes ao projetar a IU da TV são a simplicidade e a interação leve.
Embora muitos dos fundamentos e práticas recomendadas para design de interação Ainda assim, a televisão é usada de uma forma mais relaxada, ao contrário 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ção. Os itens devem ser grandes e espaçados o suficiente para serem lidos à distância. Apresenta um conjunto claro de ações ou opções para cada tela.
Este design é limpo e simples, usando grandes tratamentos agradáveis no cartão. Os estados de foco são obtidos com escala e sombras projetadas que estão alinhadas com o resto do design limpo.
Este design é limpo e simples, usando tratamentos de cartão grandes agradáveis. Os estados de foco são obtidos com escala e sombras projetadas que estão alinhadas com o resto do design limpo. Os metadados também são visíveis apenas no estado _hover_, permitindo que os usuários fiquem focados no cartão atual.
Este design é limpo e simples, usando tratamentos de cartão grandes agradáveis. Os estados de foco são obtidos com escala e sombras projetadas que estão alinhadas com o resto do design limpo.
Empurrando os limites dos designs de TV tradicionais. Isso fornece uma abordagem cinematográfica alternativa para o tratamento usual de 16 x 9 cartões que muitos outros usam. Em comparação com muitos outros serviços, o foco era trazer o menu para a parte inferior da tela
Empurrando os limites dos designs de TV tradicionais. Ao trazer as notícias à tona, os usuários se concentram em uma notícia de cada vez em vez de linhas e mais linhas de conteúdo.
As interfaces de usuário das crianças devem ser intuitivas, divertidas e fáceis de usar. Este design mostra que as empresas são capazes de levar seus designs além de um sistema de grade tradicional, concentrando-se em cartões 1x1, 2x3 ou até 16x9.
Coloque o conteúdo ou as opções mais importantes primeiro na tela para que sejam facilmente visíveis e navegáveis pelo usuário. Níveis de tela desnecessários devem ser removidos. Entrar em níveis diferentes e sair novamente deve ser fácil e óbvio.
O fator mais importante 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 em um aplicativo. Lembre-se de que o usuário está usando apenas os controles básicos para navegar. Mover, Voltar, Entrar e outras funções básicas de navegação devem estar claras. Os usuários devem ser capazes de usar as operações que desejam com essas ações.
O foco era empurrar os limites do design de televisão tradicional. Você encontra maneiras criativas de demonstrar a ampla variedade de conteúdo disponível para os usuários, tornando-o intuitivo e fácil de usar.
Como designers, nosso trabalho é criar e projetar interfaces de usuário que permitam aos usuários acessar o conteúdo de uma forma clara e fácil de navegar. Não podemos esperar que os usuários adotem novos hábitos para que possam visualizar 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!
