8/4/2019 Design de a

1/174

Escola de Design Unisinos

Especializao em Design GrficoDesign de Hipermdia

8/4/2019 Design de a

2/174

O QUE ACONTECEU PARA ESTARMOS

TRATANDO DE DESIGN DEHIPERMDIA?

8/4/2019 Design de a

3/174

Hipermdia e interfaces

8/4/2019 Design de a

4/174

Web e softwares que usam a

internet para trabalhar

8/4/2019 Design de a

5/174

Processos de projeto

8/4/2019 Design de a

6/174

Tendncias

8/4/2019 Design de a

7/174

Computadores calculam e

armazenam.

Computadores contm dados.

Internet conecta redes decomputadores.

Computadores so organizveis

em redes.

8/4/2019 Design de a

8/174

Digitalizao

Dos meios de produo (criamos

contedo atravs de): word, powerpoint,

excel, photoshop, web) Dos suportes (lugares onde guardamos

o contedo produzido): pendrives,

DVDs, HDs, CDs, discos virtuais,

disquetes... Dos processos: (executamos tarefas

com o auxlio de): cartes eletrnicos,

home-banking, celular, microondas, etc.

8/4/2019 Design de a

9/174

Comunicao Mediada por

Computadores (CMC)

Tecnologias da Informao e da

Comunicao (TICs)

8/4/2019 Design de a

10/174

A evoluo da

computao estligada ao clculo e

armazenamento.

8/4/2019 Design de a

11/174

O computador realiza operaes. Essa

faceta de mquina de processar, calcular,

buscar resultados fundamental para

pensarmos a Internet.

8/4/2019 Design de a

12/174

8/4/2019 Design de a

13/174

8/4/2019 Design de a

14/174

2001

2008

Professor at the VisualArtsDepartment, University ofCalifornia - San Diego(UCSD).

8/4/2019 Design de a

15/174

Examinando a interface, comeando pelaidia de tela.

8/4/2019 Design de a

16/174

A tela uma tecnologia muito

anterior s possibilidades recentes(VR) que tomamos contato hoje, daRenascena ao cinema do sculo XX.

8/4/2019 Design de a

17/174

As solues de Virtual Reality eram muito comentadas poca.

8/4/2019 Design de a

18/174

Como o computador apresenta

continuidades e desafios em

relao tradio da tela? McLuhan e Remidiation.

8/4/2019 Design de a

19/174

Genealogia da tela.

Classical Screen

A cultura visual do perodo moderno

caracterizada por um intrigante fenmeno aexistncia de um outro espao virtual, umoutro mundo tridimensional fechado por umamoldura e situado dentro do nosso espao

normal.

8/4/2019 Design de a

20/174

A moldura (frame) separa dois

espaos absolutamentediferentes que de alguma

forma coexistem.

8/4/2019 Design de a

21/174

Herana da pintura: pensar nas propores e nasnomenclaturas portrait e landscape usadas hoje.

8/4/2019 Design de a

22/174

Dynamic screen

A tela que disponibiliza uma imagem que mudano tempo. A tela do cinema, tv, vdeo.

Impe uma outro protoloco devisulizao (viewing regime)

entre a imagem e oespectador.

8/4/2019 Design de a

23/174

J aparecia na tela clssica, mas agora

aumenta a noo de preenchimento

completo da tela pelaimagem, descarte do espao

ao redor da tela pelo foco que amesma requisita. Imerso.

8/4/2019 Design de a

24/174

A tela agressiva.

Ela filtra o entorno.

8/4/2019 Design de a

25/174

Esta relao-protocolo de visualizao (tela

quer sua ateno total) desafiada

com a chegada da tela docomputador.

8/4/2019 Design de a

26/174

A tela do cinema resulta de uma evoluo dedispositivos do sculo 18 e 19.

A tela do computador tem origem

no radar. Inovao ligada a tecnologias de controle,

espionagem, mapeamento, segurana (militares):monitor de vdeo, tela de computador, controles.

8/4/2019 Design de a

27/174

radar

Ao contrrio da fotografiae do cinema (imagensestticas, ou imagensestticas em seqncia),vemos pela 1 vez uma

tela cuja imagem podemudar em tempo real,mostrando mudanas noreferente (posio deobjeto, live vdeo oumudana nos dados docomputador).

8/4/2019 Design de a

28/174

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

8/4/2019 Design de a

29/174

Janelas coexistentes no lugar de umanica imagem, princpio da GraphicalUser Interface (GUI).

8/4/2019 Design de a

30/174

A concentrao da visualizao deixa de serem apenas uma imagem. Blocos de dados detexto, imagem, vdeo sugerem que a tela docomputador tem mais a ver com designgrfico e janelas.

8/4/2019 Design de a

31/174

Tela interativa

A informao processada passa a serrepresentada na tela de tempo real: lugar de

inserir e retirar informao de um computador.

8/4/2019 Design de a

32/174

Ao mudar algona tela,mudamos algo

na memria docomputador

8/4/2019 Design de a

