aula 1 - interaction design from ethnography, mental models to ia
TRANSCRIPT
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 com o cliente
• Novo canal de comunicação
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
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
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
• Achar que “navegabilidade” ou “fácil de
usar” é o que o usuário vai buscar..
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.”
Por onde começar?
• Princípios da Biblioteconomia?
• Taxonomia?
• Dicionários?
Nããooooooooooooo
• Etnografia
• Modelos Mentais
• Card Sorting
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”
Etnografia
• Observação
• Sem interferência
• Melhor quando demora mais tempo
• 1 dia é pouco, mas sempre é melhor que
nada!
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 +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
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
• Acabamento
• Móveis
• Habitantes
• Localização
47
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
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
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
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.
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...
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...
www.UsabilityExpert.co
m.br Copyright, 2005.
54
Entregáveis em Arquitetura de
Informação
• Wireframes
• Mapas
• Controle de vocabulário
• Esquema da metadata
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
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
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.
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
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
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
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.
- 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!
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
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
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
66
Sistemas de Arquitetura de Informação
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.
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
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
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
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
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
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 coisa certa!
Busca de algo específico. http://www.webbrain.com
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
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!