Design de Interação
Aula 1
Por que razões sua empresa tem
um site?
• Por que todo mundo tem
• Por que é preciso fazer e-commerce
• Por que quer falar...
O que contém a interface?
Imagens
(fotos)
Texto
Som
Vídeo
Labels
Formas
Ícones
Fontes
(letras)
Navegação
(processo)
Navega...
Imagens
(fotos)
Texto
Som
Vídeo
Labels
Formas
Ícones
Fontes
(letras)
Navegação
(processo)
Navegação
(busca)
Cores
Diagrama...
Então, seu trabalho é...
Tcha
Nan
Busine$$
Usuário
Consumidor
Cliente ou Não
I
N
T
E
R
F
A
C
E
Ergo...
• A interface tem que equilibrar os dois
lados:
– O que o negócio oferece
– O que o consumidor vai buscar ali
Erros comuns
• Achar que o usuário vai buscar um site
simples
• Achar que os usuários preferem as coisas
fáceis sempre
• A...
Esta é a sua obrigação!
• I.S.O. 9241-11 (1998):
“Usabilidade é a eficiência, eficácia e satisfação
com a qual os públicos...
Por onde começar?
• Princípios da Biblioteconomia?
• Taxonomia?
• Dicionários?
Nããooooooooooooo
• Etnografia
• Modelos Men...
Consumidor também é gente
• Dorme
• Come
• Faz as coisas por hábito
• Vive numa determinada cultura
• Tem uma experiência ...
Etnografia
• Observação
• Sem interferência
• Melhor quando demora mais tempo
• 1 dia é pouco, mas sempre é melhor que
nad...
Modelos Mentais
• Descobrir como as pessoas fazem as
coisas.
• Todas essas pessoas tem que fazer parte
do meu público-alvo.
Criar questionário
• Tenho que fazer as mesmas perguntas
para:
– Diferentes pessoas+Diferentes situações
– Mesmas pessoas ...
Técnicas de Interaction Design
Arquitetura de Informação
www.UsabilityExpert.co
m.br
Copyright, 2005.
45
www.UsabilityExpert.co
m.br
Copyright, 2005.
46
Assim como cada prédio serve a um
propósito, a AI é sempre única para
cada produto
• Arquitetura
• Design
• Construção
• A...
As arquiteturas nos fazem
reagir
• Assim como alguns
prédios parecem
labirintos, outros nos
deixam confortáveis.
• Labirin...
Definições de AI
• A combinação da forma de organizar, dar
nomes e de esquematizar a navegação
dentro de um sistema de inf...
Lida com os seguintes
elementos
• Dados: fatos ou números.
• Conhecimento: é aquilo que está na cabeça das
pessoas.
• Info...
www.UsabilityExpert.co
m.br
Copyright, 2005.
51
Lida com os seguintes elementos
• Estruturação:determinação do nível de gr...
www.UsabilityExpert.co
m.br
Copyright, 2005.
52
O que não é AI
• Design gráfico não é AI!
• Desenvolvimento de software nã...
53
Por que AI é importante?
• Custo de encontrar a informação – tempo e produtividade.
• Custo de não encontrar a informaç...
www.UsabilityExpert.co
m.br
Copyright, 2005.
54
Entregáveis em Arquitetura de
Informação
• Wireframes
• Mapas
• Controle d...
55
Arquitetura de Informação
Servidor Web
Pagamento User/Admin Conteúdo
Base de Dados
Apresentação
Lógica do
Negócio
Dados...
56
As três camadas de AI
Camada de Apresentação
Responsável por toda a apresentação
com os usuários do computador.
Camada ...
57
Arquitetura Lógica vs. Física
Arquitetura Lógica
Os componentes de software
e as funcionalidades
desejadas desses
compo...
Fatores que levamos em conta quando
escolhemos uma arquitetura
 Funcionalidade— as funções que o sistema precisa
implemen...
Fatores que levamos em conta quando
escolhemos uma arquitetura (cont.)
 Segurança—habilidade do sistema de prevenir o uso...
