design de interação parte ii
DESCRIPTION
Aula lecionada por Karine Drumond e Leandro Alves em 2011 na pós em Marketing Digital. Belo Horizonte.TRANSCRIPT
![Page 1: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/1.jpg)
Design de Interação | Karine e Leandro
Design de InteraçãoKarine Drumond e Leandro Alves
![Page 2: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/2.jpg)
Design de Interação | Karine e Leandro
Técnica de modelagem
personas ágeis
![Page 3: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/3.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida ágil
Personas são modelos descritivos de usuários.
![Page 4: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/4.jpg)
Design de Interação | Karine e Leandro
exemplo de persona tradicional
![Page 5: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/5.jpg)
Design de Interação | Karine e Leandro
Alguma coisa é melhor que coisa-algumaMinimize esforços. Levante informações através de etnografia digital,
análise métrica, benchmarking ou conversas com stakeholders.
![Page 6: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/6.jpg)
Design de Interação | Karine e Leandro
Uma Persona Ágil é uma exploração breve sobre o que sabemos dos usuários.
Pragmática - Patton
Provisória - CooperGuerrilha - Kuniavsky
Ad-Hoc - NormanÁgil - Cardoso
![Page 7: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/7.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida ágil
São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a
comunicação de informações.
![Page 8: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/8.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida ágil
Boas personas destacam características relevantes das menos relevantes.
Evidenciam informações, não apenas dados.
![Page 9: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/9.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida ágil
"Uma Persona é uma pessoa artificial, inventada para ajudar um designer entender as pessoas que usarão seu produto.”
- Norman, Persona Life Cycle
![Page 10: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/10.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida ágil
1. Não são estereótipos
2. Não são segmentos de mercado:
MKT = venda / Design = uso
![Page 11: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/11.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida ágil
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 (❤).
Por que modelar personas?
![Page 12: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/12.jpg)
Design de Interação | Karine e Leandro
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
Quando aplicar Personas?
![Page 13: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/13.jpg)
Design de Interação | Karine e Leandro
Como criar personas
![Page 14: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/14.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida ágil
1o passo: Determinar tipos de usuários
![Page 15: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/15.jpg)
Design de Interação | Karine e Leandro
1o passo: Determinar tipos de usuários
ZAGATSite 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?
![Page 16: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/16.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida ágil
1.Gourmets,
2.Viajantes,
3.Namorados...
(Uma boa ideia é focar em papéis)
1o passo: Determinar tipos de usuários
![Page 17: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/17.jpg)
Design de Interação | Karine e Leandro
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?
![Page 18: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/18.jpg)
Design de Interação | Karine e Leandro
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:
![Page 19: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/19.jpg)
Design de Interação | Karine e Leandro
2o passo: Listar características de cada tipo
Roberto, 42 anos, Jornalista Saulinho, 22 anos, cursa LetrasMochileiro sazonal
Júlia, 16 anos, estudante, twiteira
![Page 20: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/20.jpg)
Design de Interação | Karine e Leandro
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)
![Page 21: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/21.jpg)
Design de Interação | Karine e Leandro
Roberto, 42 anos, Jornalista Saulinho, 22 anos, cursa LetrasMochileiro sazonal
Júlia, 16 anos, estudante, twiteira
3o passo: Determinar usuários focais (patton) ou primários (cooper)
focal
usuári
o
sazon
al
não p
aga
![Page 22: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/22.jpg)
Design de Interação | Karine e Leandro
Sugestão de PattonNome, Idade Papel
descrição, frase emblemática
Tarefas no sistema para necessidadesNecessidades no mundo real
![Page 23: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/23.jpg)
Design de Interação | Karine e Leandro
![Page 24: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/24.jpg)
Design de Interação | Karine e Leandro
![Page 25: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/25.jpg)
Design de Interação | Karine e Leandro
EM GRUPO!
1) Criar 3 personas para
seu produto
2) Escolher uma como focal
3) Montar apresentaçã
o de 5’
TO DO DONE
![Page 26: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/26.jpg)
Design de Interação | Karine e Leandro
1o passo: Determinar tipos de usuários
2o passo: Listar características de cada tipo
3o passo: Determinar usuários focais
Personas ágeis
![Page 27: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/27.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida do produto
pesquisa des
ign/
prototipação
validação
Questionários e entrevistas
personas
Benchm
arking
prototipação
![Page 28: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/28.jpg)
Design de Interação | Karine e Leandro
Prototipaçãoquebrando ovos para fazer omeletes
![Page 29: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/29.jpg)
Design de Interação | Karine e Leandro
Protótipo = modelo~
![Page 30: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/30.jpg)
Design de Interação | Karine e Leandro
São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a
comunicação de informações.
lembrando...
![Page 31: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/31.jpg)
Design de Interação | Karine e Leandro
Podem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
![Page 32: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/32.jpg)
Design de Interação | Karine e Leandro
“Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.”
-Dan Saffer
![Page 33: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/33.jpg)
Design de Interação | Karine e Leandro
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
![Page 34: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/34.jpg)
Design de Interação | Karine e Leandro
Cenário• 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
“São protótipos feitos de palavras”
![Page 35: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/35.jpg)
Design de Interação | Karine e Leandro
CenárioUma 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.
![Page 36: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/36.jpg)
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
Criar um cenário (primeiro uso ou
tarefa chave) e aplicá-
lo em sua
Persona Focal.
![Page 37: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/37.jpg)
Storyboards
Design de Interação | Karine e Leandro
![Page 38: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/38.jpg)
StoryboardsTécnica da publicidade, HQs e cinema, que ilustra interações
complexas
Design de Interação | Karine e Leandro
![Page 39: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/39.jpg)
Storyboards• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes
Design de Interação | Karine e Leandro
![Page 40: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/40.jpg)
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
Criar um storyboard para o
cenário criado.
![Page 41: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/41.jpg)
Design de Interação | Karine e Leandro
Task flows• Fluxos são tão importantes quanto telas
• Representam as possibilidades de navegação no sistema
diagrama de fluxo
![Page 42: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/42.jpg)
Design de Interação | Karine e Leandro
Task flowsdiagrama de fluxo
![Page 43: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/43.jpg)
Design de Interação | Karine e Leandro
FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU
![Page 44: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/44.jpg)
Design de Interação | Karine e Leandro
Fluxos são interações de um indivíduo, elementos / escolhas
Task flowsdiagrama de fluxo
![Page 45: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/45.jpg)
Design de Interação | Karine e Leandro
Exemplo: Adicionando um item na TO-DO do Basecamp.
Task flowsdiagrama de fluxo
![Page 46: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/46.jpg)
Design de Interação | Karine e Leandro
• É rápido de fazer e simples de enxergar.
Task flowsdiagrama de fluxo
![Page 47: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/47.jpg)
Design de Interação | Karine e Leandro
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
Task flowsdiagrama de fluxo
![Page 48: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/48.jpg)
Design de Interação | Karine e Leandro
TO DO DONE
EM SUBGRUPO!
definir fluxo da tarefa
principal (e
mais, se der tempo) consider
ando
os casos de uso.
![Page 49: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/49.jpg)
Design de Interação | Karine e Leandro
Rascunhos
![Page 50: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/50.jpg)
Design de Interação | Karine e Leandro
Rascunhos• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso
![Page 51: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/51.jpg)
Design de Interação | Karine e Leandro
Wireframes
![Page 52: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/52.jpg)
Design de Interação | Karine e Leandro
Wireframesprotótipos estruturais do sistema
![Page 53: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/53.jpg)
Design de Interação | Karine e Leandro
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)
Wireframesprotótipos estruturais do sistema
![Page 54: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/54.jpg)
Design de Interação | Karine e Leandro
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)
Wireframesprotótipos estruturais do sistema
Podem ser usados para validar ideias
![Page 55: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/55.jpg)
Design de Interação | Karine e Leandro
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)
Wireframesprotótipos estruturais do sistema
Podem ser usados para validar ideiasPodem ser usados para testes com usuários
![Page 56: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/56.jpg)
Design de Interação | Karine e Leandro
Wireframes
•Estrutura•Arquitetura da informação
•Controles (padrões de interação)•Conteúdo
Substituem documentos mais burocráticos, são especificações visuais comprometidas com:
![Page 57: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/57.jpg)
Design de Interação | Karine e Leandro
![Page 58: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/58.jpg)
Design de Interação | Karine e Leandro
![Page 59: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/59.jpg)
Design de Interação | Karine e Leandro
![Page 60: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/60.jpg)
Design de Interação | Karine e Leandro
![Page 61: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/61.jpg)
Design de Interação | Karine e Leandro
![Page 62: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/62.jpg)
Design de Interação | Karine e Leandro
![Page 63: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/63.jpg)
papel=desapegoDesign de Interação | Karine e Leandro
![Page 64: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/64.jpg)
Design de Interação | Karine e Leandro
![Page 65: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/65.jpg)
Design de Interação | Karine e Leandro
![Page 66: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/66.jpg)
Design de Interação | Karine e Leandro
http://www.youtube.com/watch?v=k9mTvt0LXgk
Prototipando e testando low fi
![Page 67: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/67.jpg)
Design de Interação | Karine e Leandro
wireouts
![Page 68: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/68.jpg)
Design de Interação | Karine e Leandro
layouts
![Page 69: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/69.jpg)
Design de Interação | Karine e Leandro
Lembrem que isso é ágil, podemos
mudar o que foi decidido.
IDEAÇÃO = CAOS!
EM GRUPO!Prototipar em cima dos
rascunhos, ou refiná-lostempo: resto da aula
![Page 70: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/70.jpg)
Design de Interação | Karine e Leandro
![Page 71: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/71.jpg)
Design de Interação | Karine e Leandro
Ciclo de vida do produto
pesquisa des
ign/
prototipação
validação
Questionários e entrevistas
personas
Benchm
arking
prototipação
testes
![Page 72: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/72.jpg)
Design de Interação | Karine e Leandro
Teste com usuários
![Page 73: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/73.jpg)
Design de Interação | Karine e Leandro
Teste de usabilidade‣ Observação de usuários realizando tarefas
importantes no produto para entender padrão de uso e problemas no produto.
![Page 74: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/74.jpg)
Design de Interação | Karine e Leandro
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)
![Page 75: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/75.jpg)
Design de Interação | Karine e Leandro
Tipos de testes
‣ Teste em campo (menos formal) ‣ Teste em laboratório (mais controlado)
![Page 76: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/76.jpg)
Design de Interação | Karine e Leandro
Tipos de testes
![Page 77: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/77.jpg)
Design de Interação | Karine e Leandro
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
![Page 78: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/78.jpg)
Design de Interação | Karine e Leandro
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
![Page 79: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/79.jpg)
Design de Interação | Karine e Leandro
O que testar?
‣ Teste em protótipo em papel:Servem para testar conceitos e fluxos.
‣ Teste em produto final.Avaliar eficiência, satisfação, compreensão etc.
![Page 80: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/80.jpg)
Design de Interação | Karine e Leandro
Etapas1.Planejamento
2.Recrutamento
3.Aplicação
4.Análise
![Page 81: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/81.jpg)
Design de Interação | Karine e Leandro
Planejamento1. determinar metas e objetivos do teste2. escolher o que medir (tempo, compreensão, satisfação etc)3. definir perfil de participantes4. definir tarefas e contexto (motivação)5. preparar os materiais, equipe, ambiente e ferramentas6. executar um teste piloto
![Page 82: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/82.jpg)
Design de Interação | Karine e Leandro
1 - Determinar os objetivosExemplos
‣ 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?
![Page 83: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/83.jpg)
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
determinar os objetivos do te
ste
do produto escolhido
![Page 84: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/84.jpg)
Design de Interação | Karine e Leandro
2 - Escolher o que medirA 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
![Page 85: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/85.jpg)
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
determinar as métricas do teste
![Page 86: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/86.jpg)
Design de Interação | Karine e Leandro
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.
![Page 87: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/87.jpg)
Design de Interação | Karine e Leandro
3 - Definir perfil de participantes
![Page 88: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/88.jpg)
Design de Interação | Karine e Leandro
3 - Definir perfil de participantesExemplo
‣ 2 usuários lead e 4 intermediários
‣ Pessoas que procuram ou procuraram imóveis recentemente.
‣ Contatos não fornecidos pelo cliente.
![Page 89: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/89.jpg)
Design de Interação | Karine e Leandro
4 - Definir tarefas e contextoTarefas: 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)
![Page 90: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/90.jpg)
Design de Interação | Karine e Leandro
4 - Definir tarefas e contextoExemplo (tarefas)
‣ Encontrar um imóvel
‣ Alterar filtros
‣ verificar IPTU
‣ Encontrar informações de contato
‣ Salvar nos “favoritos”
‣ Encontrar a lista de favoritos
![Page 91: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/91.jpg)
Design de Interação | Karine e Leandro
4 - Definir tarefas e contextoExemplo (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?
![Page 92: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/92.jpg)
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
definir tarefas e cenár
ios
EM GRUPO!definir passos e tempo das tarefas (se relevante)
![Page 93: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/93.jpg)
Design de Interação | Karine e Leandro
5 - Preparar roteiroEstrutura 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
![Page 94: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/94.jpg)
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
criar o roteiro do teste
![Page 95: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/95.jpg)
Design de Interação | Karine e Leandro
6 - Executando um teste pilotoExecutar com alguém não envolvido diretamente com a execução do testePermite 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)
![Page 96: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/96.jpg)
Design de Interação | Karine e Leandro
AplicaçãoEquipe 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)
![Page 97: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/97.jpg)
Design de Interação | Karine e Leandro
AplicaçãoParticipantes (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
![Page 98: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/98.jpg)
Design de Interação | Karine e Leandro
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)
![Page 99: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/99.jpg)
Design de Interação | Karine e Leandro
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
![Page 100: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/100.jpg)
Design de Interação | Karine e Leandro
Como conduzir os testes?
Usuário comenta: “Mas isso não é inútil?”
![Page 101: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/101.jpg)
Design de Interação | Karine e Leandro
Como conduzir os testes?
Usuário comenta: “Mas isso não é inútil?”Resposta inadequada: "Não."
Resposta adequada: "Por que você acha isso?"
![Page 102: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/102.jpg)
Design de Interação | Karine e Leandro
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
![Page 103: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/103.jpg)
Design de Interação | Karine e Leandro
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
![Page 104: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/104.jpg)
Design de Interação | Karine e Leandro
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)?”
![Page 105: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/105.jpg)
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
definir orientador, obser
vador e
usuário; trocar usuário c
om outro
grupo; aplicar teste!
![Page 106: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/106.jpg)
Design de Interação | Karine e Leandro
Card sorting
![Page 107: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/107.jpg)
Design de Interação | Karine e Leandro
Card sortingComo seus usuários enxergam seu conteúdo?• compreendendo modelos mentais
![Page 108: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/108.jpg)
Design de Interação | Karine e Leandro
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
![Page 109: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/109.jpg)
Design de Interação | Karine e Leandro
Etapas do card sorting1. 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.
![Page 110: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/110.jpg)
Design de Interação | Karine e Leandro
Resultado do card sorting
![Page 111: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/111.jpg)
Design de Interação | Karine e Leandro
Exercício card sortingCada 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”
![Page 112: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/112.jpg)
Design de Interação | Karine e Leandro
Card sorting onlinehttp://websort.net/
http://www.optimalworkshop.com/optimalsort.htm
![Page 113: Design de Interação parte II](https://reader034.vdocuments.site/reader034/viewer/2022042521/555b310ad8b42afc348b4bf1/html5/thumbnails/113.jpg)
Design de Interação | Karine e Leandro
Trabalho individualEscolha 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 [email protected] e [email protected]ão esquecer de colocar o produto escolhido e fotos de demonstração.Ilustrar com imagens, fotos, tabelas etc.
50 pts