Design de Interação parte II

Design de Interação
Karine Drumond e Leandro Alves

Design de Interação | Karine e Leandro

Técnica de modelagem
personas ágeis


Personas são modelos
descritivos de usuários.


exemplo de persona tradicional

Alguma coisa é melhor que coisa-alguma
Minimize esforços. Levante informações através de etnografia digital,

análise métrica, benchmarking ou conversas com stakeholders.


Uma Persona Ágil é uma exploração breve sobre
o que sabemos dos usuários.

Pragmática - Patton
Provisória - Cooper
Guerrilha - Kuniavsky
Ad-Hoc - Norman
Ágil - Cardoso


São ferramentas simples e poderosas para
melhorar a visibilidade, compreensão e a
comunicação de informações.


Boas personas destacam características
relevantes das menos relevantes.

Evidenciam informações, não apenas dados.


"Uma Persona é uma pessoa artificial, inventada para ajudar um
designer entender as pessoas que usarão seu produto.”
- Norman, Persona Life Cycle


1. Não são estereótipos

2. Não são segmentos de mercado:

MKT = venda / Design = uso


Por que modelar personas?
1. Modelamos para discutir o que sabemos e o que não sobre usuários (Informações).

2. Modelamos para mapear melhor sua experiência (UX).

3. Personas servem para agregar um enfoque empático ao projeto (❤).


Quando aplicar Personas?
1. Na definição de requisitos (principalmente para produtos de contextos
diferentes, desconhecidos. ex: hospital, bombeiros, polícia)

2. Durante brainstormings, reuniões

3. Ao planejar funcionalidades


Como criar personas


1o passo: Determinar tipos de usuários



ZAGAT
Site que oferece reviews de mais de 50 mil
restaurantes em 100 países.

Estão investindo em aplicações mobile.

Quais os tipos de usuários desse sistema?


(Uma boa ideia é focar em papéis)

1. Gourmets,

2.Viajantes,

3.Namorados...


2o passo: Listar características de cada tipo
1. Demográficas: Idade, sexo, classe social, onde vivem, cultura, formação, profissão...

2. Tecnológicas: Quais são suas habilidades? Uso mais frequente? Hardware, conexão?

3. Contexto de uso: Onde usaria (casa, escritório, metrô..)? Que horas, por quanto tempo?

4. Estilo de vida: Valores, atitudes. O que procuram? Diversão, rapidez, desafio, conforto... Quais
são seus hobbies? O que detesta, o tira do sério ou incomoda?


5. Necessidades: diretas e periféricas (mas importantes. ex: segurança no metrô)

6. Desejos: o que eles querem, não o que dizem que querem. (Gladwell, spaghetti sauce)

7. Conhecimento: Na área relacionada, cultura geral. Novatos? Experts? Curiosos?

8. Lealdade: Frequência de uso, compromisso (software sazonal, apple vs android...).

9. Dê um nome, um rosto, uma frase emblemática:



Roberto, 42 anos, Jornalista Saulinho, 22 anos, cursa Letras Júlia, 16 anos, estudante, twiteira
Mochileiro sazonal


3o passo: Determinar usuário(s) focal(is) (patton) ou primário(s) (cooper)

1. "É um usuário que deve ser atendido e não seria com uma interface projetada para
outra pessoa." (Cooper)

2. Todo sistema tem ao menos 1

3. Se identificamos mais de 1, temos mais de uma interface. Se identificarmos mais de 3,
temos um problema. (citar ML)


3o passo: Determinar usuários focais (patton) ou primários (cooper)

zo rio
l
al

sa uá
na
foc

us

a
ag
op
nã
Roberto, 42 anos, Jornalista Saulinho, 22 anos, cursa Letras Júlia, 16 anos, estudante, twiteira
Mochileiro sazonal


Sugestão de Patton
Nome, Idade Papel

descrição, frase emblemática

Necessidades no Tarefas no sistema para necessidades
mundo real


TO DO DONE

EM GRUPO!
produto
para seu
personas
Criar 3
1) o focal
er uma com
2) Escolh o de 5’
ar apre sentaçã
3) Mont


