a arte de prototipar

48
A ARTE DE PROTOTIPAR Criada por / e / Douglas Hermann @DouglasHermann Felipe Plets @FelipePlets

Upload: appstartup

Post on 21-Jun-2015

352 views

Category:

Technology


0 download

DESCRIPTION

A melhor pessoa para dizer como sua App deve ser é o seu usuário, o problema é que não é fácil extrair essa valiosa informação dele. É neste ponto que os protótipos entram em cena, com poucas horas de investimento, estes te dão a oportunidade de mergulhar nos pensamentos dos usuários e obter o feedback necessário para fazer uma App matadora.

TRANSCRIPT

Page 1: A Arte de Prototipar

A ARTE DEPROTOTIPAR

Criada por / e /

Douglas Hermann @DouglasHermannFelipe Plets @FelipePlets

Page 2: A Arte de Prototipar

TALKS.APPSTARTUP.ME/PROTOTIPAR

Page 3: A Arte de Prototipar
Page 4: A Arte de Prototipar
Page 5: A Arte de Prototipar

O QUE É UM PROTÓTIPO?

Representação total ou parcial de um sistema interativo;

Artefato tangível e não uma descrição abstrata;

Utilizado para visualizar e refletir sobre o sistema final.

Page 6: A Arte de Prototipar
Page 7: A Arte de Prototipar
Page 8: A Arte de Prototipar
Page 9: A Arte de Prototipar
Page 10: A Arte de Prototipar
Page 11: A Arte de Prototipar

PROTÓTIPOS, MOCKUPS EWIREFRAMES

Page 12: A Arte de Prototipar

WIREFRAMES

Page 13: A Arte de Prototipar

MOCKUPS

Page 14: A Arte de Prototipar

PROTOTYPES

Page 15: A Arte de Prototipar

POR QUE PROTOTIPAR?

Page 16: A Arte de Prototipar

A ÚNICA MANEIRA DE DESCOBRIR OQUE AS PESSOAS REALMENTE

QUEREM É PRESTANDO ATENÇÃONELAS.

Page 17: A Arte de Prototipar

"Prototypes let you create a caviar app on ahotdog budget, easily paying for themselves

in the end." - Carla White

Page 18: A Arte de Prototipar
Page 19: A Arte de Prototipar

DIMENSÕES DE UM PROTÓTIPO

Page 20: A Arte de Prototipar

Ex.:

REPRESENTAÇÃO

Papel;

Digital.

Page 21: A Arte de Prototipar

Ex.:

PRECISÃO

Baixa fidelidade;

Alta fidelidade.

Page 22: A Arte de Prototipar

Ex.:

INTERATIVIDADE

Apenas observar;

Interações básicas;

Totalmente interativo.

Page 23: A Arte de Prototipar

Ex.:

EVOLUÇÃO

Descartável;

Evolucionário;

Incremental.

Page 24: A Arte de Prototipar
Page 25: A Arte de Prototipar

COMECE PELO FLUXOGRAMA

Page 26: A Arte de Prototipar

MANTENHA SIMPLES

Page 27: A Arte de Prototipar

EXEMPLO DE FLUXOGRAMA

Page 28: A Arte de Prototipar
Page 29: A Arte de Prototipar

BAIXA FIDELIDADE

Page 30: A Arte de Prototipar

ESBOÇO COM PAPEL E CANETA

Page 31: A Arte de Prototipar

www.uistencils.com

ESTÊNCILS

Page 32: A Arte de Prototipar

ALTA FIDELIDADE

Page 33: A Arte de Prototipar

FERRAMENTAS

Page 34: A Arte de Prototipar

BALSAMIQ

Page 35: A Arte de Prototipar

FLUID UI

Page 36: A Arte de Prototipar

PENCIL PROJECT

Page 37: A Arte de Prototipar

PROTO.IO

Page 38: A Arte de Prototipar

PROTÓTIPOS FUNCIONAIS

Seja consistente.

Use exemplos reais.

Certifique-se que os controles da tela possam ser tocados.

Não vá a fundo nos detalhes.

Page 39: A Arte de Prototipar
Page 40: A Arte de Prototipar

VALIDAÇÃO

Page 41: A Arte de Prototipar

CRIATIVIDADE PARA VALIDAR

Page 42: A Arte de Prototipar

CAPTURE FEEDBACK "ÚTIL"

Use mais os olhos e ouvidos do que a boca.

Não discuta sobre sua App com o usuário.

Os testes devem durar poucos minutos.

A cada "huh?" que você escutar, você tem algo paraarrumar.

Page 43: A Arte de Prototipar

"GET IT?"

O que o usuário pensou sobre a app?

Por que ele pensou isso?

Entendeu o fluxo de navegação?

Entendeu o propósito dos controles?

Page 44: A Arte de Prototipar

"FIVE-SECOND TEST"

Chamou a atenção do usuário?

O que chamou mais a atenção?

O que chamou menos a atenção?

Aonde ele tocou primeiro?

Page 45: A Arte de Prototipar
Page 46: A Arte de Prototipar
Page 47: A Arte de Prototipar
Page 48: A Arte de Prototipar

Saiba mais em

OBRIGADO!

APPSTARTUP.ME

Criada por / e /

Douglas Hermann @DouglasHermannFelipe Plets @FelipePlets