Newton Paiva - DI - Aula 04

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


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



recapitulando..



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.



Personas ágeis
1o passo: Determinar tipos de usuários

2o passo: Listar características de cada tipo

3o passo: Determinar usuários focais



Ciclo de vida do produto

to
jam isa
to

en

o
ne qu

çã
en

lvim

lida
pla pes

vo
sen

va
de



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


Prototipação
quebrando ovos para fazer omeletes



Protótipo ~ modelo
=



lembrando...

São ferramentas simples e poderosas para
melhorar a visibilidade, compreensão e a
comunicação de informações.



Podem ser de baixa ou alta resolução
Baixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais



“Devemos criar exatamente quanta
documentação necessitamos para
executar bem um projeto, e não mais.”
-Dan Saffer



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



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



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.



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’



Task flows
diagrama de fluxo
• Fluxos são tão importantes quanto telas
• Quanto mais “cascata”, mais robusto e formal o task flow



Task flows
diagrama de fluxo


FFFFFFFF

FFFFFFFF
FFFFFFFF
UUUUUUU


Task flows
diagrama de fluxo

Fluxos são interações de um indivíduo, elementos / escolhas



Task flows
diagrama de fluxo

Exemplo: Adicionando um item na TO-DO do Basecamp.



Task flows
diagrama de fluxo
• É rápido de fazer e simples de enxergar.
• Ideal para sprints!



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



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



Rascunhos



Rascunhos
• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso



Storyboards



Storyboards
Técnica da publicidade, HQs e cinema, que ilustra
interações complexas



Storyboards
• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes



Wireframes


Wireframes
protótipos estruturais do sistema



Wireframes
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)



Wireframes
Podem ser usados para validar ideias



Wireframes
Podem ser usados para validar ideias
Podem ser usados para testes com usuários



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



papel=desapego


Prototipando e testando lo fi
http://www.youtube.com/watch?v=k9mTvt0LXgk



wireouts



layouts



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


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.


Newton Paiva - DI - Aula 04

Mais conteúdo relacionado

Mais procurados

Semelhante a Newton Paiva - DI - Aula 04

Mais de Marcello Cardoso

Newton Paiva - DI - Aula 04