1.
School
of
Informa-on
University
of
Michigan

2.
•
•
•
•

3. (Interac-on
Design,
IxD)
?

4. The
prac-ce
of
designing
interac-ve
digital
products,
environments,
systems,
and
services
(by
Cooper
et
al.,
About
Face)

5. Designing
interac-ve
products
to
support
people
in
their
everyday
and
working
lives
(by
Preece
et
al.,
Interac.on
Design,
2002)

6. Interac-on
design
(abbreviated
as
IxD)
defines
the
structure
and
content
of
communica-on
between
two
or
more
interac-ve
"beings"
to
understand
each
other.
(by
McCullough,
Digital
Ground,
2004)

7. ?
IxD
HCI
(Human-­‐Computer
Interac-on)
UX
(User
Experience)
UE
(Usability
Engineering)
UI
(User
Interface)
UCD
(User-­‐Centered
Design)
HCD
(Human-­‐Centered
Design)
IA
(Informa-on
Architecture)

8. IxD UX
Content
Form
Informa-on
Architects
Industrial
designers
Copywriters
Graphic
designers
Animators
Sound
designers
Behavior
Interac-on
Designers
UX
Elements
Cooper
et
al.
About
Face

9. ?

10.
Vannevar
Bush,
As
We
May
Think,
1945
hWp://www.youtube.com/watch?v=c539cK58ees&feature=related

12. hWp://www.weeplaces.com/sha-­‐hwang/

15. Iden-fy
needs/
establish
requirement
(Re)Design
Evaluate
Build
an
interac-ve
version
Final
Product
Preece
et
al.
Interac.on
Design

16. >
Iden.fy
needs/establish
requirement
Iden-fy
needs/
establish
requirement
Design
Requirement
Analyzing,
Highligh-ng,
and
Project
Ini-a-on
Priori-zing
Design
Design
Idea
High-­‐level
goal
&
design
requirement
Request
Problem
ini-a-on
User
Study
(contextual
inquiry,
interview,
diary,
etc
)
Compara-ve
Analysis
Interpreta-on
(sequence,
flow,
ar-fact,
culture,
physical)
Persona
Analyzing,
Highligh-ng,
Priori-zing

17. >
Iden.fy
needs/establish
requirement
User
Study
(contextual
inquiry,
Interpreta-on
(sequence,
flow,
interview,
diary,
etc
)
ar-fact,
culture,
physical)
Contextual
Inquiry
Affinity
Diagram
/
coding
Interview
/
Focus
group
Sequence
model
Diary
Study

18. >
Iden.fy
needs/establish
requirement
Compara-ve
Analysis
Mee-ng
Tool

19. >
Iden.fy
needs/establish
requirement
Compara-ve
Analysis
Mee-ng
Tool

20. >
Iden.fy
needs/establish
requirement
Analyzing,
Highligh-ng,
Priori-zing
Persona
Group

21. >
(Re)Design
&
Build
Prototype
Iden-fy
needs/
Design
requirement
&
establish
ideas
requirement
Scenario
/
Storyboard
(Re)Design
Sketch
Prototype
Ideate
Iterate
Build
an
interac-ve
version

22. >
(Re)Design
&
Build
Prototype
Scenario
/
Storyboard
hWp://taehok.com/night/?page_id=64

23. >
(Re)Design
&
Build
Prototype
Scenario
/
Storyboard
hWp://taehok.com/night/?page_id=64

24. >
(Re)Design
&
Build
Prototype
Sketch
hWp://taehok.com/night/?page_id=64

25. >
(Re)Design
&
Build
Prototype
Buxton,
Sketching
User
Experience,
2007

26. >
(Re)Design
&
Build
Prototype
Buxton,
Sketching
User
Experience,2007

27. >
(Re)Design
&
Build
Prototype
Prototype
Prototypes
?

28. >
(Re)Design
&
Build
Prototype
Prototype
Prototypes
as
“Filters”
(Lim
&
Stolterman.
2008)

29. >
(Re)Design
&
Build
Prototype
Prototype
Appearance
Data
Func-onality
Interac-vity
Spa-al
structure
hWp://taehok.com/night/?page_id=64

30. >
(Re)Design
&
Build
Prototype
Prototype
Role
Implementa-on
Look
and
Feel
(Houde
&
Hill
,
1997)

