Successfully reported this slideshow.

Designing for Interaction

9

Share

Loading in …3
×
1 of 94
1 of 94

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Designing for Interaction

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

×