SlideShare ist ein Scribd-Unternehmen logo
1 von 57
Downloaden Sie, um offline zu lesen
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Arquitetura da 
Informação 
Marcello de Campos Cardoso 
www.mcardoso.com.br | www.latitude14.com.br 
mcardoso@latitude14.com.br 
#1
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Arquitetura da Informação 
cuidando da encontrabilidade do sistema
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Existem muitos caminhos, 
desafios e benefícios em um sistema
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Como pensam os usuários? (pacman) 
Que caminho percorrem? (maze) 
Quais os desafios? (ghosts)
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Problema 
Arquitetos não vivem na casa que projetam, e não estão prontos para 
entenderem as necessidades de longo tempo. 
Senso comum é uma boa ferramenta para sistemas simples, 
mas navegação intuível ocorre melhor quando projetada.
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
3 perguntas do explorador 
Estou no lugar certo? 
Aqui tem o que procuro? 
Como acesso esse conteúdo?
Para entender encontrabilidade em um sistema 
É bom entender primeiro o que é 
Engenharia Cognitiva
Engenharia cognitiva 
Formalizada por Donald 
Norman em 1986, é uma 
abordagem que reúne 
conhecimentos mistos de 
ciência cognitiva, psicologia 
cognitiva e fatores humanos 
ao design de interfaces.
Engenharia cognitiva - conceitos básicos 
O designer cria um modelo de design, um modelo mental de como o sistema 
deve e comportar, baseado nos seu modelo de usuário e tarefa. 
Modelo de design implementado = Imagem do sistema 
O usuário real interage com a imagem do sistema e cria seu modelo mental da aplicação.
Engenharia cognitiva - conceitos básicos 
A tarefa do designer é desenvolver o modelo de design de um sistema 
que se aproxime do modelo mental da aplicação do usuário real. 
A solução é que o designer entenda o usuário. Para isso Norman propõe a teoria da ação.
O designer deve realizar as melhores escolhas para isso. deve 
escolher os padrões de interação, elementos e feedbacks mais 
adequados.
Para AVALIAR se uma interface cumpre melhor este papel, 
pode usar algumas técnicas de 
INSPEÇÃO DE USABILIDADE.
Mas para projetar uma interface adequada, deve planejar a 
ARQUITET URA DA INFORMAÇÃO.
Arquitetura da Informação 
é o design estrutural de ambientes de informação compartilhada, abrangendo 
aspectos de organizar e etiquetar conteúdos e funcionalidades para apoiar a 
encontrabilidade e usabilidade destes ambientes.
São aspectos importantes da AI 
1. O levantamento do inventário de conteúdos e funcionalidades 
aderentes ao comportamento do usuário em um contexto de uso; 
2.A organização, categorização e priorização dos itens de inventário 
3.A definição de metadados, narrativas, casos de uso, estruturas de 
navegação (menus, filtros, ordenações) e busca.
Escolhas de AI podem ser 
redundantes e inconsistentes 
com padrões exatos, desde que 
reflitam o modelo mental do 
usuário.
Segundo Louis Rosenfeld and Peter Morville, 
Arquitetura da informação é: 
1) O design estrutural para 
ambientes de informação 
compartilhada 
Redesign must die
Segundo Louis Rosenfeld and Peter Morville, 
Arquitetura da informação é: 
2) A combinação de organização, labeling, busca e navegação para sistemas 
digitais
Segundo Louis Rosenfeld and Peter Morville, 
Arquitetura da informação é: 
3) A arte ou ciência de modelar 
produtos informacionais e 
experiências para apoiar usabilidade 
e encontrabilidade
Segundo Louis Rosenfeld and Peter Morville, 
Arquitetura da informação é: 
4) Uma disciplina emergente e comunidade de práticas focadas em 
trazer princípios de design e arquitetura para o cenário digital
Pessoas 
Cont exto 
Conteúdo
Arquitetura da 
Informação 
Engenharia de 
Software Design Gráfico 
Sociologia e 
Antropologia 
Ciência da 
informação 
Engenharia 
cognitiva 
Ciência da 
computação 
Psicologia 
organizacional Educação
Diagramas por Peter Morville http://prezi.com/aafmvya6bk7t/understanding-information-architecture/
Diagramas por Peter Morville http://prezi.com/aafmvya6bk7t/understanding-information-architecture/
cliente ≠ usuário ≠ designer 
diferentes objetivos, experiências e modelos-mentais
informação ≠ dados 
Não modelamos bancos de dados, modelamos informações. 
AI é para o frontend, não o backend. 
Dados são fatos e figuras.
Arquitetura da Informação 
Estruturar, organizar e etiquetar. 
Determinar os níveis corretos de granularidade para 
os átomos de informação e como relacioná-los
O conteúdo possui várias categorias possíveis. 
Altura? 
Formato? 
Peso? 
Cor?
Como organizar filmes? . 
locadora de DVDs e cafeteria Cinecittà / foto: tatianacaju@gmail.com
. Diretor 
locadora de DVDs e cafeteria Cinecittà / foto: tatianacaju@gmail.com
perfil do público: aficcionados 
locadora de DVDs e cafeteria Cinecittà / foto: tatianacaju@gmail.com
perfil do público: geral 
locadora de DVDs e cafeteria Cinecittà / foto: tatianacaju@gmail.com
Que critérios para organizar roupas?
Vamos vazer um inventário de conteúdo
casacos 
ca m is a s 
sociais 
chapéus 
ro u p a de cama 
trecos 
vestidos 
bolsas 
blazersblusas 
banho 
cu e ca s meias 
gravatas 
trecos 
malha be r m u d a 
sapatos 
ca lcin ha s 
sut iãs 
pijamas 
meias 
malhas 
shorts 
perfumes 
firula
Gavetas-menus
Gavetas-menus 
submenus submenus submenus
e numa loja, tem diferença?
localização dos produtos nas prateleiras 
refletem comportamento de compra
organizar sua gaveta de meias... 
...depende dos perfis de uso.
cauda longa.
categorizar vs ordenar
categorizar vs ordenar
Processo de AI
1. Colha informações sobre os usuários
Pesquisa é minerar dados 
e colher informações. 
‣ Avaliação do SAC, feedback, 
‣ Indicadores públicos (Scarface) 
‣ Benchmarking (direto e indireto) 
‣ Etnografia online, 
‣ Entrevistas, 
‣ Questionários, 
‣ Focus group 
‣ Análise métrica, 
‣ etc...
2. Crie personas, defina a focal, e crie cenários 
pala levantar suas user stories e requisitos 
(conteúdos e funcionalidades)
No Globo Repórter desta noite você vai ver… 
USUÁRIOS: 
Quem são? 
O que gostam e desgostam? 
Quais suas limitações? (restrito) 
E suas taras (aficcionado)?
3. Defina os metadados de seu conteúdo
plataforma para bandas independentes página da banda 
thumbnail 
integrantes 
nome 
instrumentos 
avatar 
email 
nascimento 
sobre (texto) 
atalhos 
facebook 
twitter 
orkut 
skype 
Se é produtor 
Se é administrador da página do artista 
agenda 
Título 
descrição 
entrada 
paga preço 
gratuita 
1kg de alimento 
não divulgado 
data 
hora 
nome da casa de show 
estado 
cidade 
endereco 
outras bandas 
flyer 
páginas 
release 
etc 
título
4. Documente a arquitetura com fluxos, 
protótipos e colha feedback
Abrir a pastinha do desktop