Personas ágeis


3o passo: Determinar usuários focais


Questionários Ciclo de vida do produto
e
rking entrevistas
chma
Ben

ot n/
o

ão
a

çã
ot ig
uis

pr des

aç
ipa
sq

lid
pe

va
nas prototipação
perso

Prototipação
quebrando ovos para fazer omeletes


Protótipo ~ modelo
=


lembrando...

São ferramentas simples e poderosas para
melhorar a visibilidade, compreensão e a
comunicação de informações.


Podem ser de baixa ou alta resolução
Baixa: Para explorar ideias, conceitos, fluxos

Alta: para validar decisões pontuais


“Devemos criar exatamente quanta
documentação necessitamos para executar
bem um projeto, e não mais.”
-Dan Saffer


Nós ❤ PAPEL!
• Nada digital é mais rápido, flexível e fácil de prototipar
• Não requer habilidades específicas
• É mais barato e colaborativo;
• Variedade = possibilidades: Diferentes cores, tamanhos,
texturas, adesivos...

• Tamanho é documento (difícil ter um monitor do
tamanho de uma cartolina)

• Estimula desapego
• Reciclável, divertido, estimula a equipe


Cenário
“São protótipos feitos de palavras”

• Os protagonistas são as PERSONAS
• Devem refletir comportamento no sistema
• Uma boa prática é passar diferentes personas pelo mesmo cenário
• Um bom cenário é imaginar o primeiro uso


Cenário
Uma imagem vale mil palavras.
Mas as palavras certas podem valer algumas boas imagens.

Lúcia Maria loga em sua conta Sacolao.com. Vê seu pedido da semana
passada e decide usá-lo de novo para esta semana. Remove alguns itens
arrastando-os de sua Cestinha®, e o valor ajusta automaticamente.
Satisfeita com a compra, clica no botão Entrega rápida e confirma o
débito em seu cartão de crédito previamente salvo. A tela de
confirmação informa para esperar a entrega nas próximas 2 horas.


TO DO DONE

PO!
EM GRU rimeiro
uso ou
rio (p
Criar um cená em sua
e) e a plicá-lo
tare fa chav
Focal.
Persona


Storyboards


Storyboards
Técnica da publicidade, HQs e cinema, que ilustra interações
complexas


Storyboards
• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes


TO DO DONE

O!
E M GRUP
para o
yboard
Criar um stor
criado.
cenário


Task flows
diagrama de fluxo
• Fluxos são tão importantes quanto telas
• Representam as possibilidades de navegação no sistema


Task flows
diagrama de fluxo


FFFFFFFF
FFFFFFFF
FFFFFFFF
UUUUUUU

Task flows
diagrama de fluxo

Fluxos são interações de um indivíduo, elementos / escolhas


Task flows
diagrama de fluxo

Exemplo: Adicionando um item na TO-DO do Basecamp.


Task flows
diagrama de fluxo
• É rápido de fazer e simples de enxergar.


Task flows
diagrama de fluxo

Estrutura
• Barra separa a interface da ação
• Barra pontilhada separa as opções para mesma interface
• Setas vão da ação para a nova interface
• Se a interface for fora de escopo, fica sem ação


TO DO DONE

RUP O!
E M SUBG ipal (e
tare fa princ
definir fluxo da
erando
r temp o) consid
ma is, se de
uso.
os c asos de


Rascunhos


Rascunhos
• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso


Wireframes


Wireframes
protótipos estruturais do sistema


Wireframes
Registram as funcionalidades do produto, seus aspectos
técnicos e sua lógica de negócios, sem a influência do
design visual (branding, layout)


Wireframes

Podem ser usados para validar ideias


Wireframes

Podem ser usados para validar ideias
Podem ser usados para testes com usuários


Wireframes
Substituem documentos mais burocráticos, são
especificações visuais comprometidas com:

• Estrutura
• Arquitetura da informação
• Controles (padrões de interação)
• Conteúdo


papel=desapego

