Workshop Arquiteturade InformaçãoEdyd Junges (@edyd)Instituto Faber-Ludens (@faberludens)
“Era da Informação”
Uma definição visionária:  "O estudo da organização da informação que permite ao  usuário chegar ao entendimento" Richard S...
Problemas comuns resultantes da falta de Arquitetura da Informação• Inconsistência na navegação• Rótulos ambíguos• Sistema...
• Inconsistência na navegação               padrões de interação• Rótulos ambíguos                        vocabulário cont...
Os 7 processos da A.I.
7 processosPlanejamento de Informações
Planejamento de Informações • Etapa inicial de análise do   sistema e planejamento        Métodos recomendados • Definição...
Modelos conceituais• Excelentes para negociar mudanças• Definir melhor conceitos abstratos• Gerar uma visão compartilhada ...
Modelos conceituais:Mapas mentais• Mostra tendências e ligações    • Usado em brainstorming coletivo  sobre a percepção da...
Modelos conceituais: Mapas mentaisMapa mental do Delicious
Atividade Mapa Mental• Criar Mapa Mental para experimentar o modelo conceitual• Atividade individualSite IFSUL
Contextos de uso         Cebola dos contextos da interação mediada
Modelos conceituais: Contexto tecnológicoDiagrama de Modelo de banco de dados
Modelos conceituais: Contexto simbólicoRelações conceituais dos artefatos no Delicious.com
Modelos conceituais: Contexto simbólicoFluxo de mediação de atividades no Delicious.com
Modelos conceituais: Contexto socialContexto social do Delicious.com
AtividadeModelo conceitual• Criar um modelo conceitual colaborativamente, mostrando ocontexto social• Em grupos
7 processosLevantamento de Informações
Levantamento de Informações • Busca compreensão do   projeto                        Métodos recomendados                  ...
Inventário de  Conteúdo
Inventário de Conteúdo     • Clicar em todos os links dentro do site     • Anotar:        • URL        • Link quebrado ou ...
Questionários    Google Docs
Entrevistas
Entrevistas   • Pessoal ou a distância (síncrono ou assíncrono)   • Importante:      • Recrutamento, agendamento e confirm...
EtnografiaBusca a compreensão aprofundada docomportamento a partir da observaçãode situação reais.
Estudos etnográficos sobre uso de TV Móvel realizados pela Nokia
Jason Diptych
Juan Carlos
“Etnografia” virtual   Estudo etnográfico realizado no espaço   digital, baseado na participação em redes   sociais na web.
Exemplos de frases de boleiros:Boleiro não joga,desfila!Boleiro não conversa,resenha!Boleiro não treina,ensina!Boleiro não ...
Algumas palavras-chave dos boleiros: moral (e não "força",por exemplo) fera (e não "jogador",por exemplo) time (e não "equ...
7 processosClassificação de Informações
Organização e classificação Métodos recomendados ✓ Card-Sorting         ✓ Vocabulário Controlado ✓ Taxonomia            ✓ ...
Taxonomia na Biologia     • Esquema de classificação hierárquica dos       seres vivos     • Os filhos tem apenas um pai  ...
Taxonomia em Arquitetura daInformação    • Esquema de classificação hierárquico      para informações diversas    • Os fil...
Taxonomias para navegação(antigo Cadê?)
Elaboração de Taxonomias     1.Inventário de conteúdo     2.Avaliação da taxonomia atual       (se existir)     3.Agrupame...
Processo de Classificação                              agrupar         rotular                   categori                 ...
Atividade: Classificação de informações• Em duplas• Criar categorias para classificar os rótulos a seguirCard Sorting aberto
Rótulos          aprendiz                   colega                                                           educando     ...
Quero pegar um livro na biblioteca...                 Como faço?
Card-sorting               • Testar ou criar classificações                 baseadas no modelo mental do                 u...
Presencial   Online
Rótulos          aprendiz                   colega                                                           educando     ...
Categorias  coloquial                                                  formal  aluno                                      ...
Atividade: Card-sorting (aberto)• Em grupos• Quais categorias (4 a 6) vocês utilizariam para englobar todo oconteúdo do me...
Início                       Conselho Superior       Q-AcadêmicoInstitucional                Colégio de Dirigentes   SIGAA...
Taxonomia• Hierarquia das categorias que representam a navegação• Classificação dos conteúdos do site.• Especificação de m...
Folcsonomia
Vocabulário Controlado• Contém a Taxonomia• Pode conter um Tesauro• Glossário• Ontologia• Gerenciadores de conteúdo       ...
7 processosGestão do Conteúdo
Gerenciadores de Conteúdo - CMSAdministração de categorias no gerenciador de conteúdo Wordpress
Definição de papéis dosusuários e privilégios
7 processosNavegação
Modelo de Navegação:Macro para Micro                       Modelo de navegação em árvore
Modelo de Navegaçãoem Entrada e Saída
Modelo de NavegaçãoLinear
Modelo de NavegaçãoRizomátíca
7 processosVisualização de Informações
Newsmap
Simetria       ProximidadeSimilaridade                   PRINCÍPIOS GESTALTFechamento              Figura-fundo
Heatmap: visualização em forma de F e Eyetrack (Poynter Institute : 2004)
Visualização de Informações• Abstração da Informação    Métodos                             recomendados• Gráfico/Imagem  ...
Prototipação   das representações  visuais das interfaces• Propósito (demonstrar,testar,explorar)• Fidelidade (alta,baixa)...
Sketchs ou RabiscosLiberte-se!
Wireframe   Momento de definiçã o:               especificação
Protótipo em baixa     fidelidade
Protótipo em papel
Atividade: Wireframe• Em Duplas• Para experimentar a técnica do wireframe (estrutura/aramado),cada um deve reconstruir a p...
Vocabulário Visual                                                              página/ documento (e suas pilhas)         ...
Storyboard        Ferramenta para edição    de quadrinhos online:   Pixton
Fluxogramaou fluxo de tarefa
Wireflow
7 processosRecuperação de Informações
Recuperação de Informações• Encontrabilidade          Métodos                            recomendados• Dar pistas ao usuár...
“Dar pistas aos usuários...”
Análise de estatísticas
Análise de Helpdesk   Saber a opinião dos usuários que   se importam
Os 7 processos da A.I.
Etapas da Arquitetura de Informação(Modelo processual)
Muito + no Corais.org+ acompanhamento (shadowing)+ fly on the wall+ diários de uso continuado+ sondas culturais (cultural p...
Livro colaborativohttp://designlivre.faberludens.com.br
Curso Online de A.I.http://www.faberludens.com.br/pt-br/cursos/aionline
Obrigado!   Edyd Junges (@edyd)edyd.junges@faberludens.com.brInstituto Faber-Ludens       www.faberludens.com.br
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Workshop AI
Upcoming SlideShare
Loading in …5
×

Workshop AI

1,243 views
1,125 views

Published on

Workshop no Integra Design na UFPel

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

No Downloads
Views
Total views
1,243
On SlideShare
0
From Embeds
0
Number of Embeds
336
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Workshop AI

  1. 1. Workshop Arquiteturade InformaçãoEdyd Junges (@edyd)Instituto Faber-Ludens (@faberludens)
  2. 2. “Era da Informação”
  3. 3. Uma definição visionária: "O estudo da organização da informação que permite ao usuário chegar ao entendimento" Richard Saul Wurman Uma definição operacional: "Organização da estrutura de um website e seu conteúdo, rotulagem e categorização da informação e o design de sistemas de busca" Rosenfeld e Morville Uma definição crítica:"Termo criado para legitimar a estruturalização de ambientes informacionais para maior eficiência e controle do acesso à informação por uma determinada organização de pessoas" Frederick van AmstelO que é Arquitetura da Informação?
  4. 4. Problemas comuns resultantes da falta de Arquitetura da Informação• Inconsistência na navegação• Rótulos ambíguos• Sistemas de busca confusos• Ausência de feedbacks do sistema• Excesso de cliques para encontrar informações ... mais?
  5. 5. • Inconsistência na navegação padrões de interação• Rótulos ambíguos vocabulário controlado• Sistemas de busca confusos teste de usabilidade• Ausência de feedbacks do sistema análise heurística• Excesso de cliques para encontrar informações card-sorting
  6. 6. Os 7 processos da A.I.
  7. 7. 7 processosPlanejamento de Informações
  8. 8. Planejamento de Informações • Etapa inicial de análise do sistema e planejamento Métodos recomendados • Definição de objetivos do ✓ Briefing cliente e do sistema ✓ Benchmarking • Metadesign: planejar a plataforma que permitirá ✓ Mapas conceituais planejar depois ✓ Reuniões
  9. 9. Modelos conceituais• Excelentes para negociar mudanças• Definir melhor conceitos abstratos• Gerar uma visão compartilhada do artefato entre os membros da equipe de projeto
  10. 10. Modelos conceituais:Mapas mentais• Mostra tendências e ligações • Usado em brainstorming coletivo sobre a percepção das pessoas para desenvolver perspectivas comuns• Estruturação hierárquica de ideias
  11. 11. Modelos conceituais: Mapas mentaisMapa mental do Delicious
  12. 12. Atividade Mapa Mental• Criar Mapa Mental para experimentar o modelo conceitual• Atividade individualSite IFSUL
  13. 13. Contextos de uso Cebola dos contextos da interação mediada
  14. 14. Modelos conceituais: Contexto tecnológicoDiagrama de Modelo de banco de dados
  15. 15. Modelos conceituais: Contexto simbólicoRelações conceituais dos artefatos no Delicious.com
  16. 16. Modelos conceituais: Contexto simbólicoFluxo de mediação de atividades no Delicious.com
  17. 17. Modelos conceituais: Contexto socialContexto social do Delicious.com
  18. 18. AtividadeModelo conceitual• Criar um modelo conceitual colaborativamente, mostrando ocontexto social• Em grupos
  19. 19. 7 processosLevantamento de Informações
  20. 20. Levantamento de Informações • Busca compreensão do projeto Métodos recomendados ✓ Inventário de • Levantamento de Conteúdo informações, dados, atores e envolvidos (usuários, stakeholders, etc) ✓ Entrevistas • Compreender as tarefas e ✓ Questionários atividades que o usuário irá realizar e o contexto social ✓ Etnografia Virtual onde está inserido
  21. 21. Inventário de Conteúdo
  22. 22. Inventário de Conteúdo • Clicar em todos os links dentro do site • Anotar: • URL • Link quebrado ou não • Título da página • Texto do link que levou à página
  23. 23. Questionários Google Docs
  24. 24. Entrevistas
  25. 25. Entrevistas • Pessoal ou a distância (síncrono ou assíncrono) • Importante: • Recrutamento, agendamento e confirmação • Roteiro (estruturado, semi-estruturado, livre) • Ajuda de custos...
  26. 26. EtnografiaBusca a compreensão aprofundada docomportamento a partir da observaçãode situação reais.
  27. 27. Estudos etnográficos sobre uso de TV Móvel realizados pela Nokia
  28. 28. Jason Diptych
  29. 29. Juan Carlos
  30. 30. “Etnografia” virtual Estudo etnográfico realizado no espaço digital, baseado na participação em redes sociais na web.
  31. 31. Exemplos de frases de boleiros:Boleiro não joga,desfila!Boleiro não conversa,resenha!Boleiro não treina,ensina!Boleiro não faz fundamento,ensaia!Boleiro não comemora gol,ascena pra torcida!Boleiro não se machuca,fica contudido!Boleiro não é metido,só faz seu estilo!Boleiro não é cumprimentado,é aplaudido!Boleiro não corre,faz a bola correr!Boleiro não dribla,apenas ignora o adversário!
  32. 32. Algumas palavras-chave dos boleiros: moral (e não "força",por exemplo) fera (e não "jogador",por exemplo) time (e não "equipe",por exemplo)
  33. 33. 7 processosClassificação de Informações
  34. 34. Organização e classificação Métodos recomendados ✓ Card-Sorting ✓ Vocabulário Controlado ✓ Taxonomia ✓ Modelo Mental ✓ Folcsonomia ✓ Diagrama de afinidades
  35. 35. Taxonomia na Biologia • Esquema de classificação hierárquica dos seres vivos • Os filhos tem apenas um pai • A classificação é feita para acolher novas descobertas
  36. 36. Taxonomia em Arquitetura daInformação • Esquema de classificação hierárquico para informações diversas • Os filhos podem ter mais de um pai • Pode ser usada em ferramentas de busca e navegação
  37. 37. Taxonomias para navegação(antigo Cadê?)
  38. 38. Elaboração de Taxonomias 1.Inventário de conteúdo 2.Avaliação da taxonomia atual (se existir) 3.Agrupamento 4.Hierarquização 5.Testes
  39. 39. Processo de Classificação agrupar rotular categori zar
  40. 40. Atividade: Classificação de informações• Em duplas• Criar categorias para classificar os rótulos a seguirCard Sorting aberto
  41. 41. Rótulos aprendiz colega educando pupilo aluno universitário tutelado estudante estagiário acadêmico discípulo
  42. 42. Quero pegar um livro na biblioteca... Como faço?
  43. 43. Card-sorting • Testar ou criar classificações baseadas no modelo mental do usuário • Aberto (categorias não bem pré- definidas) ou fechado (categorias chegam definidas) • Apresentar cartões pros usuários e pedir para que organizem
  44. 44. Presencial Online
  45. 45. Rótulos aprendiz colega educando pupilo aluno universitário tutelado estudante estagiário acadêmico discípulo
  46. 46. Categorias coloquial formal aluno universitário estudante acadêmico colega direito educando tutelado trabalho fábulas aprendiz pupilo estagiário discípulo
  47. 47. Atividade: Card-sorting (aberto)• Em grupos• Quais categorias (4 a 6) vocês utilizariam para englobar todo oconteúdo do menu do site? Definir apenas as categorias principais ealguns exemplos de seções que estariam englobadas nela.
  48. 48. Início Conselho Superior Q-AcadêmicoInstitucional Colégio de Dirigentes SIGAAções e programas A Reitoria IntranetAuditorias O Reitor WebmailConvênios Ensino OuvidoriaDespesas Pesquisa e Pós EDITAISLicitações e contratos Extensão PROCESSOServidores Administração SELETIVOPerguntas frequentes Desenvolvimento CONCURSOSLei de acesso à informação LICITAÇÕESSIC OUVIDORIAO Instituto COMUNICAÇÃOHistóricoOrganogramaMemorial
  49. 49. Taxonomia• Hierarquia das categorias que representam a navegação• Classificação dos conteúdos do site.• Especificação de metadados em um gerenciador de conteúdo,• Páginas e menu de navegação. Classificação hierárquica
  50. 50. Folcsonomia
  51. 51. Vocabulário Controlado• Contém a Taxonomia• Pode conter um Tesauro• Glossário• Ontologia• Gerenciadores de conteúdo Ontologia no Cadê
  52. 52. 7 processosGestão do Conteúdo
  53. 53. Gerenciadores de Conteúdo - CMSAdministração de categorias no gerenciador de conteúdo Wordpress
  54. 54. Definição de papéis dosusuários e privilégios
  55. 55. 7 processosNavegação
  56. 56. Modelo de Navegação:Macro para Micro Modelo de navegação em árvore
  57. 57. Modelo de Navegaçãoem Entrada e Saída
  58. 58. Modelo de NavegaçãoLinear
  59. 59. Modelo de NavegaçãoRizomátíca
  60. 60. 7 processosVisualização de Informações
  61. 61. Newsmap
  62. 62. Simetria ProximidadeSimilaridade PRINCÍPIOS GESTALTFechamento Figura-fundo
  63. 63. Heatmap: visualização em forma de F e Eyetrack (Poynter Institute : 2004)
  64. 64. Visualização de Informações• Abstração da Informação Métodos recomendados• Gráfico/Imagem ✓ Wireframe• Facilita do entendimento ✓ Wireflow• Melhoria na comunicação através da documentação ✓ Fluxograma visual ✓ Sitemap
  65. 65. Prototipação das representações visuais das interfaces• Propósito (demonstrar,testar,explorar)• Fidelidade (alta,baixa)• Funcionalidade (funcional,semi-funcional)• Etapa e Competência técnica
  66. 66. Sketchs ou RabiscosLiberte-se!
  67. 67. Wireframe Momento de definiçã o: especificação
  68. 68. Protótipo em baixa fidelidade
  69. 69. Protótipo em papel
  70. 70. Atividade: Wireframe• Em Duplas• Para experimentar a técnica do wireframe (estrutura/aramado),cada um deve reconstruir a página inicial do site do IFSul.
  71. 71. Vocabulário Visual página/ documento (e suas pilhas) dois tipos de estrutura (árvore,a esquerda) ponto de decisãoSetas indicam o caminho que o usuário exemplo de área está propenso a seguir.A crossbar indica operações irreversíveis. Visual Vocabulary de Jesse James Garrett
  72. 72. Storyboard Ferramenta para edição de quadrinhos online: Pixton
  73. 73. Fluxogramaou fluxo de tarefa
  74. 74. Wireflow
  75. 75. 7 processosRecuperação de Informações
  76. 76. Recuperação de Informações• Encontrabilidade Métodos recomendados• Dar pistas ao usuário ✓ Análise de• Múltiplos caminhos para Estatísticas de navegação encontrar a informação ✓ SEO• Análise de Estatísticas
  77. 77. “Dar pistas aos usuários...”
  78. 78. Análise de estatísticas
  79. 79. Análise de Helpdesk Saber a opinião dos usuários que se importam
  80. 80. Os 7 processos da A.I.
  81. 81. Etapas da Arquitetura de Informação(Modelo processual)
  82. 82. Muito + no Corais.org+ acompanhamento (shadowing)+ fly on the wall+ diários de uso continuado+ sondas culturais (cultural probes)+ história de vida+ um dia na vida (real ou simulado)+ levantamento demográfico+ questionários+ porquê,porquê,porquê
  83. 83. Livro colaborativohttp://designlivre.faberludens.com.br
  84. 84. Curso Online de A.I.http://www.faberludens.com.br/pt-br/cursos/aionline
  85. 85. Obrigado! Edyd Junges (@edyd)edyd.junges@faberludens.com.brInstituto Faber-Ludens www.faberludens.com.br

×