Você está na página 1de 48

Interfaces, telas e

arquitetura de
informao
Pa4, unisinos, design

relacionamento

<proposon>
mtuo vivo

canvas
representao

telas

Tv
Rdio
Jornal
Revist
a
Tv
Web
Rdio
Jornal
Revist

mdias

informaes

Remidiao como
caracterstica
de uma genealogia de mdias
Afiliao entre mdias (mais que
evoluo em s sentido)
Remidiao das prticas materiais e
arranjos sociais

Dependncia, Contexto, Reforma

TV,
Impresso
...
fala atravs
das interfaces

Da lacuna
a intraremidia
o

Imediao e hipermediao nas interfaces

Busca por transparncia / mdia original

Excitao da interface/ reconhecimento do meio

Tensionamento pelos observveis e 3 facetas

A hipermediao na web se
relaciona
com a evoluo do
computao
e de aspectos do design.
Interface humanocomputador:
arquivamento,
montagem,
devaneio,
playfullness

Segundo Manovitch, a tela ou


interface do computador aquela que

separa dois espaos


absolutamente diferentes e
que de alguma maneira
coexistem.

Quem ou o que so esses espaos?

Interfacear ou atender
simultaneamente a dois ou mais plos
de um sistema de informaes implica
em, de um lado, cumprir com os
procedimentos contidos no plo
inanimado, mas planejado e prdefinido do sistema, e de outro lado,
atender a demanda de expectativas
previsveis por parte do indivduo
usurio e solicitante. (Freitas, p. 188)

Oferecer
possibilidade de uso,
com linguagens
decodificveis a um
ou mais indivduos
usurios pode ser
considerado o
principal desafio de
uma interface
(Freitas,
p. 189)

A funo da metfora fica


bem clara conforme
a concluso de Steven Johnson,
que diz que ela ajuda a
imaginar o que informado,
propiciando a viso do todo
em uma nica tela (Gosciola, 2003, 92).

Outros exemplos de
metforas nos cones e
Remidiao: video players

Telas-interfaces-mdias

Com a hipermdia, a discusso passaria a


ser o surgimento, desenvolvimento e
transformao das interfaces que

permitem comunicao e uso


por imerso. (Freitas, p. 195)
Telas-interfaces-mdias

Oops

Numa analogia entre o design na relao humana no


campo do real, em termos de passagens entre
ambientes, o autor afirma que no ciberespao, [o]s
elementos ali presentes, quando permitem a
movimentao de sua estrutura, apresentam um
quadro hierrquico de movimentao com diferentes
graus de permissividade. (p. 189)

A idia de ambientao como repetio de


elementos de cenrio ou de sonoridade
nas telas que no devem se restringir ao
seu prprio espao. Devem sim, dar
indicaes que cada uma uma
continuidade fsica, em representao, da
outra, permitindo que se visualize a
continuidade do ambiente a cada tela para
promover maior empatia do usurio.
(idem, p.98)

Para o planejamento de uma interface,


deve-se levar em considerao o histrico
das experincias vivenciadas do indivduo
que se pretende sensibilizar, podendo-se,
ento, projetar um conjunto de elementos
estimulantes em um sistema especfico de
informaes, objetivando-se sua
interpretao unvoca e previamente
determinada (p. 191)

No incio, havia 2 escolas de AI:

- Desenho de
wireframes e
mapas do site.

- Design estrutural da
informao (vocabulrios
controlados e taxonomias).

Fonte: Luciana Cattony plantabaixa.wordpress.com

Segundo o Instituto de Arquitetura de Informao:


1. O design estrutural de ambientes de informao
compartilhados
2. A arte e a cincia da organizao e categorizao de
sites, intranets, comunidades online e softwares para
proporcionar usabilidade e encontrabilidade
3. Uma comunidade de prtica emergente focada em levar
princpios de design e arquitetura ao ambiente digital

Fonte: Luciana Cattony plantabaixa.wordpress.com

Fonte: Luciana Cattony plantabaixa.wordpress.com

Para mim arquitetura de informao fazer o complexo se tornar algo


