Designing for Interaction

1. FormFunction Designing forClass Interaction11 Nov 2012Noel Perlas Noel Perlas 1

2. Interaction Bill VerplankFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 2

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. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Microsoft First Philippines website for the multinational company 4

5. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Globe Telecom First uniﬁed properties website for Globe 5

6. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Singapore: k2interactive Exploring broadband web-services/apps 6

7. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Interaction Design 7

8. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Audiografﬁti 8

9. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Audiografﬁti 9

10. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Audiografﬁti in Salone del Mobile 10

11. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Germany: Designafairs Munich Interface Design 11

12. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Germany: Designafairs Munich Siemens Gigaset Cordless Phone Styleguide 12

13. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: ABS-CBN Interactive Tantra MMORPG 13

14. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Novare Technologies Blogstar.com - Updates and Content from your favorite stars 14

15. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Novare Technologies BB apps way before iOS apps 15

16. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Lowe and Partners Creative Technology 16

17. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Lowe and Partners FEU Website & Web enrollment interface 17

18. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Lowe and Partners Airphil Express website and booking 18

19. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Lowe and Partners Mobile Apps 19

20. Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Ateneo de Manila University Information Design Coordinator and Lecturer 20

21. Interaction Bill VerplankFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 21

22. FormFunctionClass Why is this important11 Nov 2012Noel Perlas 22

23. FormFunctionClass11 Nov 2012Noel Perlas we used to only have this 23

24. FormFunctionClass11 Nov 2012Noel Perlas and now we have this 24

26. FormFunctionClass11 Nov 2012Noel Perlas and now we have this... 26

27. FormFunctionClass11 Nov 2012Noel Perlas 27

29. FormFunctionClass11 Nov 2012Noel Perlas and now we have this... 29

30. FormFunctionClass11 Nov 2012Noel Perlas 30

31. FormFunctionClass11 Nov 2012Noel Perlas this leads to confusion... 31

32. Task: copy 50 pages, back-to-back Top Xerox scientistsExecutive: “Theyʼre just dumb”

33. FormFunctionClass11 Nov 2012 so we need to design for interaction moreNoel Perlas than ever before 33

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. FormFunctionClass Growth of Human Capability11 Nov 2012 1920 2020Noel Perlas while the human law stays the same. 35

36. FormFunctionClass11 Nov 2012 So how do we go about designing for interaction?Noel Perlas 36

37. InteractionFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 37

38. FormFunctionClass11 Nov 2012Noel Perlas You start with understanding 38 your user

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. 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. FormFunctionClass11 Nov 2012Noel Perlas Bronislaw Malinowski: Anthropologist 41

42. DoingFormFunctionClass Thinking Feeling11 Nov 2012Noel Perlas 42 Empathy

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

45. InteractionFormFunctionClass11 Nov 2012 handleNoel Perlas button ... d o 45

46. Designing the “do”FormFunction (or the interface)Class11 Nov 2012 FeedbackNoel Perlas Mapping Redundancy Constraint 46

47. Form FeedbackFunctionClass11 Nov 2012Noel Perlas Action - Reaction Although this seems obvious, it is often overlooked 47

48. Form MappingFunctionClass11 Nov 2012 1Noel Perlas 48

49. Form MappingFunctionClass11 Nov 2012 1 2Noel Perlas 49

50. Form MappingFunctionClass11 Nov 2012 1 2 3Noel Perlas “Handles” should map to their respective functions 50

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. Form ConstraintFunctionClass11 Nov 2012Noel Perlas Limiting what your users can do to the barest minimum 52

54. InteractionFormFunctionClass How do you... ...feel cool hot11 Nov 2012Noel Perlas 54

55. Form Designing the “feel”FunctionClass11 Nov 2012Noel Perlas Through prototyping 55

56. Form PrototypingFunctionClass FIDELITY11 Nov 2012Noel Perlas TIME 56

57. Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 57

59. Feel

60. FeelFormFunctionClass11 Nov 2012Noel Perlas 60

61. Feel

62. Feel

63. Look

64. LookFormFunctionClass11 Nov 2012Noel Perlas

65. Look

66. Look

68. Role

69. Role

70. Role

71. Role

73. Implementation

74. Implementation

76. Combination

78. FormFunctionClass map11 Nov 2012 ...know pathNoel Perlas 78

79. Form Designing the “know”FunctionClass11 Nov 2012Noel Perlas Map vs Path 79

80. FormFunctionClass11 Nov 2012Noel Perlas Map Path 80

81. PathFormFunctionClass11 Nov 2012Noel Perlas 81

85. MapFormFunctionClass11 Nov 2012Noel Perlas 85

86. MapFormFunctionClass11 Nov 2012Noel Perlas 86

87. FormFunctionClass11 Nov 2012Noel Perlas When it all comes together 87

88. FormFunctionClass11 Nov 2012 It helps make interactionNoel Perlas Engaging 88

89. FormFunctionClass11 Nov 2012Noel Perlas

90. FormFunctionClass11 Nov 2012 It makes interactionsNoel Perlas Useful 90

92. FormFunctionClass11 Nov 2012 and ﬁnally, to make interactionsNoel Perlas Happy 92

94. FormFunctionClass Thank you11 Nov 2012Noel Perlas noelperlas@perlasdesignstudio.com twitter: @noelperlas slideshare: noelperlas 94