Lecture by Noel Perlas during the FFC 2012

1. Form
Function
Designing for
Class
Interaction
11 Nov 2012
Noel Perlas
Noel Perlas
1

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. 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. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Philippines: Microsoft
First Philippines website for the multinational company
4

5. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Philippines: Globe Telecom
First unified properties website for Globe
5

6. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Singapore: k2interactive
Exploring broadband web-services/apps
6

7. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Italy: Interaction Design Institute Ivrea
Interaction Design
7

8. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Italy: Interaction Design Institute Ivrea
Audiograffiti
8

9. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Italy: Interaction Design Institute Ivrea
Audiograffiti
9

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. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Germany: Designafairs Munich
Interface Design
11

12. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Germany: Designafairs Munich
Siemens Gigaset Cordless Phone Styleguide
12

13. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Philippines: ABS-CBN Interactive
Tantra MMORPG
13

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. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Philippines: Novare Technologies
BB apps way before iOS apps
15

16. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Philippines: Lowe and Partners
Creative Technology
16

17. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Lowe and Partners
FEU Website & Web enrollment interface
17

18. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Lowe and Partners
Airphil Express website and booking
18

19. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Lowe and Partners
Mobile Apps
19

20. Noel Perlas
Form
Function
About Me
Class
11 Nov 2012
Noel Perlas
Ateneo de Manila University
Information Design Coordinator and Lecturer
20

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. Form
Function
Class
Why is this important
11 Nov 2012
Noel Perlas
22

23. Form
Function
Class
11 Nov 2012
Noel Perlas
we used to only have this
23

24. Form
Function
Class
11 Nov 2012
Noel Perlas
and now we have this
24

25. Form
Function
Class
11 Nov 2012
Noel Perlas
we used to only have this
25

26. Form
Function
Class
11 Nov 2012
Noel Perlas
and now we have this...
26

27. Form
Function
Class
11 Nov 2012
Noel Perlas
27

28. Form
Function
Class
11 Nov 2012
Noel Perlas
we used to only have this
28

29. Form
Function
Class
11 Nov 2012
Noel Perlas
and now we have this...
29

30. Form
Function
Class
11 Nov 2012
Noel Perlas
30

31. Form
Function
Class
11 Nov 2012
Noel Perlas
this leads to confusion...
31

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

33. Form
Function
Class
11 Nov 2012
so we need to design
for interaction more
Noel Perlas
than ever before
33

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. Form
Function
Class
Growth of
Human
Capability
11 Nov 2012
1920 2020
Noel Perlas
while the human law
stays the same.
35

36. Form
Function
Class
11 Nov 2012
So how do we go about
designing for interaction?
Noel Perlas
36

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. Form
Function
Class
11 Nov 2012
Noel Perlas
You start with understanding
38 your user

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. 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. Form
Function
Class
11 Nov 2012
Noel Perlas
Bronislaw Malinowski: Anthropologist
41

42. Doing
Form
Function
Class
Thinking
Feeling
11 Nov 2012
Noel Perlas
42 Empathy

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. Interaction
Form
Function
Class
How do you...
...feel
cool
map
hot
11 Nov 2012
...know
path handle
Noel Perlas
button
... d o
44

45. Interaction
Form
Function
Class
11 Nov 2012
handle
Noel Perlas
button
... d o
45

46. Designing the “do”
Form
Function
(or the interface)
Class
11 Nov 2012
Feedback
Noel Perlas
Mapping
Redundancy
Constraint
46

47. Form
Feedback
Function
Class
11 Nov 2012
Noel Perlas
Action - Reaction
Although this seems obvious, it is often overlooked
47

48. Form
Mapping
Function
Class
11 Nov 2012
1
Noel Perlas
48

49. Form
Mapping
Function
Class
11 Nov 2012
1 2
Noel Perlas
49

50. Form
Mapping
Function
Class
11 Nov 2012
1 2 3
Noel Perlas
“Handles” should map to their respective functions
50

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

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. Interaction
Form
Function
Class
How do you...
...feel
cool
hot
11 Nov 2012
Noel Perlas
54

55. Form
Designing the “feel”
Function
Class
11 Nov 2012
Noel Perlas
Through prototyping
55

56. Form
Prototyping
Function
Class
FIDELITY
11 Nov 2012
Noel Perlas
TIME
56

57. Form
Prototyping
Function
Class
Role
11 Nov 2012
Look & Feel
Implementation
Noel Perlas
57

58. Form
Prototyping
Function
Class
Role
11 Nov 2012
Look & Feel
Implementation
Noel Perlas
58

59. Feel

60. Feel
Form
Function
Class
11 Nov 2012
Noel Perlas
60

61. Feel

62. Feel

63. Look

64. Look
Form
Function
Class
11 Nov 2012
Noel Perlas

65. Look

66. Look

67. Form
Prototyping
Function
Class
Role
11 Nov 2012
Look & Feel
Implementation
Noel Perlas
67

68. Role

69. Role

70. Role

71. Role

72. Form
Prototyping
Function
Class
Role
11 Nov 2012
Look & Feel
Implementation
Noel Perlas
72

73. Implementation

74. Implementation

75. Form
Prototyping
Function
Class
Role
11 Nov 2012
Look & Feel
Implementation
Noel Perlas
75

76. Combination

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. Form
Function
Class
map
11 Nov 2012
...know
path
Noel Perlas
78

79. Form
Designing the “know”
Function
Class
11 Nov 2012
Noel Perlas
Map vs Path
79

80. Form
Function
Class
11 Nov 2012
Noel Perlas
Map Path
80

81. Path
Form
Function
Class
11 Nov 2012
Noel Perlas
81

82. Path
Form
Function
Class
11 Nov 2012
Noel Perlas
82

83. Path
Form
Function
Class
11 Nov 2012
Noel Perlas
83

84. Path
Form
Function
Class
11 Nov 2012
Noel Perlas
84

85. Map
Form
Function
Class
11 Nov 2012
Noel Perlas
85

86. Map
Form
Function
Class
11 Nov 2012
Noel Perlas
86

87. Form
Function
Class
11 Nov 2012
Noel Perlas
When it all comes together
87

88. Form
Function
Class
11 Nov 2012
It helps make interaction
Noel Perlas
Engaging
88

89. Form
Function
Class
11 Nov 2012
Noel Perlas

90. Form
Function
Class
11 Nov 2012
It makes interactions
Noel Perlas
Useful
90

91. Form
Function
Class
11 Nov 2012
Noel Perlas

92. Form
Function
Class
11 Nov 2012
and finally, to make interactions
Noel Perlas
Happy
92

93. Form
Function
Class
11 Nov 2012
Noel Perlas

94. Form
Function
Class
Thank you
11 Nov 2012
Noel Perlas
noelperlas@perlasdesignstudio.com
twitter: @noelperlas
slideshare: noelperlas
94