33/174

Clssica

Dinmica

Real time

Interativa

8/4/2019 Design de a

34/174

A tela e o corpo

A tela representa uma relao entre o espaodo espectador e o espao da representao.

Com isso, o sujeito estariaexistindo nesses dois espaossimultaneamente, princpio que

nasce do corte promovido pela tela.

8/4/2019 Design de a

35/174

As formas de representao ocidental pedemque o sujeito fique parado.

8/4/2019 Design de a

36/174

Um ponto de vista, descolado do corpo.

8/4/2019 Design de a

37/174

A inveno da perspectiva radicaliza ainda maisessa relao: o ponto de vista est pronto.

A tela funcionaria como um cofre em uma parede, no qual o

visvel foi depositado.

8/4/2019 Design de a

38/174

Os aparatos que lidam com a luz e projeoconduziriam depois ao cinema requisita que oespectador se aprisione para - imvel -assistir imagens.

8/4/2019 Design de a

39/174

Nesse sentido, tambm passamos de ummundo estvel e esttico (fotografias iniciais)para a aventura da viagemcom a imagemem movimento, ainda que aprisionados.

8/4/2019 Design de a

40/174

Salas de cinema: prises, caverna de Plato.Representao confundida com perpcepo.

8/4/2019 Design de a

41/174

A realidade virtual leva a cmera para acabea do usurio. Para olhar no espaovirtual preciso olhar no espao fsico. Ousurio precisa trabalhar (jogar?) para ver(lembrando o funcionrio de Flusser).

8/4/2019 Design de a

42/174

Continuamos grudados mquina, masagora precisamos nos mexer.

8/4/2019 Design de a

43/174

A VR continuaria a tradio da simulao.Teramos na tela a mudana darepresentao para a simulao.

8/4/2019 Design de a

44/174

Pinturas de mosaicos, afrescos, nas paredesfundiam-se com a arquitetura e o realenquanto as telas da pintura em diantereforavam a representao (e pediam amobilidade do espectador). A tradio dasimulao, portanto, anterior s telas

digitais (museus de cera, naturalismo,realismo, etc).

8/4/2019 Design de a

45/174

O prximo passo (ento) carregar as telasque nos aprisionam conosco: a retina e telavo se fundir. Mas ainda vivemos na

sociedade da tela achatada, retangular queparticipa do nosso espao como uma janelapara outro lugar, a sociedade da tela.

8/4/2019 Design de a

46/174

REMIDIAO

8/4/2019 Design de a

47/174

Jay Bolter

Jay David Bolter (bornAugust 17, 1951) is theWesley Chair of New

Media and a professor inthe School of Literature,Communication and

Culture at the GeorgiaInstitute of Technology.

http://en.wikipedia.org/wiki/August_17http://en.wikipedia.org/wiki/1951http://en.wikipedia.org/wiki/Professorhttp://en.wikipedia.org/wiki/Georgia_Institute_of_Technologyhttp://en.wikipedia.org/wiki/Georgia_Institute_of_Technologyhttp://en.wikipedia.org/wiki/Georgia_Institute_of_Technologyhttp://en.wikipedia.org/wiki/Georgia_Institute_of_Technologyhttp://en.wikipedia.org/wiki/Professorhttp://en.wikipedia.org/wiki/1951http://en.wikipedia.org/wiki/August_17

8/4/2019 Design de a

48/174

Richard Grusin

Richard Grusin is aProfessor of Englishat Wayne State

University, where heteaches courses infilm and media

studies, new mediatheory, and AmericanStudies.

http://premediation.blogspot.com/

8/4/2019 Design de a

49/174

Conceitos associados

Mdia

Mediao

Interface

Experincia

8/4/2019 Design de a

50/174

Premissa bsica>

Haveria o seguinte contraditrio (paradoxo):nossa cultura teria um simultneo desejo porimedao e hipermediao, a dupla lgica da

remidiao.

8/4/2019 Design de a

51/174

Ou seja>

Nossa cultura desejaria simultaneamentemultiplicar seus mdias e apagar todos ostraos de mdia. O ato de multiplicar visaria o

apagamento, idealmente.

8/4/2019 Design de a

52/174

Imediao:

o meio desapareceria para nos deixarmos napresena da coisa representada. Mas aimediao dependeria da hipermediao

(alm de coexistir).

8/4/2019 Design de a

53/174

Imediao:

A experincia da imediao hipermediadapela INTERFACE (simuladores).

8/4/2019 Design de a

54/174

Imediao>

A origem aponta para a trajetria darepresentao visual ocidental: a buscapermanente por atingir a imediao

implicaria em colocar o espectador nomesmo lugar dos objetos visualizados.

8/4/2019 Design de a

55/174

A hipermediao tem ligao histrica com afascinao pela presena do meio. cones eletras integram-se desde os manuscritos

medievais.

8/4/2019 Design de a

56/174

As mdias visuais digitais podem ser melhor

compreendidas pelas formas pelas quais

homenageiam,

