Design para TV Interativa - IETV 2008

DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira

UNIVERSIDADE ESTADUAL PAULISTAPROGRAMA DE PÓS-GRADUAÇÃO EM COMUNICAÇÃO

Lauro TeixeiraGerente de Programação - TV Aparecida

Designer e Mestre em Comunicação - FAAC/Unesp

Televisão Digital: Interação e Usabilidade

[email protected]


“As idéias que defendo aqui, não são tanto

idéias que possuo, mas idéias que me

possuem." Edgar Morin


Do que vamos falar hoje?

O design de interação e a produção de conteúdo

interativo para TV Digital

Interação e Interatividade

Televisão Digital Interativa

Demanda

Programação do conteúdo interativo

Usabilidade e Design


TV Digital – Panorama Mundial

Ofcom, Reino Unido - Mar. 2007


DECRETO Nº. 5.820, DE 29 DE JUNHO DE 2006

Art. 6º O SBTVD-T possibilitará:

I - transmissão digital em alta definição (HDTV) e em

definição padrão (SDTV);

II - transmissão digital simultânea para recepção fixa,

móvel e portátil; e

III - interatividade.


Porquê TV Interativa no Brasil?

Infra-estrutura do Brasil de 1955 a 2005 em setores motivam a televisão interativa


O que é Interatividade?

“Capacidade (de um equipamento, sistema de comunicação ou computação, etc.) de interagir ou permitir interação” (Aurélio)

A Interação pode ocorrer diretamente entre dois ou mais entes atuantes, ao contrário da interatividade que é necessariamente intermediada por um meio eletrônico (Valdecir Becker / Carlos Montez)

Na década de 1960 o termo “interactivity” aparece para qualificar a computação com a incorporação de dispositivos de entrada e saída. (Sueli Fragoso)


O que é Interatividade?

“Participação ativa do beneficiário de uma transação de informação” (Pierre Lévy)

Em vez de trabalhar com a idéia de relacionamento entre homens e máquinas, considere pessoas com pessoas (Andrew Lippman – MIT)


Interatividade

Interatividade é a interação mediada por interfaces eletrônicas.

Níveis:

Reativo – nesse nível, as opções e realimentações (feedbacks) são dirigidas pelo programa, havendo pouco controle do usuário sobre a estrutura do conteúdo;

Coativo – apresentam-se aqui possibilidades de o usuário controlar a seqüência, o ritmo e o estilo;

Pró-ativo – o usuário pode controlar tanto a estrutura quanto o conteúdo

(Richard Reisman – MIT)

Mídia Quente e Fria (Marshall McLuhan)


Interatividade na TV Digital

Interatividade Local: A emissora transmite os programas e serviços com opções adicionais e o usuário pode escolher entre uma programação e outra ou habilitar/desabilitar opções.

Interatividade com canal de Retorno: o usuário pode "responder" aos aplicativos enviados pela emissora, simultaneamente ou não a um programa.

Interatividade Plena: Acesso à internet para publicação de conteúdo pessoal.

(Marcelo Zuffo, USP)


Interação e Interatividade

Interatividade Ênfase na mediação técnica

Diálogo / Bidirecionalidade

Marketing

Níveis / Usabilidade

Interação Agir reciprocamente

Relação entre eventos comunicativos

Interação Mútua X Interação Reativa (Alex Primo, UFRGS)

Usabilidade e Interação Reativa


Relação entre os modos de interação

Interação Mediadapor Computador

Interações MútuasCooperação, afecção mútua e criativa entre os interagentes.

Interações ReativasRelações pré-determinadas

de estímulo e resposta.

Interações Mútuas condicionadas por Interações Reativas

Usabilidade como Interação Reativa


0 que é TV Interativa?

Televisão interativa pode ser definida como qualquer coisa

que torne possível aos telespectadores dialogarem com as

pessoas que fazem um canal de televisão, programa ou

serviço. Um diálogo que leva os telespectadores para além

da experiência passiva de assistir e os permita fazer

