Your SlideShare is downloading. ×
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
PAAI/DI - 05 - Prototipação
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

PAAI/DI - 05 - Prototipação

528

Published on

Apresentação realizada por Marcello de Campos Cardoso em Setembro de 2011 para a disciplina Análise e Design de Interação, ministrada no curso de especialização em Projeto e Arquitetura de Aplicações …

Apresentação realizada por Marcello de Campos Cardoso em Setembro de 2011 para a disciplina Análise e Design de Interação, ministrada no curso de especialização em Projeto e Arquitetura de Aplicações Internet na Faculdade COTEMIG.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
528
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
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. Análise e Design de Interação / Marcello Cardoso aula 05/08 Projetando a interface Task Flow + Prototipação rápida Projeto e Arquitetura de Aplicações Internet Análise e Design de Interação Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.comThursday, September 22, 2011
  • 2. Análise e Design de Interação / Marcello Cardoso Plano de curso 1ª Introdução a Usabilidade: conceitos, origem (DCU, IHC), aplicação (IxD), tipos de design, metas de usabilidade, princípios de design. 2ª Conversando com usuários: Questionários e entrevistas 15pts 3ª Técnica de Modelagem: Personas ágeis (workshop) 10pts 4ª Separando releases: User Story Mapping 15pts 5ª Projetando a interface: Task Flow + Prototipação rápida (workshop) 10pts 6ª Perguntando a especialistas: Análise Heurística, As 10 heurísticas de 20pts Nielsen (workshop) 7ª Testes de usabilidade (workshop - roteiro) 15pts 8ª Testes de usabilidade (workshop - aplicação) 15ptsThursday, September 22, 2011
  • 3. Análise e Design de Interação / Marcello Cardoso Ciclo de vida do produto to jam isa to en o ne qu çã en lvim lida pla pes vo sen va deThursday, September 22, 2011
  • 4. Análise e Design de Interação / Marcello Cardoso Questionários Ciclo de vida do produto e rking entrevistas chma Ben to jam isa to en o ne qu çã en lvim lida pla pes vo sen va de Stor rototipação p map y ping personasThursday, September 22, 2011
  • 5. Análise e Design de Interação / Marcello Cardoso Prototipação quebrando ovos para fazer omeletesThursday, September 22, 2011
  • 6. Análise e Design de Interação / Marcello Cardoso Protótipo ~ modelo =Thursday, September 22, 2011
  • 7. Análise e Design de Interação / Marcello Cardoso Modelos São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações.Thursday, September 22, 2011
  • 8. Análise e Design de Interação / Marcello Cardoso Podem ser de baixa ou alta resolução Baixa: Para explorar ideias, conceitos, fluxos Alta: para validar decisões pontuaisThursday, September 22, 2011
  • 9. Análise e Design de Interação / Marcello Cardoso “Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.” -Dan SafferThursday, September 22, 2011
  • 10. Análise e Design de Interação / Marcello Cardoso 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 equipeThursday, September 22, 2011
  • 11. Análise e Design de Interação / Marcello Cardoso 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 usoThursday, September 22, 2011
  • 12. Análise e Design de Interação / Marcello Cardoso 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.Thursday, September 22, 2011
  • 13. Análise e Design de Interação / Marcello Cardoso TO DO DONE EM GRUPO! Criar um cenário (primeiro uso ou tarefa chave) e aplicá-lo em sua Persona Focal + outra criada por seu grupo, a sua escolha tempo: 15’Thursday, September 22, 2011
  • 14. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo • Fluxos são tão importantes quanto telas • Quanto mais “cascata”, mais robusto e formal o task flowThursday, September 22, 2011
  • 15. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxoThursday, September 22, 2011
  • 16. FFFFFFFF Análise e Design de Interação / Marcello CardosoFFFFFFFFFFFFFFFFUUUUUUUThursday, September 22, 2011
  • 17. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo Fluxos são interações de um indivíduo, elementos / escolhasThursday, September 22, 2011
  • 18. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo Exemplo: Adicionando um item na TO-DO do Basecamp.Thursday, September 22, 2011
  • 19. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo • É rápido de fazer e simples de enxergar. • Ideal para sprints!Thursday, September 22, 2011
  • 20. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo Estrutura • Barra separa a UI da ação • Barra pontilhada separa as opções para mesma ação • Setas vão da ação para a nova UI • Se a UI for fora de escopo, mantém simples, sem açãoThursday, September 22, 2011
  • 21. Análise e Design de Interação / Marcello Cardoso TO DO DONE EM GRUPO! principal xo da tarefa d efinir flu po) se der tem (e mais, uso. ndo os casos de considera ’ tempo: 15Thursday, September 22, 2011 sequência de uso
  • 22. Análise e Design de Interação / Marcello Cardoso RascunhosThursday, September 22, 2011
  • 23. Análise e Design de Interação / Marcello Cardoso Rascunhos • Ideias primárias, generalistas, fluxos. • São feios! estimulam a discussão sobre função e usoThursday, September 22, 2011
  • 24. Análise e Design de Interação / Marcello Cardoso StoryboardsThursday, September 22, 2011
  • 25. Análise e Design de Interação / Marcello Cardoso Storyboards Técnica da publicidade, HQs e cinema, que ilustra interações complexasThursday, September 22, 2011
  • 26. Análise e Design de Interação / Marcello Cardoso Storyboards • Imagens + legendas • Ilustram fluxos, momentos chave • Casos de uso • Mostram ambientes e contextos • Complementam wireframesThursday, September 22, 2011
  • 27. Análise e Design de Interação / Marcello Cardoso WireframesThursday, September 22, 2011
  • 28. Análise e Design de Interação / Marcello Cardoso Wireframes protótipos estruturais do sistemaThursday, September 22, 2011
  • 29. Análise e Design de Interação / Marcello Cardoso 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)Thursday, September 22, 2011
  • 30. Análise e Design de Interação / Marcello Cardoso 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 ideiasThursday, September 22, 2011
  • 31. Análise e Design de Interação / Marcello Cardoso 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áriosThursday, September 22, 2011
  • 32. Análise e Design de Interação / Marcello Cardoso 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údoThursday, September 22, 2011
  • 33. Análise e Design de Interação / Marcello CardosoThursday, September 22, 2011
  • 34. Análise e Design de Interação / Marcello CardosoThursday, September 22, 2011
  • 35. Análise e Design de Interação / Marcello CardosoThursday, September 22, 2011
  • 36. Análise e Design de Interação / Marcello CardosoThursday, September 22, 2011
  • 37. Análise e Design de Interação / Marcello CardosoThursday, September 22, 2011
  • 38. Análise e Design de Interação / Marcello CardosoThursday, September 22, 2011
  • 39. Análise e Design de Interação / Marcello Cardoso papel=desapegoThursday, September 22, 2011
  • 40. Análise e Design de Interação / Marcello CardosoThursday, September 22, 2011
  • 41. Análise e Design de Interação / Marcello CardosoThursday, September 22, 2011
  • 42. Análise e Design de Interação / Marcello Cardoso Prototipando e testando lo fi http://www.youtube.com/watch?v=k9mTvt0LXgkThursday, September 22, 2011
  • 43. Análise e Design de Interação / Marcello Cardoso Exemplos: software (fireworks) wireoutsThursday, September 22, 2011
  • 44. Análise e Design de Interação / Marcello Cardoso Exemplos: software (fireworks) layoutsThursday, September 22, 2011
  • 45. Análise e Design de Interação / Marcello Cardoso 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 Lembrem que isso idido. c mudar o que foi de DEAÇÃO = CAOS!Thursday, September 22, 2011 I
  • 46. Análise e Design de Interação / Marcello Cardoso igad o! o br Este arquivo contém a apresentação realizada por Marcello de Campos Cardoso, em Setembro de 2011, para a disciplina Análise e Design de Interação, ministrada no curso de especialização em Projeto e Arquitetura de Aplicações Internet na Faculdade COTEMIG.Thursday, September 22, 2011

×