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

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!