Aula1mdg2edicao

174
Escola de Design Unisinos Especialização em Design Gráfico Design de Hipermídia

description

Módulo "Mídias Audiovisuais e Hipermídia" - Especialização em Design Gráfico - Escola de Design Unisinos

Transcript of Aula1mdg2edicao

Page 1: Aula1mdg2edicao

Escola de Design UnisinosEspecialização em Design GráficoDesign de Hipermídia

Page 2: Aula1mdg2edicao
Page 3: Aula1mdg2edicao

Hipermídia e interfaces

Page 4: Aula1mdg2edicao

Web e softwares que usam a internet para “trabalhar”

Page 5: Aula1mdg2edicao

Processos de projeto

Page 6: Aula1mdg2edicao

Tendências

Page 7: Aula1mdg2edicao

Computadores calculam e armazenam.

Computadores contém dados.

Internet conecta redes de computadores.

Computadores são organizáveis em redes.

Page 8: Aula1mdg2edicao

Digitalização

Dos meios de produção (“criamos conteúdo através de”): word, powerpoint, excel, photoshop, web)

Dos suportes (“lugares onde guardamos o conteúdo produzido”): pendrives, DVDs, HDs, CDs, discos virtuais, disquetes...

Dos processos: (“executamos tarefas com o auxílio de”): cartões eletrônicos, home-banking, celular, microondas, etc.

Page 9: Aula1mdg2edicao

Comunicação Mediada por Computadores (CMC)

Tecnologias da Informação e da Comunicação (TICs)

Page 10: Aula1mdg2edicao

A evolução da computação está ligada ao cálculo e armazenamento.

Page 11: Aula1mdg2edicao

O computador realiza operações. Essa faceta de máquina de processar, calcular, buscar resultados é fundamental para pensarmos a Internet.

Page 12: Aula1mdg2edicao
Page 13: Aula1mdg2edicao

Enquanto isso...

Page 14: Aula1mdg2edicao

2001

20082008

Professor at the Visual Arts Department, University of California - San Diego (UCSD). 

Page 15: Aula1mdg2edicao

Examinando a interface, começando pela idéia de “tela”.

Page 16: Aula1mdg2edicao

A tela é uma tecnologia muito

anterior às possibilidades recentes (VR) que tomamos contato hoje, da Renascença ao cinema do século XX.

Page 17: Aula1mdg2edicao

As soluções de Virtual Reality eram muito comentadas à época.As soluções de Virtual Reality eram muito comentadas à época.

Page 18: Aula1mdg2edicao

Como o computador apresenta

continuidades e desafios em relação à tradição da tela?

McLuhan e Remidiation.

Page 19: Aula1mdg2edicao

Genealogia da tela.

Classical Screen A cultura visual do período moderno

é caracterizada por um intrigante fenômeno – a existência de um outro espaço virtual, um outro mundo tridimensional fechado por uma moldura e situado dentro do nosso espaço normal.

Page 20: Aula1mdg2edicao

A moldura (frame) separa dois espaços absolutamente diferentes que de alguma forma coexistem.

Page 21: Aula1mdg2edicao

Herança da pintura: pensar nas proporções e nas nomenclaturas portrait e landscape usadas hoje.

Page 22: Aula1mdg2edicao

Dynamic screen A tela que disponibiliza uma imagem

que muda no tempo. A tela do cinema, tv, vídeo.

Impõe uma outro protoloco de visulização (viewing regime) entre a imagem e o espectador.

Page 23: Aula1mdg2edicao

Já aparecia na tela clássica, mas agora aumenta a noção de

“preenchimento completo da tela pela imagem”, descarte do espaço “ao redor” da tela pelo foco que a mesma requisita. Imersão.

Page 24: Aula1mdg2edicao

A tela é agressiva. A tela é agressiva. Ela filtra o entorno.Ela filtra o entorno.

Page 25: Aula1mdg2edicao

Esta relação-protocolo de visualização (tela quer sua atenção

total) é desafiada com a chegada da tela do computador.

Page 26: Aula1mdg2edicao