Home da CNN – em 23 de Agosto de
2001 & em 11 de Setembro de 2001
60
CNN.com Homepage August 23, 2001
CNN.com Homepage Sep...
61
Conceitos de AI
• Sistemas complexos
• Redes de
conhecimento
• Comportamento de
busca de informação
• Trabalho invisível
62
Praticando Arquitetura de
Informação
Contexto
Conteúdo Usuários
- Objetivos do negócio.
- Políticas.
- Cultura.
- Tecno...
Entendendo o contexto do
negócio
• O que o torna tão especial?
• Quais seus objetivos estratégicos para os
próximos anos?
...
Entendendo o conteúdo do seu
sistema
• As coisas que as
pessoas procuram:
– Documentos,
– Aplicativos,
– Serviços,
– Ajuda...
Entendendo os usuários do seu
sistema
• A arquitetura de informação começa nos
usuários e na razão pela qual eles usam seu...
66
Sistemas de Arquitetura de Informação
67
Componentes da Arquitetura de
Informação
• Sistemas de organização – como
categorizamos, por cronologia ou assunto.
• S...
Método alternativo de categorizar os
componentes da AI
• Ajudas para a procura.
• Ajudas para a busca.
• Conteúdos e taref...
Acredite ou não. Estamos todos nos
tornando bibliotecários!!!
• Todos temos que lidar com a ambiguidade inerente às
palavr...
Conteúdos e tarefas são o destino final
dos usuários do seu sistema
• Cabeçalhos (labels) – nomes dos grandes grupos de
co...
Os componentes “ invisíveis”
• Controle do vocábulo e suas variantes –
saber qual é o mais comum/conhecido e quais
são sua...
A maneira de procurar depende do
estilo de navegação do usuário
• Sistemas organizacionais – taxonomia e hierarquias.
• Si...
Estilo Pragmático
www.UsabilityExpert.co
m.br
Copyright, 2005.
74
www.UsabilityExpert.co
m.br
Copyright, 2005.
75
www.UsabilityExpert.co
m.br
Copyright, 2005.
76
77
Estilo Lost
78
Estilo Buscador
Tudo sobre um assunto.
Usado em pesquisas acadêmicas
Algumas coisas boas.
Comportamento exploratório
A ...
Buscas são sistemas automatizados e
precisam de query
• Interface de busca – mostra o grau de flexibilidade da
ferramenta....
80
Busca para mortais
Usuário faz
a pergunta
Magia
Usuário
recebe a resposta
Fim
Este, infelizmente,
não é o modelo de
com...
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Upcoming SlideShare
Loading in …5
×

Aula 1 - Interaction Design From Ethnography, Mental Models to IA

381 views

Published on

Published in: Design
  • Be the first to comment

