Workshop no Integra Design na UFPel

1. Workshop Arquitetura
de Informação
Edyd Junges (@edyd)
Instituto Faber-Ludens (@faberludens)

2. “Era da Informação”

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 Amstel
O que é Arquitetura da Informação?

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. • 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. Os 7 processos da A.I.

7. 7 processos
Planejamento de Informações

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. 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. 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. Modelos conceituais:
Mapas mentais
Mapa mental do Delicious

12. Atividade
Mapa Mental
• Criar Mapa Mental para experimentar o modelo conceitual
• Atividade individual
Site IFSUL

13. Contextos de uso
Cebola dos contextos da interação mediada

14. Modelos conceituais:
Contexto tecnológico
Diagrama de Modelo de banco de dados

15. Modelos conceituais:
Contexto simbólico
Relações conceituais dos artefatos no Delicious.com

16. Modelos conceituais:
Contexto simbólico
Fluxo de mediação de atividades no Delicious.com

17. Modelos conceituais:
Contexto social
Contexto social do Delicious.com

18. Atividade
Modelo conceitual
• Criar um modelo conceitual colaborativamente, mostrando o
contexto social
• Em grupos

19. 7 processos
Levantamento de Informações

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. Inventário de
Conteúdo

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. Questionários
Google Docs

24. Entrevistas

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. Etnografia
Busca a compreensão aprofundada do
comportamento a partir da observação
de situação reais.

27. Estudos etnográficos sobre uso de TV Móvel realizados pela Nokia

28. Jason Diptych

30. Juan Carlos

31. “Etnografia” virtual
Estudo etnográfico realizado no espaço
digital, baseado na participação em redes
sociais na web.

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

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

35. 7 processos
Classificação de Informações

36. Organização e classificação
Métodos recomendados
✓ Card-Sorting ✓ Vocabulário Controlado
✓ Taxonomia ✓ Modelo Mental
✓ Folcsonomia ✓ Diagrama de afinidades

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

38. Taxonomia em Arquitetura da
Informaçã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

39. Taxonomias para navegação
(antigo Cadê?)

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

41. Processo de Classificação
agrupar
rotular
categori
zar

42. Atividade:
Classificação de informações
• Em duplas
• Criar categorias para classificar os rótulos a seguir
Card Sorting aberto

43. Rótulos
aprendiz colega
educando
pupilo
aluno
universitário
tutelado
estudante
estagiário
acadêmico
discípulo

44. Quero pegar um livro na biblioteca...
Como faço?

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

46. Presencial Online

47. Rótulos
aprendiz colega
educando
pupilo
aluno
universitário
tutelado
estudante
estagiário
acadêmico
discípulo

48. Categorias
coloquial
formal
aluno
universitário
estudante
acadêmico
colega direito
educando
tutelado
trabalho fábulas
aprendiz pupilo
estagiário discípulo

49. Atividade:
Card-sorting (aberto)
• Em grupos
• Quais categorias (4 a 6) vocês utilizariam para englobar todo o
conteúdo do menu do site? Definir apenas as categorias principais e
alguns exemplos de seções que estariam englobadas nela.

50. Início Conselho Superior Q-Acadêmico
Institucional Colégio de Dirigentes SIGA
Ações e programas A Reitoria Intranet
Auditorias O Reitor Webmail
Convênios Ensino Ouvidoria
Despesas Pesquisa e Pós EDITAIS
Licitações e contratos Extensão PROCESSO
Servidores Administração SELETIVO
Perguntas frequentes Desenvolvimento CONCURSOS
Lei de acesso à informação LICITAÇÕES
SIC OUVIDORIA
O Instituto COMUNICAÇÃO
Histórico
Organograma
Memorial

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

52. Folcsonomia

53. Vocabulário Controlado
• Contém a Taxonomia
• Pode conter um Tesauro
• Glossário
• Ontologia
• Gerenciadores de conteúdo
Ontologia no Cadê

54. 7 processos
Gestão do Conteúdo

55. Gerenciadores de Conteúdo - CMS
Administração de categorias no gerenciador de conteúdo Wordpress

56. Definição de papéis dos
usuários e privilégios

57. 7 processos
Navegação

58. Modelo de Navegação:
Macro para Micro
Modelo de navegação em árvore

60. Modelo de Navegação
em Entrada e Saída

62. Modelo de Navegação
Linear

65. Modelo de Navegação
Rizomátíca

67. 7 processos
Visualização de Informações

68. Newsmap

71. Simetria Proximidade
Similaridade
PRINCÍPIOS GESTALT
Fechamento Figura-fundo

73. Heatmap: visualização em forma de F e Eyetrack (Poynter Institute : 2004)

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

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

76. Sketchs ou
Rabiscos
Liberte-se!

77. Wireframe Momento de definiçã o:
especificação

80. Protótipo em baixa
fidelidade

81. Protótipo em papel

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

85. Vocabulário Visual
página/ documento (e suas pilhas)
dois tipos de estrutura (árvore,a esquerda) ponto de decisão
Setas 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

86. Storyboard
Ferramenta para edição
de quadrinhos online: Pixton

87. Fluxograma
ou fluxo de tarefa

88. Wireflow

90. 7 processos
Recuperação de Informações

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

92. “Dar pistas aos usuários...”

93. Análise de estatísticas

94. Análise de Helpdesk
Saber a opinião dos usuários que
se importam

95. Os 7 processos da A.I.

96. Etapas da Arquitetura de Informação
(Modelo processual)

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

98. Livro colaborativo
http://designlivre.faberludens.com.br

99. Curso Online de A.I.
http://www.faberludens.com.br/pt-br/cursos/aionline

100. Obrigado!
Edyd Junges (@edyd)
edyd.junges@faberludens.com.br
Instituto Faber-Ludens
www.faberludens.com.br