A tela do cinema resulta de uma evolução de dispositivos do século 18 e 19.

A tela do computador tem origem no radar.

Inovação ligada a tecnologias de controle, espionagem, mapeamento, segurança (militares): monitor de vídeo, tela de computador, controles.

Page 27: Aula1mdg2edicao

radar

Ao contrário da fotografia e do cinema (imagens estáticas, ou imagens estáticas em seqüência), vemos pela 1ª vez uma tela cuja imagem pode mudar em tempo real, mostrando mudanças no referente (posição de objeto, live vídeo ou mudança nos dados do computador).

Page 28: Aula1mdg2edicao

A tela de tempo real é o terceiro tipo de tela, inaugurada pelo radar.

Page 29: Aula1mdg2edicao

Janelas coexistentes no lugar de uma única imagem, princípio da Graphical User Interface (GUI).

Page 30: Aula1mdg2edicao

A concentração da visualização deixa de ser em apenas uma imagem. Blocos de dados de texto, imagem, vídeo sugerem que a tela do computador tem mais a ver com design gráfico e janelas.

Page 31: Aula1mdg2edicao

Tela interativa

A informação processada passa a ser representada na tela de tempo real: lugar de inserir e retirar informação de um computador.

Page 32: Aula1mdg2edicao

Ao mudar algo na tela, mudamos algo na memória do computador

Page 33: Aula1mdg2edicao

Clássica

DinâmicaDinâmica

– – Real time –Real time –

InterativaInterativa

Page 34: Aula1mdg2edicao

A tela e o corpo

A tela representa uma relação entre o espaço do espectador e o espaço da representação.

Com isso, o sujeito estaria existindo nesses dois espaços simultaneamente, princípio que nasce do “corte” promovido pela tela.

Page 35: Aula1mdg2edicao

As formas de representação ocidental pedem que o sujeito fique parado.

Page 36: Aula1mdg2edicao

Um ponto de vista, “descolado” do corpo.

Page 37: Aula1mdg2edicao

A invenção da perspectiva radicaliza ainda mais essa relação: o ponto de vista está pronto.

A tela funcionaria como um cofre em uma parede, no qual o A tela funcionaria como um cofre em uma parede, no qual o “visível” foi depositado.“visível” foi depositado.

Page 38: Aula1mdg2edicao

Os aparatos que lidam com a luz e projeção conduziriam depois ao cinema requisita que o espectador se “aprisione” para - imóvel - assistir à imagens.

Page 39: Aula1mdg2edicao

Nesse sentido, também passamos de um mundo estável e estático (fotografias iniciais) para a “aventura da viagem”com a imagem em movimento, ainda que aprisionados.

Page 40: Aula1mdg2edicao

Salas de cinema: prisões, caverna de Platão. Representação confundida com perpcepção.

Page 41: Aula1mdg2edicao

A realidade virtual leva a câmera para a cabeça do usuário. Para olhar no espaço virtual é preciso olhar no espaço físico. O usuário precisa “trabalhar” (jogar?) para ver (lembrando o funcionário de Flusser).

Page 42: Aula1mdg2edicao

Continuamos grudados à máquina, mas agora precisamos nos mexer.

Page 43: Aula1mdg2edicao

A VR continuaria a tradição da simulação. Teríamos na tela a mudança da representação para a simulação.

Page 44: Aula1mdg2edicao

Pinturas de mosaicos, afrescos, nas paredes fundiam-se com a arquitetura e o “real” enquanto as telas da pintura em diante reforçavam a representação (e pediam a mobilidade do espectador). A tradição da simulação, portanto, é anterior às telas digitais (museus de cera, naturalismo, realismo, etc).

Page 45: Aula1mdg2edicao

O próximo passo (então) é carregar as telas que nos aprisionam conosco: a retina e tela vão se fundir. Mas ainda vivemos na sociedade da tela achatada, retangular que participa do nosso espaço como uma janela para outro lugar, a sociedade da tela.

Page 46: Aula1mdg2edicao
Page 47: Aula1mdg2edicao

Jay Bolter

