• Like
UNA  - Eng Usa '12 - aula 04
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

UNA - Eng Usa '12 - aula 04

  • 1,092 views
Published

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 …

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.

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
No Downloads

Views

Total Views
1,092
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
92
Comments
0
Likes
4

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. 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. Engenharia de Usabilidade / Marcello Cardosorecapitulando..
  • 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. 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. 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. Engenharia de Usabilidade / Marcello CardosoPrototipaçãoquebrando ovos para fazer omeletes
  • 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. 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. Engenharia de Usabilidade / Marcello CardosoProtótipo ~ modelo =
  • 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. Engenharia de Usabilidade / Marcello CardosoPodem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxosAlta: para validar decisões pontuais
  • 12. Engenharia de Usabilidade / Marcello Cardoso “Devemos criar exatamente quantadocumentação necessitamos paraexecutar bem um projeto, e não mais.” -Dan Saffer
  • 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. 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. 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. 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. 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. Engenharia de Usabilidade / Marcello CardosoTask flowsdiagrama de fluxo
  • 19. Engenharia de Usabilidade / Marcello Cardoso
  • 20. FFFFFFFF Engenharia de Usabilidade / Marcello CardosoFFFFFFFFFFFFFFFFUUUUUUU
  • 21. Engenharia de Usabilidade / Marcello CardosoTask flowsdiagrama de fluxoFluxos são interações de um indivíduo, elementos / escolhas
  • 22. Engenharia de Usabilidade / Marcello CardosoTask flowsdiagrama de fluxoExemplo: Adicionando um item na TO-DO do Basecamp.
  • 23. Engenharia de Usabilidade / Marcello CardosoTask flowsdiagrama de fluxo• É rápido de fazer e simples de enxergar.• Ideal para sprints!
  • 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. 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. Engenharia de Usabilidade / Marcello CardosoRascunhos
  • 27. Engenharia de Usabilidade / Marcello CardosoRascunhos• Ideias primárias, generalistas, fluxos.• São feios! estimulam a discussão sobre função e uso
  • 28. Engenharia de Usabilidade / Marcello CardosoStoryboards
  • 29. Engenharia de Usabilidade / Marcello Cardoso StoryboardsTécnica da publicidade, HQs e cinema, que ilustra interações complexas
  • 30. Engenharia de Usabilidade / Marcello Cardoso Storyboards• Imagens + legendas• Ilustram fluxos, momentos chave• Casos de uso• Mostram ambientes e contextos• Complementam wireframes
  • 31. Engenharia de Usabilidade / Marcello CardosoWireframes
  • 32. Engenharia de Usabilidade / Marcello CardosoWireframesprotótipos estruturais do sistema
  • 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. 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. 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. 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. Engenharia de Usabilidade / Marcello Cardoso
  • 38. Engenharia de Usabilidade / Marcello Cardoso
  • 39. Engenharia de Usabilidade / Marcello Cardoso
  • 40. Engenharia de Usabilidade / Marcello Cardoso
  • 41. Engenharia de Usabilidade / Marcello Cardoso
  • 42. Engenharia de Usabilidade / Marcello Cardoso
  • 43. Engenharia de Usabilidade / Marcello Cardosopapel=desapego
  • 44. Engenharia de Usabilidade / Marcello Cardoso
  • 45. Engenharia de Usabilidade / Marcello Cardoso
  • 46. Engenharia de Usabilidade / Marcello CardosoPrototipando e testando lo fihttp://www.youtube.com/watch?v=k9mTvt0LXgk
  • 47. Engenharia de Usabilidade / Marcello Cardosowireouts
  • 48. Engenharia de Usabilidade / Marcello Cardosolayouts
  • 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. 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.