O documento discute conceitos de design de mídia interativa, incluindo interatividade, design de interação, usabilidade na web e inovação. Aborda como a internet permite a personalização, globalização, integração, aproximação e convergência de mídia.

1. Design
de Mídia
Interativa

2. Mídias
Interativas

3.  Mídia interativa está relacionada aos conceitos design de
interação, interatividade, interação homem-computador,
cultura digital, e inclui casos específicos como, por exemplo,
televisão interativa, narrativa interativa, publicidade
interativa, arte algorítmica, videogames, social media,
inteligência ambiente, realidade virtual e realidade
aumentada.
Mídia interativa

4.  Design de interação é uma área do design especializada no
projeto de artefatos interativos, como websites, PDAs, jogos
eletrônicos e softwares.
 O foco de pesquisa e estudo do Design de Interação são as
relações humanas tecidas através dos artefatos interativos,
que funcionam também como meios de comunicação
interpessoal.
Design de interação

5.  Vertente do design cuja filosofia prega o desenvolvimento
de projetos a partir da aplicação de conceitos construídos
com base na observação das experiências e de testes com
usuários.
 Sua aplicação visa a melhoria da relação homem-máquina,
já que o sucesso de um produto no mercado depende
muito da experiência interativa que ele pode proporcionar.
Design de interação

6. Benefícios:
 Adequar respostas do sistema às entradas do usuário
 Balancear interação e funcionalidade
 Prevenir erros do usuário
 Aplicando estes conhecimentos, os designers de interação
criam produtos e serviços de maior (usabilidade) sob o
conceito do Design Centrado no Usuário, levando em conta
os objetivos, funções, experiências, necessidades e desejos
destes.
Design de interação

7. Rápida
introdução à
usabilidade
na Web

8. Jakob Nielsen (2003):
Rápida introdução à usabilidade na Web
» “É importante perceber que a Usabilidade não
é uma propriedade singular, unidimensional de
uma interface com os usuários. A Usabilidade
tem componentes múltiplos e é
tradicionalmente associada com estes cinco
atributos:
1. Ser fácil de aprender;
2. Ser eficiente na utilização;
3. Ser fácil de ser recordado;
4. Ter poucos erros;
5. Ser subjetivamente agradável.”

9.  Por que a Usabilidade é importante?
 Na Web, a Usabilidade é uma característica necessária para
a sobrevivência. É uma mídia em que o usuário tem que ter
um comportamento ativo. Isso não acontece na TV e no
Rádio, por exemplo.
 Se um site for difícil de usar, o usuário sai. Se a homepage
não for clara o suficiente para mostrar o que a empresa
oferece e o que é possível fazer, o usuário também sai. Se o
usuário se perder, ele sai. Se demorar para carregar: sai sai e
sai.
Rápida introdução à usabilidade na Web

10. Os usuários
nunca
estão errados

11.  Donald Norman
 “The Design of Everyday Things”.
Os usuários nunca estão errados
“Pessoas normalmente cometem erros
durante a utilização de uma série de
diferentes produtos. Invariavelmente, elas se
sentem culpadas e tentam esconder o erro ou
culpar-se por “burrice”, falta de prática e
ignorância. O que acontece na verdade, é que
outros cometem o mesmo erro e isso ocorre
em virtude de um design mal feito.”

12.  Ou seja: quem tem dificuldades na utilização de
determinado produto não tem culpa. A responsabilidade é
de quem projetou, da pessoa que desenvolveu aquilo e não
pensou bem nas prováveis situações de uso e possíveis erros
a serem cometidos.
 Ao invés de ficar com raiva por alguém não ter conseguido
usar aquilo que você criou, entenda isso como um
aprendizado, uma coisa boa que aconteceu. Afinal de
contas, você sempre pode melhorar e essa pessoa acaba
de te dar uma boa dica de como fazê-lo. Tente pensar
sempre primeiro nas pessoas. Para isso, é preciso inovar!
Transicionar valores em novas plataformas de mídia.
Os usuários nunca estão errados

13. Inovação
interativa
e mídia

