Designing for Interaction

download Designing for Interaction

of 94

  • date post

    13-Jun-2015
  • Category

    Design

  • view

    1.093
  • download

    0

Embed Size (px)

description

Lecture by Noel Perlas during the FFC 2012

Transcript of Designing for Interaction

  • 1. FormFunctionDesigning forClassInteraction11 Nov 2012Noel PerlasNoel Perlas 1

2. Interaction Bill VerplankFormFunctionClass How do you......feelcoolmaphot11 Nov 2012 ...knowpath handleNoel Perlasbutton ... d o 2 3. FormFunctionClassNoel PerlasXavier School11 Nov 2012HSAteneo de ManilaAB Interdisciplinary StudiesInteraction Design Institute IvreaMA Interaction DesignNoel Perlas 3 4. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasPhilippines: MicrosoftFirst Philippines website for the multinational company 4 5. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasPhilippines: Globe TelecomFirst unied properties website for Globe 5 6. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasSingapore: k2interactiveExploring broadband web-services/apps 6 7. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasItaly: Interaction Design Institute IvreaInteraction Design 7 8. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasItaly: Interaction Design Institute IvreaAudiografti 8 9. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasItaly: Interaction Design Institute IvreaAudiografti 9 10. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasItaly: Interaction Design Institute IvreaAudiografti in Salone del Mobile 10 11. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasGermany: Designafairs MunichInterface Design 11 12. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasGermany: Designafairs MunichSiemens Gigaset Cordless Phone Styleguide 12 13. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasPhilippines: ABS-CBN InteractiveTantra MMORPG 13 14. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasPhilippines: Novare TechnologiesBlogstar.com - Updates and Content from your favorite stars 14 15. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasPhilippines: Novare TechnologiesBB apps way before iOS apps 15 16. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasPhilippines: Lowe and PartnersCreative Technology 16 17. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasLowe and PartnersFEU Website & Web enrollment interface 17 18. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasLowe and PartnersAirphil Express website and booking 18 19. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasLowe and PartnersMobile Apps 19 20. Noel PerlasFormFunctionAbout MeClass11 Nov 2012Noel PerlasAteneo de Manila UniversityInformation Design Coordinator and Lecturer 20 21. Interaction Bill VerplankFormFunctionClass How do you......feelcoolmaphot11 Nov 2012 ...knowpath handleNoel Perlasbutton ... d o 21 22. FormFunctionClassWhy is this important11 Nov 2012Noel Perlas 22 23. FormFunctionClass11 Nov 2012Noel Perlaswe used to only have this 23 24. FormFunctionClass11 Nov 2012Noel Perlasand now we have this 24 25. FormFunctionClass11 Nov 2012Noel Perlaswe used to only have this 25 26. FormFunctionClass11 Nov 2012Noel Perlasand now we have this... 26 27. FormFunctionClass11 Nov 2012Noel Perlas 27 28. FormFunctionClass11 Nov 2012Noel Perlaswe used to only have this 28 29. FormFunctionClass11 Nov 2012Noel Perlasand now we have this... 29 30. FormFunctionClass11 Nov 2012Noel Perlas 30 31. FormFunctionClass11 Nov 2012Noel Perlasthis leads to confusion... 31 32. Task: copy 50 pages, back-to-backTop Xerox scientistsExecutive: Theyre just dumb 33. FormFunctionClass11 Nov 2012so we need to designfor interaction moreNoel Perlasthan ever before 33 34. FormFunction Growth ofClass Technology & Growth of Promised Functionality11 Nov 201219202020Noel Perlasbecause Moores Law ismore relevant than ever... 34 35. FormFunctionClassGrowth ofHumanCapability11 Nov 20121920 2020Noel Perlaswhile the human lawstays the same. 35 36. FormFunctionClass11 Nov 2012So how do we go aboutdesigning for interaction?Noel Perlas 36 37. InteractionFormFunctionClass How do you......feel coolmap hot11 Nov 2012 ...knowpathhandleNoel Perlas button ... d o 37 38. FormFunctionClass11 Nov 2012Noel PerlasYou start with understanding 38 your user 39. Form Self-reportedFunctionClassFOCUS GROUPS SURVEYS INTERVIEWSCARD SORTINGDirect Indirect11 Nov 2012 DIARIES/JOURNALS ETHNOGRAPHIC RESEARCH SITE LOGSFIELD REPORT STATISTICSACTIVITY ANALYSIS FEEDBACK FORMSNoel PerlasObserved 39 40. Form Self-reportedFunctionClassFOCUS GROUPS SURVEYS INTERVIEWSCARD SORTINGDirect Indirect11 Nov 2012 DIARIES/JOURNALS ETHNOGRAPHIC RESEARCH SITE LOGSFIELD REPORT STATISTICSACTIVITY ANALYSIS FEEDBACK FORMSNoel PerlasObserved 40 41. FormFunctionClass11 Nov 2012Noel PerlasBronislaw Malinowski: Anthropologist 41 42. DoingFormFunctionClassThinking Feeling11 Nov 2012Noel Perlas 42Empathy 43. FormFunctionClass11 Nov 2012Personas ScenariosRich Description of:Focus on: Behavior Product Use GoalsFrequency of UseNoel Perlas NeedsActivities to be DoneEnd Results 43 44. InteractionFormFunctionClass How do you......feel coolmap hot11 Nov 2012 ...knowpathhandleNoel Perlas button ... d o 44 45. InteractionFormFunctionClass11 Nov 2012handleNoel Perlas button ... d o 45 46. Designing the doFormFunction(or the interface)Class11 Nov 2012FeedbackNoel PerlasMappingRedundancyConstraint 46 47. FormFeedbackFunctionClass11 Nov 2012Noel PerlasAction - ReactionAlthough this seems obvious, it is often overlooked 47 48. FormMappingFunctionClass11 Nov 2012 1Noel Perlas 48 49. FormMappingFunctionClass11 Nov 2012 12Noel Perlas 49 50. FormMappingFunctionClass11 Nov 2012 1 2 3Noel PerlasHandles should map to their respective functions 50 51. FormRedundancyFunctionClass11 Nov 2012 Showing the same thing more than once If a signal is presented more thanNoel Perlas once, it is more likely that it will be understood correctly. 51 52. FormConstraintFunctionClass11 Nov 2012Noel PerlasLimiting what your users can do to the barest minimum 52 53. InteractionFormFunctionClass How do you......feel coolmap hot11 Nov 2012 ...knowpathhandleNoel Perlas button ... d o 53 54. InteractionFormFunctionClassHow do you... ...feelcoolhot11 Nov 2012Noel Perlas 54 55. FormDesigning the feelFunctionClass11 Nov 2012Noel PerlasThrough prototyping 55 56. FormPrototypingFunctionClass FIDELITY11 Nov 2012Noel PerlasTIME 56 57. FormPrototypingFunctionClass Role11 Nov 2012Look & Feel ImplementationNoel Perlas 57 58. FormPrototypingFunctionClass Role11 Nov 2012Look & Feel ImplementationNoel Perlas 58 59. Feel 60. FeelFormFunctionClass11 Nov 2012Noel Perlas 60 61. Feel 62. Feel 63. Look 64. LookFormFunctionClass11 Nov 2012Noel Perlas 65. Look 66. Look 67. FormPrototypingFunctionClass Role11 Nov 2012Look & Feel ImplementationNoel Perlas 67 68. Role 69. Role 70. Role 71. Role 72. FormPrototypingFunctionClass Role11 Nov 2012Look & Feel ImplementationNoel Perlas 72 73. Implementation 74. Implementation 75. FormPrototypingFunctionClass Role11 Nov 2012Look & Feel ImplementationNoel Perlas 75 76. Combination 77. InteractionFormFunctionClass How do you......feel coolmap hot11 Nov 2012 ...knowpathhandleNoel Perlas button ... d o 77 78. FormFunctionClassmap11 Nov 2012 ...knowpathNoel Perlas 78 79. FormDesigning the knowFunctionClass11 Nov 2012Noel PerlasMap vs Path 79 80. FormFunctionClass11 Nov 2012Noel PerlasMap Path 80 81. PathFormFunctionClass11 Nov 2012Noel Perlas 81 82. PathFormFunctionClass11 Nov 2012Noel Perlas 82 83. PathFormFunctionClass11 Nov 2012Noel Perlas 83 84. PathFormFunctionClass11 Nov 2012Noel Perlas 84 85. MapFormFunctionClass11 Nov 2012Noel Perlas 85 86. MapFormFunctionClass11 Nov 2012Noel Perlas 86 87. FormFunctionClass11 Nov 2012Noel PerlasWhen it all comes together 87 88. FormFunctionClass11 Nov 2012It helps make interactionNoel PerlasEngaging 88 89. FormFunctionClass11 Nov 2012Noel Perlas 90. FormFunctionClass11 Nov 2012It makes interactionsNoel PerlasUseful 90 91. FormFunctionClass11 Nov 2012Noel Perlas 92. FormFunctionClass11 Nov 2012and nally, to make interactionsNoel PerlasHappy 92 93. FormFunctionClass11 Nov 2012Noel Perlas 94. FormFunctionClassThank you11 Nov 2012Noel Perlasnoelperlas@perlasdesignstudio.comtwitter: @noelperlasslideshare: noelperlas 94