arquitetura de informação e design de interação
DESCRIPTION
Aula sobre design de projetos digitais para alunos de publicidade e propaganda da PUC Minas, no minicurso de marketing digital.TRANSCRIPT
![Page 1: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/1.jpg)
ARQUITETURA
DE INFORMAÇÃO
E DESIGN DE
INTERAÇÃO
MARKETING DIGITAL, PUC MINAS 2014
![Page 2: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/2.jpg)
RELEMBRANDO
O que considerar ao pensar uma estratégia digital:
Hardware
Software
Conteúdo
Design
![Page 3: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/3.jpg)
INFORMAÇÃO
“A Tecnologia da Informação (TI) pode ser definida como o
conjunto de todas as atividades e soluções providas por
recursos de computação que visam permitir o
armazenamento, o acesso e o uso das informações.”
Emerson Alecrim
![Page 4: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/4.jpg)
TECNOLOGIA DA
INFORMAÇÃO
Desde a criação dos computadores, o objetivo era lidar com
a informação de uma maneira mais ágil, assertiva e
inteligente. A cada novo dispositivo e tecnologia, damos um
passo maior em relação a esse objetivo.
Conseguimos criar e compartilhar mais informação nos
últimos 30 anos do que em todo resto da história da
humanidade.¹
1 - Information Anxiety, Richard Wurman
![Page 5: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/5.jpg)
COMO ORGANIZAR A
INFORMAÇÃO?
Fácil entendimento;
Acessível;
Hierarquizada.
![Page 6: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/6.jpg)
ARQUITETURA DE
INFORMAÇÃO
“A arquitetura da informação é a categorização da
informação em uma estrutura coerente, preferencialmente
aquela que a maioria das pessoas possa compreender
rapidamente. Geralmente é hierárquica, mas pode ter outras
estruturas, como concêntrica ou até mesmo caótica.”
Wikipedia
![Page 7: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/7.jpg)
DESIGN DE
INTERAÇÃO
Design de Interação (DxI) é o ramo do Design da Experiência
do Usuário (UX, em inglês) que esclarece o relacionamento
entre as pessoas e os artefatos interativos que elas usam.
(...) Seu foco está na definição de complexos diálogos que
ocorrem entre as pessoas e seus artefatos interativos dos
mais variados tipos - de computadores e dispositivos móveis
até utensílios comuns.
Robert Reimann
![Page 8: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/8.jpg)
USER EXPERIENCE
![Page 9: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/9.jpg)
FOCA NO USUÁRIO!
![Page 10: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/10.jpg)
#COMOFAS
![Page 12: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/12.jpg)
JORNADA DO CONSUMIDOR
![Page 13: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/13.jpg)
DESENHE!
![Page 14: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/14.jpg)
COMO COMEÇAR?
1. Desenhando o que está na sua cabeça, como você imagina
o produto final do projeto, que seja adequado para o usuário;
2. Leve em consideração o que aprender nas aulas de
direção de arte ou design;
3. Consulte bibliografia de design de interação, arquitetura
de informação e experiência de usuário.
4. Não se esqueça do mais importante: meu usuário
consegue entender isso? Valide com as personas.
![Page 15: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/15.jpg)
![Page 16: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/16.jpg)
CARD SORTING
![Page 17: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/17.jpg)
![Page 18: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/18.jpg)
WIREFRAME https://www.youtube.com/watch?v=Lk_Cut3w9Fc
![Page 19: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/19.jpg)
![Page 20: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/20.jpg)
COMO FAZER UM
WIREFRAME
http://www.youtube.com/watch?v=eFHWx9Poums&feature=player_embedded#!
![Page 21: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/21.jpg)
PROTÓTIPO
NAVEGÁVEL
http://www.prototiponavegavel.com.br/
![Page 22: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/22.jpg)
DESIGN A PARTIR DE
WIREFRAME
http://www.youtube.com/watch?v=PwpQX12Km54
![Page 23: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/23.jpg)
#FIKDIK
![Page 24: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/24.jpg)
TEXTOS NAS TELAS
Ler na tela é diferente de ler no papel;
Blocos de texto mais curtos e áreas de respiro maiores;
Hierarquia de informação: localização, tamanho e destaque
do texto ajuda na leitura e define relevância;
Títulos, subtítulos e tópicos ajudam na experiência de leitura.
![Page 25: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/25.jpg)
LINHA DE LEITURA
![Page 26: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/26.jpg)
CORES
![Page 27: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/27.jpg)
FORMAS
As formas demonstram a hierarquia da informação? Os
elementos mais fortes se referem às informações mais
importantes? Há contraste da informação mais relevante
com os outros elementos da tela?
![Page 28: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/28.jpg)
SÍMBOLOS
Os símbolos foram usados com o mesmo significado
universal que possuem?
![Page 29: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/29.jpg)
IMAGENS
Criam identificação com o público-alvo? Pessoas? Prints de
tela? Imagens do produto?
Pense quando fica mais fácil explicar desenhando do que
escrevendo.
![Page 30: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/30.jpg)
REPETIÇÃO E
LOCALIZAÇÃO
Repetir uma informação importante não é demais;
Saber onde localizar uma informação importante também é
fundamental.
![Page 31: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/31.jpg)
COLOCOU NO AR?
NÃO ACABOU!
![Page 32: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/32.jpg)
ANALYTICS!
![Page 33: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/33.jpg)
MAPA DE ÁREAS
QUENTES (HEATMAP)
Movimento do mouse;
Cliques;
Eyetracking.
![Page 35: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/35.jpg)
PARA QUÊ?
![Page 36: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/36.jpg)
A IMPORTÂNCIA DE PLANEJAR UMA
BOA EXPERIÊNCIA DE USUÁRIO
http://www.youtube.com/watch?v=O94kYyzqvTc
![Page 37: Arquitetura de informação e design de interação](https://reader034.vdocuments.pub/reader034/viewer/2022042521/548b7234b47959140d8b6186/html5/thumbnails/37.jpg)
DÚVIDAS?
Ana Paula Coelho @anapaulacoelho
Material da aula em
slideshare.com/ana_paula_coelho