Arquitetura de informação e design de interação

1,802 views

Published on

Aula sobre design de projetos digitais para alunos de publicidade e propaganda da PUC Minas, no minicurso de marketing digital.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,802
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Arquitetura de informação e design de interação

  1. 1. ARQUITETURA DE INFORMAÇÃO E DESIGN DE INTERAÇÃO MARKETING DIGITAL, PUC MINAS 2014
  2. 2. RELEMBRANDO O que considerar ao pensar uma estratégia digital: Hardware Software Conteúdo Design
  3. 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. 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. 5. COMO ORGANIZAR A INFORMAÇÃO? Fácil entendimento; Acessível; Hierarquizada.
  6. 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. 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. 8. USER EXPERIENCE
  9. 9. FOCA NO USUÁRIO!
  10. 10. #COMOFAS
  11. 11. LEMBRA DAS PERSONAS? Fonte: www.uxforthemasses.com
  12. 12. JORNADA DO CONSUMIDOR
  13. 13. DESENHE!
  14. 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.
  15. 15. CARD SORTING
  16. 16. WIREFRAME https://www.youtube.com/watch?v=Lk_Cut3w9Fc
  17. 17. COMO FAZER UM WIREFRAME http://www.youtube.com/watch?v=eFHWx9Poums&feature=player_embedded#!
  18. 18. PROTÓTIPO NAVEGÁVEL http://www.prototiponavegavel.com.br/
  19. 19. DESIGN A PARTIR DE WIREFRAME http://www.youtube.com/watch?v=PwpQX12Km54
  20. 20. #FIKDIK
  21. 21. 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.
  22. 22. LINHA DE LEITURA
  23. 23. CORES
  24. 24. 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?
  25. 25. SÍMBOLOS Os símbolos foram usados com o mesmo significado universal que possuem?
  26. 26. 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.
  27. 27. REPETIÇÃO E LOCALIZAÇÃO Repetir uma informação importante não é demais; Saber onde localizar uma informação importante também é fundamental.
  28. 28. COLOCOU NO AR? NÃO ACABOU!
  29. 29. ANALYTICS!
  30. 30. MAPA DE ÁREAS QUENTES (HEATMAP) Movimento do mouse; Cliques; Eyetracking.
  31. 31. TESTES A/B http://www.youtube.com/watch?v=SKulPmg1Ilo
  32. 32. PARA QUÊ?
  33. 33. A IMPORTÂNCIA DE PLANEJAR UMA BOA EXPERIÊNCIA DE USUÁRIO http://www.youtube.com/watch?v=O94kYyzqvTc
  34. 34. DÚVIDAS? Ana Paula Coelho @anapaulacoelho anapaulacoelho@gmail.com Material da aula em slideshare.com/ana_paula_coelho

×