Jay David Bolter (born August 17, 1951) is the Wesley Chair of New Media and a professor in the School of Literature, Communication and Culture at the Georgia Institute of Technology.

Page 48: Aula1mdg2edicao

Richard Grusin

Richard Grusin is a Professor of English at Wayne State University, where he teaches courses in film and media studies, new media theory, and American Studies.

http://premediation.blogspot.com/

Page 49: Aula1mdg2edicao

Conceitos associados

Mídia Mediação Interface Experiência

Page 50: Aula1mdg2edicao

Premissa básica>

Haveria o seguinte contraditório (paradoxo): nossa cultura teria um simultâneo desejo por imedação e hipermediação, a dupla lógica da remidiação.

Page 51: Aula1mdg2edicao

Ou seja>

Nossa cultura desejaria simultaneamente multiplicar seus mídias e apagar todos os traços de mídia. O ato de multiplicar visaria o apagamento, idealmente.

Page 52: Aula1mdg2edicao

Imediação:

o meio desapareceria para nos deixarmos na presença da “coisa representada”. Mas a imediação dependeria da hipermediação (além de coexistir).

Page 53: Aula1mdg2edicao

Imediação:

A experiência da imediação é hipermediada pela INTERFACE (simuladores).

Page 54: Aula1mdg2edicao

Imediação>

A origem aponta para a trajetória da representação visual ocidental: a busca permanente por atingir a imediação implicaria em colocar o espectador no mesmo lugar dos objetos visualizados.

Page 55: Aula1mdg2edicao

A hipermediação tem ligação histórica com a fascinação pela “presença do meio”. Ícones e letras integram-se desde os manuscritos medievais.

Page 56: Aula1mdg2edicao

As mídias visuais digitais podem ser melhor compreendidas pelas formas

pelas quais homenageiam, rivalizam e revisam a pintura em perspectiva, fotografia, filme, televisão e impresso. O que é novo sobre as “novas mídias” seria a forma particular com que estes aspectos são tratados entre as mídias novas e antigas.

Page 57: Aula1mdg2edicao

Opacidade e transparência As novas mídias sempre andariam

entre a opacidade e a transparência na remidiação que fazem das mídias anteriores.

Ao ver as formas de representação do passado, destaca-se as preocupações de transparecer-se para chegar ao real e o encantamento com a opacidade do próprio meio.

Page 58: Aula1mdg2edicao

Discutindo mídia>

As tecnologias da mídia envolvem relações que podem ser expressas em termos físicos, sociais, estéticos e econômicos.

Software + Usos + remodelagem = mídia

Page 59: Aula1mdg2edicao

Imediação>

O valor estético da “transparência” visando a imediação foi trabalhado pelas mídias antigas nas técnicas de

perspectiva, apagamento e automaticidade.

Page 60: Aula1mdg2edicao

Imediação>

Perspectiva: ver através, matematizar o espaço.

Page 61: Aula1mdg2edicao

Imediação>

Apagamento: trabalhar a superfície para apagar as pinceladas.

Tromp L´oeil: exemplo de buscar “enganar” o olho que acaba reforçando a qualidade do artista que aparece pelo apuro técnico.

Page 62: Aula1mdg2edicao
Page 63: Aula1mdg2edicao

Imediação>

Automaticidade: tecnologias fotográficas, cinema e depois televisão. A fotografia se tornou o aperfeiçoamento da perspectiva linear. A remoção do artista que ficava entre o espectador e a realidade da imagem.

Page 64: Aula1mdg2edicao

Imediação>

Mais tarde, a computação gráfica herda o cartesianismo e a matematização do espaço convocado pela perspectiva. Aí, é o programador que é “apagado” da experiência do software, ele não “transparece” através da interface

(todos os software são “iguais”).

Page 65: Aula1mdg2edicao
Page 66: Aula1mdg2edicao

Mediação da mediação

Não se media a experiência externa ,mas sim outros mídias. Toda nova tecnologia se define em relação com formas anteriores de representação.

(isso eles aprenderam com McLuhan)

Page 67: Aula1mdg2edicao

Horizonte da imediação>