14.  A interatividade na comunicação tem foco nas pessoas
(target) e isto acontece desde sempre.
 Sempre criamos um estímulo (call to action) que demanda
uma reposta do consumidor.
(ex: Compre/Conheça/Experimente/Recomende).
 Antes o consumidor não podia responder pelo mesmo canal
de comunicação/através da mesma mídia.
 Hoje por causa das inovações interativas, ferramentas,
formatos e linguagens são criados constantemente e a
comunicação as incorpora para continuar suas atividades.
Inovação interativa e mídia

15.  A grande revolução que as inovações interativas trazem à
publicidade é a necessidade de criarmos técnicas para as
marcas se aproximarem se conectarem ao consumidor.
Já não basta apenas falar, hoje enfrentamos o desafio de
escutar e dialogar com consumidores, que tem um potencial
poder de mídia equivalente ao que um grande investimento
em mídia de uma campanha pode adquirir.
Inovação interativa e mídia

16. » 30 milhoes de views desde Janeiro/2009

17. » Remix e releituras do conteúdo ampliando a disseminação da mensagem.
(o sonho de toda a campanha publicitária)

18. » #chupa ; #forasarney #josemayer
» Tags criadas pelas pessoas na Brasil
e que chegaram a ser listadas em
‘trend topics’ no Twitter, que é uma
ferramenta de abrangência mundial.

19. 7 forças da
mídia
Interativa

20. Conceitos
»1. Interatividade
»2. Personalização
»3. Globalização
»4. Integração
»5. Aproximação
»6. Convergência
»7. Democratização
da Informação

21.  A Interatividade é uma exigência crescente dos clientes, e
deve ser entendida de maneira mais ampla que a simples
possibilidade de transferência bidirecional de dados.
 Uma característica essencial da interatividade é que é
mútuo: usuário e máquina, cada um assume um papel mais
ou menos ativa. Sistemas de computação mais interativo são
para algum propósito humano e interagir com os seres
humanos em contextos humanos.
 O provimento de interatividade pressupõe o estudo dos
públicos com que se pretende interagir. Conhecendo-se
esses públicos, pode-se suprir as necessidades de
informação e oferecer outras facilidades que cada público
deseja.
1. Interatividade

22.  Embora pareça um paradoxo, o atendimento em massa
pode ser personalizado. Por meio dele é possível prover uma
prestação de serviços de excelente qualidade com custos
operacionais baixos.
 Ir além das expectativas.
 Um exemplo clássico é o da FedEx, que em seu site possibilita
ao cliente, rastrear o material enviada, por meio de um
código associado à encomenda, onde esta se encontra em
um dado momento e a previsão de entrega no destino.
2. Personalização

23.  A Internet interliga instantaneamente o mundo dos negócios,
permitindo que seu cliente, em qualquer lugar do mundo,
tenha informações atualizadas sobre seus produtos, faça
solicitações de cotações e pedidos online, verifique prazos
de entrega, tenha acesso a bancos de dados com as
perguntas freqüentes sobre seus produtos e muito mais.
 Além de distribuir informações em segundos de e para
qualquer lugar do mundo, a rede mundial permite o
surgimento de veículos globais.
3. Globalização

24.  Cada vez mais o relacionamento entre empresas será
integrado pela transferência de dados via redes privadas,
via Internet e mobile.
4. Integração

25.  A tecnologia multimídia permite a divulgação de produtos e
serviços com grande volume informativo: imagem, áudio e
vídeo. Isso aproxima o consumidor do produto, permitindo
que alguns setores façam venda direta ao consumidor ou
ao varejista sem utilização de intermediários.
5. Aproximação

26.  Estamos entrando na era da convergência, quando em um
único serviço de comunicação temos a capacidade de
acessar diversos tipos de suporte como áudio, vídeo,
imagens, textos em inúmeros formatos.
 A nova mídia tem múltiplos formatos de distribuição de
informações e é bilateral, não uma via de mão única. Essa
possibilidade de interação nos obriga a uma reflexão sobre
o desenvolvimento de um novo modelo de comunicação.
6. Convergência

