Prototipação rápida em papel para validar interfaces

aula 05/08

Projetando a interface
Prototipação rápida

Produção e Ferramentas Colaborativas
IEC - INSTITUTO DE Pós-Graduação em Produção em Mídias Digitais
EDUCAÇÃO CONTINUADA Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com

Monday, October 24, 2011

Plano de curso
1ª Apresentação do curso, aquecimento e posicionamento teórico -

2ª CMS + Social Media 10pts

3ª Conversando com usuários: Questionários e entrevistas 15pts

4ª Técnica de Modelagem: Personas ágeis 15pts

5ª Projetando a interface: Prototipação rápida em papel 20pts

6ª Criando seu blog no Wordpress -

7ª Implantação do blog 15pts

8ª Apresentação ﬁnal 25pts


recapitulando..


Nome, Idade
Papel

Personas ágeis descrição, frase
emblemática

Técnica para a definição de Necessidades no mundo Tarefas no sistema

modelos de usuários do sistema,
real para necessidades

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


Questionários Ciclo de vida do produto
rking entrevistas
e
chma
Ben

to
jam isa
to

en

o
ne qu

çã
en

lvim
pla pes

lida
vo
sen

va
de

Stor
map y rototipação
ping onas p
pers

Prototipação
quebrando ovos para fazer omeletes


Protótipo ~ modelo
=


lembrando...

Modelos
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’


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 c
s, ou ima
tem refin dos
po: r á-lo
esto s
da a
ula

os
é ágil, podem
Lembre m que isso .
foi decidido
udar o que
= CAOS!
m
I DEAÇÃO

igad o!
o br
Este arquivo contém a apresentação realizada por Marcello de
Campos Cardoso, em Outubro de 2011, para a disciplina
Produção e Ferramentas Colaborativas, ministrada no curso de
especialização em Mídias Digitais Internet na PUC Minas.


Prototipação rápida em papel para validar interfaces

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Prototipação rápida em papel para validar interfaces

Ähnlich wie Prototipação rápida em papel para validar interfaces (20)

Mehr von Marcello Cardoso

Mehr von Marcello Cardoso (20)

Prototipação rápida em papel para validar interfaces