Imediação: o autor se retira mais e o leitor seria mais envolvido.

Page 68: Aula1mdg2edicao

Porém...

A imediação proposta pelos meios seduz as percepções, mas de fato está amparada em atos de mediação contínuos (hipermediação).

Page 69: Aula1mdg2edicao

Hipermediação

Hipermediação: fascinação pelos mídias (meios).

Processo e performance são maiores que o resultado. Espaço heterogêno, janelizado, múltiplos atos de representação.

Page 70: Aula1mdg2edicao

Hipermediação

Hipermídia: múltiplas mídias + acesso randômico.

A interface do desktop não se apaga. Mídia (conteúdo) e software inclusive conversam.

Page 71: Aula1mdg2edicao

Hipermediação

A hipermediação já se apresentava em portas e cabines dos séculos XVI e XVII.

Page 72: Aula1mdg2edicao

Hipermediação

Tecnologias mecânicas de reprodução que também traziam a hipermediação:

Diorama, phenakistoscope, stereoscope: internalizavam a transparência da “imagem em movimento” dentro da estrutura hipermediada. Mas a vitória foi da maior transparência (ou ilusão de) dada pela fotografia.

Page 73: Aula1mdg2edicao

Diorama

Page 74: Aula1mdg2edicao

phenakistoscope

Page 75: Aula1mdg2edicao

Stereoscope

Page 76: Aula1mdg2edicao

Hipermediação>

A fotomontagem teria rompido com esse entendimento.

Page 77: Aula1mdg2edicao

Colagem, mash-up, DJ.

Page 78: Aula1mdg2edicao

Hipermediação

Quando a tecnologia se torna uma segunda natureza, a experiência hipermediada torna-se igualmente autêntica.

Page 79: Aula1mdg2edicao

Hipermediação>

A lógica da hipermediação expressa a tensão entre o espaço visual como mediado e como um espaço “real” que fica “além” da mediação.

Olhar para uma coisa, olhar através da coisa.

Page 80: Aula1mdg2edicao

Imediaçao/Hipermediação

A arte explora o sentido da interface, faz com que ela surja aos olhos do usuário, enquanto a “engenharia” aperfeiçoa a tecnologia para que ela desapareça.

Page 81: Aula1mdg2edicao

Imediação / Hipermediação >>>> Remidiação a representação de um meio em

outro. Característica definidora das novas mídias.

Page 82: Aula1mdg2edicao

Remidiação>

Atos de remidiação: empréstimo, arquivamento,

remodelagem, absorção.

Page 83: Aula1mdg2edicao

DINÂMICAS DA REMIDIAÇÃO em YOUTUBE e GLOBO MEDIA CENTER/GLOBO VÍDEOS

Dependência, contexto, reformaImediação e hipermediação nas interfaces

Page 84: Aula1mdg2edicao

Remidiação como característica de uma genealogia de mídias

Afiliação entre mídias (mais que evolução em só sentido)

Remidiação das práticas materiais e arranjos sociais

Page 85: Aula1mdg2edicao

Dependência, Contexto, Reforma

TV, Impresso...

“fala” através das interfaces Da

lacuna a intra-remidiação

Page 86: Aula1mdg2edicao

A watchpage como ocorrência de inter e intra remidiação em GV e YT

Page 87: Aula1mdg2edicao

YouTube e Globo Media Center/Globo Vídeos são ocorrências na web que nasceram dependentes do comportamento de espectação de vídeos já presente no tecido social, mas que do ponto de vista da materialização dessa relação de espectação, disponibilizam-se em webpages que reapropriam princípios de design gráfico e das interfaces de software.

Page 88: Aula1mdg2edicao

Imediação e hipermediação nas interfaces

Busca por transparência / mídia “original”

Excitação da interface/ reconhecimento do meio

Page 89: Aula1mdg2edicao

Interface (começo)

Sistema que faz a mediação de um usuário solicitante com um sistema pré-programado que busca atendar as demandas do primeiro.

Duas áreas gostam de lidar muito com a interface: Design + estudos de HCI (Human-computer Interface)