27.  Nunca, em tempo nenhum, a informação pôde ser
disponibilizada em volumes tão grandes, com distribuição
tão barata, tamanha rapidez de atualização e através de
mecanismos de pesquisa tão poderosos.
 Na Internet, tanto os sites gratuitos como os pagos oferecem
conteúdo informativo a custos incomparáveis com os de
livros, enciclopédias e revistas, quando comparamos o
volume de informação disponível.
7. Democratização da Informação

28. Visão geral do
design no
processo de
projeto

29.  Isto já pôde ser observado na primeira conferência sobre
hipertextos, que aconteceu em Chapel Hill, na Califórnia, em
1987. O evento reuniu pesquisadores das áreas de Ciência da
Computação, Educação, Psicologia, Linguística e Design
Gráfico, entre outras.
Visão geral do design no processo de projeto
Projetos para a Internet
são essencialmente
multidisciplinares,
envolvendo diferentes
áreas do conhecimento

30.  Cada área de conhecimento trabalha diferentes partes do
sistema, que desenvolvidas separadamente contribuem para
o aperfeiçoamento de um todo, melhorando a qualidade do
produto final.
Visão geral do design no processo de projeto
» Douglas Van Duyne, James Landay e Jason Hong,
publicaram em seu livro “The Design of Sites”,
um gráfico que exemplifica muito bem a questão
da multidisciplinaridade inserida dentro deste
contexto:

32.  Design interativo e suas plataformas online:
 Pesquisadores identificaram quatro principais características
ideais para um design online eficiente, que podem também
ser aplicadas ao conteúdo online em geral:
• Multimidialidade
• Interatividade
• Hipertextualidade
• Personalização
Visão geral do design no processo de projeto

33.  Multimidialidade
 A web é texto, imagem, sons, vídeos, gráficos etc. Uma das
características de seu conteúdo é, portanto, ser
multimidiático. O melhor jeito de passar uma mensagem
visual é utilizar tanto recursos textuais quanto audiovisuais.
Além das imagens – fotografia, infográficos, esquemas etc.–
acompanhando os textos, vídeos também podem ser
produzidos, assim como áudios(podcasts, entrevistas etc.).
Visão geral do design no processo de projeto

34.  Design e Interatividade
 Praticamente,qualquer site hoje em dia é “Social”.É possível
encontrar espaços para comentários, enviar e-mail para o
editor ou até mesmo recursos mais avançados.
 É importante dar espaço para que o leitor também participe.
E isso pode ser feito de modo mais avançado do que apenas
deixando um lugar específico para a voz do leitor.
 Ex: Comentários, críticas e sugestões
Visão geral do design no processo de projeto

35.  Hipertextualidade
 As páginas na internet são navegadas através de seus links.O
conteúdo online pode utilizar desse recurso para dar a opção
ao leitor de se aprofundar no conteúdo, conceitos, pessoas e
objetos citados.
Visão geral do design no processo de projeto

36.  Personalização
 É uma das características mais difíceis de ser alcançada.
Alguns portais de conteúdo permitem organização
automática ou manual do conteúdo, apresentando ao
usuário o tipo de conteúdo que ele mais lê.
Visão geral do design no processo de projeto

40. »Desenvolvimento de aplicação para engajamento
do consumidor com o universo de Loterias.
»1 Milhão de page views em 2 meses.

41. » Publicidade web

42. » Outra execução para ideia
do ‘Ajude sua Fezinha’ em
execução para mobile.
» Geração de tráfego a partir
de mídia em mobile sites de
serviço.

43. Pensando
além do
design

44.  Jakob Nielsen: “Content is king”.
 Bill Gates também escreveu um artigo de 1996 em que fala
que conteúdo é rei, mas ele explicou melhor que o
verdadeiro sentido de conteúdo é muito vasto: “notícias,
software, games, entretenimento, esportes, propaganda e
comunidades on-line”.
 Andrew Odlyzko (University of Minnesota) escreveu um
