Download - Designing for Interaction

Transcript
Page 1: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Designing for Interaction

Noel Perlas

1

Page 2: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Bill VerplankInteraction

2

How do you...

...feel

...do

...know

hot

cool

handle

button

map

path

Page 3: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Xavier SchoolHS

Ateneo de ManilaAB Interdisciplinary Studies

Interaction Design Institute IvreaMA Interaction Design

Noel Perlas

3

Page 4: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Philippines: MicrosoftFirst Philippines website for the multinational company4

Page 5: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Philippines: Globe TelecomFirst unified properties website for Globe

FormFunctionClass

11 Nov 2012

Noel Perlas

5

Page 6: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Singapore: k2interactiveExploring broadband web-services/apps6

Page 7: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Italy: Interaction Design Institute IvreaInteraction Design7

Page 8: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Italy: Interaction Design Institute IvreaAudiograffiti 8

Page 9: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Italy: Interaction Design Institute IvreaAudiograffiti 9

Page 10: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Italy: Interaction Design Institute IvreaAudiograffiti in Salone del Mobile10

Page 11: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Germany: Designafairs MunichInterface Design11

Page 12: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Germany: Designafairs MunichSiemens Gigaset Cordless Phone Styleguide12

Page 13: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Philippines: ABS-CBN InteractiveTantra MMORPG13

Page 14: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Philippines: Novare TechnologiesBlogstar.com - Updates and Content from your favorite stars14

Page 15: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Philippines: Novare TechnologiesBB apps way before iOS apps15

Page 16: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Philippines: Lowe and PartnersCreative Technology16

Page 17: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Lowe and PartnersFEU Website & Web enrollment interface17

Page 18: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Lowe and PartnersAirphil Express website and booking18

Page 19: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Lowe and PartnersMobile Apps19

Page 20: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Noel PerlasAbout Me

Ateneo de Manila UniversityInformation Design Coordinator and Lecturer20

Page 21: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Bill VerplankInteraction

21

How do you...

...feel

...do

...know

hot

cool

handle

button

map

path

Page 22: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Why is this important

22

Page 23: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

23

we used to only have this

Page 24: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

24

and now we have this

Page 25: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

25

we used to only have this

Page 26: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

26

and now we have this...

Page 27: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

27

Page 28: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

28

we used to only have this

Page 29: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

29

and now we have this...

Page 30: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

30

Page 31: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

31

this leads to confusion...

Page 32: Designing for Interaction

Task: copy 50 pages, back-to-back

Executive: “Theyʼre just dumb”

Top Xerox scientists

Page 33: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

so we need to design for interaction more than ever before

33

Page 34: Designing for Interaction

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

Page 35: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas while the human law stays the same.

35

Growth of Human Capability

1920 2020

Page 36: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

So how do we go about designing for interaction?

36

Page 37: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Interaction

37

How do you...

...feel

...do

...know

hot

cool

handle

button

map

path

Page 38: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

38You start with understanding

your user

Page 39: Designing for Interaction

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

Page 40: Designing for Interaction

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

Page 41: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

41

Bronislaw Malinowski: Anthropologist

Page 42: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

42

Doing

Feeling

Thinking

Empathy

Page 43: Designing for Interaction

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

Page 44: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Interaction

44

How do you...

...feel

...do

...know

hot

cool

handle

button

map

path

Page 45: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Interaction

45 ...do

handle

button

Page 46: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

46

FeedbackMappingRedundancyConstraint

Designing the “do”(or the interface)

Page 47: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

47

Feedback

Action - ReactionAlthough this seems obvious, it is often overlooked

Page 48: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

48

Mapping

1

Page 49: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

49

Mapping

1 2

Page 50: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

50

Mapping

1 2 3

“Handles” should map to their respective functions

Page 51: Designing for Interaction

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.

Page 52: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

52

Constraint

Limiting what your users can do to the barest minimum

Page 53: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Interaction

53

How do you...

...feel

...do

...know

hot

cool

handle

button

map

path

Page 54: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Interaction

54

How do you...

...feel

hot

cool

Page 55: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

55Through prototyping

Designing the “feel”

Page 56: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

56

Prototyping

TIME

FIDELITY

Page 57: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

57

Prototyping

Role

Look & Feel

Implementation

Page 58: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

58

Prototyping

Role

Look & Feel

Implementation

Page 59: Designing for Interaction

Feel

Page 60: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Feel

60

Page 61: Designing for Interaction

Feel

Page 62: Designing for Interaction

Feel

Page 63: Designing for Interaction

Look

Page 64: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Look

Page 65: Designing for Interaction

Look

Page 66: Designing for Interaction

Look

Page 67: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

67

Prototyping

Role

Look & Feel

Implementation

Page 68: Designing for Interaction

Role

Page 69: Designing for Interaction

Role

Page 70: Designing for Interaction

Role

Page 71: Designing for Interaction

Role

Page 72: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

72

Prototyping

Role

Look & Feel

Implementation

Page 73: Designing for Interaction

Implementation

Page 74: Designing for Interaction

Implementation

Page 75: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

75

Prototyping

Role

Look & Feel

Implementation

Page 76: Designing for Interaction

Combination

Page 77: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Interaction

77

How do you...

...feel

...do

...know

hot

cool

handle

button

map

path

Page 78: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

78

...know

map

path

Page 79: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

79Map vs Path

Designing the “know”

Page 80: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

80

PathMap

Page 81: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

81

Path

Page 82: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

82

Path

Page 83: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

83

Path

Page 84: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

84

Path

Page 85: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

85

Map

Page 86: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

86

Map

Page 87: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

87When it all comes together

Page 88: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel PerlasIt helps make interaction

Engaging88

Page 89: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Page 90: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel PerlasIt makes interactions

Useful90

Page 91: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Page 92: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlasand finally, to make interactions

Happy92

Page 93: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Page 94: Designing for Interaction

FormFunctionClass

11 Nov 2012

Noel Perlas

Thank you

[email protected]: @noelperlasslideshare: noelperlas

94