Prototipando e testando low fi
http://www.youtube.com/watch?v=k9mTvt0LXgk


wireouts


layouts


EM
GRU
Prot PO!
o
rasc tipar e
unho m
s, ou cima
tem refin dos
po: r á-lo
esto s
da a
ula

s
á gil, podemo
que isso é
Lembrem f oi decidido.
dar o que
CAOS!
mu
ID EAÇÃO = Design de Interação | Karine e Leandro

Questionários Ciclo de vida do produto
e
rking entrevistas
chma
Ben

ot n/
o

ão
a

çã
ot ig
uis

pr des

aç
ipa
sq

lid
pe

va
nas prototipação estes
perso t

Teste com usuários


Teste de usabilidade
‣ Observação de usuários realizando tarefas
importantes no produto para entender padrão de
uso e problemas no produto.


Pra que serve?
‣ Avaliar o entendimento da interface e dos ﬂuxos projetados

‣ Identiﬁcar pontos críticos da interação (ruídos, dúvidas, rupturas)

‣ Comparar desempenho em produtos diferentes (benchmark/concorrência)


Tipos de testes

‣ Teste em campo (menos formal) ‣ Teste em laboratório
(mais controlado)


Tipos de testes


Tipos de testes
‣ Em laboratório (mais formal)

+ permite maior controle dos dados e variáveis
+ mais fácil de envolver o cliente
– usuário pode se sentir mais desconfortável
– mais distante do contexto de uso real

‣ Em campo (ambiente natural)

+ usuário se sente mais à vontade
+ mais próximo do contexto de uso real
– menor controle dos dados e variáveis
– diﬁculdade de envolver o cliente


Tipos de testes
‣ Laboratório é ideal para:

‣ produção acadêmica (rigor cientíﬁco para teses, artigos
e dissertações)
‣ medição de performance (tempo, número de erros etc.)
‣ estudos permanentes com equipe dedicada (ex.: Nokia,
Globo etc.)

‣ Avaliação em campo é ideal para:

‣ obter feedback rápido dos usuários
‣ usabilidade em equipes ágeis de desenvolvimento
‣ custo baixo é prioridade
‣ testar conceitos e interfaces em fases iniciais de design


O que testar?

‣ Teste em protótipo em papel: ‣ Teste em produto final.
Servem para testar conceitos Avaliar eficiência, satisfação,
e fluxos. compreensão etc.


Etapas
1.Planejamento

2.Recrutamento

3.Aplicação

4.Análise


Planejamento
1. determinar metas e objetivos do teste
2. escolher o que medir (tempo, compreensão, satisfação etc)
3. definir perfil de participantes
4. definir tarefas e contexto (motivação)
5. preparar os materiais, equipe, ambiente e ferramentas
6. executar um teste piloto


1 - Determinar os objetivos
Exemplos

‣ Os usuários entendem de forma clara o que é e para que
serve a extensão?

‣ Os usuários têm alguma diﬁculdade para instalar a
extensão?

‣ Eles sabem onde e como fazer?

‣ Completam todas as etapas de instalação corretamente?


TO DO DONE

O!
E M GRUP teste
s objet ivos do
deter minar o
lhido
do prod uto esco


2 - Escolher o que medir
A métrica depende do objetivo

‣ Satisfação geral

‣ Tempo de execução de tarefa

‣ Número de passos para conclusão de uma tarefa

‣ Quantidade de erros

‣ Quantidade de tarefas completadas

‣ Proporção de usuários favoráveis ao sistema em relação ao concorrente


TO DO DONE

O!
E M GRUP teste
s métr icas do
deter minar a


3 - Definir perfil de participantes
‣ Quem deve usar este produto?

‣ Quantos participantes escolher? Nielsen sugere:

‣ 5 (de cada perﬁl) para qualitativo (quick and dirty! rápido e sujo)

‣ 20 para quantitativo

‣ Onde encontrar?

‣ Redes sociais, contatos pessoais, contatos do cliente, usuários atuais,
questionário na web, empresas de recrutamento etc.


Exemplo

