Upload
edyd-junges
View
1.003
Download
0
Embed Size (px)
DESCRIPTION
Workshop no Integra Design na UFPel
Citation preview
Workshop Arquitetura de Informação
Edyd Junges (@edyd) Instituto Faber-Ludens (@faberludens)
“Era da Informação”
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
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 visionária:
"O estudo da organização da informação que permite ao
usuário chegar ao entendimento" Richard Saul Wurman
O que é Arquitetura da Informação?
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?
• 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
padrões de interação vocabulário controlado teste de usabilidade análise heurística
card-sorting
Os 7 processos da A.I.
7 processos
Planejamento de Informações
• Etapa inicial de análise do sistema e planejamento
• Definição de objetivos do
cliente e do sistema
• Metadesign: planejar a
plataforma que permitirá planejar depois
Planejamento de Informações
Métodos recomendados
✓ Briefing
✓ Benchmarking
✓ Mapas conceituais
✓ Reuniões
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
Modelos conceituais: Mapas mentais
• Mostra tendências e ligações sobre a percepção das pessoas
• Estruturação hierárquica de
ideias
• Usado em brainstorming coletivo para desenvolver perspectivas comuns
Modelos conceituais: Mapas mentais
Mapa mental do Delicious
Atividade Mapa Mental
• Criar Mapa Mental para experimentar o modelo conceitual
• Atividade individual
Site IFSUL
Contextos de uso
Cebola dos contextos da interação mediada
Modelos conceituais: Contexto tecnológico
Diagrama de Modelo de banco de dados
Modelos conceituais: Contexto simbólico
Relações conceituais dos artefatos no Delicious.com
Modelos conceituais: Contexto simbólico
Fluxo de mediação de atividades no Delicious.com
Modelos conceituais: Contexto social
Contexto social do Delicious.com
Atividade Modelo conceitual
• Criar um modelo conceitual colaborativamente, mostrando o contexto social
• Em grupos
7 processos
Levantamento de Informações
• Busca compreensão do projeto
• Levantamento de
informações, dados, atores e envolvidos (usuários, stakeholders, etc)
• Compreender as tarefas e
atividades que o usuário irá realizar e o contexto social onde está inserido
Levantamento de Informações
Métodos recomendados ✓ Inventário de
Conteúdo ✓ Entrevistas ✓ Questionários ✓ Etnografia Virtual
Conteúdo Inventário de
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
Google Docs
Questionários
Entrevistas
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...
Etnografia
Busca a compreensão aprofundada do comportamento a partir da observação de situação reais.
Estudos etnográficos sobre uso de TV Móvel realizados pela Nokia
Jason Diptych
Juan Carlos
Estudo etnográfico realizado no espaço
digital, baseado na participação em redes
sociais na web.
“Etnografia” virtual
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!
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)
7 processos
Classificação de Informações
Organização e classificação Métodos recomendados
✓ Card-Sorting
✓ Taxonomia
✓ Folcsonomia
✓ Vocabulário Controlado
✓ Modelo Mental
✓ Diagrama de afinidades
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
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
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.Agrupamento
4.Hierarquização
5.Testes
Processo de Classificação
rotular
categori zar
agrupar
Atividade: Classificação de informações
• Em duplas
• Criar categorias para classificar os rótulos a seguir
Card Sorting aberto
Rótulos
aluno
aprendiz
estagiário acadêmico
universitário tutelado estudante
colega pupilo
discípulo
educando
Quero pegar um livro na biblioteca...
Como faço?
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
Presencial Online
Rótulos
aluno
aprendiz
estagiário acadêmico
universitário tutelado estudante
colega pupilo
discípulo
educando
Categorias
direito tutelado
formal universitário acadêmico educando fábulas pupilo discípulo
coloquial aluno estudante colega trabalho aprendiz estagiário
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.
Início Institucional Ações e programas Auditorias Convênios Despesas Licitações e contratos Servidores Perguntas frequentes Lei de acesso à informação SIC O Instituto Histórico Organograma Memorial
Conselho Superior Colégio de Dirigentes A Reitoria O Reitor Ensino Pesquisa e Pós Extensão Administração Desenvolvimento
Q-Acadêmico SIGA Intranet Webmail Ouvidoria EDITAIS PROCESSO SELETIVO CONCURSOS LICITAÇÕES OUVIDORIA COMUNICAÇÃO
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
Folcsonomia
Vocabulário Controlado
• Contém a Taxonomia
• Pode conter um Tesauro
• Glossário
• Ontologia
• Gerenciadores de conteúdo
Ontologia no Cadê
7 processos
Gestão do Conteúdo
Gerenciadores de Conteúdo - CMS
Administração de categorias no gerenciador de conteúdo Wordpress
Definição de papéis dos usuários e privilégios
7 processos
Navegação
Modelo de Navegação: Macro para Micro
Modelo de navegação em árvore
Modelo de Navegação em Entrada e Saída
Modelo de Navegação Linear
Modelo de Navegação Rizomátíca
7 processos
Visualização de Informações
Newsmap
Proximidade
Similaridade
PRINCÍPIOS GESTALT
Figura-fundo
Simetria
Fechamento
Heatmap: visualização em forma de F e Eyetrack (Poynter Institute : 2004)
Visualização de Informações
• Abstração da Informação
• Melhoria na comunicação através da documentação visual
Métodos recomendados
• Gráfico/Imagem
✓ Wireframe • Facilita do entendimento
✓ Wireflow
✓ Fluxograma
✓ Sitemap
• Propósito (demonstrar,testar,explorar) • Fidelidade (alta,baixa) • Funcionalidade (funcional,semi-funcional) • Etapa e Competência técnica
Prototipação das representações
visuais das interfaces
Rabiscos Sketchs ou
Liberte-se!
Momento de definiçã Wireframe
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ágina inicial do site do IFSul.
Vocabulário Visual página/ documento (e suas pilhas)
dois tipos de estrutura (árvore,a esquerda) Setas indicam o caminho que o usuário
está propenso a seguir.A crossbar indica operações irreversíveis.
Visual Vocabulary de Jesse James Garrett
ponto de decisão
exemplo de área
Ferramenta para edição
de quadrinhos online: Pixton
Storyboard
Fluxograma ou fluxo de tarefa
Wireflow
7 processos
Recuperação de Informações
Recuperação de Informações
• Encontrabilidade
• Dar pistas ao usuário
• Múltiplos caminhos para
encontrar a informação
• Análise de Estatísticas
Métodos recomendados
✓ Análise de
Estatísticas de navegação
✓ SEO
“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)
+ 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ê
Muito + no Corais.org
Curso Online de A.I.
http://www.faberludens.com.br/pt-br/cursos/aionline