escolhas ou tomar ações - mesmo que as ações sejam tão

simples como preencher um cartão postal e enviá-lo pelo

correio, ou desenhar uma imagem na tela da televisão.

(Mark Gawlinski, BBC)


Aspectos Históricos

A TV Interativa é anterior à TV Digital. Experiência apenas local Interação por vias indiretas: telefone, correio, internet, SMS

Winky Dink and You - CBS, 1953 Winky Dink KIT


Aspectos históricos

O primeiro controle remoto (1957)



Teletexto (Ceefax, 1973) e Videotexto (Prestel, 1979)



Videocassete: Betamax (1975) e VHS (1976)

Fita de Betamax Fita de VHS



Programação e tecnologia

Chamadas: Dialing for Dollars (1930 a 1970), What’s Your Stories (1988), Você Decide (1992)

Realitys: An American Family (1973), Survivor, No Limite(2000), COPS, The Real World, Na Real, Casa dos Artistas (2001), Big Brother (2002)

Década de 1990 - Stargazer, ACTV, telecomputador, WWW, Full Service Network, Satélite Digital e Cabo Digital, EPGs, TV interativa de duas telas, WebTV, PVRs (TiVo e Replay TV), VOD, TV Digital (ATSC, DVB, ISBD, SBTVD)


Exemplo


Categorias de TV Interativa

TV Expandida (eTV): a interatividade como extensão do conteúdo da programação.Enquetes, Reallity Shows, Propaganda, Games, Esportes, etc.

Serviços Interativos: A TV como um terminal de acesso. Previsão do tempo, horóscopo, sistema de e-mail, SMS, TV Banking, etc. (Walled Gardens); Internet TV; Teletexto Digital,

Infra-estrutura de navegação: Objetos da interatividade, Menus, guias de programação...


Diagrama de Interação


Diagrama de InteraçãoExemplo: Local > Sincronizados > Overlay

Quiz Show – Reino Unido


Diagrama de InteraçãoExemplo: Local > Sincronizados > Redimensionado

Quiz Show – Brasil


Diagrama de InteraçãoExemplo: Local > Sincronizados > Apenas Interface

Quiz Show – Reino Unido

Vídeo que ilustra possibilidade, este exemplo está em overlay.


Diagrama de InteraçãoExemplo: Local > Sem sincronia > Overlay

Reality Show – Reino Unido


Diagrama de InteraçãoExemplo: Local > Sem sincronia > Redimensionado

Reality Show - Grécia


Diagrama de InteraçãoExemplo: Local > Sem sincronia > Apenas Interface

Game – Reino Unido

Também desvinculado, por operadores de plataforma


Diagrama de InteraçãoExemplo: Local > Desvinculados > Overlay

Guia de Programação – Reino Unido


Diagrama de InteraçãoExemplo: Local > Desvinculados > Redimensionado

Guia de programação - Reino Unido


Diagrama de InteraçãoExemplo: Local > Desvinculados > Apenas Interface

Serviço Prev. Tempo - Espanha


Diagrama de InteraçãoExemplo: Intermitente > Sincronizados > Overlay


Diagrama de InteraçãoExemplo: Intermitente > Sincronizados > Redimensionado


Diagrama de InteraçãoExemplo: Intermitente > Sincronizados > Apenas Interface


Diagrama de InteraçãoExemplo: Intermitente > Sem sincronia > Overlay

Entrevista – França


Diagrama de InteraçãoExemplo: Intermitente > Sem sincronia > Redimensionado

TV Shop – Reino Unido


Diagrama de InteraçãoExemplo: Intermitente > Sem sincronia > Apenas Interface

Propaganda – Reino Unido


Diagrama de InteraçãoExemplo: Intermitente > Desvinculados > Overlay

Propaganda – Reino Unido

Vinculado ao canal


Diagrama de InteraçãoExemplo: Intermitente > Desvinculados > Redimensionado

Desenho – Estados Unidos


Diagrama de InteraçãoExemplo: Intermitente > Desvinculados > Apenas Interface

