puc/pfc - prototipação

40
IEC - INSTITUTO DE EDUCAÇÃO CONTINUADA aula 05/08 Projetando a interface Prototipação rápida Produção e Ferramentas Colaborativas Pós-Graduação em Produção em Mídias Digitais Marcello de Campos Cardoso | www.mcardoso.com.br | [email protected] Monday, October 24, 2011

Upload: marcello-cardoso

Post on 09-Jul-2015

662 views

Category:

Design


0 download

DESCRIPTION

Aula para a disciplina Produção e Ferramentas Colaborativas Pós-Graduação em Produção em Mídias Digitais Prof. Marcello de Campos Cardoso www.mcardoso.com.br 2o semestre de 2011

TRANSCRIPT

Page 1: PUC/PFC - Prototipação

IEC - INSTITUTO DEEDUCAÇÃO CONTINUADA

aula 05/08

Projetando a interfacePrototipação rápida

Produção e Ferramentas ColaborativasPós-Graduação em Produção em Mídias DigitaisMarcello de Campos Cardoso | www.mcardoso.com.br | [email protected]

Monday, October 24, 2011

Page 2: PUC/PFC - Prototipação

-

10pts

15pts

15pts

20pts

-

15pts

25pts

Plano de cursoApresentação do curso, aquecimento e posicionamento teórico

CMS + Social Media

Conversando com usuários: Questionários e entrevistas

Técnica de Modelagem: Personas ágeis

Projetando a interface: Prototipação rápida em papel

Criando seu blog no Wordpress

Implantação do blog

Apresentação final

Monday, October 24, 2011

Page 3: PUC/PFC - Prototipação

recapitulando...

Monday, October 24, 2011

Page 4: PUC/PFC - Prototipação

Personas ágeis

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.

Nome, Idade Papel

descrição, frase emblemática

Tarefas no sistema para necessidades

Necessidades no mundo real

Monday, October 24, 2011

Page 5: PUC/PFC - Prototipação

1o passo: Determinar tipos de usuários

2o passo: Listar características de cada tipo

3o passo: Determinar usuários focais

Personas ágeis

Monday, October 24, 2011

Page 6: PUC/PFC - Prototipação

Ciclo de vida do produto

personas

pesquisa

planejam

ento

desenvolvim

ento

validação

Questionários e entrevistasBen

chmarki

ng

Story mappingprototipa

ção

Monday, October 24, 2011

Page 7: PUC/PFC - Prototipação

Prototipaçãoquebrando ovos para fazer omeletes

Monday, October 24, 2011

Page 8: PUC/PFC - Prototipação

Protótipo = modelo~

Monday, October 24, 2011

Page 9: PUC/PFC - Prototipação

São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a

comunicação de informações.

lembrando...

Modelos

Monday, October 24, 2011

Page 10: PUC/PFC - Prototipação

Podem ser de baixa ou alta resolução

Baixa: Para explorar ideias, conceitos, fluxos

Alta: para validar decisões pontuais

Monday, October 24, 2011

Page 11: PUC/PFC - Prototipação

“Devemos criar exatamente quanta documentação necessitamos para

executar bem um projeto, e não mais.”-Dan Saffer

Monday, October 24, 2011

Page 12: PUC/PFC - Prototipação

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

Monday, October 24, 2011

Page 13: PUC/PFC - Prototipação

Cenário• 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

“São protótipos feitos de palavras”

Monday, October 24, 2011

Page 14: PUC/PFC - Prototipação

CenárioUma 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.

Monday, October 24, 2011

Page 15: PUC/PFC - Prototipação

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’

Monday, October 24, 2011

Page 16: PUC/PFC - Prototipação

Rascunhos

Monday, October 24, 2011

Page 17: PUC/PFC - Prototipação

Rascunhos• Ideias primárias, generalistas, fluxos.

• São feios! estimulam a discussão sobre função e uso

Monday, October 24, 2011

Page 18: PUC/PFC - Prototipação

Storyboards

Monday, October 24, 2011

Page 19: PUC/PFC - Prototipação

StoryboardsTécnica da publicidade, HQs e cinema, que ilustra

interações complexas

Monday, October 24, 2011

Page 20: PUC/PFC - Prototipação

Storyboards• Imagens + legendas

• Ilustram fluxos, momentos chave

• Casos de uso

• Mostram ambientes e contextos

• Complementam wireframes

Monday, October 24, 2011

Page 21: PUC/PFC - Prototipação

WireframesMonday, October 24, 2011

Page 22: PUC/PFC - Prototipação

Wireframesprotótipos estruturais do sistema

Monday, October 24, 2011

Page 23: PUC/PFC - Prototipação

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)

Wireframesprotótipos estruturais do sistema

Monday, October 24, 2011

Page 24: PUC/PFC - Prototipação

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)

Wireframesprotótipos estruturais do sistema

Podem ser usados para validar ideias

Monday, October 24, 2011

Page 25: PUC/PFC - Prototipação

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)

Wireframesprotótipos estruturais do sistema

Podem ser usados para validar ideiasPodem ser usados para testes com usuários

Monday, October 24, 2011

Page 26: PUC/PFC - Prototipação

Wireframes

• Estrutura• Arquitetura da informação

• Controles (padrões de interação)• Conteúdo

Substituem documentos mais burocráticos, são especificações visuais comprometidas com:

Monday, October 24, 2011

Page 27: PUC/PFC - Prototipação

Monday, October 24, 2011

Page 28: PUC/PFC - Prototipação

Monday, October 24, 2011

Page 29: PUC/PFC - Prototipação

Monday, October 24, 2011

Page 30: PUC/PFC - Prototipação

Monday, October 24, 2011

Page 31: PUC/PFC - Prototipação

Monday, October 24, 2011

Page 32: PUC/PFC - Prototipação

Monday, October 24, 2011

Page 33: PUC/PFC - Prototipação

papel=desapegoMonday, October 24, 2011

Page 34: PUC/PFC - Prototipação

Monday, October 24, 2011

Page 35: PUC/PFC - Prototipação

Monday, October 24, 2011

Page 36: PUC/PFC - Prototipação

http://www.youtube.com/watch?v=k9mTvt0LXgk

Prototipando e testando lo fi

Monday, October 24, 2011

Page 37: PUC/PFC - Prototipação

wireouts

Monday, October 24, 2011

Page 38: PUC/PFC - Prototipação

layouts

Monday, October 24, 2011

Page 39: PUC/PFC - Prototipação

Lembrem que isso é ágil, podemos

mudar o que foi decidido.

IDEAÇÃO = CAOS!

EM GRUPO!Prototipar em cima dos

rascunhos, ou refiná-lostempo: resto da aula

Monday, October 24, 2011

Page 40: PUC/PFC - Prototipação

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.

obrigado!

Monday, October 24, 2011