Arquitetura da Informação: Estudos de Caso e Exercícios
-
Upload
frederick-van-amstel -
Category
Design
-
view
4.936 -
download
1
description
Transcript of Arquitetura da Informação: Estudos de Caso e Exercícios
![Page 1: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/1.jpg)
Arquitetura da Informação: Estudos de
Caso e Exercícios
Frederick van Amstelwww.usabilidoido.com.br
![Page 2: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/2.jpg)
Organização da aula
• Revisão de dois estudos de caso de reestruturação de portais Web
• Metodologias diferentes
• Design Centrado no Usuário - Ufpr.br
• Design Participativo - BrOffice.org
![Page 3: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/3.jpg)
Exercícios
• Aplicar propostas no projeto do serviço Web 2.0 idealizado na aula anterior
![Page 4: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/4.jpg)
Design Centrado no Usuário para UFPR.br
![Page 5: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/5.jpg)
Website da UFPR em 2004
![Page 6: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/6.jpg)
Objetivo do projeto
• Propor uma metodologia científica para a reestruturação, priorizando a organização e facilidade de uso
![Page 7: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/7.jpg)
Problemas-Hipótese
• Organização refletindo estrutura administrativa
• Inconsistência no visual e na navegação
• Dificuldade de uso
![Page 8: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/8.jpg)
Entrevistas com usuários
• Você já se perdeu navegando no site da Federal?
• Quantas vezes por semana você acessa o site da UFPR?
• Pra você, qual é a coisa mais marcante no site da Federal?
![Page 9: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/9.jpg)
Resultados
![Page 10: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/10.jpg)
Design Centrado no Usuário
![Page 11: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/11.jpg)
Dilema: orientação por perfil ou por tarefa?
download
![Page 12: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/12.jpg)
Método de Webdesign baseado na Usabilidade, Maria Martinez
![Page 13: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/13.jpg)
Os elementos da experiência do usuário, J.J. Garret
![Page 14: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/14.jpg)
Grupo de Foco
• Turma de 30 alunos em grupos de 5
• Escrever numa folha coisas que gostariam de fazer no site
![Page 15: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/15.jpg)
Diagrama de afinidades
• Matrículas / Disciplinas / Burocracia
• Ver as notas das provas e trabalhos
• Calcular o número de faltas possíveis
• Ver ementas e programas de disciplinas
• Fazer a minha matrícula
![Page 16: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/16.jpg)
Esboço da taxonomia
• Matrículas / Disciplinas / Burocracia
• Conteúdo Efêmero
• Acadêmico / Estudos
• Comunidade Virtual / Serviços Online
• Contato
• Institucional
![Page 17: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/17.jpg)
Mapa mental
![Page 18: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/18.jpg)
Resolver mentalmente
• Jogar em dupla
• Ganha quem somar 15, não menos, nem mais
• O primeiro escolhe um número de 1 a 9
• O segundo adiciona outro número de 1 a 9
![Page 19: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/19.jpg)
Resolver visualmente
8 1 6 3 5 74 9 2
![Page 20: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/20.jpg)
Resolver visualmente
![Page 21: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/21.jpg)
Exercício
• Brainstorming de tarefas possíveis e impossíveis que poderiam ser realizadas com seu projeto
• Diagramar num mapa mental usando http://www.mindmeister.com
![Page 22: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/22.jpg)
Análise Heurística
Dois links diferentes que levam à mesma página
Os cinco banners piscantes atrapalham a navegação porque estão em competição desleal com os textos
Uso frequente de siglas não-familiares
![Page 23: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/23.jpg)
Comparação superficial
![Page 24: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/24.jpg)
Comparação estrutural
![Page 25: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/25.jpg)
Inventário de Conteúdo
• Clicar em todos os links dentro do site
• Anotar título e conteúdo da página
![Page 26: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/26.jpg)
Processo de Classificação
rotular
agrupar
categorizar
![Page 27: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/27.jpg)
Rótulos
alunouniversitário
estudante
aprendiz
pupilo
estagiário acadêmico
tutelado
colega
discípulo
educando
![Page 28: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/28.jpg)
Agrupamentos
alunouniversitário
estudante
aprendiz pupiloestagiário
acadêmico
tutelado
colega
discípulo
educando
![Page 29: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/29.jpg)
fábulas
formal
direito
Categorias
alunouniversitário
estudante
aprendiz pupilo
estagiário
acadêmico
tutelado
colega
discípulo
educando
coloquial
trabalho
![Page 30: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/30.jpg)
Taxonomiaprimária
• Entrar na UFPR
• Cursos
• Recursos para o aluno
• Serviços à comunidade
• Ensino
• Pesquisa
• Cultura
• Notícias
• Sobre a UFPR
• Diretório de subsites
• Contato
![Page 31: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/31.jpg)
Card-sorting
• Testar ou criar classificações baseadas no modelo mental do usuário
• Aberto ou fechado
• Apresentar cartões pros usuários e pedir para que organizem
![Page 32: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/32.jpg)
• Entrar na UFPR
• Cursos
• Recursos para o aluno
• Serviços à comunidade
• Ensino
• Pesquisa
• Cultura
• Notícias
• Sobre a UFPR
• Diretório de subsites
• Contato
• Entrar na UFPR
• Cursos
• Serviços ao Aluno
• Serviços Públicos
• Professores
• Pesquisa
• Cultura
• Notícias
• Administração
• Contato
![Page 33: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/33.jpg)
Exercício
• Rodar um exercício de card-sorting com o http://websort.net
• Primeiro fazer em grupo, discutindo com a equipe
• Depois, pedir que individualmente, 3 usuários das outras equipes façam também
• Comparar resultados
![Page 34: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/34.jpg)
Diagrama de Navegação
![Page 35: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/35.jpg)
Cenários• O aluno Alessandro Bernardes casou-se cedo e decide
trancar o curso para trabalhar mais. Ele recorre ao website da Universidade para saber por quanto tempo poderá trancar seu curso e, ao abrir a página, vê uma porção de links relativos aos órgãos da instituição. Como ele está um tanto alheio às funções de cada um, prefere clicar no link intitulado “Matrículas”. Na página aberta, encontra um link para maiores informações sobre trancamento de curso que o leva à página do Núcleo de Acompanhamento Acadêmico (NAA), o órgão responsável por operações dessa ordem. A página informa que é possível trancar o curso por seis meses e mais seis, caso seja aprovado o requerimento. Alessandro encontrou o que queria e, mais, aprendeu que problemas dessa ordem são resolvidos no NAA.
![Page 36: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/36.jpg)
Teste com protótipo
• Palm Vx
• Portátil
• Arquivos HTML apenas com as opções de menu
• Tarefas de recuperação de informação
![Page 37: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/37.jpg)
• Entrar na UFPR
• Cursos
• Serviços ao Aluno
• Serviços Públicos
• Professores
• Pesquisa
• Cultura
• Notícias
• Administração
• Contato
• Admissão
• Cursos
• Central do Aluno
• Serviços à Comunidade
• Ensino
• Pesquisa
• Cultura
• Notícias
• Administração
• Contato
![Page 38: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/38.jpg)
Exercício
• Criar diagramas de navegação do projeto usando o http://writemaps.com/
• Discutir em grupo diferentes possibilidades (cada um elabora um esquema)
• Testar com “usuários” no modo tree
![Page 39: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/39.jpg)
Wireframes
• Definir elementos das páginas
• Hierarquia visual
• Axure, Visio, Omnigraffle
![Page 40: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/40.jpg)
Vídeo: Como fazer Wireframes de Interfaces? download
![Page 41: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/41.jpg)
Wireframe da Página Inicial
![Page 42: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/42.jpg)
Testes com protótipo
• Impressão dos wireframes
• Portátil
• Organização
![Page 43: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/43.jpg)
Prototipação de papel até as últimas consequências
![Page 44: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/44.jpg)
Modificações em função dos testes
![Page 45: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/45.jpg)
Exercício
• Dividir a equipe e executar estas tarefas ao mesmo tempo:
• Designar um “usuário” e oferecer a outras equipes
• Criar protótipos de papel e testar com o “usuário” da outra equipe
• Criar e atualizar wireframes no www.iplotz.com
![Page 46: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/46.jpg)
Design gráfico
• Meramente demonstrativo
• Inspiração no prédio central
![Page 47: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/47.jpg)
Imagens de referência
![Page 48: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/48.jpg)
Layout demonstrativo
![Page 49: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/49.jpg)
Página interna
![Page 50: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/50.jpg)
Estágio atual
• Após 4 anos da pesquisa, a instituição se interessou
• Em desenvolvimento interno
• Previsão para agosto de 2009
![Page 51: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/51.jpg)
Princípios• Foco no Usuário
• Evolução Constante
• Transparência
• Acessibilidade
• Colaboração
• Acesso Livre ao Conhecimento Científico
• Padronização
• Integração
• Segurança
![Page 52: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/52.jpg)
Design Participativo para o portal BrOffice.org
![Page 53: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/53.jpg)
O que é BrOffice.org?
![Page 54: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/54.jpg)
Suíte de escritório
![Page 55: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/55.jpg)
Sobre a comunidade
• 10 milhões de usuários no Brasil
• Representada por uma ONG
• 150 voluntários ativos
• Espaços de interação virtuais
![Page 56: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/56.jpg)
Portal Web
![Page 57: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/57.jpg)
Equipe Web
S.ToledoAgência Web
Produção do site
Faber-LudensInstituto de Design
Pesquisa do site
BrOffice.orgComunidade de Desenvolvedores
Determinar necessidades
![Page 58: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/58.jpg)
Briefing via Skype
• Como tornar a apresentação mais comercial?
• Como incentivar e reconhecer o voluntariado?
• Como conciliar os interesses da comunidade e do mercado num único portal?
• Como reformular o portal de modo que os membros da comunidade possam participar?
![Page 59: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/59.jpg)
Debates via lista de email dev@
• Como deixar mais clara a relação entre BrOffice.org e OpenOffice.org?
• Que serviços ou conteúdo seriam úteis para os usuários do site? Como podemos melhorar?
• Quem são os usuários do site e quais são seus objetivos?
![Page 60: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/60.jpg)
Reunião via IRC
• Bate-papo informal, mas com uma pauta rígida
• Ritual grupal
• Visão geral da dinâmica de desenvolvimento
![Page 61: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/61.jpg)
Exercício
• Discutir usando chat online http://thinkature.com/ custos e possibilidades de viabilização econômica do projeto
![Page 62: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/62.jpg)
Estatísticas de navegação
![Page 63: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/63.jpg)
Página de download
![Page 64: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/64.jpg)
Estatísticas que preocupam
• tempo médio de 2:20 minutos
• 48% deixam o site
• 3% lêem instruções de instalação após o download
• 2% seguem aos links amigos e verificação de integridade
![Page 65: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/65.jpg)
Comparação com Firefox
![Page 66: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/66.jpg)
Protótipo inicial
![Page 67: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/67.jpg)
Versão final
![Page 68: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/68.jpg)
Impacto
![Page 69: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/69.jpg)
Pesquisa do registro de usuário
• O que você achou do site do BrOffice.org? Você encontrou facilmente o que precisava em nosso site?
• Quais as três coisas que você gostaria de mudar em nosso site?
![Page 70: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/70.jpg)
“site muito técnico. embora seja usual para programas open source (...)Acredito que é aí que a microsoft ganha, ela atinge os quase 100%
leigos em informatica, tornando a vida deles simples.”
![Page 71: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/71.jpg)
“O visual do site está bom, mas falta essencialmente um
fórum e uma maior clareza nos menus (talvez falta DropDown? neles), do
tipo com relação ao Wiki por exemplo.”
![Page 72: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/72.jpg)
Diretrizes
Codificação, Navegação, Apresentação e
Tratamento do usuário:
• O usuário não deve ser tratado como um estúpido nem tampouco como um expert em Linux
• O conhecimento da comunidade deve vir num segundo momento, quando o usuário já está engajado no uso do software
![Page 73: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/73.jpg)
Estratégia de re/conhecimento
![Page 74: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/74.jpg)
Exercício
• Definir as diretrizes de experiência do usuário do projeto
• Partir das características desejadas
![Page 75: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/75.jpg)
Aplicação da estratégia
![Page 76: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/76.jpg)
Taxonomia existente
![Page 77: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/77.jpg)
Recriação da taxonomia
![Page 78: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/78.jpg)
Taxonomia preliminar
![Page 79: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/79.jpg)
Requerimentos da ferramenta de diagramação online
• gratuita
• acessível por qualquer configuração
• fácil de usar para quem nunca experimentou
• controle de versão
![Page 80: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/80.jpg)
Writemaps
![Page 81: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/81.jpg)
Gliffy
![Page 82: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/82.jpg)
De volta ao wiki!
![Page 83: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/83.jpg)
Discussão na dev@
• Seções reorganizadas
• Páginas adicionadas e outras removidas
• O wiki, entretanto, não foi alterado diretamente pelos participantes
![Page 84: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/84.jpg)
Taxonomia final
![Page 85: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/85.jpg)
Dilema
• Como conciliar interesses da comunidade e do mercado?
• O que vai ter na página inicial?
• Será que não é melhor ter dois sites?
• Como podemos envolver os participantes periféricos (usuários) na decisão?
![Page 86: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/86.jpg)
Wireframe Participativo
![Page 87: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/87.jpg)
Exercício
• Usar o Wireframe Participativo para aperfeiçoar os wireframes
• Testar com usuários de outras equipes
• Código fonte https://wiki.broffice.org/attachment/wiki/ReformulacaoDoPortal/broo_wireframe.zip
![Page 88: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/88.jpg)
Análise dos resultados
![Page 89: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/89.jpg)
132 contribuições
![Page 90: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/90.jpg)
Síntese
![Page 91: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/91.jpg)
![Page 92: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/92.jpg)
![Page 93: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/93.jpg)
![Page 94: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/94.jpg)
Protótipo demonstrativo
![Page 95: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/95.jpg)
Estágio atual
• Projeto gráfico em desenvolvimento pela S.Toledo
• Previsão para entrega em junho/2008
![Page 96: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/96.jpg)
Lições aprendidas
• Design participativo combina com software livre
• Participantes periféricos devem ser levados em consideração
• Colaboração é essencial para suportar diversidades
![Page 97: Arquitetura da Informação: Estudos de Caso e Exercícios](https://reader030.fdocumentos.tips/reader030/viewer/2022020218/5593a1861a28ab663f8b46be/html5/thumbnails/97.jpg)
Obrigado!
Frederick van Amstelwww.usabilidoido.com.br