Weitere ähnliche Inhalte

Was ist angesagt?

Projeto de Interface de Usuário
Projeto de Interface de UsuárioProjeto de Interface de Usuário
Projeto de Interface de UsuárioTatiana Tavares
 
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...Maiara Zenatti
 
Usabilidade para Pequenos e Médios Projetos Web
Usabilidade para Pequenos e Médios Projetos WebUsabilidade para Pequenos e Médios Projetos Web
Usabilidade para Pequenos e Médios Projetos WebPaulo Coimbra
 
Usabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informaçãoUsabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informaçãoAlan Vasconcelos
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na WebMarcelo Vianna
 
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
Capítulo 2   compreendendo e conceitualizando a interação [ final ]Capítulo 2   compreendendo e conceitualizando a interação [ final ]
Capítulo 2 compreendendo e conceitualizando a interação [ final ]M. Torres
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshareguest5ccda
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)DesignCarminatti
 
Inteligência Artificial
Inteligência ArtificialInteligência Artificial
Inteligência ArtificialLincolm Aguiar
 
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...Marcelo Ramos
 
Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02Carlos Rosemberg
 
Perfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHCPerfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHCRos Galabo, PhD
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de SitesSimone Cervantes
 
O processo de design de interação
O processo de design de interaçãoO processo de design de interação
O processo de design de interaçãoRobson Santos
 
