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