• Like
PUC/PFC - Prototipação
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

PUC/PFC - Prototipação

  • 624 views
Published

Aula para a disciplina Produção e Ferramentas Colaborativas …

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

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
624
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
34
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 2. 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 final 25ptsMonday, October 24, 2011
  • 3. recapitulando..Monday, October 24, 2011
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. Prototipação quebrando ovos para fazer omeletesMonday, October 24, 2011
  • 8. Protótipo ~ modelo =Monday, October 24, 2011
  • 9. 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
  • 10. Podem ser de baixa ou alta resolução Baixa: Para explorar ideias, conceitos, fluxos Alta: para validar decisões pontuaisMonday, October 24, 2011
  • 11. “Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.” -Dan SafferMonday, October 24, 2011
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. RascunhosMonday, October 24, 2011
  • 17. Rascunhos • Ideias primárias, generalistas, fluxos. • São feios! estimulam a discussão sobre função e usoMonday, October 24, 2011
  • 18. StoryboardsMonday, October 24, 2011
  • 19. Storyboards Técnica da publicidade, HQs e cinema, que ilustra interações complexasMonday, October 24, 2011
  • 20. Storyboards • Imagens + legendas • Ilustram fluxos, momentos chave • Casos de uso • Mostram ambientes e contextos • Complementam wireframesMonday, October 24, 2011
  • 21. WireframesMonday, October 24, 2011
  • 22. Wireframes protótipos estruturais do sistemaMonday, October 24, 2011
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. Monday, October 24, 2011
  • 28. Monday, October 24, 2011
  • 29. Monday, October 24, 2011
  • 30. Monday, October 24, 2011
  • 31. Monday, October 24, 2011
  • 32. Monday, October 24, 2011
  • 33. papel=desapegoMonday, October 24, 2011
  • 34. Monday, October 24, 2011
  • 35. Monday, October 24, 2011
  • 36. Prototipando e testando lo fi http://www.youtube.com/watch?v=k9mTvt0LXgkMonday, October 24, 2011
  • 37. wireoutsMonday, October 24, 2011
  • 38. layoutsMonday, October 24, 2011
  • 39. 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
  • 40. 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