Modelos Conceituais - parte 1
Modelos Conceituais - parte 1Modelos Conceituais - parte 1
Modelos Conceituais - parte 1Erico Fileno
 
Quero Ser Social Media - Monitoramento e Métricas
Quero Ser Social Media - Monitoramento e MétricasQuero Ser Social Media - Monitoramento e Métricas
Quero Ser Social Media - Monitoramento e MétricasGabriel Ishida
 
Técnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidadeTécnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidadeRobson Santos
 

Was ist angesagt? (20)

Projeto de Interface de Usuário
Projeto de Interface de UsuárioProjeto de Interface de Usuário
Projeto de Interface de Usuário
 
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
 
Oficina protótipos dia 1
Oficina protótipos   dia 1Oficina protótipos   dia 1
Oficina protótipos dia 1
 
Usabilidade para Pequenos e Médios Projetos Web
Usabilidade para Pequenos e Médios Projetos WebUsabilidade para Pequenos e Médios Projetos Web
Usabilidade para Pequenos e Médios Projetos Web
 
Usabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informaçãoUsabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informação
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
 
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
Capítulo 2   compreendendo e conceitualizando a interação [ final ]Capítulo 2   compreendendo e conceitualizando a interação [ final ]
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
 
Inteligência Artificial
Inteligência ArtificialInteligência Artificial
Inteligência Artificial
 
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
 
Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02
 
9 regras usabilidade
9 regras usabilidade9 regras usabilidade
9 regras usabilidade
 
Perfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHCPerfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHC
 
Cd - aulas 06 e 07
Cd - aulas 06 e 07Cd - aulas 06 e 07
Cd - aulas 06 e 07
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de Sites
 
O processo de design de interação
O processo de design de interaçãoO processo de design de interação
O processo de design de interação
 
Modelos Conceituais - parte 1
Modelos Conceituais - parte 1Modelos Conceituais - parte 1
Modelos Conceituais - parte 1
 
Quero Ser Social Media - Monitoramento e Métricas
Quero Ser Social Media - Monitoramento e MétricasQuero Ser Social Media - Monitoramento e Métricas
Quero Ser Social Media - Monitoramento e Métricas
 
Técnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidadeTécnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidade
 

Ähnlich wie Arquitetura da Informação e Card Sorting

Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoWellington Marion
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de InterfacesAna Migowski
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...Rio Info
 
Ux Café s02e05 | 04.06.18 - ARQUITETURA DE INFORMAÇÃO: Como organizar e prior...
Ux Café s02e05 | 04.06.18 - ARQUITETURA DE INFORMAÇÃO: Como organizar e prior...Ux Café s02e05 | 04.06.18 - ARQUITETURA DE INFORMAÇÃO: Como organizar e prior...
Ux Café s02e05 | 04.06.18 - ARQUITETURA DE INFORMAÇÃO: Como organizar e prior...Rafael Burity
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenáriosposgraduacaorj
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAndré Constantino da Silva
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosawudrs
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenáriosposgraduacaorj
 
Os desafios do Arquiteto de Informação como UX Expert: Criatividade e Inovação.
Os desafios do Arquiteto de Informação como UX Expert: Criatividade e Inovação.Os desafios do Arquiteto de Informação como UX Expert: Criatividade e Inovação.
Os desafios do Arquiteto de Informação como UX Expert: Criatividade e Inovação.Impacta Eventos
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informaçãopospipoca
 