Quando temos o Windows e cia, falamos de interfaces gráficas digitais.

Page 90: Aula1mdg2edicao

World Wide Web

Criada em 1991 por Tim-Berners Lee Lee propôs a criação de um espaço

hipertextual global e aberto, no qual qualquer informação pudesse ser acessada através de um único Universal Document Identifier (Identificador Universal de Documentos).

Nem tudo que é Internet, é web. A web fez pela Internet o que o

Windows fez pelo computador, tornou a interface “amigável”.

Page 91: Aula1mdg2edicao

Os softwares chamados navegadores, permitem que se acesse os documentos HTML que universalizam a forma de “recepção” do conteúdo que se desejasse fazer circular pela

Internet. Textos, imagens, sons, vídeos começam a aparecer nas interfaces gráficas digitais da web.

O usuário ao requisitar uma página, faz um “pedido” ao servidor que a disponibilize.

Page 92: Aula1mdg2edicao

Princípios do Hipertexo

Heterogeneidade Metamorfose Potencialidade Complexidade Conectividade Cartografia

Page 93: Aula1mdg2edicao

Heterogeneidade

o hipertexto é composto de diferentes nós que podem ser acessados por diferentes caminhos.

Todos os caminhos podem levar à sua marca. OU talvez não necessariamente no lugar que você queria que as pessoas chegassem ao pensar na sua marca.

Page 94: Aula1mdg2edicao
Page 95: Aula1mdg2edicao

Metamorfose

O hipertexto está em constante transformação

Desde a “cor” do link visitado até a organização dos conteúdos.

Page 96: Aula1mdg2edicao
Page 97: Aula1mdg2edicao

potencialidade o usuário tem a possibilidade de

recriar o hipertexto no momento de seu uso

Page 98: Aula1mdg2edicao

Complexidade

as conexões relacionam diferentes aspectos do hipertexto, mesmo que contraditórios.

Page 99: Aula1mdg2edicao

cartografia

o hipertexto deve oferecer recursos para a orientação flexível entre os caminhos possíveis.

Page 100: Aula1mdg2edicao
Page 101: Aula1mdg2edicao

Características da hipermídia

A hipermídia mistura diferentes tipos de linguagens

http://postvisual.com/theuninvited/en/

Hibridismo

Page 102: Aula1mdg2edicao

não-linearidade

o usuário não precisa seguir uma seqüência pré-determinada

Page 103: Aula1mdg2edicao

Interatividade

o usuário deve ter papel ativo na fruição da hipermídia.

Page 104: Aula1mdg2edicao

Navegabilidade

o usuário deve ter liberdade para ir aonde quiser, encontrar seu rumo ou se perder

Page 105: Aula1mdg2edicao

(hiper) Texto -> Mídia

Substituição ou evolução?

Page 106: Aula1mdg2edicao

(hiper) –texto> (mídia)

Hipermídia une os conceitos de não-linearidade (não-linear), hipertexto, interface e multimídia numa só linguagem. Traduzida erroneamente como mero suporte, hipermídia não se configura só como meio de transmissão de mensagens, e sim como uma linguagem com características próprias, com sua própria gramática. Hipermídia, diferentemente de multimídia, não é a mera reunião dos meios existentes, e sim a fusão desses meios a partir de elementos não-lineares.

Page 107: Aula1mdg2edicao

Mas a “máquina” continua operandonos “bastidores.”

Page 108: Aula1mdg2edicao

Web

Diversos grupos de mídia passam a produzir suas “versões online” quando a Web torna-se, o lado mídia da Internet.

Page 109: Aula1mdg2edicao

Blogs“diários”

Gerenciador de conteúdo

Page 110: Aula1mdg2edicao
Page 111: Aula1mdg2edicao

Website

Portal

Hotsite

Blog