rivalizam e revisam apintura em perspectiva, fotografia, filme,televiso e impresso. O que novo sobre as

novas mdias seria a forma particular comque estes aspectos so tratados entre asmdias novas e antigas.

8/4/2019 Design de a

57/174

Opacidade e transparncia

As novas mdias sempre andariam entre aopacidade e a transparncia na remidiaoque fazem das mdias anteriores.

Ao ver as formas de representao dopassado, destaca-se as preocupaes detransparecer-se para chegar ao real e o

encantamento com a opacidade do prpriomeio.

8/4/2019 Design de a

58/174

Discutindo mdia>

As tecnologias da mdia envolvem relaesque podem ser expressas em termos fsicos,sociais, estticos e econmicos.

Software + Usos + remodelagem = mdia

8/4/2019 Design de a

59/174

Imediao>

O valor esttico da transparncia visando aimediao foi trabalhado pelas mdias antigas

nas tcnicas de perspectiva,apagamento e

automaticidade.

8/4/2019 Design de a

60/174

Imediao>

Perspectiva: ver atravs, matematizar oespao.

8/4/2019 Design de a

61/174

Imediao>

Apagamento: trabalhar a superfcie paraapagar as pinceladas.

Tromp Loeil: exemplo de buscar enganar oolho que acaba reforando a qualidade doartista que aparece pelo apuro tcnico.

8/4/2019 Design de a

62/174

8/4/2019 Design de a

63/174

Imediao>

Automaticidade: tecnologias fotogrficas,cinema e depois televiso. A fotografia setornou o aperfeioamento da perspectiva

linear. A remoo do artista que ficava entre oespectador e a realidade da imagem.

8/4/2019 Design de a

64/174

Imediao>

Mais tarde, a computao grfica herda ocartesianismo e a matematizao do espaoconvocado pela perspectiva. A, o

programador que apagado daexperincia do software, ele no

transparece atravs da interface (todosos software so iguais).

8/4/2019 Design de a

65/174

8/4/2019 Design de a

66/174

Mediao da mediao

No se media a experincia externa ,mas simoutros mdias. Toda nova tecnologia se defineem relao com formas anteriores de

representao. (isso eles aprenderam com McLuhan)

8/4/2019 Design de a

67/174

Horizonte da imediao>

Imediao: o autor se retira mais e o leitor

seria mais envolvido.

8/4/2019 Design de a

68/174

Porm...

A imediao proposta pelos meios seduz aspercepes, mas de fato est amparada ematos de mediao contnuos (hipermediao).

8/4/2019 Design de a

69/174

Hipermediao

Hipermediao: fascinao pelos mdias(meios).

Processo e performance so maiores que oresultado. Espao heterogno, janelizado,mltiplos atos de representao.

8/4/2019 Design de a

70/174

Hipermediao

Hipermdia: mltiplas mdias + acessorandmico.

A interface do desktop no se apaga. Mdia(contedo) e software inclusive conversam.

8/4/2019 Design de a

71/174

Hipermediao

A hipermediao j se apresentava em portase cabines dos sculos XVI e XVII.

8/4/2019 Design de a

72/174

Hipermediao

Tecnologias mecnicas de reproduo quetambm traziam a hipermediao:

Diorama, phenakistoscope, stereoscope:internalizavam a transparncia da imagemem movimento dentro da estruturahipermediada. Mas a vitria foi da maior

transparncia (ou iluso de) dada pelafotografia.

8/4/2019 Design de a

73/174

Diorama

8/4/2019 Design de a

74/174

phenakistoscope

8/4/2019 Design de a

75/174

Stereoscope

8/4/2019 Design de a

76/174

Hipermediao>

A fotomontagem teria rompido com esseentendimento.

8/4/2019 Design de a

77/174

Colagem, mash-up, DJ.

8/4/2019 Design de a

78/174

Hipermediao

Quando a tecnologia se torna uma segundanatureza, a experincia hipermediada torna-se igualmente autntica.

8/4/2019 Design de a

79/174

Hipermediao>

A lgica da hipermediao expressa a tensoentre o espao visual como mediado e comoum espao real que fica alm da

mediao. Olhar para uma coisa, olhar atravs da coisa.

8/4/2019 Design de a

80/174

Imediaao/Hipermediao

A arte explora o sentido da interface, faz comque ela surja aos olhos do usurio, enquanto aengenharia aperfeioa a tecnologia para

que ela desaparea.

8/4/2019 Design de a

81/174

Imediao / Hipermediao

>>>> Remidiao

a representao de um meio em outro.

Caracterstica definidora das novas mdias.

idi

8/4/2019 Design de a

82/174

Remidiao>

Atos de remidiao:

emprstimo, arquivamento, remodelagem,absoro.

8/4/2019 Design de a

83/174

Dependncia, contexto, reforma

Imediao e hipermediao nas interfaces

8/4/2019 Design de a

84/174

8/4/2019 Design de a

85/174

8/4/2019 Design de a

86/174

8/4/2019 Design de a

