PUC/PFC - Prototipação

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.comMonday, 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 25ptsMonday, October 24, 2011

recapitulando..Monday, October 24, 2011

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.Monday, October 24, 2011

Personas ágeis 1o passo: Determinar tipos de usuários 2o passo: Listar características de cada tipo 3o passo: Determinar usuários focaisMonday, October 24, 2011

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 persMonday, October 24, 2011

Prototipação quebrando ovos para fazer omeletesMonday, October 24, 2011

Protótipo ~ modelo =Monday, October 24, 2011

lembrando... Modelos São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações.Monday, October 24, 2011

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

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

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 equipeMonday, October 24, 2011

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 usoMonday, October 24, 2011

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.Monday, October 24, 2011

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

RascunhosMonday, October 24, 2011

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

StoryboardsMonday, October 24, 2011

Storyboards Técnica da publicidade, HQs e cinema, que ilustra interações complexasMonday, October 24, 2011

Storyboards • Imagens + legendas • Ilustram fluxos, momentos chave • Casos de uso • Mostram ambientes e contextos • Complementam wireframesMonday, October 24, 2011

WireframesMonday, October 24, 2011

Wireframes protótipos estruturais do sistemaMonday, October 24, 2011

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)Monday, October 24, 2011

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 ideiasMonday, October 24, 2011

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áriosMonday, October 24, 2011

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údoMonday, October 24, 2011

Monday, October 24, 2011

papel=desapegoMonday, October 24, 2011

Monday, October 24, 2011

Prototipando e testando lo fi http://www.youtube.com/watch?v=k9mTvt0LXgkMonday, October 24, 2011

wireoutsMonday, October 24, 2011

layoutsMonday, October 24, 2011

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ÇÃOMonday, October 24, 2011

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.Monday, October 24, 2011

PUC/PFC - Prototipação

by Marcello Cardoso on Jun 08, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

PUC/PFC - Prototipação Presentation Transcript