Unisinos
Site ou WebsiteÉ um espaço de disponibilização de conteúdo (texto, fotos, animações gráficas, sons evídeos), de empresas ou pessoas. O website tem como principal objetivo organizar ainformação de modo lógico e coerente, estruturando uma hierarquia para que todo oconteúdo seja entendido e acessado com facilidade (AMOR, 2000). Como referência de sitetemos http://www2.uol.com.br/loshermanos/ - (08/08/2005)PortalPortal é uma página ou website que agrega vários links e serviços, servindo como porta deentrada ou ponto de partida para a navegação de internautas. Ele é orientado ao seupúblico-alvo, e cria conteúdos específicos para ele, os chamados ‘conteúdos verticais’.Como referência de portal temos http://www.globo.com - (07/08/2005)HotsiteHotsites são sites promocionais, criados para o lançamento de um produto, o anúncio de umevento ou informação de algum serviço. Tem a obsolescência planejada, geralmente tempoucas páginas, apelo persuasivo e o visual diferenciado, adequado ao posicionamentodesejado pela ação promocional (AMOR, 2000). Como referência de hotsite temoshttp://www.nike.com/nikeskateboarding/v2/main.html - (30/06/2005)Azevedo (2006)
Page 112: Aula1mdg2edicao

http://www.carolinasebben.blogspot.com/ (w3haus)

Page 113: Aula1mdg2edicao

Web 2.0

Ao usar a máquina, ela nos usa. É um processo, não uma nova

versão. Estrutura integrada de

funcionalidades e conteúdo, criando serviços.

Publicação (inserção), visualização (representação), compartilhamento (indexação) das informações.

Page 114: Aula1mdg2edicao

Como ver o princípio em ação

Sites que nasceram sob idéia de publicação, visualização e compartilhamento: YouTube, Flickr, Slideshare, Delicious, etc.

Page 115: Aula1mdg2edicao

Tags (folskonomia)

Page 116: Aula1mdg2edicao

Mas tem muito mais:

Go2web20.net

Feed My App

Page 117: Aula1mdg2edicao

Sites que funcionam como organizadores de conteúdo que vem de outros lugares

NetVibes (www.netvibes.com) NetVibes da Agência Digital AG2

Page 118: Aula1mdg2edicao

Mash-Ups> A + B = C

Sites que organizam conteúdo possuem uma espécie de DNA (API)

a) Usa-se um DNA a favor de um objetivo específico: ver Mashup awards

b) Ao reunir dois DNAs diferentes, forma-se um terceiro “SER”: Wonderwall e Boulevard of Broken Dreams

Page 119: Aula1mdg2edicao
Page 120: Aula1mdg2edicao

Exemplos:

Diaroogle (1 API)

Visual Headlines (Flickr + CNN)

Page 121: Aula1mdg2edicao

Algumas conclusões:

1. Decisões estratégicas reúnem dados+mídia

2. Mutação permanente. Interfaces previstas, mas não previsíveis.

3. Informação embutível/distribuível para muitos lugares (igual e diferente ao mesmo tempo).

4. Vida pessoal e vida das marcas cada vez mais diluídas uma na outra?

Page 122: Aula1mdg2edicao

O sujeito deixa marcas.

O lado máquina nos mede, mensura, percebe nossos passos e comportamentos.

O lado mídia nos oferece ambientes para nos inserirmos em processos gregários, desenvolvermos estratégias identitárias, CONSTRUÍRMOS RELACIONAMENTO.

Page 123: Aula1mdg2edicao

Muito seguida, mas segue somente

“a si mesma” através de suas variações de profile.Comportamento “HUB”

Page 124: Aula1mdg2edicao

Segue mais do que é seguida. Cerca da metade dos updates

são de retorno ao cliente. Comportamento Pró-Ativo/Atendimento

Page 125: Aula1mdg2edicao

Mais seguida do que segue. 2 followers novos em media por dia.

O uso foi específico da ação NikePlus. No entanto, são 8600 Citações para @nike

vs. 795 citações para @nikeplus.

A Nikeplus não envia nenhum tweet desde o dia 13 de agosto de 2008. Enquanto isso, vários usuários que estão seguindo a marcaainda mandam tweets relacionados, tanto a marca como a suas campanhas.

Comportamento Sazonal + “Efeito” Morto-Vivo

Page 126: Aula1mdg2edicao

