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

Livro colaborativo

http://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.br

Instituto Faber-Ludens www.faberludens.com.br