![Page 1: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/1.jpg)
Arquitetura da Informação: Estudos de
Caso e ExercíciosFrederick van Amstel
www.usabilidoido.com.br
![Page 2: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/4.jpg)
Design Centrado no Usuário para UFPR.br
![Page 5: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/5.jpg)
Website da UFPR em 2004
![Page 6: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/9.jpg)
Resultados
![Page 10: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/10.jpg)
Design Centrado no Usuário
![Page 11: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/11.jpg)
Dilema: orientação por perfil ou por tarefa?
download
![Page 12: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/12.jpg)
Método de Webdesign baseado na Usabilidade, Maria Martinez
![Page 13: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/17.jpg)
Mapa mental
![Page 18: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/20.jpg)
Resolver visualmente
![Page 21: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/23.jpg)
Comparação superficial
![Page 24: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/24.jpg)
Comparação estrutural
![Page 25: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/26.jpg)
Processo de Classificação
rotular
agrupar
categorizar
![Page 27: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/34.jpg)
Diagrama de Navegação
![Page 35: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/40.jpg)
Vídeo: Como fazer Wireframes de Interfaces? download
![Page 41: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/41.jpg)
Wireframe da Página Inicial
![Page 42: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/43.jpg)
Prototipação de papel até as últimas consequências
![Page 44: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/44.jpg)
Modificações em função dos testes
![Page 45: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/47.jpg)
Imagens de referência
![Page 48: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/48.jpg)
Layout demonstrativo
![Page 49: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/49.jpg)
Página interna
![Page 50: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/52.jpg)
Design Participativo para o portal BrOffice.org
![Page 53: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/53.jpg)
O que é BrOffice.org?
![Page 54: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/54.jpg)
Suíte de escritório
![Page 55: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/56.jpg)
Portal Web
![Page 57: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/62.jpg)
Estatísticas de navegação
![Page 63: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/63.jpg)
Página de download
![Page 64: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/65.jpg)
Comparação com Firefox
![Page 66: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/66.jpg)
Protótipo inicial
![Page 67: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/67.jpg)
Versão final
![Page 68: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/68.jpg)
Impacto
![Page 69: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/73.jpg)
Estratégia de re/conhecimento
![Page 74: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/75.jpg)
Aplicação da estratégia
![Page 76: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/76.jpg)
Taxonomia existente
![Page 77: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/77.jpg)
Recriação da taxonomia
![Page 78: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/78.jpg)
Taxonomia preliminar
![Page 79: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/80.jpg)
Writemaps
![Page 81: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/81.jpg)
Gliffy
![Page 82: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/82.jpg)
De volta ao wiki!
![Page 83: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/84.jpg)
Taxonomia final
![Page 85: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/86.jpg)
Wireframe Participativo
![Page 87: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/88.jpg)
Análise dos resultados
![Page 89: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/89.jpg)
132 contribuições
![Page 90: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/90.jpg)
Síntese
![Page 91: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/91.jpg)
![Page 92: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/92.jpg)
![Page 93: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/93.jpg)
![Page 94: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/94.jpg)
Protótipo demonstrativo
![Page 95: Arquitetura da Informação: Estudos de Caso e Exercíciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/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íciosmultimidia.usabilidoido.com.br/slides/arquitetura_informacao/ai... · •Hierarquia visual ... Design gráfico ... “O visual](https://reader031.vdocuments.mx/reader031/viewer/2022022706/5be3279409d3f2382f8cac77/html5/thumbnails/97.jpg)
Obrigado!Frederick van Amstel
www.usabilidoido.com.br