Projetando Interfaces
Interativas para TV DIGITAL
A tv brasileira vive um momento especial. Trata-se de uma mudança de grande importância que permitirá a transição, da antiga tecnologia analógica de transmissão de sinais, para uma moderna e interativa tecnologia digital.
A implementação do novo modelo de transmissão, baseado em tecnologia digital, traz consigo novas possibilidades que vão bem além da expressiva melhora na emissão e recepção dos sinais e das imagens de alta definição que estarão disponíveis em breve através dos aparelhos de tv à grande população. A TV Digital permitirá a interação do telespectador com a programação assistida, sendo possível participar, por exemplo, de enquetes ao vivo, seleção de conteúdo, controle de som por canais etc. Toda essa gama de possibilidades interativas ocorrerá através de interfaces visuais desenvolvidas por designers, apresentadas ao telespectador na tela de sua tv e controladas via controle remoto.
O desenvolvimento das interfaces interativas para TV Digital no Brasil exigirá muita atenção por parte dos profissionais que irão projetá-las. Pensando nisso realizamos esse post baseados nas orientações do Manual de Design para TV Interativa da Rede BBC de Londres, de onde destacamos alguns dos cuidados essenciais para criação dessas interfaces.
A tv brasileira vive um momento especial. Trata-se de uma mudança de grande importância que permitirá a transição, da antiga tecnologia analógica de transmissão de sinais, para uma moderna e interativa tecnologia digital.
A implementação do novo modelo de transmissão, baseado em tecnologia digital, traz consigo novas possibilidades que vão bem além da expressiva melhora na emissão e recepção dos sinais e das imagens de alta definição que estarão disponíveis em breve através dos aparelhos de tv à grande população. A TV Digital permitirá a interação do telespectador com a programação assistida, sendo possível participar, por exemplo, de enquetes ao vivo, seleção de conteúdo, controle de som por canais etc. Toda essa gama de possibilidades interativas ocorrerá através de interfaces visuais desenvolvidas por designers, apresentadas ao telespectador na tela de sua tv e controladas via controle remoto.
O desenvolvimento das interfaces interativas para TV Digital no Brasil exigirá muita atenção por parte dos profissionais que irão projetá-las. Pensando nisso realizamos esse post baseados nas orientações do Manual de Design para TV Interativa da Rede BBC de Londres, de onde destacamos alguns dos cuidados essenciais para criação dessas interfaces.
Clareza e nitidez da interface
De acordo com o manual da BBC, o primeiro passo para o desenvolvimento de uma interface interativa com qualidade é avaliar a clareza, a nitidez, e a disposição dos elementos que deverão compor está interface. Os elementos gráficos, as fontes sem serifa e com tamanhos que permitem uma fácil leitura, bem como cores que proporcionem um bom e agradável contraste, são fundamentais para beneficiar o maior público possível.
De acordo com o manual da BBC, o primeiro passo para o desenvolvimento de uma interface interativa com qualidade é avaliar a clareza, a nitidez, e a disposição dos elementos que deverão compor está interface. Os elementos gráficos, as fontes sem serifa e com tamanhos que permitem uma fácil leitura, bem como cores que proporcionem um bom e agradável contraste, são fundamentais para beneficiar o maior público possível.
Margens de segurança
Todos os televisores possuem uma área central visível na tela. Entretanto, nem todas as tvs possuem uma tela com formato que apresente uma área maior de visão para suas laterais (borda esquerda e direita). Essas dimensões variam de acordo com as especificações do fabricante. Sendo assim, toda interface deve levar em consideração uma margem de segurança, para que tanto usuários de modelos convencionais como aqueles que possuem aparelhos de tv mais largos, em formato widescreen, possam ver adequadamente o conteúdo das interfaces interativas. Todo o enquadramento de elementos gráficos e textos devem, portanto, ser apresentados dentro de um campo de segurança que segue algumas medidas pré-determinadas.
Todos os televisores possuem uma área central visível na tela. Entretanto, nem todas as tvs possuem uma tela com formato que apresente uma área maior de visão para suas laterais (borda esquerda e direita). Essas dimensões variam de acordo com as especificações do fabricante. Sendo assim, toda interface deve levar em consideração uma margem de segurança, para que tanto usuários de modelos convencionais como aqueles que possuem aparelhos de tv mais largos, em formato widescreen, possam ver adequadamente o conteúdo das interfaces interativas. Todo o enquadramento de elementos gráficos e textos devem, portanto, ser apresentados dentro de um campo de segurança que segue algumas medidas pré-determinadas.
Área de segurança de imagens
Essa é a área que define os limites de visualização da principal área de enquadramento, em termos de imagem, que os telespectadores poderão ver na tela. Como existe uma variedade grande de tamanhos de tela, o ideal é que nunca se ocupe as laterais com conteúdos indispensáveis à leitura visual, pois poderão ou não ser apresentados.
Essa é a área que define os limites de visualização da principal área de enquadramento, em termos de imagem, que os telespectadores poderão ver na tela. Como existe uma variedade grande de tamanhos de tela, o ideal é que nunca se ocupe as laterais com conteúdos indispensáveis à leitura visual, pois poderão ou não ser apresentados.
Área de segurança para textos
Define os limites na área de tela na qual informações vitais, como logotipos e o texto podem ser colocados. Essas especificações são baseadas no tamanho de tela padrão.
Define os limites na área de tela na qual informações vitais, como logotipos e o texto podem ser colocados. Essas especificações são baseadas no tamanho de tela padrão.
Tamanho do pixel na tv
As imagens digitais são formadas por uma grade colorida de pixels (uma contração das palavras “imagem” e “elementos”). Essas unidades significam os menores elementos visuais de uma imagem. Os pixels dos monitores de computador são quadrados e diferentes dos que compõem telas de tv que assumem uma forma mais retangular. Os pixels da tv são um pouco mais largos, aproximadamente 1.067. Essa diferença precisa ser prevista e compensada na hora de produção de conteúdos. Para resolver essa disparidade todas as imagens destinadas para televisão devem ser criadas e guardadas inicialmente em 768 pixels de largura por 576 de altura. Em seguida deve ser reduzida horizontalmente para 720 pixels de largura. Quando transmitidos na televisão, os pixels mais largos da tela irão “alongar” o design de volta para as proporções corretas.
As imagens digitais são formadas por uma grade colorida de pixels (uma contração das palavras “imagem” e “elementos”). Essas unidades significam os menores elementos visuais de uma imagem. Os pixels dos monitores de computador são quadrados e diferentes dos que compõem telas de tv que assumem uma forma mais retangular. Os pixels da tv são um pouco mais largos, aproximadamente 1.067. Essa diferença precisa ser prevista e compensada na hora de produção de conteúdos. Para resolver essa disparidade todas as imagens destinadas para televisão devem ser criadas e guardadas inicialmente em 768 pixels de largura por 576 de altura. Em seguida deve ser reduzida horizontalmente para 720 pixels de largura. Quando transmitidos na televisão, os pixels mais largos da tela irão “alongar” o design de volta para as proporções corretas.Exibição
Telas de televisão são desenvolvidas para exibirem imagens em movimento e por isso causam alguns problemas para elementos gráficos e fotografias. Como há diferenças fundamentais entre a exibição em telas de computadores e televisões, é importante realizar constantes testes no PC para uma variedade de telas de tv.
Telas de televisão são desenvolvidas para exibirem imagens em movimento e por isso causam alguns problemas para elementos gráficos e fotografias. Como há diferenças fundamentais entre a exibição em telas de computadores e televisões, é importante realizar constantes testes no PC para uma variedade de telas de tv.
Tremulação/Cintilação (Flicker)
As imagens na tela da televisão podem ser compostas de um entrelaçamento de linhas impares e pares que se alternam a uma taxa de 60 vezes por segundo (modo interlaced) ou lidas simultaneamente (modo progressive scan). O tradicional modo interlaced de apresentar imagens possui alguns problemas. Frequentemente é possível perceber a estrutura de linhas que compõem a imagem, especialmente se há diferenças marcantes entre um campo e outro, devido à quebra na uniformidade do desenho dos tons e cores, problema este comum com imagens em movimento. Esta alternância rápida entre campos diferentes causa um efeito vibratório (cintilação) na imagem resultante, conhecido como flicker. Um semelhante efeito de distorção ocorre quando linhas finas em caracteres de texto e único pixel em fotografias pontilhadas aparecem na tela. Com em geral a resolução da tela de televisão é menor que de um monitor de computador, mesmo as imagens mais brilhantes aparecerão difusas na comparação. Diferentes set-top-boxes podem exagerar ainda mais os efeitos negativos de flicker.
As imagens na tela da televisão podem ser compostas de um entrelaçamento de linhas impares e pares que se alternam a uma taxa de 60 vezes por segundo (modo interlaced) ou lidas simultaneamente (modo progressive scan). O tradicional modo interlaced de apresentar imagens possui alguns problemas. Frequentemente é possível perceber a estrutura de linhas que compõem a imagem, especialmente se há diferenças marcantes entre um campo e outro, devido à quebra na uniformidade do desenho dos tons e cores, problema este comum com imagens em movimento. Esta alternância rápida entre campos diferentes causa um efeito vibratório (cintilação) na imagem resultante, conhecido como flicker. Um semelhante efeito de distorção ocorre quando linhas finas em caracteres de texto e único pixel em fotografias pontilhadas aparecem na tela. Com em geral a resolução da tela de televisão é menor que de um monitor de computador, mesmo as imagens mais brilhantes aparecerão difusas na comparação. Diferentes set-top-boxes podem exagerar ainda mais os efeitos negativos de flicker.Florescer (Bloom)
Cada linha de entrelaçamento é composta por um sinal analógico, que controla a mudança de cor e valor em toda tela. Fortes contrastes em matiz ou luminosidade ao longo destas linhas pode causar distorção, arremessando a exibição de bordas verticais para fora do alinhamento. A resultante “florescer” causa curvas ou ondas que serão exibidas em linhas verticais. Para evitar esse problema, designers devem evitar, por segurança, alterações em cores nas bordas verticais. Textos em cores fortes próximos das bordas retangulares podem causar distorções especialmente ruins.
Cada linha de entrelaçamento é composta por um sinal analógico, que controla a mudança de cor e valor em toda tela. Fortes contrastes em matiz ou luminosidade ao longo destas linhas pode causar distorção, arremessando a exibição de bordas verticais para fora do alinhamento. A resultante “florescer” causa curvas ou ondas que serão exibidas em linhas verticais. Para evitar esse problema, designers devem evitar, por segurança, alterações em cores nas bordas verticais. Textos em cores fortes próximos das bordas retangulares podem causar distorções especialmente ruins.
Exibição de cores na televisão
O uso de cores deve ser cuidadosamente considerado. Telas de televisão possuem uma gama global mais limitada que a de monitores de computadores e uma gama maior de valores. Isto resulta em contrastes mais altos e níveis maiores de saturação durante a apresentação na tela. Para alcançar equilíbrio em termos de intensidade de cores, as imagens devem ser atenuadas para baixo, menos saturadas quando saírem do computador para a tela da televisão. Vermelhos quentes e laranjas causam distorções particularmente graves, e pretos e brancos devem sempre ser evitados puros. O branco mais forte usado para exibição em telas de televisão deve ficar ao redor de 95%, ou 240/240/240 em termos de RGB. O preto mais escuro convencionalmente deve manter um valor de 5%, ou 16/16/16 em termos de RGB.
O uso de cores deve ser cuidadosamente considerado. Telas de televisão possuem uma gama global mais limitada que a de monitores de computadores e uma gama maior de valores. Isto resulta em contrastes mais altos e níveis maiores de saturação durante a apresentação na tela. Para alcançar equilíbrio em termos de intensidade de cores, as imagens devem ser atenuadas para baixo, menos saturadas quando saírem do computador para a tela da televisão. Vermelhos quentes e laranjas causam distorções particularmente graves, e pretos e brancos devem sempre ser evitados puros. O branco mais forte usado para exibição em telas de televisão deve ficar ao redor de 95%, ou 240/240/240 em termos de RGB. O preto mais escuro convencionalmente deve manter um valor de 5%, ou 16/16/16 em termos de RGB.
Moiré
Lê-se Muarê (é francês)
É um efeito ótico que surge da interferência de duas ondas de luminosidade (duas cores) num mesmo ponto. Para ter um exemplo prático: se uma pessoa vai com roupa listrada ou quadriculada num estúdio de tv, a imagem que será vista em casa, ficará borrada, ou com efeitos de arco íris.
Pixels simples podem causar cintilação (flicker), por conseguinte, deve-se evitar a aplicação de pontilhados em imagens que são convertidas para limitar cores em índices de tabelas (como GIF ou PNG 8bits). O designer deve desistir de usar padrões intrincados, uma vez que estes poderão causar uma distorção “Moiré”. Este efeito cintilante é um problema comum e ocorre quando certos padrões regulares como grades ou pontos são rodados longe da vertical verdadeira. Grandes e claramente definidas as regiões de cores não saturadas tendem a funcionar melhor em telas de televisão. Curvas são menos suscetíveis de distorcer que linhas retas e, em geral, o movimento diminui o impacto da exibição de problemas na televisão.
Lê-se Muarê (é francês)
É um efeito ótico que surge da interferência de duas ondas de luminosidade (duas cores) num mesmo ponto. Para ter um exemplo prático: se uma pessoa vai com roupa listrada ou quadriculada num estúdio de tv, a imagem que será vista em casa, ficará borrada, ou com efeitos de arco íris.
Pixels simples podem causar cintilação (flicker), por conseguinte, deve-se evitar a aplicação de pontilhados em imagens que são convertidas para limitar cores em índices de tabelas (como GIF ou PNG 8bits). O designer deve desistir de usar padrões intrincados, uma vez que estes poderão causar uma distorção “Moiré”. Este efeito cintilante é um problema comum e ocorre quando certos padrões regulares como grades ou pontos são rodados longe da vertical verdadeira. Grandes e claramente definidas as regiões de cores não saturadas tendem a funcionar melhor em telas de televisão. Curvas são menos suscetíveis de distorcer que linhas retas e, em geral, o movimento diminui o impacto da exibição de problemas na televisão.
Formato Widescreen
Por razões históricas a televisão adotou um formato padrão 4:3 (1.33:1), e a palavra “widescreen” é usada para descrever a imagem que seja maior que a norma padrão. Portanto, qualquer imagem que tenha uma taxa de proporção (Aspect Ratio – AR) maior pode ser descrita como widescreen. A indústria de radiodifusão decidiu que sua definição de widescreen é uma AR 16:9 (1.78:1).
É importante lembrar que isso vale para toda a palavra ‘widescreen”. Digital, HDTV, DTT e muitos outros tipos de jargão de transmissão não implica necessariamente o uso de imagens widescreen.
Por razões históricas a televisão adotou um formato padrão 4:3 (1.33:1), e a palavra “widescreen” é usada para descrever a imagem que seja maior que a norma padrão. Portanto, qualquer imagem que tenha uma taxa de proporção (Aspect Ratio – AR) maior pode ser descrita como widescreen. A indústria de radiodifusão decidiu que sua definição de widescreen é uma AR 16:9 (1.78:1).
É importante lembrar que isso vale para toda a palavra ‘widescreen”. Digital, HDTV, DTT e muitos outros tipos de jargão de transmissão não implica necessariamente o uso de imagens widescreen.
Mesmo conteúdo, resoluções diferentes
Deve-se levar em consideração duas coisas que acontecem quando o conteúdo feito para tv widescreen é visto por tvs comuns:
1 - Os cantos direito e esquerdo serão cortados, então esses espaços devem ser tratados como áreas para conteúdo extra, sem informações essenciais. Ou seja: serão imagens de fundo apenas. Textos, navegação e gráficos essenciais devem ser mantidos na área segura de 4:3 da tela das tvs comuns.
2 - Em vez de se cortar os cantos, algumas tvs optam por encolher todo o conteúdo em aproximadamente 25% para caber todo na tela pequena(com os famosos espaços pretos em cima e em baixo). Por isso todo texto no vídeo deve ser feito para ser legível neste tamanho menor (a fonte não deve ter menos de 27pt)
Atenção:
1024 x 576px é equivalente a medida widescreen 16:9 e 768 x 576px é equivalente a medida da tv comum de 4:3.
Deve-se levar em consideração duas coisas que acontecem quando o conteúdo feito para tv widescreen é visto por tvs comuns:
1 - Os cantos direito e esquerdo serão cortados, então esses espaços devem ser tratados como áreas para conteúdo extra, sem informações essenciais. Ou seja: serão imagens de fundo apenas. Textos, navegação e gráficos essenciais devem ser mantidos na área segura de 4:3 da tela das tvs comuns.
2 - Em vez de se cortar os cantos, algumas tvs optam por encolher todo o conteúdo em aproximadamente 25% para caber todo na tela pequena(com os famosos espaços pretos em cima e em baixo). Por isso todo texto no vídeo deve ser feito para ser legível neste tamanho menor (a fonte não deve ter menos de 27pt)
Atenção:
1024 x 576px é equivalente a medida widescreen 16:9 e 768 x 576px é equivalente a medida da tv comum de 4:3.
Captions/Chamadas:
1 - Mantenha-se dentro da área segura que é de 14:9 de um widescreen de 16:9(padrão).
2 - As chamadas devem ser deixadas tempo o suficiente para que você mesmo consiga lê-las três vezes.
3 - Seja relevante: se o programa é uma reprise, os telefones são necessários estar na tela?
4 - Não faça com que as chamadas se misturem com outros gráficos digitais ou elementos interativos/de navegação.
5 - Não use fonte pequena.
6 - Não deve se misturar com a imagem; vídeo do fundo.
1 - Mantenha-se dentro da área segura que é de 14:9 de um widescreen de 16:9(padrão).
2 - As chamadas devem ser deixadas tempo o suficiente para que você mesmo consiga lê-las três vezes.
3 - Seja relevante: se o programa é uma reprise, os telefones são necessários estar na tela?
4 - Não faça com que as chamadas se misturem com outros gráficos digitais ou elementos interativos/de navegação.
5 - Não use fonte pequena.
6 - Não deve se misturar com a imagem; vídeo do fundo.
Textos e Fontes
As pessoas não estão acostumadas a ler blocos de texto na tela da tv, a visualização de imagens paradas é de péssima qualidade na televisão.
Para facilitar a leitura aconselha-se evitar fontes com serifa, fontes muito finas ou muito grossas ou com qualquer efeito como blur ou dropshadow.
As fontes usadas devem ser cuidadosamente escolhidas e aplicadas, uma boa indicação é a fonte Gill Sans, usada pela BBC em títulos e chamadas especiais. Para o corpo do texto, eles usam a Tirésias, uma fonte especialmente criada para a BBC que é legível mesmo quando distorcida pelas adaptações entre tv normal e widescreen (esticada ou diminuída).
As pessoas não estão acostumadas a ler blocos de texto na tela da tv, a visualização de imagens paradas é de péssima qualidade na televisão.
Para facilitar a leitura aconselha-se evitar fontes com serifa, fontes muito finas ou muito grossas ou com qualquer efeito como blur ou dropshadow.
As fontes usadas devem ser cuidadosamente escolhidas e aplicadas, uma boa indicação é a fonte Gill Sans, usada pela BBC em títulos e chamadas especiais. Para o corpo do texto, eles usam a Tirésias, uma fonte especialmente criada para a BBC que é legível mesmo quando distorcida pelas adaptações entre tv normal e widescreen (esticada ou diminuída).
- Considerações:
- O tamanho da fonte do corpo geralmente não deve ter menos de 27pt e nunca abaixo de 18pt.
- Nunca use mais de duas fontes ao mesmo tempo em uma tela.
- Foi comprovado que um texto em fonte clara aplicada sobre um fundo escuro é mais fácil de ser lido na tela da tv.
- O texto em uma tela precisa de um espaçamento maior entre as linhas do que texto impresso.
- Uma tela cheia de texto deve ter no máximo 90 palavras.
- Um texto deve ser quebrado em vários blocos menores, facilitando a leitura.
Interatividade na tv digital
Apesar de todos utilizarem a interatividade, ela tende a ser mais útil para a audiência dominante. As pessoas interagem todo o tempo com a tv digital, mas é durante ou logo após uma transmissão que elas participam de maneira mais efetiva.
A vantagem da interatividade que a tv digital trás é a rapidez e conveniência de se obter determinada informação sem ter que acessar a internet (no conforto do sofá, por exemplo). Porém, um acesso confuso ainda pode gerar barreiras na exploração deste recurso.
Também é importante tentar alcançar telespectadores em todas as plataformas disponíveis no mercado. São elas:
Blocos de textos e informaçõesApesar de todos utilizarem a interatividade, ela tende a ser mais útil para a audiência dominante. As pessoas interagem todo o tempo com a tv digital, mas é durante ou logo após uma transmissão que elas participam de maneira mais efetiva.
A vantagem da interatividade que a tv digital trás é a rapidez e conveniência de se obter determinada informação sem ter que acessar a internet (no conforto do sofá, por exemplo). Porém, um acesso confuso ainda pode gerar barreiras na exploração deste recurso.
Também é importante tentar alcançar telespectadores em todas as plataformas disponíveis no mercado. São elas:
- Satélite Digital
- Tv aberta
- Tv a cabo
Navegação
Quanto a navegação, sua interface deve ser a mais simples e instintiva possível, orientando o telespectador a fazer escolhas certas pressionando os botões certos. Um tempo de resposta rápido também é muito importante, a demora na execução de uma ação incita o telespectador a trocar de canal.
Alguns princípios para uma boa navegação:
1 - Dizer ao telespectador onde ele está, como chegou até lá, e onde eles podem ir a qualquer momento.
2 - Providenciar feedback para cada comando executado.
3 - Rapidamente ensinar o telespectador a utilizar o serviço.
4 - Apresentar dispositivos previsíveis e consistentes de navegação.
5 - Encorajar a liberdade de movimento além de caminhos pré-determinados, e providenciar um rápido escape ou um fácil acesso a vídeo full screen.
6 - Além disso, uma boa navegação comunica ao telespectador o que ele pode esperar ao entrar em determinada aplicação e permite que o mesmo saia em qualquer ponto da navegação se assim desejar.
Quanto a navegação, sua interface deve ser a mais simples e instintiva possível, orientando o telespectador a fazer escolhas certas pressionando os botões certos. Um tempo de resposta rápido também é muito importante, a demora na execução de uma ação incita o telespectador a trocar de canal.
Alguns princípios para uma boa navegação:
1 - Dizer ao telespectador onde ele está, como chegou até lá, e onde eles podem ir a qualquer momento.
2 - Providenciar feedback para cada comando executado.
3 - Rapidamente ensinar o telespectador a utilizar o serviço.
4 - Apresentar dispositivos previsíveis e consistentes de navegação.
5 - Encorajar a liberdade de movimento além de caminhos pré-determinados, e providenciar um rápido escape ou um fácil acesso a vídeo full screen.
6 - Além disso, uma boa navegação comunica ao telespectador o que ele pode esperar ao entrar em determinada aplicação e permite que o mesmo saia em qualquer ponto da navegação se assim desejar.
Botões de navegação
A ordem (de importância) para as cores dos botões é vermelho, verde, azul e amarela. As funções designadas a esses botões devem se manter em um padrão durante toda a programação. Por exemplo: se o botão vermelho for designado para a função fechar, ele não poderá ser usado para nenhuma outra função futuramente, deverá sempre significar “fechar”.
Deve-se sempre oferecer, dentre essas funções, uma orientação para o usuário entender como utilizar a interatividade do programa pelo controle.
A ordem (de importância) para as cores dos botões é vermelho, verde, azul e amarela. As funções designadas a esses botões devem se manter em um padrão durante toda a programação. Por exemplo: se o botão vermelho for designado para a função fechar, ele não poderá ser usado para nenhuma outra função futuramente, deverá sempre significar “fechar”.
Deve-se sempre oferecer, dentre essas funções, uma orientação para o usuário entender como utilizar a interatividade do programa pelo controle.
- Considerações:
- Fonte Gill Sans Bold, Tamanho 22pt para textos que funcionem como botões coloridos.
- Posicionamento dos botões na horizontal, preferencialmente no final da tela e sempre na mesma ordem da esquerda para a direita.
- Manter as cores e as funcionalidades ligadas a elas consistentes durante uma aplicação.
Os telespectadores costumam ignorar textos na tela e fazem uma varredura no conteúdo para entendê-lo mais rapidamente.
Isso trás várias precauções e regras que devemos seguir ao disponibilizar conteúdo em uma tela:
- Manter o texto sucinto;
- Usar cor para sobressair o texto se a legibilidade da instrução está comprometida;
- Posicionar o texto de modo consistente durante todo o programa.
Referência: http://www.bbc.co.uk/guidelines/newmedia/
