SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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