87/174

8/4/2019 Design de a

88/174

8/4/2019 Design de a

89/174

Sistema que faz a mediao de umusurio 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 grficas digitais.

8/4/2019 Design de a

90/174

Criada em 1991 por Tim-Berners LeeLee props a criao de um espao hipertextual

global e aberto, no qual qualquer informaopudesse ser acessada atravs de um nicoUniversal Document Identifier(Identificador

Universal de Documentos).

Nem tudo que Internet, web.

A web fez pela Internet o que oWindows fez pelo computador, tornoua interface amigvel.

Os softwares chamados

8/4/2019 Design de a

91/174

Os softwares chamadosnavegadores, permitem que seacesse os documentos HTMLque universalizam a forma derecepo do contedo que se

desejasse fazer circular pela

Internet. Textos, imagens,sons, vdeos comeama aparecer nasinterfaces grficasdigitais da web.

O usurio ao requisitar umapgina, faz um pedido ao

servidor que a disponibilize.

8/4/2019 Design de a

92/174

Heterogeneidade

Metamorfose

Potencialidade

Complexidade

Conectividade

Cartografia

8/4/2019 Design de a

93/174

Heterogeneidade

o hipertexto composto de diferentes ns quepodem ser acessados por diferentes caminhos.

Todos os caminhos podem levar sua marca.OU talvez no necessariamente no lugar quevoc queria que as pessoas chegassem aopensar na sua marca.

http://twitter.com/BBerrryQueen/statuses/1308797714http://twitter.com/BBerrryQueen/statuses/1308797714http://twitter.com/BBerrryQueen/statuses/1308797714http://twitter.com/BBerrryQueen/statuses/1308797714http://twitter.com/BBerrryQueen/statuses/1308797714http://twitter.com/BBerrryQueen/statuses/1308797714

8/4/2019 Design de a

94/174

Metamorfose

8/4/2019 Design de a

95/174

Metamorfose

O hipertexto est em constante transformao Desde a cor do link visitado at a organizao

dos contedos.

8/4/2019 Design de a

96/174

8/4/2019 Design de a

97/174

potencialidade

o usurio tem a possibilidade de recriar ohipertexto no momento de seu uso

Complexidade

8/4/2019 Design de a

98/174

Complexidade

as conexes relacionam diferentes aspectosdo hipertexto, mesmo que contraditrios.

cartografia

8/4/2019 Design de a

99/174

cartografia

o hipertexto deve oferecer recursos para aorientao flexvel entre os caminhospossveis.

8/4/2019 Design de a

100/174

Caractersticas da hipermdia

8/4/2019 Design de a

101/174

p

A hipermdia mistura diferentes tipos delinguagens

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

Hibridismo

no linearidade

8/4/2019 Design de a

102/174

no-linearidade

o usurio no precisa seguir uma seqncia pr-determinada

Interatividade

8/4/2019 Design de a

103/174

Interatividade

o usurio deve ter papel ativo na fruio dahipermdia.

Navegabilidade

8/4/2019 Design de a

104/174

Navegabilidade

o usurio deve ter liberdade para ir aondequiser, encontrar seu rumo ou se perder

(hiper) Texto -> Mdia

8/4/2019 Design de a

105/174

(hiper) Texto -> Mdia

Substituio ou evoluo?

(hiper) texto> (mdia)

8/4/2019 Design de a

106/174

(hiper) texto> (mdia)

Hipermdia une os conceitos de no-linearidade(no-linear), hipertexto, interface e multimdianuma s linguagem. Traduzida erroneamente

como mero suporte, hipermdia no se configuras como meio de transmisso de mensagens, esim como uma linguagem com caractersticasprprias, com sua prpria gramtica. Hipermdia,

diferentemente de multimdia, no a merareunio dos meios existentes, e sim a fusodesses meios a partir de elementos no-lineares.

http://pt.wikipedia.org/wiki/N%C3%A3o-linearhttp://www.ericdigests.org/pre-9212/hype.htmhttp://www.ericdigests.org/pre-9212/hype.htmhttp://pt.wikipedia.org/wiki/N%C3%A3o-linearhttp://pt.wikipedia.org/wiki/N%C3%A3o-linearhttp://pt.wikipedia.org/wiki/N%C3%A3o-linear

8/4/2019 Design de a

107/174

Mas a mquinacontinua operando

nos bastidores.

Web

8/4/2019 Design de a

108/174

Web

Diversos grupos de mdia passam aproduzir suas verses online quando a

Web torna-se, o lado mdia da

Internet.

8/4/2019 Design de a

109/174

Blogs

dirios

Gerenciador

de contedo

8/4/2019 Design de a

110/174

Blog

8/4/2019 Design de a

111/174

Website

Portal

Hotsite

Blog

http://www.globo.com/http://www.nike.com/nikeskateboarding/v3/http://www.nike.com/nikeskateboarding/v3/http://www.globo.com/

8/4/2019 Design de a

112/174

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

Web 2 0