Não segue ninguém e

é seguida por mais de

9 mil users.

Há pouca transparência da marca no seu

Twitter, pois tudo o que é

postado lá são notícias sobre

a empresa que já são de

conhecimento geral

Page 127: Aula1mdg2edicao

781 seguidores, segue 14.Praticamente não dá @, à exceção do Twisney,

que parece ser outro user oficial da Disney.

Este sim interage com usuários do twitter em replies.

Page 128: Aula1mdg2edicao

(...) eles sempre tiram as dúvidas dos clientes e são educados nas respostas,

o que a torna simpática. Eles pedem desculpas

quando não podem responder as dúvidas com rapidez,

anunciam seu profile em outras redes sociais

e aspectos humanos como um artigo sobre

sua responsabilidade global.

Page 129: Aula1mdg2edicao

No entanto, navegando por grande parte das páginas do MicrosoftVista

não foi possível encontrar nenhuma URL. Grande parte do conteúdo dos tweets

são notícias relacionadas ao Vista e à Microsoft,

e até mesmo ao seu antecessor, o XP. A outra parcela dos tweets, mais informal,

fica pelas respostas e conversas que acabam sendo criadas pelos usuários.

Page 130: Aula1mdg2edicao

Equilíbrio entre número de seguidores e número que segue.

Ainda que busque alguma conversação com o usuário,

“fala muito de si mesma”. Crescimento de 5 seguidores por dia.

Uma pessoa “real” Identificada no

profile

Page 131: Aula1mdg2edicao

O uso de redes sociais (orkut, myspace, etc) não pára de crescer no Brasil.

Page 132: Aula1mdg2edicao

Tá todo mundo

conversando:

além de crescer, o Brasil é

líder mundial

de uso de instant

messengers (MSN, etc)

Page 133: Aula1mdg2edicao
Page 134: Aula1mdg2edicao

Isso nos faz olhar com mais atenção para entender que: WIKI não é apenas uma enciclopédia Blogs não são só diários abertos YouTube não é TV na Internet

Conceitos ligados a isso: emergência (sistema organizado e desorganizado simultaneamente), Folksonomia

Page 135: Aula1mdg2edicao

Internet é: Máquina + Mídia + Ambiente de relacionamento

Page 136: Aula1mdg2edicao

Uma caracterização da Internet

Banco de Dados Mídia Ambiente de Relacionamento

Internet Web Web 2.0

Page 137: Aula1mdg2edicao

Resumão:

Para projetar experiências com a web, precisamos considerar:

Suas três facetas (dados, mídia, relacionamento)

Aceitar e usar as características do hipertexto e da hipermídia

Pensar em combinar os “DNAs” disponíveis

Page 138: Aula1mdg2edicao

Interfaces, telas e arquitetura de informação

Page 139: Aula1mdg2edicao

relacionamento <proposon>mútuo vivo

Page 140: Aula1mdg2edicao
Page 141: Aula1mdg2edicao
Page 142: Aula1mdg2edicao

mídias

TvRádioJornalRevis

taWebTv

RádioJornalRevis

taWeb

Page 143: Aula1mdg2edicao
Page 144: Aula1mdg2edicao

Quem ou o que são esses espaços?

Page 145: Aula1mdg2edicao
Page 146: Aula1mdg2edicao

A função da metáfora fica bem clara conforme

a conclusão de Steven Johnson, que diz que ela ajuda a

imaginar o que é informado, propiciando a visão do todo

em uma única tela (Gosciola, 2003, 92).

Page 147: Aula1mdg2edicao

Outros exemplos de metáforas nos ícones e Remidiação: video players

Page 148: Aula1mdg2edicao
Page 149: Aula1mdg2edicao

Com a hipermídia, a discussão passaria a ser o surgimento, desenvolvimento e transformação

das interfaces que permitem comunicação e uso por imersão. (Freitas, p. 195)

Telas-interfaces-mídias

Page 150: Aula1mdg2edicao

Oops

Page 151: Aula1mdg2edicao
Page 152: Aula1mdg2edicao

