FormFunction              Designing forClass              Interaction11 Nov 2012Noel Perlas              Noel Perlas 1
Interaction           Bill VerplankFormFunctionClass                           How do you...                              ...
FormFunctionClass              Noel Perlas              Xavier School11 Nov 2012              HS              Ateneo de Ma...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Philippines: Microsoft              ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Philippines: Globe Telecom          ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Singapore: k2interactive            ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Italy: Interaction Design Institute ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Italy: Interaction Design Institute ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Italy: Interaction Design Institute ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Italy: Interaction Design Institute ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Germany: Designafairs Munich        ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Germany: Designafairs Munich        ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Philippines: ABS-CBN Interactive    ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Philippines: Novare Technologies    ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Philippines: Novare Technologies    ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Philippines: Lowe and Partners      ...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Lowe and Partners              FEU W...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Lowe and Partners              Airph...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Lowe and Partners              Mobil...
Noel PerlasFormFunction              About MeClass11 Nov 2012Noel Perlas              Ateneo de Manila University         ...
Interaction           Bill VerplankFormFunctionClass                           How do you...                              ...
FormFunctionClass              Why is this important11 Nov 2012Noel Perlas 22
FormFunctionClass11 Nov 2012Noel Perlas              we used to only have this 23
FormFunctionClass11 Nov 2012Noel Perlas              and now we have this 24
FormFunctionClass11 Nov 2012Noel Perlas              we used to only have this 25
FormFunctionClass11 Nov 2012Noel Perlas              and now we have this... 26
FormFunctionClass11 Nov 2012Noel Perlas 27
FormFunctionClass11 Nov 2012Noel Perlas              we used to only have this 28
FormFunctionClass11 Nov 2012Noel Perlas              and now we have this... 29
FormFunctionClass11 Nov 2012Noel Perlas 30
FormFunctionClass11 Nov 2012Noel Perlas              this leads to confusion... 31
Task: copy 50 pages, back-to-back                                    Top Xerox scientistsExecutive: “Theyʼre just dumb”
FormFunctionClass11 Nov 2012              so we need to design              for interaction moreNoel Perlas              t...
FormFunction                               Growth ofClass                               Technology &                      ...
FormFunctionClass                              Growth of                              Human                              C...
FormFunctionClass11 Nov 2012              So how do we go about              designing for interaction?Noel Perlas 36
InteractionFormFunctionClass                           How do you...                              ...feel                 ...
FormFunctionClass11 Nov 2012Noel Perlas              You start with understanding 38                     your user
Form                                       Self-reportedFunctionClass                        FOCUS GROUPS                 ...
Form                                       Self-reportedFunctionClass                        FOCUS GROUPS                 ...
FormFunctionClass11 Nov 2012Noel Perlas              Bronislaw Malinowski: Anthropologist 41
DoingFormFunctionClass              Thinking                                   Feeling11 Nov 2012Noel Perlas 42           ...
FormFunctionClass11 Nov 2012              Personas                 Scenarios                Rich Description of:    Focus ...
InteractionFormFunctionClass                           How do you...                              ...feel                 ...
InteractionFormFunctionClass11 Nov 2012                                  handleNoel Perlas                                ...
Designing the “do”FormFunction              (or the interface)Class11 Nov 2012              FeedbackNoel Perlas           ...
Form              FeedbackFunctionClass11 Nov 2012Noel Perlas              Action - Reaction              Although this se...
Form              MappingFunctionClass11 Nov 2012                 1Noel Perlas 48
Form              MappingFunctionClass11 Nov 2012                 1      2Noel Perlas 49
Form              MappingFunctionClass11 Nov 2012                     1                     2                       3Noel ...
Form              RedundancyFunctionClass11 Nov 2012                           Showing the same thing more than           ...
Form              ConstraintFunctionClass11 Nov 2012Noel Perlas              Limiting what your users can do to the barest...
InteractionFormFunctionClass                           How do you...                              ...feel                 ...
InteractionFormFunctionClass                    How do you...                       ...feel                               ...
Form              Designing the “feel”FunctionClass11 Nov 2012Noel Perlas              Through prototyping 55
Form              PrototypingFunctionClass               FIDELITY11 Nov 2012Noel Perlas                            TIME 56
Form              PrototypingFunctionClass                           Role11 Nov 2012                                  Look...
Form              PrototypingFunctionClass                           Role11 Nov 2012                                  Look...
Feel
FeelFormFunctionClass11 Nov 2012Noel Perlas 60
Feel
Feel
Look
LookFormFunctionClass11 Nov 2012Noel Perlas
Look
Look
Form              PrototypingFunctionClass                           Role11 Nov 2012                                  Look...
Role
Role
Role
Role
Form              PrototypingFunctionClass                           Role11 Nov 2012                                  Look...
Implementation
Implementation
Form              PrototypingFunctionClass                           Role11 Nov 2012                                  Look...
Combination
InteractionFormFunctionClass                           How do you...                              ...feel                 ...
FormFunctionClass              map11 Nov 2012                 ...know              pathNoel Perlas 78
Form              Designing the “know”FunctionClass11 Nov 2012Noel Perlas              Map vs Path 79
FormFunctionClass11 Nov 2012Noel Perlas              Map   Path 80
PathFormFunctionClass11 Nov 2012Noel Perlas 81
PathFormFunctionClass11 Nov 2012Noel Perlas 82
PathFormFunctionClass11 Nov 2012Noel Perlas 83
PathFormFunctionClass11 Nov 2012Noel Perlas 84
MapFormFunctionClass11 Nov 2012Noel Perlas 85
MapFormFunctionClass11 Nov 2012Noel Perlas 86
FormFunctionClass11 Nov 2012Noel Perlas              When it all comes together 87
FormFunctionClass11 Nov 2012              It helps make interactionNoel Perlas              Engaging 88
FormFunctionClass11 Nov 2012Noel Perlas
FormFunctionClass11 Nov 2012              It makes interactionsNoel Perlas              Useful 90
FormFunctionClass11 Nov 2012Noel Perlas
FormFunctionClass11 Nov 2012              and finally, to make interactionsNoel Perlas              Happy 92
FormFunctionClass11 Nov 2012Noel Perlas
FormFunctionClass              Thank you11 Nov 2012Noel Perlas              noelperlas@perlasdesignstudio.com             ...
Upcoming SlideShare
Loading in …5
×

