novas tecnologias e inovação - aula 7 - interfaces, webdesign (parte 2)
TRANSCRIPT
![Page 1: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/1.jpg)
[design – unisinos]
<i&nt>
<Aula 6><Aula 6>
<design de interfaces/>
2ª parte
![Page 2: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/2.jpg)
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)
![Page 3: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/3.jpg)
DESENCAVANDO INTERFACES: FERRAMENTAS PARA RECUPERAR,
ACOMPANHAR E REGISTRAR A EVOLUÇÃO DA WEB
![Page 4: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/4.jpg)
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.
![Page 5: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/5.jpg)
![Page 6: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/6.jpg)
Arqueologia do passado: Arqueologia do passado:
resgatando interfaces
![Page 7: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/7.jpg)
![Page 8: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/8.jpg)
![Page 9: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/9.jpg)
![Page 10: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/10.jpg)
![Page 11: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/11.jpg)
![Page 12: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/12.jpg)
![Page 13: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/13.jpg)
![Page 14: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/14.jpg)
![Page 15: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/15.jpg)
Internet Archive [WaybackInternet Archive [Wayback
Machine]
(vantagens e limites)
![Page 16: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/16.jpg)
Fotografar os achados:
acompanhando interfaces
� O velho e bom printscreen e o problema da dobra
� Webshot (software)� Webshot (software)
� Outros
![Page 17: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/17.jpg)
![Page 18: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/18.jpg)
webshot
![Page 19: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/19.jpg)
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.
![Page 20: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/20.jpg)
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.
![Page 21: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/21.jpg)
-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
![Page 22: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/22.jpg)
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
![Page 23: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/23.jpg)
A passagem de Globo Media Center para Globo Vídeos – 2006
MI
MOe
MOg
MP
MAC
MFT(1) MFT(2)
MP
![Page 24: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/24.jpg)
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
![Page 25: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/25.jpg)
![Page 26: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/26.jpg)
![Page 27: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/27.jpg)
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
![Page 28: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/28.jpg)
![Page 29: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/29.jpg)
![Page 30: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/30.jpg)
![Page 31: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/31.jpg)
![Page 32: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/32.jpg)
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.
![Page 33: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/33.jpg)
Tipos de site
� Dificuldade de criar as fronteiras entre
forma-conteúdoforma-conteúdo
� (ver webby awards)
� (ver Wikipédia)
![Page 34: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/34.jpg)
Mais relevantes
Blog, portal, e-commerce,
site de rede social, media-site de rede social, media-
sharing, hotsite,
buscadores, wiki.
![Page 35: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/35.jpg)
![Page 36: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/36.jpg)
![Page 37: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/37.jpg)
![Page 38: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/38.jpg)
![Page 39: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/39.jpg)
![Page 40: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/40.jpg)
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 41: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/41.jpg)
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
![Page 42: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/42.jpg)
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 43: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/43.jpg)
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
![Page 44: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/44.jpg)
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
![Page 45: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/45.jpg)
• 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
![Page 46: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/46.jpg)
EntregáveisAtividades e entregáveis
O que é arquitetura de informação?Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 47: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/47.jpg)
Resgate e levantamento de informações
Recebimento da demanda
Benchmarking
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 48: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/48.jpg)
Inventário / análise de conteúdo
Avaliação de maturidade
Avaliação Heurística
EstatísticasFonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 49: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/49.jpg)
Pesquisas quantitativas / qualitativas
Focus Group
Entrevistas com usuários
Personas
Imagem personas: Adaptivepath
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 50: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/50.jpg)
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
![Page 51: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/51.jpg)
![Page 52: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/52.jpg)
![Page 53: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/53.jpg)
horizontal gluedotis attached to the end of this arrow
vertical gluedotis attached to the end of this arrow
![Page 54: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/54.jpg)
![Page 55: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/55.jpg)
Protótipos em papel
http://www.nngroup.com/reports/prototyping/video_stills.html
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 56: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/56.jpg)
![Page 57: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/57.jpg)
Wireframes x Layouts
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 58: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/58.jpg)
Wireframes x Layouts
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 59: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/59.jpg)
Acompanhamento do desenvolvimento
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 60: Novas Tecnologias e Inovação - aula 7 - interfaces, webdesign (parte 2)](https://reader034.vdocuments.net/reader034/viewer/2022042715/5572245cd8b42a211f8b473f/html5/thumbnails/60.jpg)
Apresentação de ferramentas,
info e tutoriais para card
sorting, sitemap,
wireframes, layouts, etc.wireframes, layouts, etc.