Your SlideShare is downloading. ×
Newton Paiva - DI - Aula 04
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

Newton Paiva - DI - Aula 04

525

Published on

Apresentação realizada por Marcello de Campos Cardoso em Novembro de 2011 para a disciplina Design, usabilidade e arquitetura de informação, ministrada no curso de especialização em Pós Graduação …

Apresentação realizada por Marcello de Campos Cardoso em Novembro de 2011 para a disciplina Design, usabilidade e arquitetura de informação, ministrada no curso de especialização em Pós Graduação em Marketing Digital no Centro Universitário Newton Paiva.

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

No Downloads
Views
Total Views
525
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
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. Design, usabilidade e arquitetura de informação / Marcello Cardoso aula 04/06 Projetando a interface Task Flow + Prototipação rápida Pós Graduação em Marketing Digital Design, usabilidade e arquitetura de informação Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.comFriday, October 28, 2011
  • 2. Design, usabilidade e arquitetura de informaçã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 20pts 3ª Técnica de Modelagem: Personas ágeis (workshop) 20pts 4ª Projetando a interface: Task Flow + Prototipação rápida (workshop) 20pts 5ª Perguntando a especialistas: As 10 heurísticas de Nielsen (workshop) 20pts 6ª Percurso cognitivo: Avaliando tarefas 20ptsFriday, October 28, 2011
  • 3. Design, usabilidade e arquitetura de informação / Marcello Cardoso recapitulando..Friday, October 28, 2011
  • 4. Design, usabilidade e arquitetura de informação / Marcello Cardoso Nome, Idade Papel descrição, frase Personas ágeis emblemática Necessidades no Tarefas no sistema mundo real para necessidades Técnica para a definição de modelos de usuários do sistema, no intuito de melhorar a visibilidade, compreensão e comunicação sobre seu comportamento de uso. Auxilia no levantamento de user stories.Friday, October 28, 2011
  • 5. Design, usabilidade e arquitetura de informação / Marcello Cardoso Personas ágeis 1o passo: Determinar tipos de usuários 2o passo: Listar características de cada tipo 3o passo: Determinar usuários focaisFriday, October 28, 2011
  • 6. Design, usabilidade e arquitetura de informação / Marcello Cardoso Ciclo de vida do produto to jam isa to en o ne qu çã en lvim lida pla pes vo sen va deFriday, October 28, 2011
  • 7. Design, usabilidade e arquitetura de informaçã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 rototipação p personasFriday, October 28, 2011
  • 8. Design, usabilidade e arquitetura de informação / Marcello Cardoso Prototipação quebrando ovos para fazer omeletesFriday, October 28, 2011
  • 9. Design, usabilidade e arquitetura de informação / Marcello Cardoso Protótipo ~ modelo =Friday, October 28, 2011
  • 10. Design, usabilidade e arquitetura de informação / Marcello Cardoso lembrando... São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações.Friday, October 28, 2011
  • 11. Design, usabilidade e arquitetura de informação / Marcello Cardoso Podem ser de baixa ou alta resolução Baixa: Para explorar ideias, conceitos, fluxos Alta: para validar decisões pontuaisFriday, October 28, 2011
  • 12. Design, usabilidade e arquitetura de informação / Marcello Cardoso “Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.” -Dan SafferFriday, October 28, 2011
  • 13. Design, usabilidade e arquitetura de informaçã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 equipeFriday, October 28, 2011
  • 14. Design, usabilidade e arquitetura de informaçã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 usoFriday, October 28, 2011
  • 15. Design, usabilidade e arquitetura de informaçã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.Friday, October 28, 2011
  • 16. Design, usabilidade e arquitetura de informação / Marcello Cardoso 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’Friday, October 28, 2011
  • 17. Design, usabilidade e arquitetura de informaçã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 flowFriday, October 28, 2011
  • 18. Design, usabilidade e arquitetura de informação / Marcello Cardoso Task flows diagrama de fluxoFriday, October 28, 2011
  • 19. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, October 28, 2011
  • 20. FFFFFFFF Design, usabilidade e arquitetura de informação / Marcello CardosoFFFFFFFFFFFFFFFFUUUUUUUFriday, October 28, 2011
  • 21. Design, usabilidade e arquitetura de informação / Marcello Cardoso Task flows diagrama de fluxo Fluxos são interações de um indivíduo, elementos / escolhasFriday, October 28, 2011
  • 22. Design, usabilidade e arquitetura de informação / Marcello Cardoso Task flows diagrama de fluxo Exemplo: Adicionando um item na TO-DO do Basecamp.Friday, October 28, 2011
  • 23. Design, usabilidade e arquitetura de informação / Marcello Cardoso Task flows diagrama de fluxo • É rápido de fazer e simples de enxergar. • Ideal para sprints!Friday, October 28, 2011
  • 24. Design, usabilidade e arquitetura de informaçã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çãoFriday, October 28, 2011
  • 25. Design, usabilidade e arquitetura de informação / Marcello Cardoso TO DO DONE PO ! EM GRU cipal refa prin o da ta de finir flux empo) se der t (e mais, de uso. ndo o s casos considera EMAIL. AR PO R A MAND ANO TAR PAR ’ tempo: 15Friday, October 28, 2011
  • 26. Design, usabilidade e arquitetura de informação / Marcello Cardoso RascunhosFriday, October 28, 2011
  • 27. Design, usabilidade e arquitetura de informação / Marcello Cardoso Rascunhos • Ideias primárias, generalistas, fluxos. • São feios! estimulam a discussão sobre função e usoFriday, October 28, 2011
  • 28. Design, usabilidade e arquitetura de informação / Marcello Cardoso StoryboardsFriday, October 28, 2011
  • 29. Design, usabilidade e arquitetura de informação / Marcello Cardoso Storyboards Técnica da publicidade, HQs e cinema, que ilustra interações complexasFriday, October 28, 2011
  • 30. Design, usabilidade e arquitetura de informação / Marcello Cardoso Storyboards • Imagens + legendas • Ilustram fluxos, momentos chave • Casos de uso • Mostram ambientes e contextos • Complementam wireframesFriday, October 28, 2011
  • 31. Design, usabilidade e arquitetura de informação / Marcello Cardoso WireframesFriday, October 28, 2011
  • 32. Design, usabilidade e arquitetura de informação / Marcello Cardoso Wireframes protótipos estruturais do sistemaFriday, October 28, 2011
  • 33. Design, usabilidade e arquitetura de informaçã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)Friday, October 28, 2011
  • 34. Design, usabilidade e arquitetura de informaçã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 ideiasFriday, October 28, 2011
  • 35. Design, usabilidade e arquitetura de informaçã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áriosFriday, October 28, 2011
  • 36. Design, usabilidade e arquitetura de informaçã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údoFriday, October 28, 2011
  • 37. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, October 28, 2011
  • 38. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, October 28, 2011
  • 39. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, October 28, 2011
  • 40. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, October 28, 2011
  • 41. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, October 28, 2011
  • 42. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, October 28, 2011
  • 43. Design, usabilidade e arquitetura de informação / Marcello Cardoso papel=desapegoFriday, October 28, 2011
  • 44. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, October 28, 2011
  • 45. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, October 28, 2011
  • 46. Design, usabilidade e arquitetura de informação / Marcello Cardoso Prototipando e testando lo fi http://www.youtube.com/watch?v=k9mTvt0LXgkFriday, October 28, 2011
  • 47. Design, usabilidade e arquitetura de informação / Marcello Cardoso wireoutsFriday, October 28, 2011
  • 48. Design, usabilidade e arquitetura de informação / Marcello Cardoso layoutsFriday, October 28, 2011
  • 49. Design, usabilidade e arquitetura de informação / Marcello Cardoso EM G Prot RUPO! o rasc tipar e unho m s, ou cima tem 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! IFriday, October 28, 2011
  • 50. Design, usabilidade e arquitetura de informaçã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 Design, usabilidade e arquitetura de informação, ministrada no curso de Pós Graduação em Marketing Digital no Centro Universitário Newton Paiva.Friday, October 28, 2011

×