http://www.carolinasebben.blogspot.com/http://www.carolinasebben.blogspot.com/

8/4/2019 Design de a

113/174

Web 2.0

Ao usar a mquina, ela nos usa.

um processo, no uma nova verso.

Estrutura integrada de funcionalidades econtedo, criando servios.

Publicao (insero), visualizao(representao), compartilhamento

(indexao) das informaes.

Como ver o princpio em ao

8/4/2019 Design de a

114/174

Como ver o princpio em ao

Sites que nasceram sob idia de publicao,visualizao e compartilhamento: YouTube,

Flickr, Slideshare, Delicious, etc.

Tags (folskonomia)

8/4/2019 Design de a

115/174

Mas tem muito mais:

8/4/2019 Design de a

116/174

Mas tem muito mais:

Go2web20.net

Feed My App

http://www.go2web20.net/http://www.feedmyapp.comq/http://www.feedmyapp.comq/http://www.go2web20.net/

8/4/2019 Design de a

117/174

Sites que funcionam como

organizadores de contedo que

vem de outros lugares NetVibes (www.netvibes.com)

NetVibes da Agncia Digital AG2

Mash-Ups> A + B = C

http://www.netvibes.com/http://www.netvibes.com/http://www.netvibes.com/ag2http://www.netvibes.com/ag2http://www.netvibes.com/

8/4/2019 Design de a

118/174

Mash Ups> A + B C

Sites que organizam contedo possuemuma espcie de DNA (API)

a) Usa-se um DNA a favor de um objetivoespecfico: ver Mashup awards

b) Ao reunir dois DNAs diferentes, forma-se umterceiro SER: Wonderwall e Boulevard ofBroken Dreams

http://mashupawards.com/winners/http://mashupawards.com/winners/

8/4/2019 Design de a

119/174

Exemplos:

8/4/2019 Design de a

120/174

Exemplos:

Diaroogle (1 API)

Visual Headlines (Flickr + CNN)

Algumas concluses:

http://www.diaroogle.com/http://www.visualheadlines.com/http://www.visualheadlines.com/http://www.diaroogle.com/

8/4/2019 Design de a

121/174

Algumas concluses:

1. Decises estratgicas renem dados+mdia

2. Mutao permanente. Interfacesprevistas, mas no previsveis.

3. Informao embutvel/distribuvel para muitoslugares (igual e diferente ao mesmo tempo).

4. Vida pessoal e vida das marcas cada vez mais

diludas uma na outra?

O sujeito deixa marcas.

8/4/2019 Design de a

122/174

O sujeito deixa marcas.

O lado mquina nos mede, mensura, percebenossos passos e comportamentos.

O lado mdia nos oferece ambientes para nos

inserirmos em processos gregrios,desenvolvermos estratgias identitrias,CONSTRURMOS RELACIONAMENTO.

Muito seguida, mas seguesomente

a si mesma atravs de

8/4/2019 Design de a

123/174

a si mesma atravs de

suas variaes de profile.Comportamento HUB

Segue mais do que seguida.Cerca da metade dos updates

so de retorno ao cliente.

8/4/2019 Design de a

124/174

Comportamento Pr-Ativo/Atendimento

Mais seguida do que segue 2 followers

8/4/2019 Design de a

125/174

Mais seguida do que segue. 2 followersnovos em media por dia.

O uso foi especfico da ao NikePlus.

No entanto, so 8600 Citaes para @nikevs. 795 citaes para @nikeplus.

A Nikeplus no envia nenhum tweetdesde o dia 13 de agosto de 2008.Enquanto isso, vrios usuriosque esto seguindo a marcaainda mandam tweets relacionados,tanto a marca como a suas campanhas.

Comportamento Sazonal

+ Efeito Morto-Vivo

8/4/2019 Design de a

126/174

No segueningum e

seguida pormais de

9 mil users.

H pouca transparnciada marca no seu

Twitter,pois tudo o que

postadol so notcias sobre

a empresa quej so deconhecimento geral

781 seguidores, segue 14.Praticamente no d @

8/4/2019 Design de a

127/174

Praticamente no d @, exceo do Twisney,

que parece ser

outro user oficial da Disney.Este sim interage com

usurios do twitter em replies.

8/4/2019 Design de a

128/174

(...) eles sempre tiram as dvidasdos clientes e so educados nas respostas,

o que a torna simptica.Eles pedem desculpas

quando no podem responder

as dvidas com rapidez,anunciam seu profile

em outras redes sociaise aspectos humanoscomo um artigo sobre

sua responsabilidade global.

8/4/2019 Design de a

129/174

No entanto, navegando por grande partedas pginas do MicrosoftVista

no foi possvel encontrar nenhuma URL.Grande parte do contedo dos tweets

so notcias relacionadasao Vista e Microsoft,

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

fica pelas respostas e conversas queacabam sendo criadas pelos usurios.

Equilbrio entre nmero deseguidores e nmero que segue.

Ainda que busque algumaconversao com o usurio

8/4/2019 Design de a

130/174