Designing for Interaction

1,299 views
1,213 views

Published on

Lecture by Noel Perlas during the FFC 2012

Published in: Design

Designing for Interaction

  1. 1. FormFunction Designing forClass Interaction11 Nov 2012Noel Perlas Noel Perlas 1
  2. 2. Interaction Bill VerplankFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 2
  3. 3. FormFunctionClass Noel Perlas Xavier School11 Nov 2012 HS Ateneo de Manila AB Interdisciplinary Studies Interaction Design Institute Ivrea MA Interaction DesignNoel Perlas 3
  4. 4. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Microsoft First Philippines website for the multinational company 4
  5. 5. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Globe Telecom First unified properties website for Globe 5
  6. 6. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Singapore: k2interactive Exploring broadband web-services/apps 6
  7. 7. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Interaction Design 7
  8. 8. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Audiograffiti 8
  9. 9. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Audiograffiti 9
  10. 10. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Audiograffiti in Salone del Mobile 10
  11. 11. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Germany: Designafairs Munich Interface Design 11
  12. 12. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Germany: Designafairs Munich Siemens Gigaset Cordless Phone Styleguide 12
  13. 13. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: ABS-CBN Interactive Tantra MMORPG 13
  14. 14. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Novare Technologies Blogstar.com - Updates and Content from your favorite stars 14
  15. 15. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Novare Technologies BB apps way before iOS apps 15
  16. 16. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Lowe and Partners Creative Technology 16
  17. 17. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Lowe and Partners FEU Website & Web enrollment interface 17
  18. 18. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Lowe and Partners Airphil Express website and booking 18
  19. 19. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Lowe and Partners Mobile Apps 19
  20. 20. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Ateneo de Manila University Information Design Coordinator and Lecturer 20
  21. 21. Interaction Bill VerplankFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 21
  22. 22. FormFunctionClass Why is this important11 Nov 2012Noel Perlas 22
  23. 23. FormFunctionClass11 Nov 2012Noel Perlas we used to only have this 23
  24. 24. FormFunctionClass11 Nov 2012Noel Perlas and now we have this 24
  25. 25. FormFunctionClass11 Nov 2012Noel Perlas we used to only have this 25
  26. 26. FormFunctionClass11 Nov 2012Noel Perlas and now we have this... 26
  27. 27. FormFunctionClass11 Nov 2012Noel Perlas 27
  28. 28. FormFunctionClass11 Nov 2012Noel Perlas we used to only have this 28
  29. 29. FormFunctionClass11 Nov 2012Noel Perlas and now we have this... 29
  30. 30. FormFunctionClass11 Nov 2012Noel Perlas 30
  31. 31. FormFunctionClass11 Nov 2012Noel Perlas this leads to confusion... 31
  32. 32. Task: copy 50 pages, back-to-back Top Xerox scientistsExecutive: “Theyʼre just dumb”
  33. 33. FormFunctionClass11 Nov 2012 so we need to design for interaction moreNoel Perlas than ever before 33
  34. 34. FormFunction Growth ofClass Technology & Growth of Promised Functionality11 Nov 2012 1920 2020Noel Perlas because Mooreʼs Law is more relevant than ever... 34
  35. 35. FormFunctionClass Growth of Human Capability11 Nov 2012 1920 2020Noel Perlas while the human law stays the same. 35
  36. 36. FormFunctionClass11 Nov 2012 So how do we go about designing for interaction?Noel Perlas 36
  37. 37. InteractionFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 37
  38. 38. FormFunctionClass11 Nov 2012Noel Perlas You start with understanding 38 your user
  39. 39. Form Self-reportedFunctionClass FOCUS GROUPS SURVEYS INTERVIEWS CARD SORTING Direct Indirect11 Nov 2012 DIARIES/JOURNALS ETHNOGRAPHIC RESEARCH SITE LOGS FIELD REPORT STATISTICS ACTIVITY ANALYSIS FEEDBACK FORMSNoel Perlas Observed 39
  40. 40. Form Self-reportedFunctionClass FOCUS GROUPS SURVEYS INTERVIEWS CARD SORTING Direct Indirect11 Nov 2012 DIARIES/JOURNALS ETHNOGRAPHIC RESEARCH SITE LOGS FIELD REPORT STATISTICS ACTIVITY ANALYSIS FEEDBACK FORMSNoel Perlas Observed 40
  41. 41. FormFunctionClass11 Nov 2012Noel Perlas Bronislaw Malinowski: Anthropologist 41
  42. 42. DoingFormFunctionClass Thinking Feeling11 Nov 2012Noel Perlas 42 Empathy
  43. 43. FormFunctionClass11 Nov 2012 Personas Scenarios Rich Description of: Focus on: Behavior Product Use Goals Frequency of UseNoel Perlas Needs Activities to be Done End Results 43
  44. 44. InteractionFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 44
  45. 45. InteractionFormFunctionClass11 Nov 2012 handleNoel Perlas button ... d o 45
  46. 46. Designing the “do”FormFunction (or the interface)Class11 Nov 2012 FeedbackNoel Perlas Mapping Redundancy Constraint 46
  47. 47. Form FeedbackFunctionClass11 Nov 2012Noel Perlas Action - Reaction Although this seems obvious, it is often overlooked 47
  48. 48. Form MappingFunctionClass11 Nov 2012 1Noel Perlas 48
  49. 49. Form MappingFunctionClass11 Nov 2012 1 2Noel Perlas 49
  50. 50. Form MappingFunctionClass11 Nov 2012 1 2 3Noel Perlas “Handles” should map to their respective functions 50
  51. 51. Form RedundancyFunctionClass11 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. 52. Form ConstraintFunctionClass11 Nov 2012Noel Perlas Limiting what your users can do to the barest minimum 52
  53. 53. InteractionFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 53
  54. 54. InteractionFormFunctionClass How do you... ...feel cool hot11 Nov 2012Noel Perlas 54
  55. 55. Form Designing the “feel”FunctionClass11 Nov 2012Noel Perlas Through prototyping 55
  56. 56. Form PrototypingFunctionClass FIDELITY11 Nov 2012Noel Perlas TIME 56
  57. 57. Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 57
  58. 58. Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 58
  59. 59. Feel
  60. 60. FeelFormFunctionClass11 Nov 2012Noel Perlas 60
  61. 61. Feel
  62. 62. Feel
  63. 63. Look
  64. 64. LookFormFunctionClass11 Nov 2012Noel Perlas
  65. 65. Look
  66. 66. Look
  67. 67. Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 67
  68. 68. Role
  69. 69. Role
  70. 70. Role
  71. 71. Role
  72. 72. Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 72
  73. 73. Implementation
  74. 74. Implementation
  75. 75. Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 75
  76. 76. Combination
  77. 77. InteractionFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 77
  78. 78. FormFunctionClass map11 Nov 2012 ...know pathNoel Perlas 78
  79. 79. Form Designing the “know”FunctionClass11 Nov 2012Noel Perlas Map vs Path 79
  80. 80. FormFunctionClass11 Nov 2012Noel Perlas Map Path 80
  81. 81. PathFormFunctionClass11 Nov 2012Noel Perlas 81
  82. 82. PathFormFunctionClass11 Nov 2012Noel Perlas 82
  83. 83. PathFormFunctionClass11 Nov 2012Noel Perlas 83
  84. 84. PathFormFunctionClass11 Nov 2012Noel Perlas 84
  85. 85. MapFormFunctionClass11 Nov 2012Noel Perlas 85
  86. 86. MapFormFunctionClass11 Nov 2012Noel Perlas 86
  87. 87. FormFunctionClass11 Nov 2012Noel Perlas When it all comes together 87
  88. 88. FormFunctionClass11 Nov 2012 It helps make interactionNoel Perlas Engaging 88
  89. 89. FormFunctionClass11 Nov 2012Noel Perlas
  90. 90. FormFunctionClass11 Nov 2012 It makes interactionsNoel Perlas Useful 90
  91. 91. FormFunctionClass11 Nov 2012Noel Perlas
  92. 92. FormFunctionClass11 Nov 2012 and finally, to make interactionsNoel Perlas Happy 92
  93. 93. FormFunctionClass11 Nov 2012Noel Perlas
  94. 94. FormFunctionClass Thank you11 Nov 2012Noel Perlas noelperlas@perlasdesignstudio.com twitter: @noelperlas slideshare: noelperlas 94

×