Design de Mídia Interativa

MídiasInterativas

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

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

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

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

Rápida introdução àusabilidade na Web

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

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

Rápida introdução à usabilidade na Web

Os usuários nuncaestão errados

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

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

Inovação interativa e mídia

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

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

» 30 milhoes de views desde Janeiro/2009

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

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

7 forças da mídia Interativa

Conceitos

»1. Interatividade»2. Personalização»3. Globalização»4. Integração

»5. Aproximação»6. Convergência»7. Democratização

da Informação

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

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

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

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

4. Integração

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

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

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

Visão geral do design no processo de projeto

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

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:

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

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

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

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

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

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

» Publicidade web

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

Pensando além dodesign

Jakob Nielsen: “Content is king”.

Bill Gates também escreveu um artigo de 1996 em que falaque 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 redede transmissão de notícias. O mais legal de seu trabalho é que ele afirma que se a Internet fosse só isso, estariaperdendo o seu grande valor: a quantidade de pessoasconectadas.

Pensando além do design

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

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

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:

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.

Dois bons exemplos disso:

Pensando além do design

1.Facebook2.Twitter

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.

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

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?

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.

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

Geraçãocall to action

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õesque 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

+

+

++

+

»Anúncio»Call to actionEnvie um SMS para 25478 e receba mais informações

»SMS»Call to actionResponda esta mensagem com seu email e faça parte do clube.

»Email»Call to actionVocê 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 actionCadastre-seCompartilhe essa informaçãoCompre

»TV DIGITAL»Call to action

Compre »Acesse o site

»Envie SMS

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

Case ‘Clear’

Promoção em rede social

Respostas: 1.400 (1 semana)

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)

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.

Website (conteúdo+ serviço)

Porque se preocupar com o conteúdo?

Conteúdo representa a identidade da pessoa, marca/empresaConteúdo online significa mais visitação através de buscasConteúdo online significa visitantes mais atenciososConteúdo fideliza clientes/leitoresConteúdo gera menções positivasConteúdo incentiva disseminação

Website (conteúdo+ serviço)

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)

Etapas produtivas deum website

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

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

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)

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

Tecnologias e ferramentas utilizadasCom 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.

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

Planejamento Estrutural do siteCom 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 sitec)Arquitetura da Informaçãoe)Textos principaisf)Cores:g)Linguagens:h)Tipos de imagens:

Etapas produtivas de um website (Planejando)

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ênciado usuário

métodos etécnicas resultados conclusõesdelineamento

Arquitetura da Informação

Design deInterface(wireframedetalhado)

Branding(layout)

Apresentação 1

Avaliação 2(wix)

Obrigado!