Your SlideShare is downloading. ×
Planejamento de um wireframe orientado para aplicativos
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

Planejamento de um wireframe orientado para aplicativos

7,510
views

Published on

Minha palestra sobre Planejamento de um wireframe orientado para aplicativos no iMaster Intercon 2011

Minha palestra sobre Planejamento de um wireframe orientado para aplicativos no iMaster Intercon 2011

Published in: Design

2 Comments
43 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,510
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
158
Comments
2
Likes
43
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. Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
  • 2. Bernard De LunaPublicitário, 27 anosCariocaEspecialista em Design Funcional e Front-endCoordenador Front-endwww.bernarddeluna.comwww.bernarddeluna.com/blog@bernarddeluna
  • 3. Metódico como designer?www.bernarddeluna.com @bernarddeluna
  • 4. Pela última vez, arte, estética, desenho, ilustração não são a mesma coisa que design.www.bernarddeluna.com @bernarddeluna
  • 5. Ideal artístico x Ideal de engenharia O ideal artístico de expressar-se e o ideal da engenharia de resolver um problema para o cliente. Este livro coloca-se firmemente ao lado da engenharia. Embora eu reconheça que haja necessidade de arte, alegria e diversão na Web, acredito que o principal objetivo da maioria dos projetos da web seja facilitar aos clientes o desempenho de tarefas úteis Jakob Nielsen - Designing web usability: The practice of simplicity.www.bernarddeluna.com @bernarddeluna
  • 6. O absurdo de planejar o tiro municiando a arma, sem antes identificar o alvo. Até porque o alvo é que determina a escolha da arma. O tiro e o alvo – Horácio Soares Netowww.bernarddeluna.com @bernarddeluna
  • 7. Research
  • 8. A good designer may not have all the answers, but he knows which questions to ask. Rudy Dukewww.bernarddeluna.com @bernarddeluna
  • 9. Apresentação • Peça para ser apresentado ao projeto, deixe seu cliente contar tudo sobre a ideia do aplicativo. • O aplicativo precisa ser documentada por escrito. • Não permita que sua reunião demore mais de 40 minutos.www.bernarddeluna.com @bernarddeluna
  • 10. Identifique a arena • Pesquise concorrentes diretos e indiretos • Documente o aplicativo dos concorrentes com base na documentação do seu cliente • Identifique os pontos de seus clientes (positivos e negativos)www.bernarddeluna.com @bernarddeluna
  • 11. Entrevistas • Após ler a documentação, prepare-se para criar uma pauta para entrevistas • Defina os “Stakeholders” e entreviste-os. • Entreviste usuários (internos ou não).www.bernarddeluna.com @bernarddeluna
  • 12. http://www.youtube.com/watch?v=XlcDtCX-GwEwww.bernarddeluna.com @bernarddeluna
  • 13. Brainstormizando 25 minutoswww.bernarddeluna.com @bernarddeluna
  • 14. Brainstormizando 50 ideiaswww.bernarddeluna.com @bernarddeluna
  • 15. Cuidado com o brainstormingwww.bernarddeluna.com @bernarddeluna
  • 16. O opinião do seu cliente tem A MESMA IMPORTÂNCIA que qualquer outro empregadowww.bernarddeluna.com @bernarddeluna
  • 17. Em uma cultura inovativa, todo mundo se sente capaz de falar e vão falar muito. Em uma cultura não-inovativa, o chefe fala o tempo todo. David Kelley, IDEOwww.bernarddeluna.com @bernarddeluna
  • 18. Personas
  • 19. Se eu perguntasse para os meus clientes o que eles desejavam, eles diriam: um cavalo mais veloz Henry Fordwww.bernarddeluna.com @bernarddeluna
  • 20. As pessoas não sabem o que querem até você mostrar a elas Steve Jobswww.bernarddeluna.com @bernarddeluna
  • 21. Postura reativa x Postura proativa Horácio Soares Netowww.bernarddeluna.com @bernarddeluna
  • 22. Centro de Informações de Novos negócioswww.bernarddeluna.com @bernarddeluna
  • 23. CASE: Centro de Informações de Novos negócioswww.bernarddeluna.com @bernarddeluna
  • 24. www.bernarddeluna.com @bernarddeluna
  • 25. www.bernarddeluna.com @bernarddeluna
  • 26. www.bernarddeluna.com @bernarddeluna
  • 27. www.bernarddeluna.com @bernarddeluna
  • 28. www.bernarddeluna.com @bernarddeluna
  • 29. www.bernarddeluna.com @bernarddeluna
  • 30. www.bernarddeluna.com @bernarddeluna
  • 31. Goal first Then Behaviorwww.bernarddeluna.com @bernarddeluna
  • 32. Concept
  • 33. salão Campo Society Kart Paintball Futebol Voleibol JogadaCerta Tênis Basquetebol Videogame Cartaswww.bernarddeluna.com @bernarddeluna
  • 34. www.bernarddeluna.com @bernarddeluna
  • 35. http://www.youtube.com/watch?v=NugRZGDbPFUwww.bernarddeluna.com @bernarddeluna
  • 36. www.bernarddeluna.com @bernarddeluna
  • 37. www.bernarddeluna.com @bernarddeluna
  • 38. www.bernarddeluna.com @bernarddeluna
  • 39. www.bernarddeluna.com @bernarddeluna
  • 40. ideia vendas sketch produçãowww.bernarddeluna.com @bernarddeluna
  • 41. Here’s the world’s worst idea for a movie: Titanic. It did okay at the box office Scott Adamswww.bernarddeluna.com @bernarddeluna
  • 42. www.bernarddeluna.com @bernarddeluna
  • 43. Sketchiando... 10 minutoswww.bernarddeluna.com @bernarddeluna
  • 44. Sketchiando... boxing glovewww.bernarddeluna.com @bernarddeluna
  • 45. Requirements
  • 46. www.bernarddeluna.com @bernarddeluna
  • 47. Levantamento de requisitos Imp. para o Imp. para o Viabilidade Requisito Descrição Comentários negócio usuário Técnica Usuários devem colocar login/ senha para acessar a Formulário plataforma. No caso de não High High Low de Login lembrarem a senha, deve haver opção para reset password por email.www.bernarddeluna.com @bernarddeluna
  • 48. Priorização de requisitos Alta prioridade (HP) Média prioridade (MP) Baixa prioridade (LP)www.bernarddeluna.com @bernarddeluna
  • 49. Se você não conseguiu identificar o CORE do seu aplicativo, algo está errado. Experimente o conceito “mobile first”www.bernarddeluna.com @bernarddeluna
  • 50. Fluxo da aplicação • Validar cenários e personas • Destacar “user goals” • Identificar buracos • Mapear seu aplicativo • Documentar interações • Reconhecer o coração da sua aplicaçãowww.bernarddeluna.com @bernarddeluna
  • 51. Facilitando o fluxo static dynamic future cluster Box and arrowswww.bernarddeluna.com @bernarddeluna
  • 52. wireframes
  • 53. SKETCH IDEIA WIREFRAME USABILIDADEwww.bernarddeluna.com @bernarddeluna
  • 54. www.bernarddeluna.com @bernarddeluna
  • 55. www.bernarddeluna.com @bernarddeluna
  • 56. www.bernarddeluna.com @bernarddeluna
  • 57. Comece pelo seu CORE (epicenter design).www.bernarddeluna.com @bernarddeluna
  • 58. Foco na estruturawww.bernarddeluna.com @bernarddeluna
  • 59. www.bernarddeluna.com @bernarddeluna
  • 60. Foco na interaçãowww.bernarddeluna.com @bernarddeluna
  • 61. www.bernarddeluna.com @bernarddeluna
  • 62. www.bernarddeluna.com @bernarddeluna
  • 63. Saiba como utilizar as heurísticas. Se preferir crie suas próprias Heurísticaswww.bernarddeluna.com @bernarddeluna
  • 64. http://jordisan.net/blog/2011/psychological-usability-heuristicswww.bernarddeluna.com @bernarddeluna
  • 65. 3 simple ux questions 3 simples perguntas de uxwww.bernarddeluna.com @bernarddeluna
  • 66. Can I use it? Consigo usá-lo?www.bernarddeluna.com @bernarddeluna
  • 67. Should I use it? Devo usá-lo?www.bernarddeluna.com @bernarddeluna
  • 68. Do I want to use it? Desejo usá-lo?www.bernarddeluna.com @bernarddeluna
  • 69. Não se esqueça da Memóriawww.bernarddeluna.com @bernarddeluna
  • 70. www.bernarddeluna.com @bernarddeluna
  • 71. www.bernarddeluna.com @bernarddeluna
  • 72. www.bernarddeluna.com @bernarddeluna
  • 73. www.bernarddeluna.com @bernarddeluna
  • 74. www.bernarddeluna.com @bernarddeluna
  • 75. www.bernarddeluna.com @bernarddeluna
  • 76. www.bernarddeluna.com @bernarddeluna
  • 77. www.bernarddeluna.com @bernarddeluna
  • 78. www.bernarddeluna.com @bernarddeluna
  • 79. www.bernarddeluna.com @bernarddeluna
  • 80. www.bernarddeluna.com @bernarddeluna
  • 81. Eae?www.bernarddeluna.com @bernarddeluna
  • 82. 1. Ball – Bola 2. Eraser – Borracha 3. Rat – Rato 4. Notebook 5. Anchor – Âncora 6. Rope – Corda 7. Dog – Cão 8. Dice – Dado 9. Elephant – Elefante 10. Lipstick - Batomwww.bernarddeluna.com @bernarddeluna
  • 83. 1. Ball – Bola 2. Eraser – Borracha 3. Rat – Rato 4. Notebook 5. Anchor – Âncora 6. Rope – Corda 7. Dog – Cão 8. Dice – Dado 9. Elephant – Elefante 10. Lipstick - Batomwww.bernarddeluna.com @bernarddeluna
  • 84. Ícones são traiçoeiroswww.bernarddeluna.com @bernarddeluna
  • 85. Teste o seu wireframewww.bernarddeluna.com @bernarddeluna
  • 86. Sexy projects
  • 87. Wireframe de compras coletivaswww.bernarddeluna.com @bernarddeluna
  • 88. >50% já se inscreveram 42% já realizaram compras 300% Aumento de impulsivoswww.bernarddeluna.com @bernarddeluna
  • 89. Wireframe de compra coletiva SEXYwww.bernarddeluna.com @bernarddeluna
  • 90. www.bernarddeluna.com @bernarddeluna
  • 91. Blank Slatewww.bernarddeluna.com @bernarddeluna
  • 92. www.bernarddeluna.com @bernarddeluna
  • 93. www.bernarddeluna.com @bernarddeluna
  • 94. Que tal uma página de erro assim?www.bernarddeluna.com @bernarddeluna
  • 95. www.bernarddeluna.com @bernarddeluna
  • 96. www.bernarddeluna.com @bernarddeluna
  • 97. www.bernarddeluna.com @bernarddeluna
  • 98. www.bernarddeluna.com @bernarddeluna
  • 99. www.bernarddeluna.com @bernarddeluna
  • 100. www.bernarddeluna.com @bernarddeluna
  • 101. www.bernarddeluna.com @bernarddeluna
  • 102. Não importa o seu negócio, usuário, budget, ou tempowww.bernarddeluna.com @bernarddeluna
  • 103. nunca se esqueçawww.bernarddeluna.com @bernarddeluna
  • 104. Seja Sexy@bernarddeluna