Design para TV Interativa - IETV 2008

UNIVERSIDADE ESTADUAL PAULISTA PROGRAMA DE PÓS-GRADUAÇÃO EM COMUNICAÇÃO Lauro Teixeira Gerente de Programação - TV Aparecida Designer e Mestre em Comunicação - FAAC/Unesp Televisão Digital: Interação e Usabilidade lauropt@gmail.com

“ 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ções Mútuas condicionadas por Interações Reativas

Usabilidade como Interação Reativa

Interação Mediada por Computador Interações Mútuas Cooperação, afecção mútua e criativa entre os interagentes. Interações Reativas Relações pré-determinadas de estímulo e resposta.

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), W hat’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ção Exemplo: Local > Sincronizados > Overlay Quiz Show – Reino Unido

Diagrama de Interação Exemplo: Local > Sincronizados > Redimensionado Quiz Show – Brasil

Diagrama de Interação Exemplo: Local > Sincronizados > Apenas Interface Quiz Show – Reino Unido Vídeo que ilustra possibilidade, este exemplo está em overlay.

Diagrama de Interação Exemplo: Local > Sem sincronia > Overlay Reality Show – Reino Unido

Diagrama de Interação Exemplo: Local > Sem sincronia > Redimensionado Reality Show - Grécia

Diagrama de Interação Exemplo: Local > Sem sincronia > Apenas Interface Game – Reino Unido Também desvinculado, por operadores de plataforma

Diagrama de Interação Exemplo: Local > Desvinculados > Overlay Guia de Programação – Reino Unido

Diagrama de Interação Exemplo: Local > Desvinculados > Redimensionado Guia de programação - Reino Unido

Diagrama de Interação Exemplo: Local > Desvinculados > Apenas Interface Serviço Prev. Tempo - Espanha

Diagrama de Interação Exemplo: Intermitente > Sincronizados > Overlay

Diagrama de Interação Exemplo: Intermitente > Sincronizados > Redimensionado

Diagrama de Interação Exemplo: Intermitente > Sincronizados > Apenas Interface

Diagrama de Interação Exemplo: Intermitente > Sem sincronia > Overlay Entrevista – França

Diagrama de Interação Exemplo: Intermitente > Sem sincronia > Redimensionado TV Shop – Reino Unido

Diagrama de Interação Exemplo: Intermitente > Sem sincronia > Apenas Interface Propaganda – Reino Unido

Diagrama de Interação Exemplo: Intermitente > Desvinculados > Overlay Propaganda – Reino Unido Vinculado ao canal

Diagrama de Interação Exemplo: Intermitente > Desvinculados > Redimensionado Desenho – Estados Unidos

Diagrama de Interação Exemplo: Intermitente > Desvinculados > Apenas Interface Serviço SMS TV - França

Diagrama de Interação Exemplo: Permanente > Sincronizados > Overlay Seriado – Reino Unido Também sem sincronia em alguns formatos

Diagrama de Interação Exemplo: Permanente > Sincronizados > Redimensionado Jockey TV – Reino Unido

Diagrama de Interação Exemplo: Permanente > Sincronizados > Apenas Interface Jornalismo – Reino Unido

Diagrama de Interação Exemplo: Permanente > Sem sincronia > Overlay TV Chat – Reino Unido

Diagrama de Interação Exemplo: Permanente > Sem sincronia > Redimensionado Reality Show – Reino Unido Também intermitente

Diagrama de Interação Exemplo: Permanente > Sem sincronia > Apenas Interface TV Chat – Reino Unido

Diagrama de Interação Exemplo: Permanente > Desvinculados > Overlay Game – Estados Unidos Também local

Diagrama de Interação Exemplo: Permanente > Desvinculados > Redimensionado TV Chat – Reino Unido

Diagrama de Interação Exemplo: Permanente > Desvinculados > Apenas Interface Serviço TV Banking - Itália

Novos Paradigmas Televisã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 p articipativa Dispositivo Central Ubiqüidade (em qualquer lugar) Uso principal para o entretenimento Uso 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 Fonte: CETIC.br 2008

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.

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 nível de atençã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

Bloco de programa Intervalo

Fragmento de programação i i i i

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

Fragmento de programação i i i merchandising interativo Qual interatividade e em que momento ela é mais conveniente?

Fragmento de programação i i i

TV Shop

Marketing

i Até onde vale a pena quebrar o fluxo?

Fragmento de programação i i i i i Interação no programa ( etv ) Qual experiência trará o programa?

Fragmento de programação i i i i i durante o intervalo Qual elo nos manterá no canal?

Fragmento de programação O que a programação tem a ganhar? i i i i independente do programa (EPG) i

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.)

Programação - Formatos linha do tempo horário que o usuário dispõe Programação de televisão DVD Auto-programação Canal A Canal B Na competição pelo tempo do usuário, os programas quentes podem perder audiência?

Programação - Formatos linha do tempo horário que o usuário dispõe Programação de televisão DVD Auto-programação Canal A Canal B No entanto, programas quentes são genuinamente televisivos e concorrem menos com outras mídias?

Programação - Formatos controle do emissor controle do indivíduo programação de massa auto-programação

Programação - Formatos auto-programação programação de massa controle do emissor gravação compartilhamento adaptação linearidade relacionamento interesse geral múltipla escolha ação presumida colaboração conteúdo interativo exibição particular produção particular estrutura interativa ... centralidade on-demand controle do indivíduo

Auto-Programação auto-programação programação de massa O conteúdo é empurrado até a audiência O conteúdo é puxado pela audiência O conteúdo é a audiência Telespectador Nível de passividade Usuário Nível de interação reativa Interagente Nível de interação mútua Programação pela transmissão (temporal) Programação pelo 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.

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 - Restrições 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:3 Standard 16:9 Widescreen

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.

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)

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...

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)

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

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

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!