O documento discute o desenvolvimento da hipermídia e das interfaces digitais. Apresenta como os computadores evoluíram de máquinas de cálculo para armazenamento de dados e como as redes de computadores permitiram a conexão entre elas através da Internet. Também aborda a digitalização dos meios, suportes e processos e conceitos como Comunicação Mediada por Computador e Tecnologias da Informação e Comunicação.

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

2. O QUE ACONTECEU PARA ESTARMOS
TRATANDO DE DESIGN DE
HIPERMÍDIA?

3. Hipermídia e interfaces

4. Web e softwares que usam a
internet para “trabalhar”

5. Processos de projeto

6. Tendências

7. Computadores calculam e
armazenam.
Computadores contém dados.
Computadores são organizáveis
em redes.
Internet conecta redes de
computadores.

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

9.  Comunicação Mediada por
Computadores (CMC)
 Tecnologias da Informação e da
Comunicação (TICs)

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

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

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

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

16.  A tela é uma tecnologia muito
anterior às possibilidades recentes
(VR) que tomamos contato hoje, da
Renascença ao cinema do século XX.

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

18.  Como o computador apresenta
continuidades e desafios em
relação à tradição da tela?
 McLuhan e Remidiation.

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

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

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

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

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

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

25.  Esta relação-protocolo de visualização (tela
é desafiada
quer sua atenção total)
com a chegada da tela do
computador.

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

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

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

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

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

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

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

33.  Clássica
Dinâmica
– Real time –
Interativa

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

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

36.  Um ponto de vista, “descolado” do corpo.

37.  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
“visível” foi depositado.

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

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

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

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

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

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

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

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

46. REMIDIAÇÃO

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

48. 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
http://premediation.blogspot.com/
Studies.

49. Conceitos associados
 Mídia
 Mediação
 Interface
 Experiência

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

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

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

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

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

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

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

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

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

59. Imediação>
 O valor estético da “transparência” visando a
imediação foi trabalhado pelas mídias antigas
perspectiva,
nas técnicas de
apagamento e
automaticidade.

60. Imediação>
 Perspectiva: ver através, matematizar o
espaço.

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

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

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

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

67. Horizonte da imediação>
 Imediação: o autor se retira mais e o leitor
seria mais envolvido.

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

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

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

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

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

73. Diorama

74. phenakistoscope

75. Stereoscope

76. Hipermediação>
 A fotomontagem teria rompido com esse
entendimento.

77.  Colagem, mash-up, DJ.

78. Hipermediação
 Quando a tecnologia se torna uma segunda
natureza, a experiência hipermediada torna-
se igualmente autêntica.

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

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

81. Imediação / Hipermediação
>>>> Remidiação
 a representação de um meio em outro.
Característica definidora das novas mídias.

82. Remidiação>
 Atos de remidiação:
 empréstimo, arquivamento, remodelagem,
absorção.

83. Dependência, contexto, reforma
Imediação e hipermediação nas interfaces

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

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

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

92.  Heterogeneidade
 Metamorfose
 Potencialidade
 Complexidade
 Conectividade
 Cartografia

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

95. Metamorfose
 O hipertexto está em constante transformação
 Desde a “cor” do link visitado até a organização
dos conteúdos.

97. potencialidade
 o usuário tem a possibilidade de recriar o
hipertexto no momento de seu uso

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

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

101. Características da hipermídia
Hibridismo
 A hipermídia mistura diferentes tipos de
linguagens
 http://postvisual.com/theuninvited/en/

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

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

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

105. (hiper) Texto -> Mídia
 Substituição ou evolução?

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

107. Mas a “máquina”
continua operando
nos “bastidores.”

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

109. Blogs
“diários”
Gerenciador
de conteúdo

111. Blog
Website
Portal
Hotsite

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

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

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

115. Tags (folskonomia)

116. Mas tem muito mais:
 Go2web20.net
 Feed My App

117. Sites que funcionam como
organizadores de conteúdo que
vem de outros lugares
 NetVibes (www.netvibes.com)
 NetVibes da Agência Digital AG2

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

120. Exemplos:
 Diaroogle (1 API)
 Visual Headlines (Flickr + CNN)

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

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

123. Muito seguida, mas segue
somente
“a si mesma” através de
suas variações de profile.
Comportamento “HUB”

124. Segue mais do que é seguida.
Cerca da metade dos updates
são de retorno ao cliente.
Comportamento Pró-Ativo/Atendimento

125. 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.
Comportamento Sazonal
+ “Efeito” Morto-Vivo
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 marca
ainda mandam tweets relacionados,
tanto a marca como a suas campanhas.

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

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

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

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

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

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

132. Tá todo
mundo
conversando:
além de
crescer, o
Brasil é líder
mundial
de uso de
instant
messengers
(MSN, etc)

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

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

136. Internet Web Web 2.0
Banco de Dados Ambiente de
Mídia Relacionamento

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

138. Interfaces, telas e
arquitetura de
informação

139. relacionamento
<proposon>
mútuo vivo

140. CANVAS
REPRESENTAÇÃO

141. TELAS

142. Tv
Rádio
Jornal
Revista
Web
Tv
Rádio
Jornal mídias
Revista

143. INFORMAÇÕES

144. SEGUNDO MANOVITCH, A TELA OU
INTERFACE DO COMPUTADOR É AQUELA
QUE “SEPARA DOIS ESPAÇOS
ABSOLUTAMENTE DIFERENTES E
QUE DE ALGUMA MANEIRA
COEXISTEM”.
Quem ou o que são esses espaços?