Aula 1 - Interaction Design From Ethnography, Mental Models to IA

  1. 1. Design de Interação Aula 1
  2. 2. Por que razões sua empresa tem um site? • Por que todo mundo tem • Por que é preciso fazer e-commerce • Por que quer falar com o cliente • Novo canal de comunicação
  3. 3. O que contém a interface? Imagens (fotos) Texto Som Vídeo Labels Formas Ícones Fontes (letras) Navegação (processo) Navegação (busca) Cores Diagramação Rapidez da Resposta Confiabilidade Modernidade tecnológica Robustez Portabilidade
  4. 4. Imagens (fotos) Texto Som Vídeo Labels Formas Ícones Fontes (letras) Navegação (processo) Navegação (busca) Cores Diagramação Rapidez da Resposta Confiabilidade Modernidade tecnológica Robustez Portabilidade Design Conteúdo AI Tecnologia Ajudas
  5. 5. Então, seu trabalho é... Tcha Nan
  6. 6. Busine$$ Usuário Consumidor Cliente ou Não I N T E R F A C E
  7. 7. Ergo... • A interface tem que equilibrar os dois lados: – O que o negócio oferece – O que o consumidor vai buscar ali
  8. 8. Erros comuns • Achar que o usuário vai buscar um site simples • Achar que os usuários preferem as coisas fáceis sempre • Achar que “navegabilidade” ou “fácil de usar” é o que o usuário vai buscar..
  9. 9. Esta é a sua obrigação! • I.S.O. 9241-11 (1998): “Usabilidade é a eficiência, eficácia e satisfação com a qual os públicos do produto alcançam objetivos em um determinado ambiente. – Eficácia: É a capacidade de executar tarefa de forma correta e completa. – Eficiência: São os recursos gastos para conseguir ter eficácia, sejam eles tempo, dinheiro, produtividade, memória. – Satisfação: O conforto e aceitação do trabalho dentro do sistema.”
  10. 10. Por onde começar? • Princípios da Biblioteconomia? • Taxonomia? • Dicionários? Nããooooooooooooo • Etnografia • Modelos Mentais • Card Sorting
  11. 11. Consumidor também é gente • Dorme • Come • Faz as coisas por hábito • Vive numa determinada cultura • Tem uma experiência de de vida X • Escolhe formas de “parecer e aparecer”
  12. 12. Etnografia • Observação • Sem interferência • Melhor quando demora mais tempo • 1 dia é pouco, mas sempre é melhor que nada!
  13. 13. Modelos Mentais • Descobrir como as pessoas fazem as coisas. • Todas essas pessoas tem que fazer parte do meu público-alvo.
  14. 14. Criar questionário • Tenho que fazer as mesmas perguntas para: – Diferentes pessoas+Diferentes situações – Mesmas pessoas +Diferentes situações • Usar a técnica de Laddering. • Colher as respostas • Organizar em grupos e sub grupos • Dar nomes ao grupos e sub grupos
  15. 15. Técnicas de Interaction Design
  16. 16. Arquitetura de Informação
  17. 17. www.UsabilityExpert.co m.br Copyright, 2005. 45
  18. 18. www.UsabilityExpert.co m.br Copyright, 2005. 46
  19. 19. Assim como cada prédio serve a um propósito, a AI é sempre única para cada produto • Arquitetura • Design • Construção • Acabamento • Móveis • Habitantes • Localização 47
  20. 20. As arquiteturas nos fazem reagir • Assim como alguns prédios parecem labirintos, outros nos deixam confortáveis. • Labirintos frustram sempre. • Conforto é sempre mais produtivo. • Pessoas voltam para o que gostam. • Causas da existência de labirintos e maus sites: – Os arquitetos não usam ou habitam o que constroem. – Eles não entenderam completamente o que os usuários precisam. – O tempo muda as forma como as pessoas lidam com a informação. www.UsabilityExpert.com.br Copyright, 2005. 48
  21. 21. Definições de AI • A combinação da forma de organizar, dar nomes e de esquematizar a navegação dentro de um sistema de informação. • O design estrutural de uma espaço de informação que tem por finalidade a finalização de uma tarefa e o acesso intuitivo ao conteúdo. 49
  22. 22. Lida com os seguintes elementos • Dados: fatos ou números. • Conhecimento: é aquilo que está na cabeça das pessoas. • Informação: “exists in the middle messy”, nas seguintes formas – sites, documentos, aplicativos, imagens, etc. • Metadata: objetos que contém a informação ou os dados, tais quais pessoas, documentos, processos, organizações. www.UsabilityExpert.com.br Copyright, 2005. 50
  23. 23. www.UsabilityExpert.co m.br Copyright, 2005. 51 Lida com os seguintes elementos • Estruturação:determinação do nível de granularidade e de relacionamento entre as partes. • Organização:envolve o agrupamento dos componentes de forma inteligível e em categorias distinguíveis. • Nomeação:ser capaz de dar nomes às categorias e aos links. • Encontro:combinação de procura, busca e perguntas, com o correto balanceamento entre as necessidades dos usuários e da empresa. • Gerenciamento:Políticas e procedimentos próprios da empresa. • WIP (work in progress): estudo e gradual conhecimento dos padrões de uso, implicando em melhoria contínua.
  24. 24. www.UsabilityExpert.co m.br Copyright, 2005. 52 O que não é AI • Design gráfico não é AI! • Desenvolvimento de software não é AI! • Engenharia de Usabilidade não é AI! • No entanto, as fronteiras entre as disciplinas torna-se mais confusa e de difícil delimitação a cada dia que passa...
  25. 25. 53 Por que AI é importante? • Custo de encontrar a informação – tempo e produtividade. • Custo de não encontrar a informação – decisões gerenciais. • Valor da educação – quanto vale atingir as pessoas que já estão na frente da tela? • Custo de desenvolvimento – e se, depois de lançar o produto, vc tiver que refazer tudo? • Custo de manutenção – é preciso documentar AI e design!! • Custo de treinamento – quanto mais difícil o sistema, mais erros e maior o investimento (tempo e $$) em treinamento. • Valor da marca – se seu produto não funciona, sua marca será mal vista e receberá comentários ruins...
  26. 26. www.UsabilityExpert.co m.br Copyright, 2005. 54 Entregáveis em Arquitetura de Informação • Wireframes • Mapas • Controle de vocabulário • Esquema da metadata
  27. 27. 55 Arquitetura de Informação Servidor Web Pagamento User/Admin Conteúdo Base de Dados Apresentação Lógica do Negócio Dados Módulos Camadas Níveis
  28. 28. 56 As três camadas de AI Camada de Apresentação Responsável por toda a apresentação com os usuários do computador. Camada da lógica do negócio Responsável por implementar as regras básicas do sistema de acordo com as regras operacionais do negócio. Camada de dados Porvê acesso fácile e confiável aos dados necessário para fazer os sistema funcionar. Exemplos de apresentação: • HTML • Plug-ins de terceiros • Plug-ins próprios Exemplos de bases de dados: • Flat-file • Relacional • Orientada para objetos Dividos em módulos que permitem a aexistência de funcionalidades cmo agendamento de tarefas ou CRM
  29. 29. 57 Arquitetura Lógica vs. Física Arquitetura Lógica Os componentes de software e as funcionalidades desejadas desses componentes. Quando estamos desenhando um site, de uma forma geral, criamos a arquitetura lógica primeiro e isso nos ajuda a definir os elementos da arquitetura física. Arquitetura Física Usualmente, precisamos hospedar e manter o site em terceiros, donos do hardware e do software, além de banda. Isso inclui: – Os computadores onde o software vai rodar. – A rede nas quais as máquinas irão rodar. – Outros hardwares específicos necessários para implementar o design.
  30. 30. Fatores que levamos em conta quando escolhemos uma arquitetura  Funcionalidade— as funções que o sistema precisa implementar.  Flexibilidade e Adaptabilidade—a habilidade do sistema em se adaptar às mudanças de sua função.  Escalabiliade—a habilidade do sistema em suportar grande demanda.  Performance—velocidade percebida do sistema.  Manutenção—Capacidade da empresa de monitorar e gerenciar as mudanças necessárias. 58
  31. 31. Fatores que levamos em conta quando escolhemos uma arquitetura (cont.)  Segurança—habilidade do sistema de prevenir o uso inapropriado de dados ou deter ataque hackers  Confiabilidade— o tempo que se espera que um sistema seja capaz de estar disponível.  Métricas—as mensurações e dados que uma empresa precisa para entender a operação de um sistema.  Custos—o volume de dinheiro investido no design, construção e manutenção de um sistema.  Tempo—número de horas / home e o total de tempo necessário para desenvolver o sistema. 59
  32. 32. Home da CNN – em 23 de Agosto de 2001 & em 11 de Setembro de 2001 60 CNN.com Homepage August 23, 2001 CNN.com Homepage September 11, 2001
  33. 33. 61 Conceitos de AI • Sistemas complexos • Redes de conhecimento • Comportamento de busca de informação • Trabalho invisível
  34. 34. 62 Praticando Arquitetura de Informação Contexto Conteúdo Usuários - Objetivos do negócio. - Políticas. - Cultura. - Tecnologia. - Recursos. - Restrições. - Quem é a audiência. - Tarefas e necessidades. - Comportamento de busca. - Experiência. - Tipos de documentos ou dados. - Objetos que os contém. - Estrutura existente. Tecnologia impõem limites ou dá suporte à imaginação!
  35. 35. Entendendo o contexto do negócio • O que o torna tão especial? • Quais seus objetivos estratégicos para os próximos anos? • Conhecimento tácito & AI. • Logo, cada empresa tem sua AI única! www.UsabilityExpert.com.br Copyright, 2005. 63
  36. 36. Entendendo o conteúdo do seu sistema • As coisas que as pessoas procuram: – Documentos, – Aplicativos, – Serviços, – Ajuda, – Contato. • Ecossitema de informação: – Dono da informação? – Formato? – Estrutura? – Metadata? – Volume? – Dinamismo? 64
  37. 37. Entendendo os usuários do seu sistema • A arquitetura de informação começa nos usuários e na razão pela qual eles usam seu sistema: precisam lidar com a informação, o que gera diferentes comportamentos. • Sua empresa conhece (realmente) o perfil do usuário? – Demografia. – Preferências estéticas. – Padrões de comportamento. – Perfil como usuário. – Segmento e momento do produto. 65
  38. 38. 66 Sistemas de Arquitetura de Informação
  39. 39. 67 Componentes da Arquitetura de Informação • Sistemas de organização – como categorizamos, por cronologia ou assunto. • Sistemas de nomeação – representação – ícones, nomes leigos ou nomes “políticos”. • Sistemas de navegação – movimentação e relação entre os conteúdos. • Sistemas de busca – como vamos nos preparar para as diferentes formas de procurar a informação.
  40. 40. Método alternativo de categorizar os componentes da AI • Ajudas para a procura. • Ajudas para a busca. • Conteúdos e tarefas. • Componentes “invisíveis”. www.UsabilityExpert.com.br Copyright, 2005. 68
  41. 41. Acredite ou não. Estamos todos nos tornando bibliotecários!!! • Todos temos que lidar com a ambiguidade inerente às palavras. Onde catalogar a palavra computador, por exemplo? • Todos temos que lidar com a heterogeneidade dos objetos. Ex.: Sistema decimal de Dewey de catalogação de livros vs site X, Y ou Z. • As pessoas possuem infinitas diferenças de perspectiva das coisas! Olhe as pastas de arquivos de seus companheiros (mesmo job)– ordem e nome. São iguais às suas? • Todos estamos sujeitos às políticas internas. 69
  42. 42. Conteúdos e tarefas são o destino final dos usuários do seu sistema • Cabeçalhos (labels) – nomes dos grandes grupos de conteúdo. • Links no texto – links dentro do texto. • Metadata – ex.: ingredientes de uma receita. • Divisão das partes – unidades lógicas do conteúdo e sua forma de apresentação. • Listas – apresentam as coisas em uma ordem mais conhecida. Ex.: listas cronológicas. • Ajudas seqüenciais (wizards) - ex.: passo 3 de 8. • Localizadores – indicam onde as pessoas estão em relação ao todo. Ex.: breadcrumbs ou trails. 70
  43. 43. Os componentes “ invisíveis” • Controle do vocábulo e suas variantes – saber qual é o mais comum/conhecido e quais são suas variantes. • Thesauri – ligam a palavra ao detalhe ou à visão do todo de um assunto. • Grupos de regras – mostra, nos resultados, quais as variantes sobre o assunto, resolvendo a ambigüidade do tema. 71
  44. 44. A maneira de procurar depende do estilo de navegação do usuário • Sistemas organizacionais – taxonomia e hierarquias. • Sistemas de navegação horizontal – ajudam os usuários a entender onde estão e para onde podem ir. • Sistemas de navegação local - ajudam os usuários a entender onde estão e para onde podem ir numa área específica do site. • Mapas, tabelas e índices – suplementar, visão condensada, sem ou com ordem alfabética. • Guias – suplementar, tópico específico. • Wizards – suplementar, passo-a-passo. Pode ser específico. • Links contextuais – presentes no texto, usado para ligar a conteúdos muito específicos. 72
  45. 45. Estilo Pragmático
  46. 46. www.UsabilityExpert.co m.br Copyright, 2005. 74
  47. 47. www.UsabilityExpert.co m.br Copyright, 2005. 75
  48. 48. www.UsabilityExpert.co m.br Copyright, 2005. 76
  49. 49. 77 Estilo Lost
  50. 50. 78 Estilo Buscador Tudo sobre um assunto. Usado em pesquisas acadêmicas Algumas coisas boas. Comportamento exploratório A coisa certa! Busca de algo específico. http://www.webbrain.com
  51. 51. Buscas são sistemas automatizados e precisam de query • Interface de busca – mostra o grau de flexibilidade da ferramenta. • Linguagem de query – é simples ou é complicada? Aproveita algo aprendido anteriormente? • Algorítmo – é a parte do instrumento de busca que determina qual conteúdo bate com o que o usuário pediu. • Zonas de busca – ex.: só vendas, só suporte. • Encontros – Como os encontros são apresentados, número de resultados, categorias, imagens, etc. 79
  52. 52. 80 Busca para mortais Usuário faz a pergunta Magia Usuário recebe a resposta Fim Este, infelizmente, não é o modelo de comportamento humano!

×