31. >
(Re)Design
&
Build
Prototype
Prototype
?

32. >
(Re)Design
&
Build
Prototype
Prototype
hWp://farm3.sta-c.flickr.com/2384/2652071069_745clbb8e_o.jpg
hWp://www.iteamnm.com/images/0691_18.jpg

33. >
Evaluate
Iden-fy
needs/
Design
requirement
&
establish
ideas
requirement
(Re)Design
Evaluate
Build
an
interac-ve
version

34. >
Evaluate
Usability
Inspec-on
Tes-ng
Others
Methods
Heuris-c
Usability
Tes-ng
GOMS
Evalua-on
Cogni-ve
A/B
Tes-ng
Wizard
of
OZ
Walkthrough
Speed
Da-ng
Replay

35. >
(Re)Design
&
Build
Prototype
Usability
Tes-ng
Usefulness,
Efficiency,
Effec-veness,
Sa-sfac-on,
Accessibility
hWp://farm3.sta-c.flickr.com/2384/2652071069_745clbb8e_o.jpg
hWp://www.doublejumpmedia.com/wp-­‐content/uploads/2009/05/

36. >
(Re)Design
&
Build
Prototype
Wizard
of
Oz
Speed
Da-ng
hWp://farm3.sta-c.flickr.com/2384/2652071069_745clbb8e_o.jpg
hWp://www.doublejumpmedia.com/wp-­‐content/uploads/2009/05/

37. >
(Re)Design
&
Build
Prototype
1.
” ”
2.
3.
4.

38. >
(Re)Design
&
Build
Prototype
1.
” ”
2.
3.
4.

39. Iden-fy
needs/
establish
requirement
(Re)Design
Evaluate
Build
an
interac-ve
version
Final
Product
process” ” ?
Preece
et
al.
Interac.on
Design

42. “technology
as
experience”
McCarthy
&
Wright,
2007

43. Iden-fy
needs/
establish
requirement
(Re)Design
Evaluate
Build
an
interac-ve
version
Final
Product

44. Iden-fy
needs/
establish
Understand
requirement
(Re)Design
Evaluate
Build
an
interac-ve
version
Final
Product

45. Case1:
Whereabout
Clock
Symbol
of
togetherness
and
connectedness
(Sellen
et
al.
2006)

46. Case2:
SmartHome
Feel
likes
to
be
a
good
parent
(Davidoff
et
al.
2007)

47. :
1. ,
2.
3. , ,
4.
5.

48. Iden-fy
needs/
establish
Understand
requirement
(Re)Design
Evaluate
Build
an
interac-ve
version
Design
Principles
Final
Product

49. Gulfs
of
Evalua-on
&
Execu-on
Inten-ons
evalua-on
Execu-on
Gulf
Goals
Interface
Interface
Evalua-on
Gulf
Physical
System
by
Don
Norman

50. Make
use
of
conven.on!!

51. What
is
a
browser?
What
features
and
func-onality
a
browser
“should”
have?

53. Conceptual
Model

55. Designers’
mental
Users’
mental
model
model
Conceptual
Model

56. Gmail
Move
to
Labels
?
Designers’
mental
model:
label
Users’
mental
model:
folder

57. Signifier

58. hWp://heroswelcome.com/images/P/Dental-­‐mirror-­‐1.jpg

59. hWp://www.dental-­‐teeth.com/wp-­‐content/uploads/2010/10/dental-­‐
handpiece.jpg

60. hWp://www.henkesasswolf.de/uploads/tx_exojavagal/
Henke_Dent_2000SA_01.jpg

61. hWp://chrisocp.files.wordpress.com/2010/01/hammer3.jpg

65. “simpler-­‐looking
does
not
always
translate
to
simplicity
of
use”
by
Don
Norman

68. “complexity
is
a
fact
of
the
word,
simplicity
is
in
the
mind”
by
Don
Norman

69. Even
simple-­‐look
things
are
complex

70. Social
Signifier

72. Recommender
&
Reputa-on
system

73. System
Feedback

76. Error
Preven.on
&
Recover

77. slips
Undo
Slips

78. Recover
mistakes

79. Flexibility

81. Effort
Minimiza.on

84. ,
.

86. ” ”

92. Thank
you