artigo defendendo que “Content is not king”. Segundo ele,
se conteúdo dominasse, a Internet seria apenas uma rede
de transmissão de notícias. O mais legal de seu trabalho é
que ele afirma que se a Internet fosse só isso, estaria
perdendo o seu grande valor: a quantidade de pessoas
conectadas.
Pensando além do design

45.  O que interessa realmente é a rede de socialização.
Pesquisas recentes mostram que as 4 ferramentas mais
utilizados pelos jovens são:
 E-mail, skype, twitter e facebook.
 A Internet está passando por transformações que foram
batizadas como Web 2.0. Um dos pilares do movimento é
justamente o “conteúdo” gerado pelas pessoas.
Pensando além do design

46.  Isso quer dizer que você pode colocar um site no ar e
disponibilizar as ferramentas necessárias para que os próprios
usuários criem, administrem e supervisionem o conteúdo do
seu produto. Seriam os “user-dependent web portals”.
 O “conteúdo amador” vem ganhando espaço na
preferência das pessoas desde a popularização dos Blogs,
tornando fácil para qualquer um ter suas opiniões e idéias
publicadas na Web.
Pensando além do design

48.  Quanto falamos em experiência do usuário, pensamos logo
em fatores relacionados a metodologia de projeto para a
Internet, em todos os conceitos abordados no início da
apresentação.
Pensando além do design
» Jesse James Garrett em seu livro
“The Elements of Users Experience”,
enumera os elementos da experiência do
usuário como sendo cinco:

50.  Estes elementos são fundamentais para o desenvolvimento
de toda uma experiência que funcione. No entanto, uma
questão cada vez mais clara para mim é a seguinte:
Pensando além do design
» a experiência é muito mais do que isso.
» Apesar de terem uma importância vital, facilidade de
uso, visual agradável e tecnologia bem desenvolvida,
não são suficientes, ou não garantem, que um produto
de Internet seja um sucesso.

51.  Dois bons exemplos disso:
Pensando além do design
1.Facebook
2.Twitter

52.  Para que se consiga atingir uma experiência próxima do
que chamo de “perfeita”, além de toda a metodologia
destacada anteriormente, é necessário que pensemos
em elementos que vão além da boa usabilidade,
relacionados não só a criação de comunidades mas
também a questões emocionais.
Pensando além do design
» O alcance do estado de experiência fluida talvez seja o
mais importante dentre todos os conceitos, pois ele é capaz
de “mascarar” imperfeições de projeto. É o sentimento
capaz de proporcionar a imersão completa, de “ipnotizar” a
pessoa durante a utilização de um sistema.

53.  Mihaly Csikszentmihalyi (Dr. C), professor de psicologia da
Universidade de Chicago, é a grande autoridade do mundo
sobre o assunto. É o criador da teoria e autor do livro: “Flow,
the psychology of optimal experience”.
Pensando além do design

55.  Dr. C baseia todo seu raciocínio em um
sentimento básico: a felicidade. Qualquer outro
objetivo na vida das pessoas (saúde, beleza,
dinheiro ou poder) só é válido se for trazer
felicidade. Por isso, a grande questão do livro é:
Pensando além do design
» Quando as pessoas se sentem mais felizes?

56.  Durante seus estudos o autor fez uma grande pesquisa
envolvendo centenas de pessoas que gostavam de suas
profissões (músicos, atletas, artistas, cirurgiões, etc.) para
tentar descobrir como as elas se sentiam no momento que
mais “curtiam a si mesmos” e mais do que isso, por que
tinham esse sentimento.
Pensando além do design
» Baseado nos relatos de como eles se sentiam ao praticar suas
atividades, Dr. C desenvolveu sua teoria de “optimal experience”
fundamentada no conceito de “flow”: estado em que as pessoas
estão envolvidas de tal forma a uma atividade que faz parecer que
nada ao redor interessa. Neste caso, a experiência por si só é tão
agradável que as pessoas realizarão as tarefas mesmo que sob um
grande custo, por pura vontade de fazê-lo.

61.  Produtos como o facebook e o
twitter são um sucesso (apesar dos
problemas de design) porquê
envolvem relacionamento entre
seres humanos, o que é um fator
gerador de imersão em potencial,
ou seja, de felicidade.
Pensando além do design