‣ 2 usuários lead e 4 intermediários

‣ Pessoas que procuram ou procuraram imóveis recentemente.

‣ Contatos não fornecidos pelo cliente.


4 - Definir tarefas e contexto
Tarefas: O que precisa ser testado?

‣ Quais são as funcionalidades mais críticas?

‣ Passos esperados em cada tarefa (se for relevante)

‣ Tempo esperado em cada tarefa (se for relevante)

‣ Um teste nunca deve passar de 2h (ideal é até 1h)

Contexto: Motivação para tarefa (ajuda na compreensão)


Exemplo (tarefas)

‣ Encontrar um imóvel

‣ Alterar ﬁltros

‣ veriﬁcar IPTU

‣ Encontrar informações de contato

‣ Salvar nos “favoritos”

‣ Encontrar a lista de favoritos


Exemplo (contextos)

‣ Opção 1:

Você se mudou para Curitiba e precisa arrumar um imóvel pra alugar.
Como você encontraria este imóvel?

‣ Opção 2:

Facilitador: Você procurou um imóvel recentemente? Como foi essa
experiência? Tente encontrar um semelhante nesse site. Usuário: Não
encontrei... Facilitador: Por que você acha que o site não encontrou?
Usuário: Deve ser a faixa de preço que escolhi, foi baixa. Facilitador: Como
você alteraria a faixa de preços?


TO DO DONE

O!
E M GRUP
ários
taref as e cen
definir

EM GRUPO!
definir passos e tempo das

tarefas (se relevante)


5 - Preparar roteiro
Estrutura do roteiro

‣ Propósito do teste
‣ Lembrar que quem é avaliado é o sistema e não usuário
‣ Que o objetivo é melhorar a interface
‣ Que a identidade será mantida em sigilo
‣ Participação é voluntária
‣ Explicar como será o teste
‣ Explicar que podem fazer perguntas, mas nem todas poderão ser
respondidas
‣ Small talk, contextualizar
‣ Explicar as tarefas
‣ Realizar entrevista semi-estruturada no ﬁnal


TO DO DONE

O!
E M GRUP
teste
o teiro do
criar o r


6 - Executando um teste piloto
Executar com alguém não envolvido diretamente com a execução do teste
Permite testar as condições do teste
‣ As tarefas foram compreendidas pelos usuários?
‣ Todas as tarefas foram possíveis de concluir?
‣ Os equipamentos estão ok?
‣ O protótipo precisa ser ajustado?
‣ O questionário está ok?
Envolvidos: 1 a 3 usuários (depende da complexidade do teste,
normalmente 1 basta)


Aplicação
Equipe envolvida
‣ Orientador/condutor
‣ Orientar o participante
‣ Fazer com que se sinta a vontade
‣ Responder perguntas (se possível)
‣ Não induzir comportamento (tendenciar)
‣ Observador
‣ Registrar interação do usuário
‣ Não interferir no teste
‣ Opcionais: recepcionista e co-observadores (clientes e
outros membros da equipe)


Aplicação
Participantes (usuários)
‣ Posso/devo pagar usuário?
‣ Na publicação de papers, artigos esta prática não é aceita
‣ No mercado é comum e há opções alternativas ao dinheiro
(vale-compra, brindes etc.)
‣ O que o usuário precisa saber?
‣ Que está sendo observado
‣ Que sua identidade será preservada
‣ Indicar espelhos, câmeras, microfones etc.
‣ Precisa aceitar o termo de consentimento


