O documento discute arquitetura de informação e design de interação para marketing digital. Ele aborda como organizar informação de forma fácil de entender e acessível, focando no usuário através de personas, jornadas do consumidor, wireframes e protótipos para melhorar a experiência do usuário. O documento enfatiza a importância de testes e métricas como heatmaps e testes A/B.

1. ARQUITETURA
DE INFORMAÇÃO
E DESIGN DE
INTERAÇÃO
MARKETING DIGITAL, PUC MINAS 2014

2. RELEMBRANDO
O que considerar ao pensar uma estratégia digital:
Hardware
Software
Conteúdo
Design

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

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

5. COMO ORGANIZAR A
INFORMAÇÃO?
Fácil entendimento;
Acessível;
Hierarquizada.

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

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

8. USER EXPERIENCE

9. FOCA NO USUÁRIO!

10. #COMOFAS

11. LEMBRA DAS
PERSONAS?
Fonte: www.uxforthemasses.com

12. JORNADA DO CONSUMIDOR

13. DESENHE!

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

16. CARD SORTING

18. WIREFRAME https://www.youtube.com/watch?v=Lk_Cut3w9Fc

20. COMO FAZER UM
WIREFRAME
http://www.youtube.com/watch?v=eFHWx9Poums&feature=player_embedded#!

21. PROTÓTIPO
NAVEGÁVEL
http://www.prototiponavegavel.com.br/

22. DESIGN A PARTIR DE
WIREFRAME
http://www.youtube.com/watch?v=PwpQX12Km54

23. #FIKDIK

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

25. LINHA DE LEITURA

26. CORES

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

28. SÍMBOLOS
Os símbolos foram usados com o mesmo significado
universal que possuem?

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

30. REPETIÇÃO E
LOCALIZAÇÃO
Repetir uma informação importante não é demais;
Saber onde localizar uma informação importante também é
fundamental.

31. COLOCOU NO AR?
NÃO ACABOU!

32. ANALYTICS!

33. MAPA DE ÁREAS
QUENTES (HEATMAP)
Movimento do mouse;
Cliques;
Eyetracking.

34. TESTES A/B
http://www.youtube.com/watch?v=SKulPmg1Ilo

35. PARA QUÊ?

36. A IMPORTÂNCIA DE PLANEJAR UMA
BOA EXPERIÊNCIA DE USUÁRIO
http://www.youtube.com/watch?v=O94kYyzqvTc

37. DÚVIDAS?
Ana Paula Coelho @anapaulacoelho
anapaulacoelho@gmail.com
Material da aula em
slideshare.com/ana_paula_coelho