UNA - Eng Usa '12 - aula 04

1.439 visualizações

Publicada em

Este arquivo contém a apresentação realizada por Marcello de Campos Cardoso, em Agosto de 2012, para a disciplina Engenharia de Usabilidade ministrada no curso de especialização Engenharia de Software Centrada em Métodos Ágeis, no Centro Universitário UNA.

Publicada em: Design
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.439
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
100
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

UNA - Eng Usa '12 - aula 04

  1. 1. Engenharia de Usabilidade / Marcello CardosoPrototipaçãoquebrando ovos para fazer omeletes Engenharia de Software Centrada Em Métodos Ágeis Engenharia de Usabilidade Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com
  2. 2. Engenharia de Usabilidade / Marcello Cardosorecapitulando..
  3. 3. Engenharia de Usabilidade / Marcello Cardoso User Story MappingTécnica para a separação de releases no backlog, para encontrar o MVP, definir a espinha do produto e concentrar esforços de desenvolvimento.
  4. 4. Engenharia de Usabilidade / Marcello Cardoso User Story Mapping1) Listar funcionalidades2) Escrever em cartões3) Ordenar em fluxo de tarefas4) Ajustar posição quanto à criticidade5) Agrupar por atividades macros6) Marcar o primeiro release7) Marcar demais releases
  5. 5. Engenharia de Usabilidade / Marcello Cardoso Plano de curso1ª Introdução à EngUsa 10pts2ª Técnica de Modelagem: Personas ágeis 20pts3ª Fatiando releases com User Story Mapping 20pts4ª Projetando a interface: Task Flow + Prototipação rápida 25pts5ª Perguntando a especialistas: As 10 heurísticas de Nielsen 25pts
  6. 6. Engenharia de Usabilidade / Marcello CardosoPrototipaçãoquebrando ovos para fazer omeletes
  7. 7. Engenharia de Usabilidade / Marcello Cardoso Ciclo de vida do produto Story rking mapping chmaBen to jam isa to en o ne qu çã en lvim lida pla pes vo sen va deEtnograf Prototipação ia digital Personas
  8. 8. Engenharia de Usabilidade / Marcello Cardoso Onde aplicar? du ran te ite raç õe Reunião diária s ProdutoBacklog do Backlog do potencialmente produto sprint “entregável”
  9. 9. Engenharia de Usabilidade / Marcello CardosoProtótipo ~ modelo =
  10. 10. Engenharia de Usabilidade / Marcello Cardoso lembrando...São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações.
  11. 11. Engenharia de Usabilidade / Marcello CardosoPodem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxosAlta: para validar decisões pontuais
  12. 12. Engenharia de Usabilidade / Marcello Cardoso “Devemos criar exatamente quantadocumentação necessitamos paraexecutar bem um projeto, e não mais.” -Dan Saffer
  13. 13. Engenharia de Usabilidade / 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 equipe
  14. 14. Engenharia de Usabilidade / 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 uso
  15. 15. Engenharia de Usabilidade / Marcello CardosoCená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 semanapassada e decide usá-lo de novo para esta semana. Remove alguns itensarrastando-os de sua Cestinha®, e o valor ajusta automaticamente.Satisfeita com a compra, clica no botão Entrega rápida e confirma odébito em seu cartão de crédito previamente salvo. A tela deconfirmação informa para esperar a entrega nas próximas 2 horas.
  16. 16. Engenharia de Usabilidade / Marcello Cardoso TO DO DONEEM GRUPO!Criar um cenário (primeiro uso outarefa chave) e aplicá-lo em suaPersona Focal.ANOTAR PARA MANDAR POR EMAIL.tempo: 15’
  17. 17. Engenharia de Usabilidade / Marcello Cardoso Task flows diagrama de fluxo• Fluxos são tão importantes quanto telas• Quanto mais “cascata”, mais robusto e formal o task flow
  18. 18. Engenharia de Usabilidade / Marcello CardosoTask flowsdiagrama de fluxo
  19. 19. Engenharia de Usabilidade / Marcello Cardoso
  20. 20. FFFFFFFF Engenharia de Usabilidade / Marcello CardosoFFFFFFFFFFFFFFFFUUUUUUU
  21. 21. Engenharia de Usabilidade / Marcello CardosoTask flowsdiagrama de fluxoFluxos são interações de um indivíduo, elementos / escolhas
  22. 22. Engenharia de Usabilidade / Marcello CardosoTask flowsdiagrama de fluxoExemplo: Adicionando um item na TO-DO do Basecamp.
  23. 23. Engenharia de Usabilidade / Marcello CardosoTask flowsdiagrama de fluxo• É rápido de fazer e simples de enxergar.• Ideal para sprints!
  24. 24. Engenharia de Usabilidade / Marcello Cardoso Task flows diagrama de fluxoEstrutura • 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ção
  25. 25. Engenharia de Usabilidade / Marcello Cardoso TO DO DONE PO !EM GRU principal tarefa luxo dadefinir f empo) s e der t (e mais, uso. ndo os casos de considera L. R EMAI AN DAR PO PARA M ANOTAR ’ t empo: 15
  26. 26. Engenharia de Usabilidade / Marcello CardosoRascunhos
  27. 27. Engenharia de Usabilidade / Marcello CardosoRascunhos• Ideias primárias, generalistas, fluxos.• São feios! estimulam a discussão sobre função e uso
  28. 28. Engenharia de Usabilidade / Marcello CardosoStoryboards
  29. 29. Engenharia de Usabilidade / Marcello Cardoso StoryboardsTécnica da publicidade, HQs e cinema, que ilustra interações complexas
  30. 30. Engenharia de Usabilidade / Marcello Cardoso Storyboards• Imagens + legendas• Ilustram fluxos, momentos chave• Casos de uso• Mostram ambientes e contextos• Complementam wireframes
  31. 31. Engenharia de Usabilidade / Marcello CardosoWireframes
  32. 32. Engenharia de Usabilidade / Marcello CardosoWireframesprotótipos estruturais do sistema
  33. 33. Engenharia de Usabilidade / Marcello CardosoWireframesprotótipos estruturais do sistemaRegistram as funcionalidades do produto, seus aspectos técnicos e sualógica de negócios, sem a influência do design visual (branding, layout)
  34. 34. Engenharia de Usabilidade / Marcello CardosoWireframesprotótipos estruturais do sistemaRegistram as funcionalidades do produto, seus aspectos técnicos e sualógica de negócios, sem a influência do design visual (branding, layout)Podem ser usados para validar ideias
  35. 35. Engenharia de Usabilidade / Marcello CardosoWireframesprotótipos estruturais do sistemaRegistram as funcionalidades do produto, seus aspectos técnicos e sualógica de negócios, sem a influência do design visual (branding, layout)Podem ser usados para validar ideiasPodem ser usados para testes com usuários
  36. 36. Engenharia de Usabilidade / Marcello CardosoWireframesSubstituem documentos mais burocráticos, sãoespecificações visuais comprometidas com: • Estrutura • Arquitetura da informação • Controles (padrões de interação) • Conteúdo
  37. 37. Engenharia de Usabilidade / Marcello Cardoso
  38. 38. Engenharia de Usabilidade / Marcello Cardoso
  39. 39. Engenharia de Usabilidade / Marcello Cardoso
  40. 40. Engenharia de Usabilidade / Marcello Cardoso
  41. 41. Engenharia de Usabilidade / Marcello Cardoso
  42. 42. Engenharia de Usabilidade / Marcello Cardoso
  43. 43. Engenharia de Usabilidade / Marcello Cardosopapel=desapego
  44. 44. Engenharia de Usabilidade / Marcello Cardoso
  45. 45. Engenharia de Usabilidade / Marcello Cardoso
  46. 46. Engenharia de Usabilidade / Marcello CardosoPrototipando e testando lo fihttp://www.youtube.com/watch?v=k9mTvt0LXgk
  47. 47. Engenharia de Usabilidade / Marcello Cardosowireouts
  48. 48. Engenharia de Usabilidade / Marcello Cardosolayouts
  49. 49. Engenharia de Usabilidade / Marcello Cardoso EM G Prot RUPO! o rasc tipar e unho m s, ou cimatem refin dos po: r á-lo esto s da a ula os é ágil, podem Lembrem que isso idido. dec mudar o que foi DEAÇÃO = CAOS! I
  50. 50. Engenharia de Usabilidade / Marcello Cardoso igad o!o br Este arquivo contém a apresentação realizada por Marcello de Campos Cardoso, em Agosto de 2012, para a disciplina Engenharia de Usabilidade ministrada no curso de especialização Engenharia de Software Centrada em Métodos Ágeis, no Centro Universitário UNA.

×