A idéia de ambientação como repetição de elementos de cenário ou de sonoridade nas telas que não devem se restringir ao seu próprio espaço. Devem sim, dar indicações que cada uma é uma continuidade física, em representação, da outra, permitindo que se visualize a continuidade do ambiente a cada tela para promover maior empatia do usuário. (idem, p.98)

Page 153: Aula1mdg2edicao
Page 154: Aula1mdg2edicao
Page 155: Aula1mdg2edicao
Page 156: Aula1mdg2edicao

No início, havia 2 escolas de AI:

- Desenho de wireframes e mapas do site.

- Design estrutural da informação (vocabulários controlados e taxonomias).

´

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 157: Aula1mdg2edicao

1. O design estrutural de ambientes de informaçãocompartilhados

2. A arte e a ciência da organização e categorização de sites, intranets, comunidades online e softwares para proporcionar usabilidade e “encontrabilidade”

3. Uma comunidade de prática emergente focada em levar

princípios de design e arquitetura ao ambiente digital

Segundo o Instituto de Arquitetura de Informação:

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 158: Aula1mdg2edicao

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 159: Aula1mdg2edicao

Luciana Cattony. Arquiteta de Informação da Gerdau.

Para mim arquitetura de informação é fazer o complexo se tornar algo simples. É entender as necessidades do cliente, do seu negócio e traduzí-las em ambientes amigáveis e intuitivos para o usuário. Costumo dizer que o arquiteto de informação é como se fosse um intérprete entre o cliente e o usuário, já que ele contribui significativamente para que a comunicação e o intercâmbio / compartilhamento de informações e experiências entre esses dois lados sejam feitos de maneira eficaz.

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 160: Aula1mdg2edicao

Visão da disciplina

Mercado, concorrentes, necessidades do negócio, restrições tecnológicas, financeiras etc.

Quem são, suas necessidades, hábitos, maneiras de navegar, expectativas etc.

O que o site tem a oferecer, como será criado o conteúdo etc.

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 161: Aula1mdg2edicao

• Encurtar o tempo de construção

• Tornar a manutenção mais simples

• Tornar a busca por informações mais rápida

• Simplificar tarefas e processos

• Diminuir a necessidade de treinamentos

• Agregar valor às marcas

• Criar experiências de uso memoráveis

Arquitetura de Informação – Objetivos

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 162: Aula1mdg2edicao

Entregáveis

O que é arquitetura de informação?

Atividades e entregáveis

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 163: Aula1mdg2edicao

Resgate e levantamento de informações

Recebimento da demanda

Benchmarking

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 164: Aula1mdg2edicao

Inventário / análise de conteúdo

Avaliação de maturidade

Avaliação Heurística

EstatísticasFonte: Luciana Cattony – plantabaixa.wordpress.com

Page 165: Aula1mdg2edicao

Pesquisas quantitativas / qualitativas

Entrevistas com usuários

Personas

Imagem personas: Adaptivepath

Focus Group

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 166: Aula1mdg2edicao

Testes de usabilidade

Card Sorting

Imagens: TRY – Consultoria e pesquisa

Estudo etnográfico

Mapa do site

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 167: Aula1mdg2edicao

Protótipos em papel

http://www.nngroup.com/reports/prototyping/video_stills.html

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 168: Aula1mdg2edicao

Desenvolvimento de wireframes

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 169: Aula1mdg2edicao

Wireframes x Layouts

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 170: Aula1mdg2edicao

Wireframes x Layouts

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 171: Aula1mdg2edicao

Acompanhamento do desenvolvimento

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 172: Aula1mdg2edicao

• Hierarquia da informaçãoAs informações devem ter pesos diferentes. Foque naquilo que é mais importante e respeite uma hierarquia de informação.

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 173: Aula1mdg2edicao

• Apresentação da informaçãoExistem maneiras visuais e mais amigáveis para se transmitir uma informação.

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Page 174: Aula1mdg2edicao

• Apresentação da informaçãoExistem maneiras visuais e mais amigáveis para se transmitir uma informação.

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Fonte: Luciana Cattony – plantabaixa.wordpress.com