conversao com o usurio,fala muito de si mesma.

Crescimento de 5 seguidores por dia.

Uma pessoa real

Identificada noprofile

8/4/2019 Design de a

131/174

O uso de redes sociais (orkut, myspace, etc)no pra de crescer no Brasil.

8/4/2019 Design de a

132/174

T todomundoconversando:alm decrescer, oBrasil ldermundialde uso deinstantmessengers(MSN, etc)

8/4/2019 Design de a

133/174

Isso nos faz olhar com mais

8/4/2019 Design de a

134/174

ateno para entender que:

WIKI no apenas uma enciclopdia

Blogs no so s dirios abertos

YouTube no TV na Internet

Conceitos ligados a isso: emergncia(sistema organizado e desorganizadosimultaneamente), Folksonomia

Internet : Mquina + Mdia +

Ambiente de relacionamento

8/4/2019 Design de a

135/174

Ambiente de relacionamento

8/4/2019 Design de a

136/174

Banco de Dados Mdia Ambiente deRelacionamento

Internet Web Web 2.0

Resumo:

8/4/2019 Design de a

137/174

Para projetar experincias com a web, precisamosconsiderar:

Suas trs facetas (dados, mdia, relacionamento)

Aceitar e usar as caractersticas do hipertexto eda hipermdia

Pensar em combinar os DNAs disponveis

8/4/2019 Design de a

138/174

Interfaces, telas earquitetura de

informao

8/4/2019 Design de a

139/174

relacionamento

mtuo vivo

8/4/2019 Design de a

140/174

CANVASREPRESENTAO

8/4/2019 Design de a

141/174

TELAS

Tv

Rdi

8/4/2019 Design de a

142/174

mdias

Rdio

JornalRevista

WebTv

RdioJornal

R vi

8/4/2019 Design de a

143/174

8/4/2019 Design de a

144/174

SEGUNDO MANOVITCH, A TELA OUINTERFACE DO COMPUTADOR AQUELAQUE SEPARA DOIS ESPAOSABSOLUTAMENTE DIFERENTES EQUE DE ALGUMA MANEIRACOEXISTEM.

Quem ou o que so esses espaos?

INTERFACEAR OU ATENDER

8/4/2019 Design de a

145/174

SIMULTANEAMENTE A DOIS OU MAIS

PLOS DE UM SISTEMA DE INFORMAESIMPLICA EM, DE UM LADO, CUMPRIRCOM OS PROCEDIMENTOS CONTIDOS NOPLO INANIMADO, MAS PLANEJADO EPR-DEFINIDO DO SISTEMA, E DEOUTRO LADO, ATENDER A DEMANDA DEEXPECTATIVAS PREVISVEIS POR PARTE

DO INDIVDUO USURIO ESOLICITANTE. (FREITAS, P. 188)

OFERECER

8/4/2019 Design de a

146/174

POSSIBILIDADE DE

USO, COM LINGUAGENSDECODIFICVEIS A UMOU MAIS INDIVDUOSUSURIOS PODE SERCONSIDERADO OPRINCIPAL DESAFIODE UMA INTERFACE

(FREITAS,P. 189)

A funo da metfora ficabem clara conforme

a concluso de Steven Johnson,

que diz que ela ajuda aimaginar o que informado,propiciando a viso do todo

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

8/4/2019 Design de a

147/174

Outros exemplos demetforas nos cones e

Remidiao: video players

http://www.smileycat.com/design_elements/flash_video_players/http://www.smileycat.com/design_elements/flash_video_players/

8/4/2019 Design de a

148/174

TELAS-INTERFACES-

MDIAS

8/4/2019 Design de a

149/174

Com a hipermdia, a discusso passaria a sero surgimento, desenvolvimento e

transformao das interfaces que

permitem comunicao e usopor imerso. (Freitas, p. 195)

Telas-interfaces-mdias

8/4/2019 Design de a

150/174

Oops

NUMA ANALOGIA ENTRE ODESIGN NA RELAOHUMANA NO CAMPO DO

8/4/2019 Design de a

151/174

HUMANA NO CAMPO DOREAL, EM TERMOS DE

PASSAGENS ENTREAMBIENTES, O AUTORAFIRMA QUE NOCIBERESPAO, [O]S

ELEMENTOS ALIPRESENTES, QUANDOPERMITEM AMOVIMENTAO DE SUA

ESTRUTURA, APRESENTAMUM QUADRO HIERRQUICODE MOVIMENTAO COMDIFERENTES GRAUS DEPERMISSIVIDADE.

A idia de ambientao como repetio deelementos de cenrio ou de sonoridade nas telas

8/4/2019 Design de a

152/174

elementos de cenrio ou de sonoridade nas telas

que no devem se restringir ao seu prprioespao. Devem sim, dar indicaes que cadauma uma continuidade fsica, emrepresentao, da outra, permitindo que se

visualize a continuidade do ambiente a cada telapara promover maior empatia do usurio. (idem,p.98)

8/4/2019 Design de a

