design para tv interativa - ietv 2008
DESCRIPTION
Em anexo, o curso proferido por Lauro Teixeira no IETV sobre Design para TV Interativa. Lauro Teixeira é mestre em Comunicação pela Unesp com a pesquisa TV Digital: Interação e UsabilidadeTRANSCRIPT
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
“As idéias que defendo aqui, não são tanto
idéias que possuo, mas idéias que me
possuem." Edgar Morin
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
TV Digital – Panorama Mundial
Ofcom, Reino Unido - Mar. 2007
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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.
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Porquê TV Interativa no Brasil?
Infra-estrutura do Brasil de 1955 a 2005 em setores motivam a televisão interativa
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Aspectos históricos
O primeiro controle remoto (1957)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Aspectos históricos
Teletexto (Ceefax, 1973) e Videotexto (Prestel, 1979)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Aspectos históricos
Videocassete: Betamax (1975) e VHS (1976)
Fita de Betamax Fita de VHS
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Aspectos históricos
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Exemplo
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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...
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de Interação
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Local > Sincronizados > Overlay
Quiz Show – Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Local > Sincronizados > Redimensionado
Quiz Show – Brasil
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Local > Sincronizados > Apenas Interface
Quiz Show – Reino Unido
Vídeo que ilustra possibilidade, este exemplo está em overlay.
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Local > Sem sincronia > Overlay
Reality Show – Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Local > Sem sincronia > Redimensionado
Reality Show - Grécia
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Local > Sem sincronia > Apenas Interface
Game – Reino Unido
Também desvinculado, por operadores de plataforma
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Local > Desvinculados > Overlay
Guia de Programação – Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Local > Desvinculados > Redimensionado
Guia de programação - Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Local > Desvinculados > Apenas Interface
Serviço Prev. Tempo - Espanha
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Intermitente > Sincronizados > Overlay
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Intermitente > Sincronizados > Redimensionado
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Intermitente > Sincronizados > Apenas Interface
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Intermitente > Sem sincronia > Overlay
Entrevista – França
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Intermitente > Sem sincronia > Redimensionado
TV Shop – Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Intermitente > Sem sincronia > Apenas Interface
Propaganda – Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Intermitente > Desvinculados > Overlay
Propaganda – Reino Unido
Vinculado ao canal
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Intermitente > Desvinculados > Redimensionado
Desenho – Estados Unidos
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Intermitente > Desvinculados > Apenas Interface
Serviço SMS TV - França
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Permanente > Sincronizados > Overlay
Seriado – Reino Unido
Também sem sincronia em alguns formatos
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Permanente > Sincronizados > Redimensionado
Jockey TV – Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Permanente > Sincronizados > Apenas Interface
Jornalismo – Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Permanente > Sem sincronia > Overlay
TV Chat – Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Permanente > Sem sincronia > Redimensionado
Reality Show – Reino Unido
Também intermitente
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Permanente > Sem sincronia > Apenas Interface
TV Chat – Reino Unido
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Permanente > Desvinculados > Overlay
Game – Estados Unidos
Também local
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Diagrama de InteraçãoExemplo: Permanente > Desvinculados > Redimensionado
TV Chat – Reino Unido
Diagrama de InteraçãoExemplo: Permanente > Desvinculados > Apenas Interface
Serviço TV Banking - Itália
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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.
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Demanda - Internet
Fonte: CETIC.br 2008
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Demanda - Internet
Fonte: CETIC.br 2008
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Demanda - Internet
Fonte: CETIC.br 2008
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Web 2.0
A bolha que fez brotar a Web 2.0
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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.
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Demanda - Celular
Fonte: CETIC.br 2008
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Demanda
Fonte: CETIC.br 2008
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.
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Demanda
Gêneros de programas que o brasileiro mais assiste
CPqD, 2005
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Demanda
CPqD, 2005
Atributos considerados
importantes
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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.
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Produção
E também novas maneiras
de consumo do audiovisual
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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;
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Fragmento de programação
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Fragmento de programação
ii iiii
merchandising interativo
Qual interatividade e em que momento ela é mais conveniente?
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Fragmento de programação
ii
iiii
- TV Shop- Marketingii
Até onde vale a pena quebrar o fluxo?
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Fragmento de programação
ii
iiii ii
iiInteração no
programa (etv)
Qual experiência trará o programa?
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Fragmento de programação
iiii ii
ii
ii durante o intervalo
Qual elo nos manterá no canal?
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Fragmento de programação
O que a programação tem a ganhar?
iiii ii
ii
independente do programa (EPG)ii
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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.)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Programação - Formatos
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?
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Programação - Formatos
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?
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Programação - Formatosco
ntro
le d
o em
isso
r
controle do indivíduo
programaçãode massa
auto-programação
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Programação - Formatos
auto-programação
programaçãode massa
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Auto-Programação
auto-programação
programaçãode massa
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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”)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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 TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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 PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Design - Visibilidade
Trata-se da medida em que os objetos da interação reativa são perceptíveis ao interagente
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Design - FeedBack
Trata-se do modo como a reação do sistema se torna perceptível ao interagente
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Design - Restrições
Refere-se a delimitar o tipo de interação que pode ocorrer em um determinado momento.
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Design - Restrições
Na interface acima, foram ocultadas as cores vermelha, amarela e azul e os números 5, 6, 7, 8, 9, e 0
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Design - Restrições
As opções “vermelho” e “amarelo” não estão claras na tela. Deveriam estar restritas visualmente para evitar confusão
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Design - Mapeamento
Trata-se da relação lógica entres os controles de acordo com seus efeitos no sistema
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Design - Consistência
É transferência de conhecimento entre aplicações de uso semelhante
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Relação de Aspectos
4:3Standard
16:9Widescreen
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Relação de Aspectos
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.
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Relação de Aspectos
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Relação de Aspectos
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...
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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é"
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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.
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Fontes para TV - Exemplos
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Fontes para TV
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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)
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Interface X Controle Remoto
• 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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
Interface X Controle Remoto
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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!
DESIGN PARA TELEVISÂO DIGITAL INTERATIVA - Lauro Teixeira
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