Serviço SMS TV - França


Diagrama de InteraçãoExemplo: Permanente > Sincronizados > Overlay

Seriado – Reino Unido

Também sem sincronia em alguns formatos


Diagrama de InteraçãoExemplo: Permanente > Sincronizados > Redimensionado

Jockey TV – Reino Unido


Diagrama de InteraçãoExemplo: Permanente > Sincronizados > Apenas Interface

Jornalismo – Reino Unido


Diagrama de InteraçãoExemplo: Permanente > Sem sincronia > Overlay

TV Chat – Reino Unido


Diagrama de InteraçãoExemplo: Permanente > Sem sincronia > Redimensionado

Reality Show – Reino Unido

Também intermitente


Diagrama de InteraçãoExemplo: Permanente > Sem sincronia > Apenas Interface



Diagrama de InteraçãoExemplo: Permanente > Desvinculados > Overlay

Game – Estados Unidos

Também local


Diagrama de InteraçãoExemplo: Permanente > Desvinculados > Redimensionado


Diagrama de InteraçãoExemplo: Permanente > Desvinculados > Apenas Interface

Serviço TV Banking - Itália


Novos ParadigmasTelevisão Convencional Televisão Interativa

Expectador passivo Participante ativo (usuário)

O conteúdo é empurrado até a audiência O conteúdo é puxado pela audiência

Modelo de receita baseado na propaganda

Modelo de receita baseado no comércio

Modelo de programação em função dos canais de transmissão

Modelo de programação com conteúdo disponível em banco de dados

Programação linear Programação participativa

Dispositivo Central Ubiqüidade (em qualquer lugar)

Uso principal para o entretenimentoUso estendido a compras, comunicação, integração social e educação.

Plataforma de comunicação unidirecional Plataforma de comunicação bidirecional

O emissor conhece bem o seu papel com relação a gêneros e formatos.

O papel do emissor passa a ser flexível e requer maior integração com o usuário.


Tendências no consumo de mídia

Maior controle do usuário

Maior participação

Consumo de diversos meios;

Conteúdos partilhados

Consumo Individualizado

(Pesquisa BBC – Ofcom, 2004)


Demanda - Internet

Fonte: CETIC.br 2008


Web 2.0

A bolha que fez brotar a Web 2.0


A Cauda Longa

• No mercado de massa, há escassez de espaço, o que nos faz “otimizar” o conteúdo para obter maior audiência. Nesse novo conceito de negócios (a abundância da Cauda Longa) o não-hit acaba se tornando uma parcela importante do faturamento e concorre diretamente com os poucos e efêmeros sucessos do momento.


Demanda - Celular



Demanda


A principal barreira de posse dos equipamentos TIC

nos domicílios continua sendo econômica: o custo

elevado do computador (78%) e do acesso à internet

no domicílio (58%), mas o principal motivo declarado

que leva o brasileiro a não usar a internet é a falta de

habilidade (55%), reforçando que a posse do

equipamento não é pré-requisito para o uso.


Demanda

Gêneros de programas que o brasileiro mais assiste

CPqD, 2005


Demanda

CPqD, 2005

Atributos considerados

importantes


Demanda

Aspectos populacionais

Concentração populacional em determinadas regiões

Baixo poder aquisitivo para bens de consumo duráveis

Boa penetração de DVDs e Celulares (51%)

98% dos lares com televisão

34% da população acessa a internet

Elevada heterogeneidade do público

Analfabetismo funcional


Demanda

Analfabetismo no Brasil

8% - Analfabetos absolutos

30% - Lêem enunciados de uma só frase

37% - Lêem textos curtos (cartas, notícias, etc.)

25% - Compreendem enunciados maiores e

relacionam textos diferentes.


Produção

Observar elementos que possam estimular a interatividade

Em programas ao vivo (jogos, shows, auditório), o usuário pode assumir postura mais ativa

30% dos acessos a serviços durante o comercial Comércio eletrônico Games Reallity Shows Serviços ligado ao jornalismo local