153/174

PARA O PLANEJAMENTO DE UMA INTERFACE

8/4/2019 Design de a

154/174

PARA O PLANEJAMENTO DE UMA INTERFACE,

DEVE-SE LEVAR EM CONSIDERAO OHISTRICO DAS EXPERINCIASVIVENCIADAS DO INDIVDUO QUE SEPRETENDE SENSIBILIZAR, PODENDO-SE,

ENTO, PROJETAR UM CONJUNTO DEELEMENTOS ESTIMULANTES EM UM SISTEMAESPECFICO DE INFORMAES,OBJETIVANDO-SE SUA INTERPRETAO

UNVOCA E PREVIAMENTE DETERMINADA (P.191)

8/4/2019 Design de a

155/174

No incio, havia 2 escolas de AI:

8/4/2019 Design de a

156/174

- Desenho dewireframes e

mapas do site.

- Design estrutural dainformao (vocabulrioscontrolados e taxonomias).

Fonte: Luciana Cattony plantabaixa.wordpress.com

8/4/2019 Design de a

157/174

1. O design estrutural de ambientes de informaocompartilhados

2. A arte e a cincia da organizao e categorizao desites, intranets, comunidades online e softwares paraproporcionar usabilidade e encontrabilidade

3. Uma comunidade de prtica emergente focada em levarprincpios de design e arquitetura ao ambiente digital

Segundo o Instituto de Arquitetura de Informao:

Fonte: Luciana Cattony plantabaixa.wordpress.com

8/4/2019 Design de a

158/174

Fonte: Luciana Cattony plantabaixa.wordpress.com

Para mim arquitetura de informao fazer o complexo se tornar algosimples. entender as necessidades do cliente, do seu negcio e

8/4/2019 Design de a

159/174

Luciana Cattony. Arquiteta de Informao da Gerdau.

simples. entender as necessidades do cliente, do seu negcio etraduz-las em ambientes amigveis e intuitivos para o usurio.

Costumo dizer que o arquiteto de informao como se fosse umintrprete entre o cliente e o usurio, j que ele contribuisignificativamente para que a comunicao e o intercmbio /compartilhamento de informaes e experincias entre esses doislados sejam feitos de maneira eficaz.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Viso da disciplina

8/4/2019 Design de a

160/174

Mercado,

concorrentes,necessidadesdo negcio,restriestecnolgicas,financeiras etc.

Quem so,suasnecessidades,hbitos,maneiras

de navegar,expectativasetc.

O que osite tem aoferecer,como sercriado o

contedoetc.

Fonte: Luciana Cattony plantabaixa.wordpress.com

8/4/2019 Design de a

161/174

Encurtar o tempo de construo

Tornar a manuteno mais simples

Tornar a busca por informaes maisrpida

Simplificar tarefas e processos

Diminuir a necessidade de

treinamentos

Agregar valor s marcas

Criar experincias de uso memorveis

Arquitetura de Informao Objetivos

Fonte: Luciana Cattony plantabaixa wordpress com

8/4/2019 Design de a

162/174

Entregveis

O que arquitetura de informao?

Atividades e entregveis

Fonte: Luciana Cattony plantabaixa.wordpress.com

Recebimento da demanda

http://www.gettyimages.com/detail/85324580/Iconica

8/4/2019 Design de a

163/174

Resgate e levantamento de informaes

Benchmarking

Fonte: Luciana Cattony plantabaixa.wordpress.com

Inventrio / anlise de contedo

http://www.gettyimages.com/detail/85324580/Iconica

8/4/2019 Design de a

164/174

Avaliao de maturidade

Avaliao Heurstica

Estatsticas

F t L i C tt l t b i d

http://images.google.com.br/imgres?imgurl=http://cnaturais7.files.wordpress.com/2008/02/grafico3.gif&imgrefurl=http://cnaturais7.wordpress.com/2008/02/17/novidades-3/&usg=__khTWOCQpxxzWWWYedZWX7N4TcqI=&h=461&w=451&sz=17&hl=pt-BR&start=5&sig2=hSm9lQPdr_5er-z7RVFRug&tbnid=8-T-M770kXUjVM:&tbnh=128&tbnw=125&prev=/images?q=questionarios&gbv=2&hl=pt-BR&ei=Jm3SSb-1OtPnlAft7cyyBQhttp://images.google.com.br/imgres?imgurl=http://br.geocities.com/nitrixbr/images/umbandareligioesbrasil.jpg&imgrefurl=http://br.geocities.com/nitrixbr/ensaio04.htm&usg=__jeuoaCiHByTguVJ7JurRiinlfTE=&h=363&w=338&sz=41&hl=pt-BR&start=6&sig2=qd6Pu7x7kKXnIy23GUw71Q&tbnid=54HyJN9natuhGM:&tbnh=121&tbnw=113&prev=/images?q=questionarios&gbv=2&hl=pt-BR&ei=Jm3SSb-1OtPnlAft7cyyBQhttp://images.google.com.br/imgres?imgurl=http://www.scielo.br/img/revistas/rbem/v30n1/a04q01.gif&imgrefurl=http://www.scielo.br/scielo.php?pid=S0100-55022006000100004&script=sci_arttext&usg=__-N7CYraPNyJwt3x-nigbkS0puoU=&h=1071&w=880&sz=47&hl=pt-BR&start=1&sig2=3caDZSAtBMQIDbrAgUQgOQ&tbnid=2v0b_AeCpA9jjM:&tbnh=150&tbnw=123&prev=/images?q=questionarios&gbv=2&hl=pt-BR&ei=Jm3SSb-1OtPnlAft7cyyBQ