Inovação Centrada no Usuário
Inovação Centrada no UsuárioInovação Centrada no Usuário
Inovação Centrada no UsuárioMourylise Heymer
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoInstituto Faber-Ludens
 
Workshop: Ouvindo usuários e stakeholders
Workshop: Ouvindo usuários e stakeholdersWorkshop: Ouvindo usuários e stakeholders
Workshop: Ouvindo usuários e stakeholdersNeue Labs
 
Keynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãOKeynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãOAna Brambilla
 
Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Instituto Faber-Ludens
 
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2wudrs
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Doisnovemeia Publicidade
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGELuiz Agner
 

Ähnlich wie Arquitetura da Informação e Card Sorting (20)

Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de Informação
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Ux Café s02e05 | 04.06.18 - ARQUITETURA DE INFORMAÇÃO: Como organizar e prior...
Ux Café s02e05 | 04.06.18 - ARQUITETURA DE INFORMAÇÃO: Como organizar e prior...Ux Café s02e05 | 04.06.18 - ARQUITETURA DE INFORMAÇÃO: Como organizar e prior...
Ux Café s02e05 | 04.06.18 - ARQUITETURA DE INFORMAÇÃO: Como organizar e prior...
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Os desafios do Arquiteto de Informação como UX Expert: Criatividade e Inovação.
Os desafios do Arquiteto de Informação como UX Expert: Criatividade e Inovação.Os desafios do Arquiteto de Informação como UX Expert: Criatividade e Inovação.
Os desafios do Arquiteto de Informação como UX Expert: Criatividade e Inovação.
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Inovação Centrada no Usuário
Inovação Centrada no UsuárioInovação Centrada no Usuário
Inovação Centrada no Usuário
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de Informação
 
Workshop: Ouvindo usuários e stakeholders
Workshop: Ouvindo usuários e stakeholdersWorkshop: Ouvindo usuários e stakeholders
Workshop: Ouvindo usuários e stakeholders
 
Keynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãOKeynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãO
 
Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013
 
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
 

Mehr von Marcello Cardoso

Engenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMEngenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMMarcello Cardoso
 
Design de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaDesign de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaMarcello Cardoso
 
DI - Questionários e entrevistas
DI - Questionários e entrevistasDI - Questionários e entrevistas
DI - Questionários e entrevistasMarcello Cardoso
 
Tudo sobre Design de Interação
Tudo sobre Design de InteraçãoTudo sobre Design de Interação
Tudo sobre Design de InteraçãoMarcello Cardoso
 
Palestra o marketing não funciona mais sozinho - Fumsoft
Palestra   o marketing não funciona mais sozinho - FumsoftPalestra   o marketing não funciona mais sozinho - Fumsoft
Palestra o marketing não funciona mais sozinho - FumsoftMarcello Cardoso
 
UNA - Eng Usa '12 - aula 04
UNA  - Eng Usa '12 - aula 04UNA  - Eng Usa '12 - aula 04
UNA - Eng Usa '12 - aula 04Marcello Cardoso
 
UNA - Eng Usa '12 - aula 03
UNA  - Eng Usa '12 - aula 03UNA  - Eng Usa '12 - aula 03
UNA - Eng Usa '12 - aula 03Marcello Cardoso
 
UNA - Eng Usa '12 - aula 01
UNA  - Eng Usa '12 - aula 01UNA  - Eng Usa '12 - aula 01
UNA - Eng Usa '12 - aula 01Marcello Cardoso
 
UNA - Eng Usa '12 - aula 05
UNA  - Eng Usa '12 - aula 05UNA  - Eng Usa '12 - aula 05
UNA - Eng Usa '12 - aula 05Marcello Cardoso
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Marcello Cardoso
 
Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Marcello Cardoso
 
Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04Marcello Cardoso
 
Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Marcello Cardoso
 
Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02Marcello Cardoso
 