Produção

Considerar aspectos tradicionais de postura e uso

Expectativa de baixo esforço físico e cognitivo Postura predominantemente passiva Distância de 2 a 4 metros Aparelho Coletivo X Individual Ambiente pode estar escuro


Produção

E também novas maneiras

de consumo do audiovisual


Grade de Programação

Fluxo Televisual Planejado (Raymond Williams, 1974)

Transmissão seqüencial

Programa no contexto da programação

Unidades não acabadas

O eterno vir a ser

Cidadania pela informação;

Lazer pelo entretenimento;

Orientação por Gêneros;

Calendário social, relógio da vida cotidiana;


Programação de Televisão

Composição temporal (Grade) Otimização do espectro (limite de transmissão) Fluidez (seqüência harmônica entre programas) Coesão (narrativas que se complementam) Relevância (priorizar o que pode ser importante) Distribuição indiscriminada (não sei quem vai assistir) Qualidade (som, imagem e conteúdo)

TV Digital Composição espacial (dados disponíveis) Processamento (vídeos e aplicativos que não travam) Conveniência (interatividade que não incomoda) Usabilidade (interatividade que não frustra) Maior qualidade (que justifique a transição)


Fragmento de programação

Bloco de programa Intervalo

níve

l de

ate

nção

linha do tempo

O break tem a função de:

- Garantir a “respiração” para absorver a dispersão

- Permite explorar ganchos de tensão

- Estimular o imaginário



iiii ii

ii

A interatividade ao longo da programação:

- Explora momentos de atenção

- Satisfaz o interesse por conteúdo extra

- Promove uma experiência mais satisfatória



ii iiii

merchandising interativo

Qual interatividade e em que momento ela é mais conveniente?



ii

iiii

- TV Shop- Marketingii

Até onde vale a pena quebrar o fluxo?



ii

iiii ii

iiInteração no

programa (etv)

Qual experiência trará o programa?



iiii ii

ii

ii durante o intervalo

Qual elo nos manterá no canal?



O que a programação tem a ganhar?

iiii ii

ii

independente do programa (EPG)ii


Programação - Formatos

Programas Quentes

Os que não têm sentido fora da programação

(telejornal, esporte, auditório, ao vivo em geral, etc.)

Programas Frios

Os que podem ser gravados

(filmes, novelas, séries, documentários, etc.)



linha do tempo horário que o usuário dispõe

Programação de televisão

DVDAuto-programação

Canal A

Canal B

Na competição pelo tempo do usuário, os programas quentes podem perder audiência?



linha do tempo horário que o usuário dispõe

Programação de televisão

DVDAuto-programação

Canal A

Canal B

No entanto, programas quentes são genuinamente televisivos e concorrem menos com outras mídias?


Programação - Formatosco

ntro

le d

o em

isso

r

controle do indivíduo

programaçãode massa

auto-programação



auto-programação


cont

role

do

emis

sor

grav

ação

com

parti

lham

ento

adap

taçã

o

linearidade

relac

ionam

ento

interesse geral

múlt

ipla

esco

lha

ação presu

mida

cola

bora

ção

conteúdo interativo

exib

ição

parti

cula

r

prod

ução

par

ticul

ar

estrutura interativa

...

centralidade

on-d

eman

d

controle do indivíduo


Auto-Programação

auto-programação


O conteúdo éempurrado até a audiência

O conteúdo épuxado pela audiência

O conteúdo é a audiência

TelespectadorNível depassividade

UsuárioNível deinteração reativa

InteragenteNível de interação mútua

Programaçãopela transmissão(temporal)

Programaçãopelo acesso(espacial)

Auto-programação(espaço-temporal)


Usabilidade

Usabilidade está ligada diretamente ao diálogo na interface. É a capacidade do aplicativo em permitir que o usuário alcance suas metas de interação.

O usuário deve chegar com facilidade no conteúdo (a boa interface é a que passa despercebida)


Usabilidade

A usabilidade está associada a cinco atributos:

