Workshop AI

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

description

Workshop no Integra Design na UFPel

Transcript of Workshop AI

Page 1: Workshop AI

Workshop Arquitetura de Informação

Edyd Junges (@edyd) Instituto Faber-Ludens (@faberludens)

Page 2: Workshop AI

“Era da Informação”

Page 3: Workshop AI

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?

Page 4: Workshop AI

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?

Page 5: Workshop AI

• 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

Page 6: Workshop AI

Os 7 processos da A.I.

Page 7: Workshop AI

7 processos

Planejamento de Informações

Page 8: Workshop AI

• 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

Page 9: Workshop AI

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

Page 10: Workshop AI

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

Page 11: Workshop AI

Modelos conceituais: Mapas mentais

Mapa mental do Delicious

Page 12: Workshop AI

Atividade Mapa Mental

• Criar Mapa Mental para experimentar o modelo conceitual

• Atividade individual

Site IFSUL

Page 13: Workshop AI

Contextos de uso

Cebola dos contextos da interação mediada

Page 14: Workshop AI

Modelos conceituais: Contexto tecnológico

Diagrama de Modelo de banco de dados

Page 15: Workshop AI

Modelos conceituais: Contexto simbólico

Relações conceituais dos artefatos no Delicious.com

Page 16: Workshop AI

Modelos conceituais: Contexto simbólico

Fluxo de mediação de atividades no Delicious.com

Page 17: Workshop AI

Modelos conceituais: Contexto social

Contexto social do Delicious.com

Page 18: Workshop AI

Atividade Modelo conceitual

• Criar um modelo conceitual colaborativamente, mostrando o contexto social

• Em grupos

Page 19: Workshop AI

7 processos

Levantamento de Informações

Page 20: Workshop AI

• 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

Page 21: Workshop AI

Conteúdo Inventário de

Page 22: Workshop AI

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

Page 23: Workshop AI

Google Docs

Questionários

Page 24: Workshop AI

Entrevistas

Page 25: Workshop AI

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

Page 26: Workshop AI

Etnografia

Busca a compreensão aprofundada do comportamento a partir da observação de situação reais.

Page 27: Workshop AI

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

Page 28: Workshop AI

Jason Diptych

Page 29: Workshop AI
Page 30: Workshop AI

Juan Carlos

Page 31: Workshop AI

Estudo etnográfico realizado no espaço

digital, baseado na participação em redes

sociais na web.

“Etnografia” virtual

Page 32: Workshop AI
Page 33: Workshop AI

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!

Page 34: Workshop AI

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)

Page 35: Workshop AI

7 processos

Classificação de Informações

Page 36: Workshop AI

Organização e classificação Métodos recomendados

✓ Card-Sorting

✓ Taxonomia

✓ Folcsonomia

✓ Vocabulário Controlado

✓ Modelo Mental

✓ Diagrama de afinidades

Page 37: Workshop AI

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

Page 38: Workshop AI

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

Page 39: Workshop AI

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

Page 40: Workshop AI

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

Page 41: Workshop AI

Processo de Classificação

rotular

categori zar

agrupar

Page 42: Workshop AI

Atividade: Classificação de informações

• Em duplas

• Criar categorias para classificar os rótulos a seguir

Card Sorting aberto

Page 43: Workshop AI

Rótulos

aluno

aprendiz

estagiário acadêmico

universitário tutelado estudante

colega pupilo

discípulo

educando

Page 44: Workshop AI

Quero pegar um livro na biblioteca...

Como faço?

Page 45: Workshop AI

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

Page 46: Workshop AI

Presencial Online

Page 47: Workshop AI

Rótulos

aluno

aprendiz

estagiário acadêmico

universitário tutelado estudante

colega pupilo

discípulo

educando

Page 48: Workshop AI

Categorias

direito tutelado

formal universitário acadêmico educando fábulas pupilo discípulo

coloquial aluno estudante colega trabalho aprendiz estagiário

Page 49: Workshop AI

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.

Page 50: Workshop AI

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

Page 51: Workshop AI

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

Page 52: Workshop AI

Folcsonomia

Page 53: Workshop AI

Vocabulário Controlado

• Contém a Taxonomia

• Pode conter um Tesauro

• Glossário

• Ontologia

• Gerenciadores de conteúdo

Ontologia no Cadê

Page 54: Workshop AI

7 processos

Gestão do Conteúdo

Page 55: Workshop AI

Gerenciadores de Conteúdo - CMS

Administração de categorias no gerenciador de conteúdo Wordpress

Page 56: Workshop AI

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

Page 57: Workshop AI

7 processos

Navegação

Page 58: Workshop AI

Modelo de Navegação: Macro para Micro

Modelo de navegação em árvore

Page 59: Workshop AI
Page 60: Workshop AI

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

Page 61: Workshop AI
Page 62: Workshop AI

Modelo de Navegação Linear

Page 63: Workshop AI
Page 64: Workshop AI
Page 65: Workshop AI

Modelo de Navegação Rizomátíca

Page 66: Workshop AI
Page 67: Workshop AI

7 processos

Visualização de Informações

Page 68: Workshop AI

Newsmap

Page 69: Workshop AI
Page 70: Workshop AI
Page 71: Workshop AI

Proximidade

Similaridade

PRINCÍPIOS GESTALT

Figura-fundo

Simetria

Fechamento

Page 73: Workshop AI

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

Page 74: Workshop AI

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

Page 75: Workshop AI

• 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

Page 76: Workshop AI

Rabiscos Sketchs ou

Liberte-se!

Page 77: Workshop AI

Momento de definiçã Wireframe

o:

especificação

Page 78: Workshop AI
Page 79: Workshop AI
Page 80: Workshop AI

Protótipo em baixa fidelidade

Page 81: Workshop AI

Protótipo em papel

Page 82: Workshop AI

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.

Page 83: Workshop AI
Page 84: Workshop AI
Page 85: Workshop AI

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

Page 86: Workshop AI

Ferramenta para edição

de quadrinhos online: Pixton

Storyboard

Page 87: Workshop AI

Fluxograma ou fluxo de tarefa

Page 88: Workshop AI

Wireflow

Page 89: Workshop AI
Page 90: Workshop AI

7 processos

Recuperação de Informações

Page 91: Workshop AI

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

Page 92: Workshop AI

“Dar pistas aos usuários...”

Page 93: Workshop AI

Análise de estatísticas

Page 94: Workshop AI

Análise de Helpdesk

Saber a opinião dos usuários que

se importam

Page 95: Workshop AI

Os 7 processos da A.I.

Page 96: Workshop AI

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

Page 97: Workshop AI

+ 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

Page 98: Workshop AI

Livro colaborativo

http://designlivre.faberludens.com.br

Page 100: Workshop AI

Obrigado!

Edyd Junges (@edyd) [email protected]

Instituto Faber-Ludens www.faberludens.com.br