Newton Paiva - DI - Aula 02
Newton Paiva - DI - Aula 02Newton Paiva - DI - Aula 02
Newton Paiva - DI - Aula 02Marcello Cardoso
 
Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03Marcello Cardoso
 
Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04Marcello Cardoso
 

Mehr von Marcello Cardoso (20)

Engenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMEngenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PM
 
Design de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaDesign de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção Semiótica
 
Percurso cognitivo
Percurso cognitivoPercurso cognitivo
Percurso cognitivo
 
DI - Questionários e entrevistas
DI - Questionários e entrevistasDI - Questionários e entrevistas
DI - Questionários e entrevistas
 
Tudo sobre Design de Interação
Tudo sobre Design de InteraçãoTudo sobre Design de Interação
Tudo sobre Design de Interação
 
User Story Mapping
User Story MappingUser Story Mapping
User Story Mapping
 
Palestra o marketing não funciona mais sozinho - Fumsoft
Palestra   o marketing não funciona mais sozinho - FumsoftPalestra   o marketing não funciona mais sozinho - Fumsoft
Palestra o marketing não funciona mais sozinho - Fumsoft
 
UNA - Eng Usa '12 - aula 04
UNA  - Eng Usa '12 - aula 04UNA  - Eng Usa '12 - aula 04
UNA - Eng Usa '12 - aula 04
 
UNA - Eng Usa '12 - aula 03
UNA  - Eng Usa '12 - aula 03UNA  - Eng Usa '12 - aula 03
UNA - Eng Usa '12 - aula 03
 
UNA - Eng Usa '12 - aula 01
UNA  - Eng Usa '12 - aula 01UNA  - Eng Usa '12 - aula 01
UNA - Eng Usa '12 - aula 01
 
UNA - Eng Usa '12 - aula 05
UNA  - Eng Usa '12 - aula 05UNA  - Eng Usa '12 - aula 05
UNA - Eng Usa '12 - aula 05
 
Una testes - aula 07 e 08
Una   testes - aula 07 e 08Una   testes - aula 07 e 08
Una testes - aula 07 e 08
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06
 
Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05
 
Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04
 
Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03
 
Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02
 
Newton Paiva - DI - Aula 02
Newton Paiva - DI - Aula 02Newton Paiva - DI - Aula 02
Newton Paiva - DI - Aula 02
 
Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03
 
Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04
 