Software espião
‣ Quicktime (http://www.apple.com/quicktime/download/)
‣ SilverBack (http://silverbackapp.com/)
‣ CamStudio (http://camstudio.org/)
‣ Camtasia (http://www.techsmith.com/products/studio/default.asp )
‣ Morae (http://www.techsmith.com/products/morae/default.asp)
‣ Ovo Logger (http://www.ovostudios.com/ovologger.asp#during )
‣ ScreenCam (http://www.smartguyz.com/index.html )
‣ ZD Soft (http://www.zdsoft.com/downloads.html)


Como conduzir os testes?
‣ Escolha somente uma pessoa para falar com o usuário (condutor)
‣ O observador deve se posicionar de forma a ver a tela e as reações do
usuário
‣ Comece com tarefas mais simples
‣ Responda as dúvidas que puder, quando não puder diga que você não
pode responder para não interferir o teste



Usuário comenta: “Mas isso não é inútil?”



Usuário comenta: “Mas isso não é inútil?”
Resposta inadequada: "Não."
Resposta adequada: "Por que você acha isso?"


Como observar os testes?
‣ Procure por padrões de uso e fenômenos
‣ Não interfira no teste (função do orientador/condutor)
‣ Marque o tempo inicial (quando medindo o tempo)
‣ Anote pontos de dificuldade
‣ Anote o caminho percorrido
‣ Anote as sugestões do participante
‣ Anote se a tarefa foi realizada com sucesso ou não
‣ Anote frases/depoimentos que exemplifiquem algo importante
‣ Anote o tempo final


Think aloud / “pensar em voz alta”
‣ Objetivo: explicitar o processo mental dos participantes

‣ Vantagens
‣ Ajuda a captar entendimento
‣ Ajuda a captar sugestões
‣ Descobrir por que os usuários estão agindo de determinada forma
‣ Desvantagem
‣ Atrapalha na medição do tempo/performance


Think aloud / “pensar em voz alta”
‣ Como estimular a falar?

‣ Use perguntas!
‣ “Em que você está pensando?”
‣ “Por que optou por clicar aí?”
‣ “Por que você desistiu de ir por lá?”
‣ “O que você está entendendo por (termo)?”


TO DO DONE

O!
E M GRUP
ador e
ientado r, observ
d efinir or outro
car usu ário com
usu ário; tro
ste!
plicar te
grupo; a


Card sorting

Card sorting
Como seus
usuários
enxergam seu
conteúdo?
• compreendendo modelos mentais


Por que usar card sorting?
‣ Imagine que você deseje emitir a 2ª via de uma multa e
este é o menu do site...

‣ Detran

‣ Habilitação

‣ Veículos

‣ Infrações

‣ Estatísticas

‣ Legislação

‣ Solicitação de serviços


Etapas do card sorting
1. Levantamento do conteúdo (se ainda não feito)

2. Seleção dos cartões (20 a 30 cartões é suﬁciente)
3. Aplicação (em grupo de usuários ou individual)

4. Análise dos resultados e criação do mapa do site.


Resultado do card sorting


Exercício card sorting
Cada grupo deve eleger uma pessoa para ser o “moderador”, que irá
explicar e observar o agrupamento feito. Deve sempre orientar ao
participante a agrupar da forma que faz mais sentido para ele.

1. Agrupar os cartões (observar o porquê do agrupamento)

2. Dar nome ao grupo de cartões

3. Apresentação dos resultados e do que foi observado

Participantes: na hora de agrupar, pensar sempre em “se eu estivesse
procurando este assunto no site, onde ele estaria, perto de qual outro assunto”


Card sorting online
http://websort.net/

http://www.optimalworkshop.com/optimalsort.htm


Trabalho individual 50 pts
Escolha um produto interativo (ex.: um celular, um aplicativo de iPhone, um software
etc) e identifique os componentes da interação, respondendo:
1. Quem são os possíveis usuários deste produto? (pense em diferentes públicos)
2. O que estes usuários podem fazer no produto? (liste as tarefas)
3. Em qual ambiente ele é usado? E como este ambiente pode afetar a interação?
4. Descreva a interface do produto, os elementos e recursos de design usados.
5. Quais elementos desta interface tornam o uso mais agradável?
6. Quais elementos desta interface podem prejudicar a interação?

Prazo de entrega: 06/01/12 enviar para lbalves@gmail.com e karinedrumond@gmail.com
Não esquecer de colocar o produto escolhido e fotos de demonstração.
Ilustrar com imagens, fotos, tabelas etc.


Design de Interação parte II

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Design de Interação parte II

Mais de Karine Drumond

Design de Interação parte II