62. Geração
call to action

63.  O processo de interação (design e mídia) mudou. Nós não
somos convencidos tão facilmente, contamos com a opinião
de outros consumidores, a oferta de produtos é enorme e a
qualidade é quase padrão.
 As marcas usam a mídia para criar uma trilha de conexões
que nos levarão ao consumo. Para tornar esta trilha
estimulante e com isto aumentar o interesse e disponibilidade
do consumidor, as marcas passam a agregar valor
(conteúdo, benefícios, convênios).
 Para fazer o consumidor passar por esta trilha é preciso criar
novos estímulos em múltiplas plataformas garantindo boa
usabilidade e interatividade (design).
Geração Call to action

64. +
+
++
+
»Anúncio
»Call to action
Envie um SMS para 25478
e receba mais
informações
»SMS
»Call to action
Responda esta
mensagem com seu
email e faça parte do
clube.
»Email
»Call to action
Você enviou o seu email
por SMS. Segue um
desconto de 30%.
Aproveite! E se quiser
saber mais nossa rede
de convênio clique aqui
»Site
»Call to action
Cadastre-se
Compartilhe essa informação
Compre
»TV DIGITAL
»Call to action
Compre
»Acesse o site
»Envie SMS

65. Geração Call to action
»Engajamento
»Site/Celular
»Cadastro
»Permanência
»Retorno
»Compartilhamento
»Colaboração
»Mídia
»Interação
»Clique
»Redes Sociais
»Cadastro/Add
»Interação
»Colaboração
»Disseminação
»Buscadores
»Volume de buscas

66. Case ‘Clear’
Promoção em rede social
Respostas: 1.400 (1 semana)

67.  Distribuição de conteúdo ou serviço em múltiplos
canais
 Constância. A interatividade não é algo pontual,
ela contínua. Passamos do conceito de campanha
para o conceito de projeto de comunicação.
 Respeito à opinião do consumidor, e ouvidos
abertos para utilizar o que está sendo dito para
aperfeiçoar a comunicação dos clientes.
 Network. O necessidade de sermos sociáveis nunca
foi tão importante para a publicidade. É
importante considerar parcerias para ampliar a
atratividade da mensagem.
Geração Call to action (novas tedências)

68.  Como manter o interesse do consumidor em continuar
interagindo com a marca?
Geração Call to action
Conteúdo Serviço
» Uniqlo distribui um relógio que apresenta suas coleções
de roupa. Este relógio é distribuído me aap para Iphone,
Screen Savers e Widgets.

69. Website
(conteúdo+
serviço)

70.  Porque se preocupar com o conteúdo?
Conteúdo representa a identidade da pessoa, marca/empresa
Conteúdo online significa mais visitação através de buscas
Conteúdo online significa visitantes mais atenciosos
Conteúdo fideliza clientes/leitores
Conteúdo gera menções positivas
Conteúdo incentiva disseminação
Website (conteúdo+ serviço)

71.  Qual o melhor tipo de conteúdo?
O melhor tipo de conteúdo (seja website ou mídias sociais),é
aquele que:
• Claramente engloba sua mensagem
• Dá suporte a seus objetivos
• Exibe credibilidade e experiência
• Faz isso tudo com concisão
• Coerência: possuir uma “linha editorial”
• Constrói a informação em diversos formatos.
Website (conteúdo+ serviço)

72. Etapas
produtivas de
um website

73.  Planejamento:
Processo que engloba todo levantamento das necessidades do
cliente, pesquisas de mercado, linguagens e estratégias de
comunicação, objetivos mercadológicos, entre outros.
 Criação:
Transformação das informações e definições da etapa de
planejamento em ideias visuais claras e objetivas. Definição de
estruturas de navegação, de condução do usuário da página
Etapas produtivas de um website

74.  Estruturação:
Uso das linguagens XHTML/CSS para efetuar a codificação do
layout do site desenvolvido pela equipe de criação na etapa
anterior. Testes de navegabilidade e de UP LOAD do site.
 Desenvolvimento:
