O documento resume uma aula sobre projetando a interface de usuário através de task flows e prototipação rápida. Ele discute como criar diagramas de fluxo de tarefas para mapear as interações do usuário e como fazer protótipos em papel para validar e refinar as ideias iniciais de design.
1. Análise e Design de Interação / Marcello Cardoso
aula 05/08
Projetando a interface
Task Flow + Prototipação rápida
Projeto e Arquitetura de Aplicações Internet
Análise e Design de Interação
Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com
Thursday, September 22, 2011
2. Análise e Design de Interação / Marcello Cardoso
Plano de curso
1ª Introdução a Usabilidade: conceitos, origem (DCU, IHC), aplicação (IxD),
tipos de design, metas de usabilidade, princípios de design.
2ª Conversando com usuários: Questionários e entrevistas 15pts
3ª Técnica de Modelagem: Personas ágeis (workshop) 10pts
4ª Separando releases: User Story Mapping 15pts
5ª Projetando a interface: Task Flow + Prototipação rápida (workshop) 10pts
6ª Perguntando a especialistas: Análise Heurística, As 10 heurísticas de 20pts
Nielsen (workshop)
7ª Testes de usabilidade (workshop - roteiro) 15pts
8ª Testes de usabilidade (workshop - aplicação) 15pts
Thursday, September 22, 2011
3. Análise e Design de Interação / Marcello Cardoso
Ciclo de vida do produto
to
jam isa
to
en
o
ne qu
çã
en
lvim
lida
pla pes
vo
sen
va
de
Thursday, September 22, 2011
4. Análise e Design de Interação / Marcello Cardoso
Questionários Ciclo de vida do produto
e
rking entrevistas
chma
Ben
to
jam isa
to
en
o
ne qu
çã
en
lvim
lida
pla pes
vo
sen
va
de
Stor rototipação
p
map y
ping personas
Thursday, September 22, 2011
5. Análise e Design de Interação / Marcello Cardoso
Prototipação
quebrando ovos para fazer omeletes
Thursday, September 22, 2011
6. Análise e Design de Interação / Marcello Cardoso
Protótipo ~ modelo
=
Thursday, September 22, 2011
7. Análise e Design de Interação / Marcello Cardoso
Modelos
São ferramentas simples e poderosas para melhorar a
visibilidade, compreensão e a comunicação de informações.
Thursday, September 22, 2011
8. Análise e Design de Interação / Marcello Cardoso
Podem ser de baixa ou alta resolução
Baixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
Thursday, September 22, 2011
9. Análise e Design de Interação / Marcello Cardoso
“Devemos criar exatamente quanta
documentação necessitamos para
executar bem um projeto, e não mais.”
-Dan Saffer
Thursday, September 22, 2011
10. Análise e Design de Interação / 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
Thursday, September 22, 2011
11. Análise e Design de Interação / 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
Thursday, September 22, 2011
12. Análise e Design de Interação / 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.
Thursday, September 22, 2011
13. Análise e Design de Interação / Marcello Cardoso
TO DO DONE
EM GRUPO!
Criar um cenário (primeiro uso ou
tarefa chave) e aplicá-lo em sua
Persona Focal + outra criada por seu
grupo, a sua escolha
tempo: 15’
Thursday, September 22, 2011
14. Análise e Design de Interação / 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
Thursday, September 22, 2011
15. Análise e Design de Interação / Marcello Cardoso
Task flows
diagrama de fluxo
Thursday, September 22, 2011
16. FFFFFFFF
Análise e Design de Interação / Marcello Cardoso
FFFFFFFF
FFFFFFFF
UUUUUUU
Thursday, September 22, 2011
17. Análise e Design de Interação / Marcello Cardoso
Task flows
diagrama de fluxo
Fluxos são interações de um indivíduo, elementos / escolhas
Thursday, September 22, 2011
18. Análise e Design de Interação / Marcello Cardoso
Task flows
diagrama de fluxo
Exemplo: Adicionando um item na TO-DO do Basecamp.
Thursday, September 22, 2011
19. Análise e Design de Interação / Marcello Cardoso
Task flows
diagrama de fluxo
• É rápido de fazer e simples de enxergar.
• Ideal para sprints!
Thursday, September 22, 2011
20. Análise e Design de Interação / 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
Thursday, September 22, 2011
21. Análise e Design de Interação / Marcello Cardoso
TO DO DONE
EM GRUPO!
principal
xo da tarefa
d efinir flu
po)
se der tem
(e mais, uso.
ndo os casos de
considera
’
tempo: 15
Thursday, September 22, 2011 sequência de uso
22. Análise e Design de Interação / Marcello Cardoso
Rascunhos
Thursday, September 22, 2011
23. Análise e Design de Interação / Marcello Cardoso
Rascunhos
• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso
Thursday, September 22, 2011
24. Análise e Design de Interação / Marcello Cardoso
Storyboards
Thursday, September 22, 2011
25. Análise e Design de Interação / Marcello Cardoso
Storyboards
Técnica da publicidade, HQs e cinema, que ilustra
interações complexas
Thursday, September 22, 2011
26. Análise e Design de Interação / Marcello Cardoso
Storyboards
• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes
Thursday, September 22, 2011
27. Análise e Design de Interação / Marcello Cardoso
Wireframes
Thursday, September 22, 2011
28. Análise e Design de Interação / Marcello Cardoso
Wireframes
protótipos estruturais do sistema
Thursday, September 22, 2011
29. Análise e Design de Interação / 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)
Thursday, September 22, 2011
30. Análise e Design de Interação / 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
Thursday, September 22, 2011
31. Análise e Design de Interação / 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
Thursday, September 22, 2011
32. Análise e Design de Interação / 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
Thursday, September 22, 2011
33. Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
34. Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
35. Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
36. Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
37. Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
38. Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
39. Análise e Design de Interação / Marcello Cardoso
papel=desapego
Thursday, September 22, 2011
40. Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
41. Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
42. Análise e Design de Interação / Marcello Cardoso
Prototipando e testando lo fi
http://www.youtube.com/watch?v=k9mTvt0LXgk
Thursday, September 22, 2011
43. Análise e Design de Interação / Marcello Cardoso
Exemplos: software (fireworks)
wireouts
Thursday, September 22, 2011
44. Análise e Design de Interação / Marcello Cardoso
Exemplos: software (fireworks)
layouts
Thursday, September 22, 2011
45. Análise e Design de Interação / Marcello Cardoso
EM
G
Prot RUPO!
o
rasc tipar e
unho m c
s, ou ima
tem refin dos
po: r á-lo
esto s
da a
ula
os
é ágil, podem
Lembrem que isso idido.
c
mudar o que foi de
DEAÇÃO = CAOS!
Thursday, September 22, 2011
I
46. Análise e Design de Interação / Marcello Cardoso
igad o!
o br
Este arquivo contém a apresentação realizada por Marcello de
Campos Cardoso, em Setembro de 2011, para a disciplina Análise
e Design de Interação, ministrada no curso de especialização em
Projeto e Arquitetura de Aplicações Internet na Faculdade
COTEMIG.
Thursday, September 22, 2011