simples. entender as necessidades do cliente, do seu negcio e
traduz-las em ambientes amigveis e intuitivos para o usurio.
Costumo dizer que o arquiteto de informao como se fosse um
intrprete entre o cliente e o usurio, j que ele contribui
significativamente para que a comunicao e o intercmbio /
compartilhamento de informaes e experincias entre esses dois
lados sejam feitos de maneira eficaz.
Luciana Cattony. Arquiteta de Informao da Gerdau.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Viso da disciplina
Mercado,
concorrentes,
necessidades
do negcio,
restries
tecnolgicas,
financeiras etc.

Quem so,
suas
necessidades,
hbitos,
maneiras
de navegar,
expectativas
etc.

O que o
site tem a
oferecer,
como ser
criado o
contedo
etc.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Arquitetura de Informao
Objetivos

Encurtar o tempo de construo


Tornar a manuteno mais simples
Tornar a busca por informaes mais
rpida
Simplificar tarefas e processos
Diminuir a necessidade de
treinamentos
Agregar valor s marcas
Criar experincias de uso memorveis

Fonte: Luciana Cattony plantabaixa.wordpress.com

Entregveis
Atividades e entregveis

O que
arquitetura
de informao?
Fonte:
Luciana
Cattony plantabaixa.wordpress.com

Recebimento da demanda

Resgate e levantamento de informaes

Benchmarking

Fonte: Luciana Cattony plantabaixa.wordpress.com

Inventrio / anlise de contedo

Avaliao Heurstica

Avaliao de maturidade

Estatsticas

Fonte: Luciana Cattony plantabaixa.wordpress.com

Pesquisas quantitativas / qualitativas

Focus Group

Entrevistas
com usurios

Personas

Fonte: Luciana Cattony plantabaixa.wordpress.com


Imagem personas: Adaptivepath

Mapa do site

Card Sorting

Estudo etnogrfico

Testes de usabilidade

Fonte: Luciana Cattony plantabaixa.wordpress.com

Imagens: TRY Consultoria e pesquisa

Prottipos em papel

Fonte: Luciana Cattony plantabaixa.wordpress.com


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

Desenvolvimento de wireframes

Fonte: Luciana Cattony plantabaixa.wordpress.com

Wireframes x Layouts

Fonte: Luciana Cattony plantabaixa.wordpress.com

Wireframes x Layouts

Fonte: Luciana Cattony plantabaixa.wordpress.com

Acompanhamento do desenvolvimento

Fonte: Luciana Cattony plantabaixa.wordpress.com

Fonte: Luciana Cattony plantabaixa.wordpress.com

Hierarquia da informao
As informaes devem ter pesos diferentes. Foque naquilo que mais
importante e respeite uma hierarquia de informao.

Fonte: Luciana Cattony plantabaixa.wordpress.com

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

Fonte: Luciana Cattony plantabaixa.wordpress.com

Apresentao da informao
ExistemFonte:
maneirasLuciana
visuais e mais
amigveis
para se transmitir uma informao.
Cattony
plantabaixa.wordpress.com

Fonte: Luciana Cattony plantabaixa.wordpress.com

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

Fonte: Luciana Cattony plantabaixa.wordpress.com

Formulrios
Dependendo do caso, melhor fazer o usurio dar vrios passos do que oferecer
uma rolagem gigante .

Seo cama, mesa e banho

Seo informtica

Homogeneidade Comunicativa
Padronizao esttica e de navegao para reforar a marca e a apreenso
cognitiva.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Mundializao
Utilizao de cdigos, cones e signos reconhecidos internacionalmente e
especficos de diferentes usurios facilitam o entendimento.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Navegao assertiva
Informaes simples, diretas, distribudas estrategicamente e links
representativos para o usurio alcanar facilmente seus objetivos.

Fonte: Luciana
Cattony
plantabaixa.wo
rdpress.com

Ajuda ao usurio
Informaes complementares, em local visvel, que auxiliam a navegao
e o cumprimento dos objetivos do usurio.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Site BP rea de Imprensa

Feedback
Opo para que o usurio se manifeste,
fazendo-o sentir parte importante do
processo.