145. “INTERFACEAR OU ATENDER
SIMULTANEAMENTE A DOIS OU MAIS
PÓLOS DE UM SISTEMA DE INFORMAÇÕES
IMPLICA EM, DE UM LADO, CUMPRIR
COM OS PROCEDIMENTOS CONTIDOS NO
PÓLO INANIMADO, MAS PLANEJADO E
PRÉ-DEFINIDO DO SISTEMA, E DE
OUTRO LADO, ATENDER A DEMANDA DE
EXPECTATIVAS PREVISÍVEIS POR PARTE
DO INDIVÍDUO USUÁRIO E
SOLICITANTE.” (FREITAS, P. 188)

146. “OFERECER
POSSIBILIDADE DE
USO, COM LINGUAGENS
DECODIFICÁVEIS A UM
OU MAIS INDIVÍDUOS A função da metáfora fica
bem clara conforme
USUÁRIOS PODE SER a conclusão de Steven Johnson,
que diz que ela ajuda a
CONSIDERADO O imaginar o que é informado,
PRINCIPAL DESAFIO propiciando a visão do todo
em uma única tela (Gosciola, 2003, 92).
DE UMA INTERFACE”
(FREITAS,
P. 189)

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

148. TELAS-INTERFACES-
MÍDIAS

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

150. Oops

151. NUMA ANALOGIA ENTRE O
DESIGN NA RELAÇÃO
HUMANA NO CAMPO DO
“REAL”, EM TERMOS DE
PASSAGENS ENTRE
AMBIENTES, O AUTOR
AFIRMA QUE NO
CIBERESPAÇO, “[O]S
ELEMENTOS ALI
PRESENTES, QUANDO
PERMITEM A
MOVIMENTAÇÃO DE SUA
ESTRUTURA, APRESENTAM
UM QUADRO HIERÁRQUICO
DE MOVIMENTAÇÃO COM
DIFERENTES GRAUS DE
PERMISSIVIDADE”.

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

154. PARA O PLANEJAMENTO DE UMA INTERFACE,
“DEVE-SE LEVAR EM CONSIDERAÇÃO O
HISTÓRICO DAS EXPERIÊNCIAS”
VIVENCIADAS DO INDIVÍDUO QUE SE
PRETENDE SENSIBILIZAR, PODENDO-SE,
ENTÃO, PROJETAR UM CONJUNTO DE
ELEMENTOS ESTIMULANTES EM UM SISTEMA
ESPECÍFICO DE INFORMAÇÕES,
OBJETIVANDO-SE SUA INTERPRETAÇÃO
UNÍVOCA E PREVIAMENTE DETERMINADA” (P.
191)

156. No início, havia 2 escolas de AI:
´
- Desenho de - Design estrutural da
wireframes e informação (vocabulários
mapas do site. controlados e taxonomias).
Fonte: Luciana Cattony – plantabaixa.wordpress.com

157. Segundo o Instituto de Arquitetura de Informação:
1. O design estrutural de ambientes de informação
compartilhados
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
Fonte: Luciana Cattony – plantabaixa.wordpress.com

158. Fonte: Luciana Cattony – plantabaixa.wordpress.com

159. 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.
Luciana Cattony. Arquiteta de Informação da Gerdau.
Fonte: Luciana Cattony – plantabaixa.wordpress.com

160. Visão da disciplina
Mercado,
concorrentes,
necessidades
do negócio,
restrições
tecnológicas,
financeiras etc.
Quem são, O que o
suas site tem a
necessidades, oferecer,
hábitos, como será
maneiras criado o
de navegar, conteúdo
expectativas etc.
etc.
Fonte: Luciana Cattony – plantabaixa.wordpress.com

161. Arquitetura de Informação –
Objetivos
• 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
Fonte: Luciana Cattony – plantabaixa.wordpress.com

162. Entregáveis
Atividades e entregáveis
Fonte: que é arquitetura de informação?
O Luciana Cattony – plantabaixa.wordpress.com

163. Recebimento da demanda
Resgate e levantamento de informações
Benchmarking
Fonte: Luciana Cattony – plantabaixa.wordpress.com

164. Inventário / análise de conteúdo
Avaliação Heurística
Avaliação de maturidade
Estatísticas
Fonte: Luciana Cattony – plantabaixa.wordpress.com

165. Pesquisas quantitativas / qualitativas
Focus Group
Entrevistas
com usuários
Personas
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Imagem personas: Adaptivepath

166. Mapa do site
Card Sorting
Estudo etnográfico
Testes de usabilidade
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Imagens: TRY – Consultoria e pesquisa

167. Protótipos em papel
Fonte: Luciana Cattony – plantabaixa.wordpress.com
http://www.nngroup.com/reports/prototyping/video_stills.html

168. Desenvolvimento de wireframes
Fonte: Luciana Cattony – plantabaixa.wordpress.com

169. Wireframes x Layouts
Fonte: Luciana Cattony – plantabaixa.wordpress.com

170. Wireframes x Layouts
Fonte: Luciana Cattony – plantabaixa.wordpress.com

171. Acompanhamento do desenvolvimento
Fonte: Luciana Cattony – plantabaixa.wordpress.com

172. Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Hierarquia da informação
As informações devem ter pesos diferentes. Foque naquilo que é mais
importante e respeite uma hierarquia de informação.

173. Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Apresentação da informação
Existem maneiras visuais e mais amigáveis para se transmitir uma informação.

174. Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Apresentação da informação
Existem maneiras visuais e mais amigáveis para se transmitir uma informação.
Fonte: Luciana Cattony – plantabaixa.wordpress.com