Este arquivo contém a apresentação realizada por Marcello de Campos Cardoso, em Agosto de 2012, para a disciplina Engenharia de Usabilidade ministrada no curso de especialização Engenharia de Software Centrada em Métodos Ágeis, no Centro Universitário UNA.

1. Engenharia de Usabilidade / Marcello Cardoso
Prototipação
quebrando ovos para fazer omeletes
Engenharia de Software Centrada Em Métodos Ágeis
Engenharia de Usabilidade
Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com

2. Engenharia de Usabilidade / Marcello Cardoso
recapitulando..

3. Engenharia de Usabilidade / Marcello Cardoso
User Story Mapping
Técnica para a separação de releases
no backlog, para encontrar o MVP,
definir a espinha do produto e
concentrar esforços de
desenvolvimento.

4. Engenharia de Usabilidade / Marcello Cardoso
User Story Mapping
1) Listar funcionalidades
2) Escrever em cartões
3) Ordenar em fluxo de tarefas
4) Ajustar posição quanto à criticidade
5) Agrupar por atividades macros
6) Marcar o primeiro release
7) Marcar demais releases

5. Engenharia de Usabilidade / Marcello Cardoso
Plano de curso
1ª Introdução à EngUsa 10pts
2ª Técnica de Modelagem: Personas ágeis 20pts
3ª Fatiando releases com User Story Mapping 20pts
4ª Projetando a interface: Task Flow + Prototipação rápida 25pts
5ª Perguntando a especialistas: As 10 heurísticas de Nielsen 25pts

6. Engenharia de Usabilidade / Marcello Cardoso
Prototipação
quebrando ovos para fazer omeletes

7. Engenharia de Usabilidade / Marcello Cardoso
Ciclo de vida do produto
Story
rking mapping
chma
Ben
to
jam isa
to
en
o
ne qu
çã
en
lvim
lida
pla pes
vo
sen
va
de
Etnograf Prototipação
ia
digital
Personas

8. Engenharia de Usabilidade / Marcello Cardoso
Onde aplicar?
du
ran
te
ite
raç
õe
Reunião diária s
Produto
Backlog do Backlog do potencialmente
produto sprint “entregável”

9. Engenharia de Usabilidade / Marcello Cardoso
Protótipo ~ modelo
=

10. Engenharia de Usabilidade / Marcello Cardoso
lembrando...
São ferramentas simples e poderosas para
melhorar a visibilidade, compreensão e a
comunicação de informações.

11. Engenharia de Usabilidade / Marcello Cardoso
Podem ser de baixa ou alta resolução
Baixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais

12. Engenharia de Usabilidade / Marcello Cardoso
“Devemos criar exatamente quanta
documentação necessitamos para
executar bem um projeto, e não mais.”
-Dan Saffer

13. Engenharia de Usabilidade / Marcello Cardoso
Nós <3 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

14. Engenharia de Usabilidade / Marcello Cardoso
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

15. Engenharia de Usabilidade / Marcello Cardoso
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.

16. Engenharia de Usabilidade / Marcello Cardoso
TO DO DONE
EM GRUPO!
Criar um cenário (primeiro uso ou
tarefa chave) e aplicá-lo em sua
Persona Focal.
ANOTAR PARA MANDAR POR EMAIL.
tempo: 15’

17. Engenharia de Usabilidade / Marcello Cardoso
Task flows
diagrama de fluxo
• Fluxos são tão importantes quanto telas
• Quanto mais “cascata”, mais robusto e formal o task flow

18. Engenharia de Usabilidade / Marcello Cardoso
Task flows
diagrama de fluxo

19. Engenharia de Usabilidade / Marcello Cardoso

20. FFFFFFFF
Engenharia de Usabilidade / Marcello Cardoso
FFFFFFFF
FFFFFFFF
UUUUUUU

21. Engenharia de Usabilidade / Marcello Cardoso
Task flows
diagrama de fluxo
Fluxos são interações de um indivíduo, elementos / escolhas

22. Engenharia de Usabilidade / Marcello Cardoso
Task flows
diagrama de fluxo
Exemplo: Adicionando um item na TO-DO do Basecamp.

23. Engenharia de Usabilidade / Marcello Cardoso
Task flows
diagrama de fluxo
• É rápido de fazer e simples de enxergar.
• Ideal para sprints!

24. Engenharia de Usabilidade / Marcello Cardoso
Task flows
diagrama de fluxo
Estrutura
• Barra separa a UI da ação
• Barra pontilhada separa as opções para mesma ação
• Setas vão da ação para a nova UI
• Se a UI for fora de escopo, mantém simples, sem ação

25. Engenharia de Usabilidade / Marcello Cardoso
TO DO DONE
PO !
EM GRU principal
tarefa
luxo da
definir f
empo)
s e der t
(e mais, uso.
ndo os casos de
considera
L.
R EMAI
AN DAR PO
PARA M
ANOTAR
’
t empo: 15

26. Engenharia de Usabilidade / Marcello Cardoso
Rascunhos

27. Engenharia de Usabilidade / Marcello Cardoso
Rascunhos
• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso

28. Engenharia de Usabilidade / Marcello Cardoso
Storyboards

29. Engenharia de Usabilidade / Marcello Cardoso
Storyboards
Técnica da publicidade, HQs e cinema, que ilustra
interações complexas

30. Engenharia de Usabilidade / Marcello Cardoso
Storyboards
• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes

31. Engenharia de Usabilidade / Marcello Cardoso
Wireframes

32. Engenharia de Usabilidade / Marcello Cardoso
Wireframes
protótipos estruturais do sistema

33. Engenharia de Usabilidade / Marcello Cardoso
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)

34. Engenharia de Usabilidade / Marcello Cardoso
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

35. Engenharia de Usabilidade / Marcello Cardoso
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

36. Engenharia de Usabilidade / Marcello Cardoso
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

37. Engenharia de Usabilidade / Marcello Cardoso

38. Engenharia de Usabilidade / Marcello Cardoso

39. Engenharia de Usabilidade / Marcello Cardoso

40. Engenharia de Usabilidade / Marcello Cardoso

41. Engenharia de Usabilidade / Marcello Cardoso

42. Engenharia de Usabilidade / Marcello Cardoso

43. Engenharia de Usabilidade / Marcello Cardoso
papel=desapego

44. Engenharia de Usabilidade / Marcello Cardoso

45. Engenharia de Usabilidade / Marcello Cardoso

46. Engenharia de Usabilidade / Marcello Cardoso
Prototipando e testando lo fi
http://www.youtube.com/watch?v=k9mTvt0LXgk

47. Engenharia de Usabilidade / Marcello Cardoso
wireouts

48. Engenharia de Usabilidade / Marcello Cardoso
layouts

49. Engenharia de Usabilidade / Marcello Cardoso
EM
G
Prot RUPO!
o
rasc tipar e
unho m
s, ou cima
tem refin dos
po: r á-lo
esto s
da a
ula
os
é ágil, podem
Lembrem que isso idido.
dec
mudar o que foi
DEAÇÃO = CAOS!
I

50. Engenharia de Usabilidade / Marcello Cardoso
igad o!
o br
Este arquivo contém a apresentação realizada por Marcello de Campos
Cardoso, em Agosto de 2012, para a disciplina Engenharia de Usabilidade
ministrada no curso de especialização Engenharia de Software Centrada em
Métodos Ágeis, no Centro Universitário UNA.