1) O documento discute a técnica de modelagem de personas ágeis, apresentando exemplos simplificados de personas tradicionais versus personas ágeis.
2) É destacado que personas ágeis são explorações breves do que se sabe sobre os usuários com o objetivo de melhorar a visibilidade, compreensão e comunicação sobre os usuários.
3) O documento fornece um passo-a-passo para a criação de personas ágeis, desde a determinação dos tipos de usuários até a criação de cenários e protótipos para validação
5. 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.
Design de Interação | Karine e Leandro
6. 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
Design de Interação | Karine e Leandro
7. São ferramentas simples e poderosas para
melhorar a visibilidade, compreensão e a
comunicação de informações.
Design de Interação | Karine e Leandro
8. Boas personas destacam características
relevantes das menos relevantes.
Evidenciam informações, não apenas dados.
Design de Interação | Karine e Leandro
9. "Uma Persona é uma pessoa artificial, inventada para ajudar um
designer entender as pessoas que usarão seu produto.”
- Norman, Persona Life Cycle
Design de Interação | Karine e Leandro
10. 1. Não são estereótipos
2. Não são segmentos de mercado:
MKT = venda / Design = uso
Design de Interação | Karine e Leandro
11. 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 (❤).
Design de Interação | Karine e Leandro
12. 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
Design de Interação | Karine e Leandro
15. 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?
Design de Interação | Karine e Leandro
16. 1o passo: Determinar tipos de usuários
(Uma boa ideia é focar em papéis)
1. Gourmets,
2.Viajantes,
3.Namorados...
Design de Interação | Karine e Leandro
17. 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?
Design de Interação | Karine e Leandro
18. 2o passo: Listar características de cada tipo
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:
Design de Interação | Karine e Leandro
19. 2o passo: Listar características de cada tipo
Roberto, 42 anos, Jornalista Saulinho, 22 anos, cursa Letras Júlia, 16 anos, estudante, twiteira
Mochileiro sazonal
Design de Interação | Karine e Leandro
20. 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)
Design de Interação | Karine e Leandro
21. 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
Design de Interação | Karine e Leandro
22. Sugestão de Patton
Nome, Idade Papel
descrição, frase emblemática
Necessidades no Tarefas no sistema para necessidades
mundo real
Design de Interação | Karine e Leandro
25. 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
Design de Interação | Karine e Leandro
26. Personas ágeis
1o passo: Determinar tipos de usuários
2o passo: Listar características de cada tipo
3o passo: Determinar usuários focais
Design de Interação | Karine e Leandro
27. 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
Design de Interação | Karine e Leandro
30. lembrando...
São ferramentas simples e poderosas para
melhorar a visibilidade, compreensão e a
comunicação de informações.
Design de Interação | Karine e Leandro
31. Podem ser de baixa ou alta resolução
Baixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
Design de Interação | Karine e Leandro
32. “Devemos criar exatamente quanta
documentação necessitamos para executar
bem um projeto, e não mais.”
-Dan Saffer
Design de Interação | Karine e Leandro
33. 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
Design de Interação | Karine e Leandro
34. 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
Design de Interação | Karine e Leandro
35. 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.
Design de Interação | Karine e Leandro
36. 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
Design de Interação | Karine e Leandro
37. Storyboards
Design de Interação | Karine e Leandro
39. Storyboards
• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes
Design de Interação | Karine e Leandro
40. TO DO DONE
O!
E M GRUP
para o
yboard
Criar um stor
criado.
cenário
Design de Interação | Karine e Leandro
41. Task flows
diagrama de fluxo
• Fluxos são tão importantes quanto telas
• Representam as possibilidades de navegação no sistema
Design de Interação | Karine e Leandro
44. Task flows
diagrama de fluxo
Fluxos são interações de um indivíduo, elementos / escolhas
Design de Interação | Karine e Leandro
45. Task flows
diagrama de fluxo
Exemplo: Adicionando um item na TO-DO do Basecamp.
Design de Interação | Karine e Leandro
46. Task flows
diagrama de fluxo
• É rápido de fazer e simples de enxergar.
Design de Interação | Karine e Leandro
47. 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
Design de Interação | Karine e Leandro
48. 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
Design de Interação | Karine e Leandro
49. Rascunhos
Design de Interação | Karine e Leandro
50. Rascunhos
• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso
Design de Interação | Karine e Leandro
51. Wireframes
Design de Interação | Karine e Leandro
53. Wireframes
protótipos estruturais do sistema
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)
Design de Interação | Karine e Leandro
54. Wireframes
protótipos estruturais do sistema
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)
Podem ser usados para validar ideias
Design de Interação | Karine e Leandro
55. Wireframes
protótipos estruturais do sistema
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)
Podem ser usados para validar ideias
Podem ser usados para testes com usuários
Design de Interação | Karine e Leandro
56. 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
Design de Interação | Karine e Leandro
66. Prototipando e testando low fi
http://www.youtube.com/watch?v=k9mTvt0LXgk
Design de Interação | Karine e Leandro
67. wireouts
Design de Interação | Karine e Leandro
68. layouts
Design de Interação | Karine e Leandro
69. 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
71. 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
Design de Interação | Karine e Leandro
73. Teste de usabilidade
‣ Observação de usuários realizando tarefas
importantes no produto para entender padrão de
uso e problemas no produto.
Design de Interação | Karine e Leandro
74. Pra que serve?
‣ Avaliar o entendimento da interface e dos fluxos projetados
‣ Identificar pontos críticos da interação (ruídos, dúvidas, rupturas)
‣ Comparar desempenho em produtos diferentes (benchmark/concorrência)
Design de Interação | Karine e Leandro
75. Tipos de testes
‣ Teste em campo (menos formal) ‣ Teste em laboratório
(mais controlado)
Design de Interação | Karine e Leandro
77. 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
– dificuldade de envolver o cliente
Design de Interação | Karine e Leandro
78. Tipos de testes
‣ Laboratório é ideal para:
‣ produção acadêmica (rigor científico 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
Design de Interação | Karine e Leandro
79. 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.
Design de Interação | Karine e Leandro
81. 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
Design de Interação | Karine e Leandro
82. 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 dificuldade para instalar a
extensão?
‣ Eles sabem onde e como fazer?
‣ Completam todas as etapas de instalação corretamente?
Design de Interação | Karine e Leandro
83. TO DO DONE
O!
E M GRUP teste
s objet ivos do
deter minar o
lhido
do prod uto esco
Design de Interação | Karine e Leandro
84. 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
Design de Interação | Karine e Leandro
85. TO DO DONE
O!
E M GRUP teste
s métr icas do
deter minar a
Design de Interação | Karine e Leandro
86. 3 - Definir perfil de participantes
‣ Quem deve usar este produto?
‣ Quantos participantes escolher? Nielsen sugere:
‣ 5 (de cada perfil) 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.
Design de Interação | Karine e Leandro
87. 3 - Definir perfil de participantes
Design de Interação | Karine e Leandro
88. 3 - Definir perfil de participantes
Exemplo
‣ 2 usuários lead e 4 intermediários
‣ Pessoas que procuram ou procuraram imóveis recentemente.
‣ Contatos não fornecidos pelo cliente.
Design de Interação | Karine e Leandro
89. 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)
Design de Interação | Karine e Leandro
90. 4 - Definir tarefas e contexto
Exemplo (tarefas)
‣ Encontrar um imóvel
‣ Alterar filtros
‣ verificar IPTU
‣ Encontrar informações de contato
‣ Salvar nos “favoritos”
‣ Encontrar a lista de favoritos
Design de Interação | Karine e Leandro
91. 4 - Definir tarefas e contexto
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?
Design de Interação | Karine e Leandro
92. TO DO DONE
O!
E M GRUP
ários
taref as e cen
definir
EM GRUPO!
definir passos e tempo das
tarefas (se relevante)
Design de Interação | Karine e Leandro
93. 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 final
Design de Interação | Karine e Leandro
94. TO DO DONE
O!
E M GRUP
teste
o teiro do
criar o r
Design de Interação | Karine e Leandro
95. 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)
Design de Interação | Karine e Leandro
96. 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)
Design de Interação | Karine e Leandro
97. 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
Design de Interação | Karine e Leandro
99. 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
Design de Interação | Karine e Leandro
100. Como conduzir os testes?
Usuário comenta: “Mas isso não é inútil?”
Design de Interação | Karine e Leandro
101. Como conduzir os testes?
Usuário comenta: “Mas isso não é inútil?”
Resposta inadequada: "Não."
Resposta adequada: "Por que você acha isso?"
Design de Interação | Karine e Leandro
102. 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
Design de Interação | Karine e Leandro
103. 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
Design de Interação | Karine e Leandro
104. 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)?”
Design de Interação | Karine e Leandro
105. 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
Design de Interação | Karine e Leandro
106. Card sorting
Design de Interação | Karine e Leandro
107. Card sorting
Como seus
usuários
enxergam seu
conteúdo?
• compreendendo modelos mentais
Design de Interação | Karine e Leandro
108. 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
Design de Interação | Karine e Leandro
109. 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 é suficiente)
3. Aplicação (em grupo de usuários ou individual)
4. Análise dos resultados e criação do mapa do site.
Design de Interação | Karine e Leandro
111. 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”
Design de Interação | Karine e Leandro
112. Card sorting online
http://websort.net/
http://www.optimalworkshop.com/optimalsort.htm
Design de Interação | Karine e Leandro
113. 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 | Karine e Leandro