Post on 13-Jun-2015
description
FormFunctionClass
11 Nov 2012
Noel Perlas
Designing for Interaction
Noel Perlas
1
FormFunctionClass
11 Nov 2012
Noel Perlas
Bill VerplankInteraction
2
How do you...
...feel
...do
...know
hot
cool
handle
button
map
path
FormFunctionClass
11 Nov 2012
Noel Perlas
Xavier SchoolHS
Ateneo de ManilaAB Interdisciplinary Studies
Interaction Design Institute IvreaMA Interaction Design
Noel Perlas
3
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Philippines: MicrosoftFirst Philippines website for the multinational company4
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Philippines: Globe TelecomFirst unified properties website for Globe
FormFunctionClass
11 Nov 2012
Noel Perlas
5
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Singapore: k2interactiveExploring broadband web-services/apps6
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Italy: Interaction Design Institute IvreaInteraction Design7
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Italy: Interaction Design Institute IvreaAudiograffiti 8
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Italy: Interaction Design Institute IvreaAudiograffiti 9
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Italy: Interaction Design Institute IvreaAudiograffiti in Salone del Mobile10
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Germany: Designafairs MunichInterface Design11
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Germany: Designafairs MunichSiemens Gigaset Cordless Phone Styleguide12
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Philippines: ABS-CBN InteractiveTantra MMORPG13
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Philippines: Novare TechnologiesBlogstar.com - Updates and Content from your favorite stars14
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Philippines: Novare TechnologiesBB apps way before iOS apps15
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Philippines: Lowe and PartnersCreative Technology16
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Lowe and PartnersFEU Website & Web enrollment interface17
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Lowe and PartnersAirphil Express website and booking18
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Lowe and PartnersMobile Apps19
FormFunctionClass
11 Nov 2012
Noel Perlas
Noel PerlasAbout Me
Ateneo de Manila UniversityInformation Design Coordinator and Lecturer20
FormFunctionClass
11 Nov 2012
Noel Perlas
Bill VerplankInteraction
21
How do you...
...feel
...do
...know
hot
cool
handle
button
map
path
FormFunctionClass
11 Nov 2012
Noel Perlas
Why is this important
22
FormFunctionClass
11 Nov 2012
Noel Perlas
23
we used to only have this
FormFunctionClass
11 Nov 2012
Noel Perlas
24
and now we have this
FormFunctionClass
11 Nov 2012
Noel Perlas
25
we used to only have this
FormFunctionClass
11 Nov 2012
Noel Perlas
26
and now we have this...
FormFunctionClass
11 Nov 2012
Noel Perlas
27
FormFunctionClass
11 Nov 2012
Noel Perlas
28
we used to only have this
FormFunctionClass
11 Nov 2012
Noel Perlas
29
and now we have this...
FormFunctionClass
11 Nov 2012
Noel Perlas
30
FormFunctionClass
11 Nov 2012
Noel Perlas
31
this leads to confusion...
Task: copy 50 pages, back-to-back
Executive: “Theyʼre just dumb”
Top Xerox scientists
FormFunctionClass
11 Nov 2012
Noel Perlas
so we need to design for interaction more than ever before
33
FormFunctionClass
11 Nov 2012
Noel Perlas because Mooreʼs Law is more relevant than ever...
34
1920 2020
Growth of Technology &Growth of Promised Functionality
FormFunctionClass
11 Nov 2012
Noel Perlas while the human law stays the same.
35
Growth of Human Capability
1920 2020
FormFunctionClass
11 Nov 2012
Noel Perlas
So how do we go about designing for interaction?
36
FormFunctionClass
11 Nov 2012
Noel Perlas
Interaction
37
How do you...
...feel
...do
...know
hot
cool
handle
button
map
path
FormFunctionClass
11 Nov 2012
Noel Perlas
38You start with understanding
your user
FormFunctionClass
11 Nov 2012
Noel Perlas
39
Direct Indirect
Self-reported
Observed
FOCUS GROUPS SURVEYS
SITE LOGSSTATISTICS
FEEDBACK FORMS
ETHNOGRAPHIC RESEARCHFIELD REPORT
ACTIVITY ANALYSIS
INTERVIEWS
CARD SORTING
DIARIES/JOURNALS
FormFunctionClass
11 Nov 2012
Noel Perlas
40
Direct Indirect
Self-reported
Observed
FOCUS GROUPS SURVEYS
SITE LOGSSTATISTICS
FEEDBACK FORMS
ETHNOGRAPHIC RESEARCHFIELD REPORT
ACTIVITY ANALYSIS
INTERVIEWS
CARD SORTING
DIARIES/JOURNALS
FormFunctionClass
11 Nov 2012
Noel Perlas
41
Bronislaw Malinowski: Anthropologist
FormFunctionClass
11 Nov 2012
Noel Perlas
42
Doing
Feeling
Thinking
Empathy
FormFunctionClass
11 Nov 2012
Noel Perlas
43
Personas
Rich Description of:
Behavior
Goals
Needs
Scenarios
Focus on:
Product Use
Frequency of Use
Activities to be Done
End Results
FormFunctionClass
11 Nov 2012
Noel Perlas
Interaction
44
How do you...
...feel
...do
...know
hot
cool
handle
button
map
path
FormFunctionClass
11 Nov 2012
Noel Perlas
Interaction
45 ...do
handle
button
FormFunctionClass
11 Nov 2012
Noel Perlas
46
FeedbackMappingRedundancyConstraint
Designing the “do”(or the interface)
FormFunctionClass
11 Nov 2012
Noel Perlas
47
Feedback
Action - ReactionAlthough this seems obvious, it is often overlooked
FormFunctionClass
11 Nov 2012
Noel Perlas
48
Mapping
1
FormFunctionClass
11 Nov 2012
Noel Perlas
49
Mapping
1 2
FormFunctionClass
11 Nov 2012
Noel Perlas
50
Mapping
1 2 3
“Handles” should map to their respective functions
FormFunctionClass
11 Nov 2012
Noel Perlas
51
Redundancy
Showing the same thing more than once
If a signal is presented more than once, it is more likely that it will be understood correctly.
FormFunctionClass
11 Nov 2012
Noel Perlas
52
Constraint
Limiting what your users can do to the barest minimum
FormFunctionClass
11 Nov 2012
Noel Perlas
Interaction
53
How do you...
...feel
...do
...know
hot
cool
handle
button
map
path
FormFunctionClass
11 Nov 2012
Noel Perlas
Interaction
54
How do you...
...feel
hot
cool
FormFunctionClass
11 Nov 2012
Noel Perlas
55Through prototyping
Designing the “feel”
FormFunctionClass
11 Nov 2012
Noel Perlas
56
Prototyping
TIME
FIDELITY
FormFunctionClass
11 Nov 2012
Noel Perlas
57
Prototyping
Role
Look & Feel
Implementation
FormFunctionClass
11 Nov 2012
Noel Perlas
58
Prototyping
Role
Look & Feel
Implementation
Feel
FormFunctionClass
11 Nov 2012
Noel Perlas
Feel
60
Feel
Feel
Look
FormFunctionClass
11 Nov 2012
Noel Perlas
Look
Look
Look
FormFunctionClass
11 Nov 2012
Noel Perlas
67
Prototyping
Role
Look & Feel
Implementation
Role
Role
Role
Role
FormFunctionClass
11 Nov 2012
Noel Perlas
72
Prototyping
Role
Look & Feel
Implementation
Implementation
Implementation
FormFunctionClass
11 Nov 2012
Noel Perlas
75
Prototyping
Role
Look & Feel
Implementation
Combination
FormFunctionClass
11 Nov 2012
Noel Perlas
Interaction
77
How do you...
...feel
...do
...know
hot
cool
handle
button
map
path
FormFunctionClass
11 Nov 2012
Noel Perlas
78
...know
map
path
FormFunctionClass
11 Nov 2012
Noel Perlas
79Map vs Path
Designing the “know”
FormFunctionClass
11 Nov 2012
Noel Perlas
80
PathMap
FormFunctionClass
11 Nov 2012
Noel Perlas
81
Path
FormFunctionClass
11 Nov 2012
Noel Perlas
82
Path
FormFunctionClass
11 Nov 2012
Noel Perlas
83
Path
FormFunctionClass
11 Nov 2012
Noel Perlas
84
Path
FormFunctionClass
11 Nov 2012
Noel Perlas
85
Map
FormFunctionClass
11 Nov 2012
Noel Perlas
86
Map
FormFunctionClass
11 Nov 2012
Noel Perlas
87When it all comes together
FormFunctionClass
11 Nov 2012
Noel PerlasIt helps make interaction
Engaging88
FormFunctionClass
11 Nov 2012
Noel Perlas
FormFunctionClass
11 Nov 2012
Noel PerlasIt makes interactions
Useful90
FormFunctionClass
11 Nov 2012
Noel Perlas
FormFunctionClass
11 Nov 2012
Noel Perlasand finally, to make interactions
Happy92
FormFunctionClass
11 Nov 2012
Noel Perlas
FormFunctionClass
11 Nov 2012
Noel Perlas
Thank you
noelperlas@perlasdesignstudio.comtwitter: @noelperlasslideshare: noelperlas
94