[design – unisinos]
<i&nt>
<Aula 6><Aula 6>
<design de interfaces/>
2ª parte
As diferentes TELAS que se
acumulam ao longo do tempo +
a representação de um meio
em outro + 3 facetas da em outro + 3 facetas da
internet + cultura do
software = INTERFACES
(SOFTWARE, WEB, APPs)
DESENCAVANDO INTERFACES: FERRAMENTAS PARA RECUPERAR,
ACOMPANHAR E REGISTRAR A EVOLUÇÃO DA WEB
preservar para prever
� Internet: biblioteca dinâmica
� Interfaces da web são efêmeras
� As mídias de massa são gatekeepers de seus conteúdos, as iniciativas são bottom-up.conteúdos, as iniciativas são bottom-up.
� Oportunidade única de testemunhar as mudanças, preservar a memória e entender as lógicas operativas dos sites, prevendo tendências.
Arqueologia do passado: Arqueologia do passado:
resgatando interfaces
Internet Archive [WaybackInternet Archive [Wayback
Machine]
(vantagens e limites)
Fotografar os achados:
acompanhando interfaces
� O velho e bom printscreen e o problema da dobra
� Webshot (software)� Webshot (software)
� Outros
webshot
Molduras como instrumento de
análise
� Zonear territórios da interface pelo significado que propõem
� Organizar a experiência “total”
� Molduras que se repetem, somem, se � Molduras que se repetem, somem, se transformam vão indicando a trajetória (comportamento) das lógicas operativas de um site.
conjunto de procedimentos
identificáveis nas
interfaces que fazem com que
um website oferte suas
características específicas características específicas
para o usuário.
-Lógicas de inserção de vídeos
-Lógicas de visualização e -compartilhamento de vídeos(homepage e watchpage)
MO
MFT[MC]
MO
MAA
MPP
MGP
Molduras: abrigo de territórios de significaçãoUso instrumental para dissecar as interfaces
MAC
MI
MGP
Organizações Globo: uma trajetória que chega na web
A fase Globo Media Center e suas lógicas
MOg
MP M
VMPR
MOe
Center e suas lógicas operativas MPL
CMIM MIP
MB
A passagem de Globo Media Center para Globo Vídeos – 2006
MI
MOe
MOg
MP
MAC
MFT(1) MFT(2)
MP
MO
gMO
e
MM
C
MD
1
MD
2
MR
MP
A
Lógicas de visualização e compartilhamento de vídeos (home e watchpage)
MOg
MOe
MPAMP
MMC
MI
N
MO
g
MMC
MAC
MFT
MIR
TEMPO CRONOLÓGICO = COMPORTAMENTO DO SITE
Lógicas operativas capturadas em
Data X
Lógicas operativas capturadas em
Data y
Lógicas operativas capturadas em
Data z
website
� um website – também entendido com site -trata-se de um conjunto de webpages
(Jackson, 1997) que tenham um conceito que as articule (uma marca comercial, uma as articule (uma marca comercial, uma universidade, um evento, uma agremiação esportiva, uma banda de rock, uma associação, etc), que as reúna em uma mesma arquitetura, na qual as diferentes páginas web estão inseridas com alguma hierarquia diante do usuário.
Tipos de site
� Dificuldade de criar as fronteiras entre
forma-conteúdoforma-conteúdo
� (ver webby awards)
� (ver Wikipédia)
Mais relevantes
Blog, portal, e-commerce,
site de rede social, media-site de rede social, media-
sharing, hotsite,
buscadores, wiki.
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
1. O design estrutural de ambientes de informaçãocompartilhados
2. A arte e a ciência da organização e categorização de
Segundo o Instituto de Arquitetura de Informação:
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
Fonte: Luciana Cattony – plantabaixa.wordpress.com
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.
Luciana Cattony. Arquiteta de Informação da Gerdau.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Visão da disciplina
Mercado, concorrentes, necessidades do negócio, restrições tecnológicas, financeiras etc.
Quem são, suasnecessidades, hábitos, maneirasde navegar, expectativasetc.
O que o site tem a oferecer, como será criado o conteúdo etc.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
• Encurtar o tempo de construção
• Tornar a manutenção mais simples
Arquitetura de Informação –Objetivos
• 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
EntregáveisAtividades e entregáveis
O que é arquitetura de informação?Fonte: Luciana Cattony – plantabaixa.wordpress.com
Resgate e levantamento de informações
Recebimento da demanda
Benchmarking
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Inventário / análise de conteúdo
Avaliação de maturidade
Avaliação Heurística
EstatísticasFonte: Luciana Cattony – plantabaixa.wordpress.com
Pesquisas quantitativas / qualitativas
Focus Group
Entrevistas com usuários
Personas
Imagem personas: Adaptivepath
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Card Sorting
Estudo etnográfico
Mapa do site
Testes de usabilidade
Imagens: TRY – Consultoria e pesquisa
Estudo etnográfico
Fonte: Luciana Cattony – plantabaixa.wordpress.com
horizontal gluedotis attached to the end of this arrow
vertical gluedotis attached to the end of this arrow
Protótipos em papel
http://www.nngroup.com/reports/prototyping/video_stills.html
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
Apresentação de ferramentas,
info e tutoriais para card
sorting, sitemap,
wireframes, layouts, etc.wireframes, layouts, etc.
Recommended