O documento discute os principais componentes e conceitos de design de interação e arquitetura de informação. Primeiramente, destaca os elementos que compõem uma interface como imagens, texto, cores, navegação. Em seguida, enfatiza a importância de entender os usuários e seus comportamentos por meio de técnicas como etnografia e modelos mentais para criar interfaces intuitivas. Por fim, explica que a arquitetura de informação lida com a organização, estruturação e nomeação dos conteúdos de forma a facilitar a busca e a

2. Design de Interação
Aula 1

3. 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

5. 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

6. 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

7. Então, seu trabalho é...
Tcha
Nan

8. Busine$$
Usuário
Consumidor
Cliente ou Não
I
N
T
E
R
F
A
C
E

9. Ergo...
• A interface tem que equilibrar os dois
lados:
– O que o negócio oferece
– O que o consumidor vai buscar ali

10. 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..

11. 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.”

13. Por onde começar?
• Princípios da Biblioteconomia?
• Taxonomia?
• Dicionários?
Nããooooooooooooo
• Etnografia
• Modelos Mentais
• Card Sorting

14. 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”

15. Etnografia
• Observação
• Sem interferência
• Melhor quando demora mais tempo
• 1 dia é pouco, mas sempre é melhor que
nada!

18. Modelos Mentais
• Descobrir como as pessoas fazem as
coisas.
• Todas essas pessoas tem que fazer parte
do meu público-alvo.

19. 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

21. Técnicas de Interaction Design

44. Arquitetura de Informação

45. www.UsabilityExpert.co
m.br
Copyright, 2005.
45

46. www.UsabilityExpert.co
m.br
Copyright, 2005.
46

47. 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

48. 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

49. 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

50. 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

51. 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.

52. 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. 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...

54. 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. 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. 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. 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.

58. 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

59. 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

60. 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. 61
Conceitos de AI
• Sistemas complexos
• Redes de
conhecimento
• Comportamento de
busca de informação
• Trabalho invisível

62. 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!

63. 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

64. 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

65. 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. 66
Sistemas de Arquitetura de Informação

67. 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.

68. 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

69. 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

70. 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

71. 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

72. 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

73. Estilo Pragmático

74. www.UsabilityExpert.co
m.br
Copyright, 2005.
74

75. www.UsabilityExpert.co
m.br
Copyright, 2005.
75

76. www.UsabilityExpert.co
m.br
Copyright, 2005.
76

77. 77
Estilo Lost

78. 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

79. 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. 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!