Arquitetura da Informação e Card Sorting

  • 1. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Arquitetura da Informação Marcello de Campos Cardoso www.mcardoso.com.br | www.latitude14.com.br mcardoso@latitude14.com.br #1
  • 2. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Arquitetura da Informação cuidando da encontrabilidade do sistema
  • 3. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Existem muitos caminhos, desafios e benefícios em um sistema
  • 4. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Como pensam os usuários? (pacman) Que caminho percorrem? (maze) Quais os desafios? (ghosts)
  • 5. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Problema Arquitetos não vivem na casa que projetam, e não estão prontos para entenderem as necessidades de longo tempo. Senso comum é uma boa ferramenta para sistemas simples, mas navegação intuível ocorre melhor quando projetada.
  • 6. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 3 perguntas do explorador Estou no lugar certo? Aqui tem o que procuro? Como acesso esse conteúdo?
  • 7. Para entender encontrabilidade em um sistema É bom entender primeiro o que é Engenharia Cognitiva
  • 8. Engenharia cognitiva Formalizada por Donald Norman em 1986, é uma abordagem que reúne conhecimentos mistos de ciência cognitiva, psicologia cognitiva e fatores humanos ao design de interfaces.
  • 9. Engenharia cognitiva - conceitos básicos O designer cria um modelo de design, um modelo mental de como o sistema deve e comportar, baseado nos seu modelo de usuário e tarefa. Modelo de design implementado = Imagem do sistema O usuário real interage com a imagem do sistema e cria seu modelo mental da aplicação.
  • 10.
  • 11. Engenharia cognitiva - conceitos básicos A tarefa do designer é desenvolver o modelo de design de um sistema que se aproxime do modelo mental da aplicação do usuário real. A solução é que o designer entenda o usuário. Para isso Norman propõe a teoria da ação.
  • 12.
  • 13. O designer deve realizar as melhores escolhas para isso. deve escolher os padrões de interação, elementos e feedbacks mais adequados.
  • 14. Para AVALIAR se uma interface cumpre melhor este papel, pode usar algumas técnicas de INSPEÇÃO DE USABILIDADE.
  • 15. Mas para projetar uma interface adequada, deve planejar a ARQUITET URA DA INFORMAÇÃO.
  • 16. Arquitetura da Informação é o design estrutural de ambientes de informação compartilhada, abrangendo aspectos de organizar e etiquetar conteúdos e funcionalidades para apoiar a encontrabilidade e usabilidade destes ambientes.
  • 17. São aspectos importantes da AI 1. O levantamento do inventário de conteúdos e funcionalidades aderentes ao comportamento do usuário em um contexto de uso; 2.A organização, categorização e priorização dos itens de inventário 3.A definição de metadados, narrativas, casos de uso, estruturas de navegação (menus, filtros, ordenações) e busca.
  • 18. Escolhas de AI podem ser redundantes e inconsistentes com padrões exatos, desde que reflitam o modelo mental do usuário.
  • 19. Segundo Louis Rosenfeld and Peter Morville, Arquitetura da informação é: 1) O design estrutural para ambientes de informação compartilhada Redesign must die
  • 20. Segundo Louis Rosenfeld and Peter Morville, Arquitetura da informação é: 2) A combinação de organização, labeling, busca e navegação para sistemas digitais
  • 21. Segundo Louis Rosenfeld and Peter Morville, Arquitetura da informação é: 3) A arte ou ciência de modelar produtos informacionais e experiências para apoiar usabilidade e encontrabilidade
  • 22. Segundo Louis Rosenfeld and Peter Morville, Arquitetura da informação é: 4) Uma disciplina emergente e comunidade de práticas focadas em trazer princípios de design e arquitetura para o cenário digital
  • 23. Pessoas Cont exto Conteúdo
  • 24. Arquitetura da Informação Engenharia de Software Design Gráfico Sociologia e Antropologia Ciência da informação Engenharia cognitiva Ciência da computação Psicologia organizacional Educação
  • 25.
  • 26.
  • 27. Diagramas por Peter Morville http://prezi.com/aafmvya6bk7t/understanding-information-architecture/
  • 28. Diagramas por Peter Morville http://prezi.com/aafmvya6bk7t/understanding-information-architecture/
  • 29. cliente ≠ usuário ≠ designer diferentes objetivos, experiências e modelos-mentais
  • 30. informação ≠ dados Não modelamos bancos de dados, modelamos informações. AI é para o frontend, não o backend. Dados são fatos e figuras.
  • 31. Arquitetura da Informação Estruturar, organizar e etiquetar. Determinar os níveis corretos de granularidade para os átomos de informação e como relacioná-los
  • 32. O conteúdo possui várias categorias possíveis. Altura? Formato? Peso? Cor?
  • 33. Como organizar filmes? . locadora de DVDs e cafeteria Cinecittà / foto: tatianacaju@gmail.com
  • 34. . Diretor locadora de DVDs e cafeteria Cinecittà / foto: tatianacaju@gmail.com
  • 35. perfil do público: aficcionados locadora de DVDs e cafeteria Cinecittà / foto: tatianacaju@gmail.com
  • 36. perfil do público: geral locadora de DVDs e cafeteria Cinecittà / foto: tatianacaju@gmail.com
  • 37. Que critérios para organizar roupas?
  • 38. Vamos vazer um inventário de conteúdo
  • 39. casacos ca m is a s sociais chapéus ro u p a de cama trecos vestidos bolsas blazersblusas banho cu e ca s meias gravatas trecos malha be r m u d a sapatos ca lcin ha s sut iãs pijamas meias malhas shorts perfumes firula
  • 42. e numa loja, tem diferença?
  • 43. localização dos produtos nas prateleiras refletem comportamento de compra
  • 44. organizar sua gaveta de meias... ...depende dos perfis de uso.
  • 49. 1. Colha informações sobre os usuários
  • 50. Pesquisa é minerar dados e colher informações. ‣ Avaliação do SAC, feedback, ‣ Indicadores públicos (Scarface) ‣ Benchmarking (direto e indireto) ‣ Etnografia online, ‣ Entrevistas, ‣ Questionários, ‣ Focus group ‣ Análise métrica, ‣ etc...
  • 51. 2. Crie personas, defina a focal, e crie cenários pala levantar suas user stories e requisitos (conteúdos e funcionalidades)
  • 52. No Globo Repórter desta noite você vai ver… USUÁRIOS: Quem são? O que gostam e desgostam? Quais suas limitações? (restrito) E suas taras (aficcionado)?
  • 53. 3. Defina os metadados de seu conteúdo
  • 54.
  • 55. plataforma para bandas independentes página da banda thumbnail integrantes nome instrumentos avatar email nascimento sobre (texto) atalhos facebook twitter orkut skype Se é produtor Se é administrador da página do artista agenda Título descrição entrada paga preço gratuita 1kg de alimento não divulgado data hora nome da casa de show estado cidade endereco outras bandas flyer páginas release etc título
  • 56. 4. Documente a arquitetura com fluxos, protótipos e colha feedback
  • 57. Abrir a pastinha do desktop
  • 58. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Arquitetura da Informação Card Sorting Marcello de Campos Cardoso www.mcardoso.com.br | www.latitude14.com.br mcardoso@latitude14.com.br #2
  • 59. et nografia Be n c hma r k in g pesquisa desenvolvimento validação Questionários e entrevistas protot ipação personas St o r y mapping Card S ort ing Análise Heurística Pe r c u r s o Cognit ivo MIS Método de Inspeção Semiótica focus group testes de usabilidade MA C Método de Avaliação de comunicabilidade net nografia
  • 60. Card S ort ing como introduzir metodologia em uma empresa?
  • 61. "Card Sorting é uma técnica de design centrada no usuário para aumentar a encontrabilidade (findability) de um sistema. O processo envolve organizar uma série de cartões, em cada um escrito um pedaço de conteúdo ou funcionalidade, em grupos que façam sentido para os usuários ou participantes." - Dona Spencer
  • 62.
  • 63. "...Pode prover insight nos modelos mentais dos usuários, iluminando a maneira tácita com que agrupam, ordenam e nomeiam tarefas e conteúdos nas suas cabeças." - IA for the WWW
  • 64. É uma maneira barata e eficiente para encontrar padrões em como as pessoas pensam, onde esperam encontrar conteúdos ou ferramentas. Entendendo isso podemos projetar algo mais fácil de usar (com melhor usabilidade).
  • 65. Serve para definir ✓Estrutura geral da informação ✓Sugestões para navegação (menus) ✓Taxonomia
  • 66. Card Sorting serve para compreender como as pessoas pensam e aplicar na estrutura do sistema
  • 67. Vantagens ✓Fácil - Para organizador e participantes ✓Barato - O custo é o de papel, canetas e tempo. ✓Rápido - Dificilmente ultrapassa 1h a aplicação ✓Confiável - Utilizado por mais de 10 anos ✓Envolve o usuário - Múltiplos modelos mentais
  • 68. Limitações ✓Não foca na tarefa É uma técnica de conteúdo. Se as tarefas forem ignoradas durante a aplicação, teremos uma arquitetura ruim ✓Resultados podem variar Alguns tópicos e assuntos são menos precisos ✓Interpretação subjetiva Depende da experiência do avaliador
  • 69. Tipos Aberto Fechado com grupos pré-definidos sem grupos pré-definidos ou Descobrir Validar
  • 70. Quantos usuários? 15 (90% de fidelidade) pois é uma técnica gerativa
  • 71. 3º tipo: Delphi Diferentes grupos de usuários iteram com o resultado do card anterior até que não hajam mais mudanças radicais.
  • 72. Que tal usar Card Sorting para avaliar um site?
  • 73. Tree testing O usuário tem a tarefa de encontrar um conteúdo em uma estrutura
  • 75. 0. Antes... Para ser eficaz, precisamos primeiro levantar: ✓Perfis de uso (Se forem muito diferentes, separar grupos) ✓Necessidades dos usuários ✓Regras do negócio
  • 76. 1. Inventário de conteúdo Levantar o que for relevante ✓Existente ✓Planejado (incluir conteúdos de releases evita retrabalho futuro) Granularidade: Escolher ferramentas/conteúdos do mesmo nível para evitar confusão com o usuário. Quantidade: O ideal é trabalhar entre 30 e 100 itens. Procure priorizar.
  • 77. 2. Escrever cartões Escreva os conteúdos nos cartões, com o mínimo de descrição (rápido de ler) que permita o entendimento. Ranking de votant es Ranking de votant es Numere todos os cartões para facilitar a organização posterior. Escreva este número discretamente atrás de cada cartão.
  • 78. 3. Aplicação ✓ Coloque os cartões em uma mesa de tamanho adequado ✓ Acrescente alguns cartões em branco e uma caneta ✓ Receba e instrua os participantes
  • 79. 3. Aplicação: regras ✓ Em equipe, os cartões devem ser agrupados por afinidade ✓ As categorias devem receber um nome da equipe. - Podem criar sub-grupos - Podem acrescentar cartões - Podem remover cartões - Podem sugerir novos nomes para conteúdos
  • 80. 3. Aplicação: dicas pro condutor ✓ Oriente sem tendenciar, não influencie ✓ Não deixe a peteca cair, mantenha a energia ✓ Anote comentários e dicas importantes
  • 81. 3. Aplicação: roteiro Obrigado por vir. Estamos (re)desenhando o Sitema X para torná-lo tão fácil quanto possível. Na sua frente existe uma pilha de cartões que representam o conteúdo. Trabalhando juntos vocês devem negociar e juntar as cartas em grupos que façam mais sentido. Não preocupem em pensar a navegação; nós vamos cuidar disso. Também não se preocupem em organizar a informação como ela está hoje. Estamos interessados em ver como você se organizar em grupos que você esperaria encontrar as coisas dentro Quando terminarem de agrupar, podem nomear cada grupo. Podem também fazer sub-grupos se acharem necessário. Se algo estiver faltando, pode usar um cartão em branco para adicioná-lo. Além disso, se algum estiver confuso, pode sugerir outro termo escrevendo no próprio cartão, E se achar que algo está sobrando, pode fazer um grupo para o lixo..
  • 82. 4. Depois ✓ “Feche” os grupos deixando o cartão com o nome sobre os demais ✓ Valide perguntando aonde estão alguns cartões importantes ✓ Fotografe o resultado, Ou anote em uma planilha. ✓ Se outros grupos realizaram o exercício, procure por padrões ✓ Você pode usar uma planilha eletrônica para ajudar
  • 83. 4. Depois - interpretando Pontos divergentes não são necessariamente ruins. Indicam ao designer conteúdos difíceis de entender, ou que podem estar em mais de um lugar. Conteúdos eletrônicos são ligados hipertextualmente e possuem redundâncias positivas. Perfis diferentes podem demandar layouts diferentes (personas focais)
  • 84. Dica da Home Após terminado o exercício, pergunte quais conteúdos gostariam de ver na primeira página.
  • 85. Consideração Pode não entregar a estrutura final, mas oferece informações valiosas para a tomada de decisões.
  • 86. Desafios Card Sorting são mais difíceis de aplicar em: ✓ Sistemas muito grandes ✓ Conteúdos muito heterogêneos ✓ Conteúdos complexos para especialistas ✓ Inventário de conteúdo (apenas o que for relevante)
  • 87. Ferramentas online Card Sorting são mais difíceis de aplicar em: • Websort • OptimalSort • SimpleCardSort • Concept Codify • usabilitiTEST