Apresentação realizada por Marcello de Campos Cardoso em Novembro de 2011 para a disciplina Design, usabilidade e arquitetura de informação, ministrada no curso de especialização em Pós Graduação em Marketing Digital no Centro Universitário Newton Paiva.
1. Design, usabilidade e arquitetura de informação / Marcello Cardoso
aula 04/06
Projetando a interface
Task Flow + Prototipação rápida
Pós Graduação em Marketing Digital
Design, usabilidade e arquitetura de informação
Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com
Friday, October 28, 2011
2. Design, usabilidade e arquitetura de informaçã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 20pts
3ª Técnica de Modelagem: Personas ágeis (workshop) 20pts
4ª Projetando a interface: Task Flow + Prototipação rápida (workshop) 20pts
5ª Perguntando a especialistas: As 10 heurísticas de Nielsen (workshop) 20pts
6ª Percurso cognitivo: Avaliando tarefas 20pts
Friday, October 28, 2011
3. Design, usabilidade e arquitetura de informação / Marcello Cardoso
recapitulando..
Friday, October 28, 2011
4. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Nome, Idade Papel
descrição, frase
Personas ágeis
emblemática
Necessidades no Tarefas no sistema
mundo real para necessidades
Técnica para a definição de modelos
de usuários do sistema, no intuito
de melhorar a visibilidade,
compreensão e comunicação sobre
seu comportamento de uso.
Auxilia no levantamento de user stories.
Friday, October 28, 2011
5. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Personas ágeis
1o passo: Determinar tipos de usuários
2o passo: Listar características de cada tipo
3o passo: Determinar usuários focais
Friday, October 28, 2011
6. Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
7. Design, usabilidade e arquitetura de informaçã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
rototipação
p
personas
Friday, October 28, 2011
8. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Prototipação
quebrando ovos para fazer omeletes
Friday, October 28, 2011
9. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Protótipo ~ modelo
=
Friday, October 28, 2011
10. Design, usabilidade e arquitetura de informação / Marcello Cardoso
lembrando...
São ferramentas simples e poderosas para
melhorar a visibilidade, compreensão e a
comunicação de informações.
Friday, October 28, 2011
11. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Podem ser de baixa ou alta resolução
Baixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
Friday, October 28, 2011
12. Design, usabilidade e arquitetura de informação / Marcello Cardoso
“Devemos criar exatamente quanta
documentação necessitamos para
executar bem um projeto, e não mais.”
-Dan Saffer
Friday, October 28, 2011
13. Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
14. Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
15. Design, usabilidade e arquitetura de informaçã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.
Friday, October 28, 2011
16. Design, usabilidade e arquitetura de informação / 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’
Friday, October 28, 2011
17. Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
18. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Task flows
diagrama de fluxo
Friday, October 28, 2011
19. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
20. FFFFFFFF
Design, usabilidade e arquitetura de informação / Marcello Cardoso
FFFFFFFF
FFFFFFFF
UUUUUUU
Friday, October 28, 2011
21. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Task flows
diagrama de fluxo
Fluxos são interações de um indivíduo, elementos / escolhas
Friday, October 28, 2011
22. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Task flows
diagrama de fluxo
Exemplo: Adicionando um item na TO-DO do Basecamp.
Friday, October 28, 2011
23. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Task flows
diagrama de fluxo
• É rápido de fazer e simples de enxergar.
• Ideal para sprints!
Friday, October 28, 2011
24. Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
25. Design, usabilidade e arquitetura de informação / Marcello Cardoso
TO DO DONE
PO !
EM GRU cipal
refa prin
o da ta
de finir flux
empo)
se der t
(e mais,
de uso.
ndo o s casos
considera
EMAIL.
AR PO R
A MAND
ANO TAR PAR
’
tempo: 15
Friday, October 28, 2011
26. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Rascunhos
Friday, October 28, 2011
27. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Rascunhos
• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso
Friday, October 28, 2011
28. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Storyboards
Friday, October 28, 2011
29. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Storyboards
Técnica da publicidade, HQs e cinema, que ilustra
interações complexas
Friday, October 28, 2011
30. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Storyboards
• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes
Friday, October 28, 2011
31. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Wireframes
Friday, October 28, 2011
32. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Wireframes
protótipos estruturais do sistema
Friday, October 28, 2011
33. Design, usabilidade e arquitetura de informaçã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)
Friday, October 28, 2011
34. Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
35. Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
36. Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
37. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
38. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
39. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
40. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
41. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
42. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
43. Design, usabilidade e arquitetura de informação / Marcello Cardoso
papel=desapego
Friday, October 28, 2011
44. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
45. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
46. Design, usabilidade e arquitetura de informação / Marcello Cardoso
Prototipando e testando lo fi
http://www.youtube.com/watch?v=k9mTvt0LXgk
Friday, October 28, 2011
47. Design, usabilidade e arquitetura de informação / Marcello Cardoso
wireouts
Friday, October 28, 2011
48. Design, usabilidade e arquitetura de informação / Marcello Cardoso
layouts
Friday, October 28, 2011
49. Design, usabilidade e arquitetura de informação / 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
Friday, October 28, 2011
50. Design, usabilidade e arquitetura de informaçã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 Design,
usabilidade e arquitetura de informação, ministrada no curso de
Pós Graduação em Marketing Digital no Centro Universitário
Newton Paiva.
Friday, October 28, 2011