8/4/2019 Design de a

165/174

Pesquisas quantitativas / qualitativas

Entrevistascom usurios

Personas

Imagem personas: Adaptivepath

Focus Group

Fonte: Luciana Cattony plantabaixa.wordpress.com

Mapa do site

http://images.google.com.br/imgres?imgurl=http://cnaturais7.files.wordpress.com/2008/02/grafico3.gif&imgrefurl=http://cnaturais7.wordpress.com/2008/02/17/novidades-3/&usg=__khTWOCQpxxzWWWYedZWX7N4TcqI=&h=461&w=451&sz=17&hl=pt-BR&start=5&sig2=hSm9lQPdr_5er-z7RVFRug&tbnid=8-T-M770kXUjVM:&tbnh=128&tbnw=125&prev=/images?q=questionarios&gbv=2&hl=pt-BR&ei=Jm3SSb-1OtPnlAft7cyyBQhttp://images.google.com.br/imgres?imgurl=http://br.geocities.com/nitrixbr/images/umbandareligioesbrasil.jpg&imgrefurl=http://br.geocities.com/nitrixbr/ensaio04.htm&usg=__jeuoaCiHByTguVJ7JurRiinlfTE=&h=363&w=338&sz=41&hl=pt-BR&start=6&sig2=qd6Pu7x7kKXnIy23GUw71Q&tbnid=54HyJN9natuhGM:&tbnh=121&tbnw=113&prev=/images?q=questionarios&gbv=2&hl=pt-BR&ei=Jm3SSb-1OtPnlAft7cyyBQhttp://images.google.com.br/imgres?imgurl=http://www.scielo.br/img/revistas/rbem/v30n1/a04q01.gif&imgrefurl=http://www.scielo.br/scielo.php?pid=S0100-55022006000100004&script=sci_arttext&usg=__-N7CYraPNyJwt3x-nigbkS0puoU=&h=1071&w=880&sz=47&hl=pt-BR&start=1&sig2=3caDZSAtBMQIDbrAgUQgOQ&tbnid=2v0b_AeCpA9jjM:&tbnh=150&tbnw=123&prev=/images?q=questionarios&gbv=2&hl=pt-BR&ei=Jm3SSb-1OtPnlAft7cyyBQ

8/4/2019 Design de a

166/174

Testes de usabilidade

Card Sorting

Imagens: TRY Consultoria e pesquisa

Estudo etnogrfico

F t L i C tt l t b i d

Prottipos em papel

8/4/2019 Design de a

167/174

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

Fonte: Luciana Cattony plantabaixa.wordpress.com

Desenvolvimento de wireframes

http://www.youtube.com/watch?v=c4-A-9hGn0U&eurl=http://plantabaixa.wordpress.com/page/5/&feature=player_embeddedhttp://www.youtube.com/watch?v=c4-A-9hGn0U&eurl=http://plantabaixa.wordpress.com/page/5/&feature=player_embeddedhttp://www.youtube.com/watch?v=c4-A-9hGn0U&eurl=http://plantabaixa.wordpress.com/page/5/&feature=player_embeddedhttp://www.youtube.com/watch?v=c4-A-9hGn0U&eurl=http://plantabaixa.wordpress.com/page/5/&feature=player_embedded

8/4/2019 Design de a

168/174

F t L i C tt l t b i d

Wireframes x Layouts

8/4/2019 Design de a

169/174

Fonte: Luciana Cattony plantabaixa.wordpress.com

Wireframes x Layouts

8/4/2019 Design de a

170/174

Fonte: Luciana Cattony plantabaixa.wordpress.com

Acompanhamento do desenvolvimento

8/4/2019 Design de a

171/174

F t L i C tt l t b i d

Fonte: Luciana Cattony plantabaixa.wordpress.com

8/4/2019 Design de a

172/174

Hierarquia da informaoAs informaes devem ter pesos diferentes. Foque naquilo que maisimportante e respeite uma hierarquia de informao.

Fonte: Luciana Cattony plantabaixa.wordpress.com

8/4/2019 Design de a

173/174

Apresentao da informaoExistem maneiras visuais e mais amigveis para se transmitir uma informao.

Fonte: Luciana Cattony plantabaixa.wordpress.com

http://www.webdesignerwall.com/http://professionalontheweb.com/

8/4/2019 Design de a

174/174

http://www.americanas.com.br/