ser fácil de aprender (“Learnabilty”) ser eficiente na utilização (“Efficiency”) ser fácil de ser recordado

(“Memorability”) ter poucos ou nenhum erro (“Few Errors”) ser subjetivamente agradável

(“Satisfaction”)


Usabilidade

Aspectos de usabilidade

A boa navegação se apóia nas metas e desejos do espectador evitando que encontre obstáculos desnecessários.

Objetivos da interface: Mostrar ao usuário onde ele está, como chegou lá e facilitar os caminhos

para onde ele pretende ir Avaliar sempre que ele executar um comando (feedback) Ensinar em segundos Relacionar modelos culturais e metáforas Ser previsível e consistente Encorajar a liberdade de movimento Facilitar a fuga


Usabilidade

Espaço:

Em geral os espectadores de TV prestam menos atenção no que estão vendo do que os de computador e dispositivos móveis. A experiência de televisão se dá curvando-se para trás. As pessoas podem achar a interação cansativa e irritante. A interface deve ser simples: menos é mais.

Tempo:

Espectadores de TV estão acostumados com a uma experiência visual e auditiva muito rica e uma sensação de tempo real. A navegação básica deve dar respostas em frações de segundos Deve acompanhar o raciocínio do usuário, inclusive na TV

Expandida


Design para Usabilidade

Princípios de design com foco em usabilidade:

Visibilidade (visibility); Retorno (feedback); Restrições (constraints); Mapeamento (mapping); Consistência (consistency); Pistas (affordances)


Design - Visibilidade

Trata-se da medida em que os objetos da interação reativa são perceptíveis ao interagente


Design - FeedBack

Trata-se do modo como a reação do sistema se torna perceptível ao interagente


Design - Restrições

Refere-se a delimitar o tipo de interação que pode ocorrer em um determinado momento.



Na interface acima, foram ocultadas as cores vermelha, amarela e azul e os números 5, 6, 7, 8, 9, e 0



As opções “vermelho” e “amarelo” não estão claras na tela. Deveriam estar restritas visualmente para evitar confusão


Design - Mapeamento

Trata-se da relação lógica entres os controles de acordo com seus efeitos no sistema


Design - Consistência

É transferência de conhecimento entre aplicações de uso semelhante


Design - Affordances

Affordance significa “dar uma pista”. É o modo de projetar objetos que se apresentem óbvios quanto à função que exercem.

Affordance: percebida e a real


Relação de Aspectos

4:3Standard

16:9Widescreen



4:3 Esticada para 16:9(Stretched)

Centralizada em 16:9(Pillars)

Na exibição, a TV 16:9 tem como opção esticar ou centralizar a imagem para se adaptar. Nessa passagem não há perda de informações.



Porém, quando um programa em widescreen é exibido numa tela 4:3, a imagem é cortada nas extremidades ou encolhida a 75% de seu tamanho

16:9 Cortado para 4:3(Centre cut-out)

Centralizado para 4:3(Letterboxed)



Considerar as extremidades como áreas não seguras e manter apenas informações de fundo para o caso de serem cortadas.

O texto deve ser grande para ser legível pois também poderá ser encolhido em 25%

O ideal é projetar interfaces em 4:3, ou interfaces líquidas

Se projetar em 16:9...


CRT - O tamanho do Pixel

Desenhando no tamanho final, terá

distorções

Desenhar mais largo e reduzir para que ele seja

exibido corretamente

O escaneamento do CRT, entre outros fatores, esticam os elementos contidos nas linhas


CRT - Possíveis Distorções

A TV CRT foi projetada para imagens fotográficas em movimento. As interfaces gráficas costumam ser sintéticas e estáticas.

As imagens na tela da TV são compostas por linhas de varredura que se entrelaçam para formar a imagem.

Detalhes muito pequenos (pontos e linhas de 1

pixel de altura) podem sumir ou se duplicar provocando efeitos

desagradáveis

Elementos contrastantes em cor ou luminância ao longo das linhas podem esticá-las, provocando