Aplicação das linguagens de servidor para integração do site
com um banco de dados para tornar partes do site dinâmicas,
com conteúdo atualizado constantemente, muitas vezes
permitindo uma grande participação do usuário na página,
alterando características diversas.
Etapas produtivas de um website

75.  Tema:
Sobre o que será o site? Descrever de forma sucinta e objetiva o
tema geral do site
 Briefing:
Levantar, junto ao cliente, informações precisas sobre o que se
espera do site. Deve-se levantar, minimamente, as seguintes
informações:
a) Público-Alvo: a quem se destina o site? Qual a classe social, a
faixa etária e o perfil geral das pessoas?
b) Definir o retorno esperado para o site: um site, como uma
peça de comunicação, é uma ferramenta de marketing como
qualquer outra, precisa de objetivos claros e bem definidos. O
retorno deve ser encarado como uma meta a ser cumprida.
Etapas produtivas de um website (Planejando)

76.  Linguagens
As linguagens de comunicação, quando bem definidas, resultam num bom
retorno para o cliente definido como público-alvo.
a) Moderna (jovem): possibilita o uso de cores fortes, experimentalismos
gráficos diferenciados, linguagem mais cool, solta, livre, informal. O site
da MTV é um bom exemplo deste tipo de linguagem visual.
b) Conservadora (madura): não deve causar impacto por recursos visuais
ou informalidade na linguagem. Estruturas mais rígidas de navegação, de
controle. Recomendado para sites de investimentos, negócios, bancos, de
uma maneira geral. O site do Citibank é um bom exemplo.
c) Clean (suave): diz respeito mais ao aspecto visual do que a uma
linguagem propriamente dita. As cores são suaves, fluidas. As imagens
comunicam tranqüilidade, suavidade, beleza. Tudo é limpo. Sites de beleza
e estética seguem este padrão.
d) Over (forte): também diz respeito aos aspectos visuais. Aqui, ocorre o
inverso do “clean”. As cores são fortes, agressivas, pulsantes. Imagens em
ângulos e enquadramentos inusitados, uso livre de grafismos fortes,
experimentais. Sites de skateshops seguem este padrão.
Etapas produtivas de um website (Planejando)

77.  Tecnologias e ferramentas utilizadas
Com base nas informações levantadas até o momento, pode-se
definir as ferramentas e tecnologias que serão utilizadas, até mesmo
para se ter uma melhor ideia “orçamentária” do projeto.
 Pesquisas
Etapa destinada a levantar todos os dados necessários afim de
fazer um site adequado ao perfil do cliente:
a)Pesquisar concorrência: quem é a concorrência?
b)Pesquisar o público-alvo: levantar, efetivamente, todos os dados
sobre o público-alvo que interessam dentro do contexto do site.
c)Pesquisar estratégias: levantar dados sobre as estratégias que
serão abordadas, analisar se já foi utilizada em outro momento.
Etapas produtivas de um website (Planejando)

78.  Planejamento Estrutural do site
Com todo o extenuante trabalho acima concluído, pode-se
começar a estruturar o site de forma básica, não-visual. As
definições abaixo, para a surpresa de muitos estudantes de web
design, são atribuições do marketing, de maneira geral:
a)Quantas páginas, links ou seções o site terá?
b)Mapa do site
c)Arquitetura da Informação
e)Textos principais
f)Cores:
g)Linguagens:
h)Tipos de imagens:
Etapas produtivas de um website (Planejando)

80.  Na Globo.com, a multidisciplinaridade já começa no
Departamento de Criação in-house, que conta com equipes
de diferentes perfis.
3. Visão geral do processo de projeto
Globo.com
Equipe de Branding
Agência
Equipe de Design de
Interface
Equipe de AI
Dept. Criação
Foco na
experiência
do usuário

81. métodos e
técnicas
resultados conclusõesdelineamento
Arquitetura da Informação

82. Design de
Interface
(wireframe
detalhado)

83. Branding
(layout)

84. Apresentação 1

85. Avaliação 2(wix)

87. Obrigado!