of 100/100
Workshop Arquitetura de Informação Edyd Junges (@edyd) Instituto Faber-Ludens (@faberludens)

Workshop AI

  • View
    993

  • Download
    0

Embed Size (px)

DESCRIPTION

Workshop no Integra Design na UFPel

Text of Workshop AI

  • 1. Workshop Arquiteturade InformaoEdyd Junges (@edyd)Instituto Faber-Ludens (@faberludens)
  • 2. Era da Informao
  • 3. Uma denio visionria: "O estudo da organizao da informao que permite ao usurio chegar ao entendimento" Richard Saul Wurman Uma denio operacional: "Organizao da estrutura de um website e seu contedo, rotulagem e categorizao da informao e o design de sistemas de busca" Rosenfeld e Morville Uma denio crtica:"Termo criado para legitimar a estruturalizao de ambientes informacionais para maior ecincia e controle do acesso informao por uma determinada organizao de pessoas" Frederick van AmstelO que Arquitetura da Informao?
  • 4. Problemas comuns resultantes da falta de Arquitetura da Informao Inconsistncia na navegao Rtulos ambguos Sistemas de busca confusos Ausncia de feedbacks do sistema Excesso de cliques para encontrar informaes ... mais?
  • 5. Inconsistncia na navegao padres de interao Rtulos ambguos vocabulrio controlado Sistemas de busca confusos teste de usabilidade Ausncia de feedbacks do sistema anlise heurstica Excesso de cliques para encontrar informaes card-sorting
  • 6. Os 7 processos da A.I.
  • 7. 7 processosPlanejamento de Informaes
  • 8. Planejamento de Informaes Etapa inicial de anlise do sistema e planejamento Mtodos recomendados Definio de objetivos do Briefing cliente e do sistema Benchmarking Metadesign: planejar a plataforma que permitir Mapas conceituais planejar depois Reunies
  • 9. Modelos conceituais Excelentes para negociar mudanas Definir melhor conceitos abstratos Gerar uma viso compartilhada do artefato entre os membros da equipe de projeto
  • 10. Modelos conceituais:Mapas mentais Mostra tendncias e ligaes Usado em brainstorming coletivo sobre a percepo das pessoas para desenvolver perspectivas comuns Estruturao hierrquica de ideias
  • 11. Modelos conceituais: Mapas mentaisMapa mental do Delicious
  • 12. Atividade Mapa Mental Criar Mapa Mental para experimentar o modelo conceitual Atividade individualSite IFSUL
  • 13. Contextos de uso Cebola dos contextos da interao mediada
  • 14. Modelos conceituais: Contexto tecnolgicoDiagrama de Modelo de banco de dados
  • 15. Modelos conceituais: Contexto simblicoRelaes conceituais dos artefatos no Delicious.com
  • 16. Modelos conceituais: Contexto simblicoFluxo de mediao de atividades no Delicious.com
  • 17. Modelos conceituais: Contexto socialContexto social do Delicious.com
  • 18. AtividadeModelo conceitual Criar um modelo conceitual colaborativamente, mostrando ocontexto social Em grupos
  • 19. 7 processosLevantamento de Informaes
  • 20. Levantamento de Informaes Busca compreenso do projeto Mtodos recomendados Inventrio de Levantamento de Contedo informaes, dados, atores e envolvidos (usurios, stakeholders, etc) Entrevistas Compreender as tarefas e Questionrios atividades que o usurio ir realizar e o contexto social Etnografia Virtual onde est inserido
  • 21. Inventrio de Contedo
  • 22. Inventrio de Contedo Clicar em todos os links dentro do site Anotar: URL Link quebrado ou no Ttulo da pgina Texto do link que levou pgina
  • 23. Questionrios Google Docs
  • 24. Entrevistas
  • 25. Entrevistas Pessoal ou a distncia (sncrono ou assncrono) Importante: Recrutamento, agendamento e confirmao Roteiro (estruturado, semi-estruturado, livre) Ajuda de custos...
  • 26. EtnografiaBusca a compreenso aprofundada docomportamento a partir da observaode situao reais.
  • 27. Estudos etnogrficos sobre uso de TV Mvel realizados pela Nokia
  • 28. Jason Diptych
  • 29. Juan Carlos
  • 30. Etnografia virtual Estudo etnogrfico realizado no espao digital, baseado na participao em redes sociais na web.
  • 31. Exemplos de frases de boleiros:Boleiro no joga,desla!Boleiro no conversa,resenha!Boleiro no treina,ensina!Boleiro no faz fundamento,ensaia!Boleiro no comemora gol,ascena pra torcida!Boleiro no se machuca,ca contudido!Boleiro no metido,s faz seu estilo!Boleiro no cumprimentado, aplaudido!Boleiro no corre,faz a bola correr!Boleiro no dribla,apenas ignora o adversrio!
  • 32. Algumas palavras-chave dos boleiros: moral (e no "fora",por exemplo) fera (e no "jogador",por exemplo) time (e no "equipe",por exemplo)
  • 33. 7 processosClassificao de Informaes
  • 34. Organizao e classificao Mtodos recomendados Card-Sorting Vocabulrio Controlado Taxonomia Modelo Mental Folcsonomia Diagrama de afinidades
  • 35. Taxonomia na Biologia Esquema de classificao hierrquica dos seres vivos Os filhos tem apenas um pai A classificao feita para acolher novas descobertas
  • 36. Taxonomia em Arquitetura daInformao Esquema de classificao hierrquico para informaes diversas Os filhos podem ter mais de um pai Pode ser usada em ferramentas de busca e navegao
  • 37. Taxonomias para navegao(antigo Cad?)
  • 38. Elaborao de Taxonomias 1.Inventrio de contedo 2.Avaliao da taxonomia atual (se existir) 3.Agrupamento 4.Hierarquizao 5.Testes
  • 39. Processo de Classificao agrupar rotular categori zar
  • 40. Atividade: Classificao de informaes Em duplas Criar categorias para classicar os rtulos a seguirCard Sorting aberto
  • 41. Rtulos aprendiz colega educando pupilo aluno universitrio tutelado estudante estagirio acadmico discpulo
  • 42. Quero pegar um livro na biblioteca... Como fao?
  • 43. Card-sorting Testar ou criar classificaes baseadas no modelo mental do usurio Aberto (categorias no bem pr- definidas) ou fechado (categorias chegam definidas) Apresentar cartes pros usurios e pedir para que organizem
  • 44. Presencial Online
  • 45. Rtulos aprendiz colega educando pupilo aluno universitrio tutelado estudante estagirio acadmico discpulo
  • 46. Categorias coloquial formal aluno universitrio estudante acadmico colega direito educando tutelado trabalho fbulas aprendiz pupilo estagirio discpulo
  • 47. Atividade: Card-sorting (aberto) Em grupos Quais categorias (4 a 6) vocs utilizariam para englobar todo ocontedo do menu do site? Denir apenas as categorias principais ealguns exemplos de sees que estariam englobadas nela.
  • 48. Incio Conselho Superior Q-AcadmicoInstitucional Colgio de Dirigentes SIGAAes e programas A Reitoria IntranetAuditorias O Reitor WebmailConvnios Ensino OuvidoriaDespesas Pesquisa e Ps EDITAISLicitaes e contratos Extenso PROCESSOServidores Administrao SELETIVOPerguntas frequentes Desenvolvimento CONCURSOSLei de acesso informao LICITAESSIC OUVIDORIAO Instituto COMUNICAOHistricoOrganogramaMemorial
  • 49. Taxonomia Hierarquia das categorias que representam a navegao Classificao dos contedos do site. Especificao de metadados em um gerenciador de contedo, Pginas e menu de navegao. Classificao hierrquica
  • 50. Folcsonomia
  • 51. Vocabulrio Controlado Contm a Taxonomia Pode conter um Tesauro Glossrio Ontologia Gerenciadores de contedo Ontologia no Cad
  • 52. 7 processosGesto do Contedo
  • 53. Gerenciadores de Contedo - CMSAdministrao de categorias no gerenciador de contedo Wordpress
  • 54. Definio de papis dosusurios e privilgios
  • 55. 7 processosNavegao
  • 56. Modelo de Navegao:Macro para Micro Modelo de navegao em rvore
  • 57. Modelo de Navegaoem Entrada e Sada
  • 58. Modelo de NavegaoLinear
  • 59. Modelo de NavegaoRizomtca
  • 60. 7 processosVisualizao de Informaes
  • 61. Newsmap
  • 62. Simetria ProximidadeSimilaridade PRINCPIOS GESTALTFechamento Figura-fundo
  • 63. Heatmap: visualizao em forma de F e Eyetrack (Poynter Institute : 2004)
  • 64. Visualizao de Informaes Abstrao da Informao Mtodos recomendados Grfico/Imagem Wireframe Facilita do entendimento Wireflow Melhoria na comunicao atravs da documentao Fluxograma visual Sitemap
  • 65. Prototipao das representaes visuais das interfaces Propsito (demonstrar,testar,explorar) Fidelidade (alta,baixa) Funcionalidade (funcional,semi-funcional) Etapa e Competncia tcnica
  • 66. Sketchs ou RabiscosLiberte-se!
  • 67. Wireframe Momento de deni o: especicao
  • 68. Prottipo em baixa fidelidade
  • 69. Prottipo em papel
  • 70. Atividade: Wireframe Em Duplas Para experimentar a tcnica do wireframe (estrutura/aramado),cada um deve reconstruir a pgina inicial do site do IFSul.
  • 71. Vocabulrio Visual pgina/ documento (e suas pilhas) dois tipos de estrutura (rvore,a esquerda) ponto de decisoSetas indicam o caminho que o usurio exemplo de rea est propenso a seguir.A crossbar indica operaes irreversveis. Visual Vocabulary de Jesse James Garrett
  • 72. Storyboard Ferramenta para edio de quadrinhos online: Pixton
  • 73. Fluxogramaou fluxo de tarefa
  • 74. Wireflow
  • 75. 7 processosRecuperao de Informaes
  • 76. Recuperao de Informaes Encontrabilidade Mtodos recomendados Dar pistas ao usurio Anlise de Mltiplos caminhos para Estatsticas de navegao encontrar a informao SEO Anlise de Estatsticas
  • 77. Dar pistas aos usurios...
  • 78. Anlise de estatsticas
  • 79. Anlise de Helpdesk Saber a opinio dos usurios que se importam
  • 80. Os 7 processos da A.I.
  • 81. Etapas da Arquitetura de Informao(Modelo processual)
  • 82. Muito + no Corais.org+ acompanhamento (shadowing)+ y on the wall+ dirios de uso continuado+ sondas culturais (cultural probes)+ histria de vida+ um dia na vida (real ou simulado)+ levantamento demogrco+ questionrios+ porqu,porqu,porqu
  • 83. Livro colaborativohttp://designlivre.faberludens.com.br
  • 84. Curso Online de A.I.http://www.faberludens.com.br/pt-br/cursos/aionline
  • 85. Obrigado! Edyd Junges (@edyd)[email protected] Faber-Ludens www.faberludens.com.br