curvas em linhas verticais


CRT - Possíveis Distorções

As cores devem ser tratadas com cuidado, pois a tela de TV monitora gamas de cores mais limitadas que a do computador. Para se alcançar intensidade semelhante, deve-se reduzir a saturação.

Branco máximo:95% (240/240/240)

Preto mínimo:5% (16/16/16)

A mudança entre cores saturadas pode

provocar invasão de área (sangramento)

Quando padrões regulares, como grades ou pontos, são girados,

provocam o efeito "Moiré"


Fontes para TV

• Tamanho mínimo de 18 pontos, preferível 24.• Texto claro em fundo escuro• Maior entrelinhas e entreletras (até 130%)• Uma tela inteira deve ter no máximo 90 palavras• Fontes mais grossas e sem serifas.


Fontes para TV - Exemplos


Fontes para TV


Interface X Controle Remoto

Na Europa, as teclas coloridas tiveram origem como atalhos para páginas de teletexto. Na TV Interativa elas são tidas como aceleradores para mecanismos de navegação simples e até serviços incomuns.

Portugal TV Globo – (Uso interno)



• Se possível, a interface deve manter sempre a mesma ordem de cores, mesmo que uma aplicação não use as 4 cores.

• Cada cor deve estar apta a responder por apenas um item na tela.

• Não usar para funções que seriam supridas por setas (avançar, recuar, etc.)

• As cores das extremidades são as mais importantes


Interface X Controle Remoto A interface deve ensinar o espectador a usar

instintivamente o controle apertando os botões certos. As teclas tradicionais básicas não devem ser remapeadas

O Controle Remoto deve ser leve e as informações visíveis

Teclas comuns: Tradicionais de televisão (volume, canal, liga, etc) Números (alguns associados a letras) Setas e chave de seleção Teclas coloridas (Teletexto) Específicas de plataformas adicionais

Teclas nem sempre presentes: Volta / Cancela Sair Ajuda



Embora as teclas numéricas tenham o propósito de mudar de canal, elas também podem auxiliar na navegação:

Escolha entre itens distintos (menus, enquetes, etc.)

Devem se posicionar no mesmo lugar em toda tela de um serviço disponível

Evitar:

Palavras em vez de numerais para representar uma opção numérica

Números que se confundam em cor e tamanho com os textos da página

Item de seleção com mais de um número


Interface X Controle Remoto As setas são as principais ferramentas de

navegação por sua flexibilidade. Elas dificilmente são usadas fora de aplicações interativas e por isso não se confundem com as teclas tradicionais.

Na interface: Utilizar ícones triangulares simples para

representar setas. Uniformizar itens Menus verticais são mais óbvios Realçar a opção selecionada Usar rótulos em textos de múltiplas páginas

Evitar: Disponibilizar itens de forma diagonal ou em

curva, pois dificulta pressupor para onde o destaque de moveria

Ícones complexos que não se relacione claramente com o uso da seta

Dois eixos de seleção ao mesmo tempo


Concluindo

“Liberdade:

essa palavra que o sonho humano alimenta,

que não há ninguém que explique

e ninguém que não entenda”.

Cecília Meireles

A interatividade é vista como promessa de liberdade da programação

Obrigado!


Referências

Obrigado!

Livros

ANDERSON, Chris (2007). A Cauda Longa GAWLINSKI, Mark. (2003). Interactive Television Production. GRIFFITHS, Alan. (2003). Digital Television Strategies JOHNSON, Steven. (2005). A televisão e o videogame nos tornam mas inteligentes. NORMAN, D. A. (1988). The Design of Everyday Things PRIMO, Alex (2007). Interação Mediada por Computador

Sites CPqD. http://sbtvd.cpqd.com.br Style Guide BBCi - www.bbc.co.uk/commissioning Aplicativos TVi: www.broadbandbananas.com Ofcom - www.ofcom.org.uk

Design para TV Interativa - IETV 2008

Entertainment & Humor

Transcript of Design para TV Interativa - IETV 2008