This is about how to conduct good interaction designs. Author: Fei-Fei Wang Portfolio: wfeifei.com

1. About
Interaction
Design

2. The Context of Interaction
$(&)%$*+,+-).&$
$%&' *+/0
"# 01
!
20
*+,-%.
0".1(%
!-./. !"#$%&'&()

3. The Context of Interaction
$(&)%$*+,+-).&$
$%&' *+/0
"# 01
!
20
*+,-%.
Understand To impact
these 0".1(% these
!-./. !"#$%&'&()

4. The UX Honeycomb
./(*012(0*3*1(40$/052%10
)*(-*0#(($0"101/0$/6
)*(!)'
7-(0)*(-*0%&'(01/0
./0)*(-*0(#;/305/-9<
%,,/48'"*20
)*%&'( $(*"-%&'( "#=05"12012(0*3*1(46
"#1(#$($01%*9*6
+%')%&'(
7-(0)*(-*0%5%-(0/!0 !"#$%&'( %,,(**"&'(
12(0*3*1(400:0,%#0 >%#0)*(-*0%,,(***0
12(30!"#$0"16 %#$0)*(-012(0*3*1(46
,-($"&'(
>%#0)*(-*01-)*1012(0*3*1(46

5. The UX Honeycomb
!"#$%&&'()*#+(,-#(
./(*012(0*3*1(40$/052%10 +.+,#/(0$*"1)#("%&2#(
)*(-*0#(($0"101/0$/6 ,*(2+#$+3
)*(!)'
7-(0)*(-*0%&'(01/0
./0)*(-*0(#;/305/-9<
%,,/48'"*20
)*%&'( $(*"-%&'( "#=05"12012(0*3*1(46
"#1(#$($01%*9*6
+%')%&'(
7-(0)*(-*0%5%-(0/!0 !"#$%&'( %,,(**"&'(
12(0*3*1(400:0,%#0 >%#0)*(-*0%,,(***0
12(30!"#$0"16 %#$0)*(-012(0*3*1(46
,-($"&'(
>%#0)*(-*01-)*1012(0*3*1(46

6. Interaction Design Practices
*'(#+, &'()
!"#$%&'$() !"8.%/1#'."2I$)'<" H%10;'72I$)'<" !"#$%&'$()
388'"'#,2914:#;%.+<; 388'"'#,2914:#;%.+<;
*+%&$,)
*+%&$,)
-./01%1#'&$23"14,)')
5 -./01%1#'&$23"14,)')
4 D')+14
!"#$%
5$%)."1)262*7$"1%'.) 5$%)."1)262*7$"1%'.)
3 A1,.+# !"#$%17#'."2G10
2 *#%+7#+%$ C$+%')#'72J&14+1#'."
E)1F'4'#,2?$)#'"<
1 *7.0$
*#%1#$<,
C'B8'20%.#.#,0$
A.B8'20%.#.#,0$ !"#$%&
!"8.%/1#'."23%7;'#$7+%$
@1&'<1#'."
=+"7#'."142)0$7'8'71#'.")
-."#$"#2%$K+'%$/$"#)
>+)'"$))2<.14 '"#(
?;$2<.142.827+)#./$%)
)*$+,

7. !"#"$%&'
!"#$%& ' (%$)'*&+,"#*-.
/.01%2$3*1.+,"#*-.

8. !"#"$%&'
(%$)'*&+,"#*-.
/.01%2$3*1.+,"#*-.

9. UX Research
1 !"#$%&'()*$(+',"-+
2 .(%(/')0)&11%2)#('3"4
3 56$&'().'$42
4 7-&%28()0),-'(91('()4&'&
5 :(1"9')9(1"9'+

10. UX Research methods
/-*%#$+%0'
!"#$%&'()"%'*+,--.+#%' 8'@
!"#$%&'()"%'*+,--.+#%' 8'@
1'.2+3+*&45%'*+-6 ?.*=A
Involve users
7,648-.3&'+' ?.*=A
9,:;.#.*+$%48-.3&'+' 8-.3&H%
<%"#+'*+=4>$.3".*+,-4 8-.3&H%
9,6-+*+$%4?.3@*A#,"6A 8-.3&H%
B,C%3DE.'%C48-.3&'+' 8-.3&H%
/-*%#.=*+,-4B.; I%;#%'%-*
F%#',-.'4G4!=%-.#+,' I%;#%'%-*
To justify

11. Interviews
8.//'3%(9#'/#
Favorable features
7",6#
!"%'3%$,6(9#'/#
Desired features
!"#$%$&'()(*'+,%$&'(-',%./'#
8"12'%$%$&'
88): 0"#%($12"/%,3%(-',%./'# (2/"5.;%#
455$%$"3,6(5'#$/'5(-',%./'#

12. Surveys Vs. Interviews
Interviews
•Better for exploring and gaining a broad understanding of a
set of users & activities
•Ability to follow unanticipated paths
•Qualitative & quantitative data
Surveys
•Results (ideally) apply to entire population
•Easier to establish reliability for a given set of questions
•Better for making strong claims about narrow phenomena

13. Surveys with Interviews
Explore & Validate
•Interviews to uncover phenomena, articulate questions
•Survey to measure extent, frequency, etc.
Identify & Probe
•Surveys to identify population segments, different behaviors
•Interviews to uncover explanations for differences

14. Personas
!"#$
!"#$?,@/1'$, ,
:"9;7*(3.<,=.>(*#"1/(.
%#&'()$*+,
-$+&(.+/0/'/1/$+,
D8(1( 2(#&31$*,4"55)
6$#(7*"&8/9+,
A$),B("'+ B$.$*"',3+$,+$."*/(+,
B("'+,C,D$*+(."'/1/$+
EF,7("'+
-$'"1/(.+8/&,1(,&*(<391+

15. Comparative Analysis
Direct Competitors •Offering the same functions in the
same way (e.g., Food.tv vs.
Epirurious)
Indirect Competitors •Offering the same functions in a
different way (e.g., Google News vs.
NYTimes print edition)
Partial Overlap •A competitor that covers some but
not all functions (e.g., Gmail vs.
Outlook)
Analogous Systems •A non-competitor that might give ideas
about how to provide functions better (e.g.
Wolverine Access Backpack vs. Amazon
Shopping Cart)

16. Compare Phones
Apple Iphone Blackberry Bold
HTC Touch Pro HTC G1
3GS 9000
Verizon Wireless
AT&T AT&T Sprint Nextel T-Mobile
Direct Competitors Indirect Competitors Partial Overlap Analogous Systems

17. Heuristic
Evaluation
feedback
!""#$%&'
)567898:6;785<=>?7@>A@987B66C7=86D87
EFG<D;6?7@H<=:7A5@:7E87I<EFI7<FJ7
:5D<=I57@CCD<CDE@:67G66?H@KB7AE:5EF7
metaphor
(")%*+,- D6@8<F@H>67:E;6L
)567898:6;785<=>?78C6@B7:567=86D8Q7>@FI=@I6J7
AE:57A<D?8J7C5D@8687@F?7K<FK6C:87G@;E>E@D7:<7
:567=86DJ7D@:56D7:5@F7898:6;R<DE6F:6?7:6D;8L7
!<>><A7D6@>A<D>?7K<FP6F:E<F8J7;@BEFI7EFG<DR navigation
;@:E<F7@CC6@D7EF7@7F@:=D@>7@F?7><IEK@>7<D?6DL 4%/23%)2,4
M86D87<G:6F7K5<<867898:6;7G=FK:E<F87H97
;E8:@B67@F?7AE>>7F66?7@7K>6@D>97;@DB6?7
N6;6DI6FK976OE:N7:<7>6@P67:567=FA@F:6?7
consistency 8:@:67AE:5<=:75@PEFI7:<7I<7:5D<=I57@F7
&,4121)"4&0 6O:6F?6?7?E@><I=6L71=CC<D:7=F?<7@F?7D6?<L
M86D8785<=>?7F<:75@P67:<7A<F?6D7
A56:56D7?EGG6D6F:7A<D?8J78E:=@:E<F8J7<D7
@K:E<F87;6@F7:5678@;67:5EFIL7!<>><A7
C>@:G<D;7K<FP6F:E<F8L prevention
*-"/"4)2,4 "P6F7H6::6D7:5@F7I<<?76DD<D7;688@I687E87@7
K@D6G=>7?68EIF7A5EK57CD6P6F:87@7CD<H>6;7GD<;7
<KK=DDEFI7EF7:567GED8:7C>@K6L7"E:56D76>E;EF@:67
6DD<DRCD<F67K<F?E:E<F87<D7K56KB7G<D7:56;7@F?7
memory CD686F:7=86D87AE:57@7K<FGED;@:E<F7<C:E<F7
("(,-0 H6G<D67:5697K<;;E:7:<7:567@K:E<FLdback
(EFE;ES67:567=86DQ87;6;<D97><@?7H97;@BEFI7
<HT6K:8J7@K:E<F8J7@F?7<C:E<F87PE8EH>6L7)567=86D7
85<=>?7F<:75@P67:<7D6;6;H6D7EFG<D;@:E<F7GD<;7
<F67C@D:7<G7:567?E@><I=67:<7@F<:56DL72F8:D=KR
efficiency
:E<F87G<D7=867<G7:567898:6;785<=>?7H67PE8EH>67<D7 "!!2&2"4&0
6@8E>97D6:DE6P@H>67A56F6P6D7@CCD<CDE@:6L
%KK6>6D@:<D87RR7=F866F7H97:567F<PEK67=86D7RR7
;@97<G:6F78C66?7=C7:567EF:6D@K:E<F7G<D7:567
6OC6D:7=86D78=K57:5@:7:567898:6;7K@F7K@:6D7:<7
design H<:57EF6OC6DE6FK6?7@F?76OC6DE6FK6?7=86D8L7
#"1234 %>><A7=86D87:<7:@E><D7GD6U=6F:7@K:E<F8L
#E@><I=68785<=>?7F<:7K<F:@EF7EFG<D;@:E<F7
A5EK57E87EDD6>6P@F:7<D7D@D6>97F66?6?L7"P6D97
6O:D@7=FE:7<G7EFG<D;@:E<F7EF7@7?E@><I=67K<;R
C6:687AE:57:567D6>6P@F:7=FE:87<G7EFG<D;@:E<F7 recovery
@F?7?E;EFE85687:56ED7D6>@:EP67PE8EHE>E:9L77777777777777777 -"&,/"-0
"DD<D7;688@I68785<=>?7H676OCD6886?7EF7
C>@EF7>@FI=@I67VF<7K<?68WJ7CD6KE86>97
EF?EK@:67:567CD<H>6;J7@F?7K<F8:D=KR
help
+".* :EP6>978=II68:7@78<>=:E<FL
"P6F7:5<=I57E:7E87H6::6D7EG7:567898:6;7K@F7H67
=86?7AE:5<=:7?<K=;6F:@:E<FJ7E:7;@97H67F6K68R
8@D97:<7CD<PE?6756>C7@F?7?<K=;6F:@:E<FL7%F97
8=K57EFG<D;@:E<F785<=>?7H676@897:<786@DK5J7
G<K=86?7<F7:567=86DQ87:@8BJ7>E8:7K<FKD6:678:6C87
:<7H67K@DDE6?7<=:J7@F?7F<:7H67:<<7>@DI6L

18. !""#$%&'
#.')/5/-'&)/.$,6()*6!*5/)3''2),/'%/)
!"#$%&'()*+$,-)!.*-)!/)0$!"0)$"1)
-.%$,0.)*22%$2%!*-')#''(+*"3)4!-.!")
%'*/$"*+6')-!&'7
Example: Pay attention to time before feedback
>10 sec, use
Fast, no special Tolerable, but percent-complete
indicators needed not immediate progress bars
Time
0.1 sec 1.0 sec 10 sec
Maximum
duration to keep
user focused

19. !""#$%&'
#.')/5/-'&)/.$,6()*6!*5/)3''2),/'%/)
!"#$%&'()*+$,-)!.*-)!/)0$!"0)$"1)
-.%$,0.)*22%$2%!*-')#''(+*"3)4!-.!")
%'*/$"*+6')-!&'7

20. !"#$%&'(
!!"#$%$&"'#$!()*+#$,"-.#&!"#)$"/$0#*-12)-2"3#
45&!#"(/+$3#,!/-$"$#-1+#6(16",&$#7-'5*5-/#&(#
&!"#)$"/3#/-&!"/#&!-1#$%$&"'8(/5"1&"+#&"/'$9#
#(**(4#/"-*"(/*+#6(1$"1&5(1$3#'-.512#517(/
'-&5(1#-,,"-/#51#-#1-&)/-*#-1+#*(256-*#(/+"/9

21. !"#$%&'(
!!"#$%$&"'#$!()*+#$,"-.#&!"#)$"/$0#*-12)-2"3#
45&!#"(/+$3#,!/-$"$#-1+#6(16",&$#7-'5*5-/#&(#
&!"#)$"/3#/-&!"/#&!-1#$%$&"'8(/5"1&"+#&"/'$9#
#(**(4#/"-*"(/*+#6(1$"1&5(1$3#'-.512#517(/
'-&5(1#-,,"-/#51#-#1-&)/-*#-1+#*(256-*#(/+"/9

22. !"#$%&'(
!!"#$%$&"'#$!()*+#$,"-.#&!"#)$"/$0#*-12)-2"3#
45&!#"(/+$3#,!/-$"$#-1+#6(16",&$#7-'5*5-/#&(#
&!"#)$"/3#/-&!"/#&!-1#$%$&"'8(/5"1&"+#&"/'$9#
#(**(4#/"-*"(/*+#6(1$"1&5(1$3#'-.512#517(/
'-&5(1#-,,"-/#51#-#1-&)/-*#-1+#*(256-*#(/+"/9

23. !"#$%"&$'!
!"#$"%&'(#)%!*&&"#%"+"(#,%'-).(/&)"%"+%
,/"(01#%0)2%3/44%)##2%0%.4#0$4+%,0$1#2%
5#,#$6#)!+%#7/(5%(&%4#0##%(*#%-)30)(#2%
"(0(#%3/(*&-(%*08/)6%(&%6&%(*$&-6*%0)%
#7(#)2#2%2/04&6-#9%:-;;&$(%-)2&%0)2%$#2&9

24. !"#$%"&$'!
!"#$"%&'(#)%!*&&"#%"+"(#,%'-).(/&)"%"+%
,/"(01#%0)2%3/44%)##2%0%.4#0$4+%,0$1#2%
5#,#$6#)!+%#7/(5%(&%4#0##%(*#%-)30)(#2%
"(0(#%3/(*&-(%*08/)6%(&%6&%(*$&-6*%0)%
#7(#)2#2%2/04&6-#9%:-;;&$(%-)2&%0)2%$#2&9

25. !"#$%$&'#!(
!"#$"%"&'()*%+',%&!"#%,'%#'+*#$%
#&#,&#$%*-..#$#+,%#'$*"/%"-,(0,-'+"/%'$%
01,-'+"%2#0+%,&#%"02#%,&-+34%$'))'5%
6)0,.'$2%1'+7#+,-'+"4

26. !"#$%$&'#!(
!"#$"%"&'()*%+',%&!"#%,'%#'+*#$%
#&#,&#$%*-..#$#+,%#'$*"/%"-,(0,-'+"/%'$%
01,-'+"%2#0+%,&#%"02#%,&-+34%$'))'5%
6)0,.'$2%1'+7#+,-'+"4

27. !"#$%$&'#!(
!"#$"%"&'()*%+',%&!"#%,'%#'+*#$%
#&#,&#$%*-..#$#+,%#'$*"/%"-,(0,-'+"/%'$%
01,-'+"%2#0+%,&#%"02#%,&-+34%$'))'5%
6)0,.'$2%1'+7#+,-'+"4

28. !"#$%$&'#!(
!"#$"%"&'()*%+',%&!"#%,'%#'+*#$%
#&#,&#$%*-..#$#+,%#'$*"/%"-,(0,-'+"/%'$%
01,-'+"%2#0+%,&#%"02#%,&-+34%$'))'5%
6)0,.'$2%1'+7#+,-'+"4

29. !"#$#%&'(%
!"!"#$!%%!&#%'("#)**+#!&&*&#,!--()!-#.-#(#
/(&!012#+!-.)"##'.$'#3&!"!"%-#(#3&*$2!,#0&*,#
*//1&&.")#."#%'!#0.&-%#32(/!4#5.%'!&#!2.,."(%!#
!&&*&63&*"!#/*"+.%.*"-#*&#$'!$7#0*&#%'!,#("+#
3&!-!"%#1-!&-#8.%'#(#/*"0.&,(%.*"#*3%.*"#
$!0*&!#%'!9#/*,,.%#%*#%'!#(/%.*"4
Enter birthdate: (bad)
ERROR: Birthdate must be
entered in MM/DD/YYYY format
Enter birthdate (MM/DD/YYYY): (better)
Enter birthdate: (best)
Month Day Year

30. !"!#$%
!"#"$"%&'()&'*+&,-+'$&$.,/'0.12'!/'$13"#4'
.56&7(+8'17(".#+8'1#2'.9(".#+':"+"50&;'")&'*+&,'
+).*02'#.(')1:&'(.',&$&$5&,'"#<.,$1(".#'<,.$'
.#&'91,('.<'()&'2"10.4*&'(.'1#.()&,;'=#+(,*7
(".#+'<.,'*+&'.<'()&'+/+(&$'+).*02'5&':"+"50&'.,'
&1+"0/',&(,"&:150&'#)&#&:&,'199,.9,"1(&;

31. !""#$#!%$&
!""#$#%!"#$%&''&()%**)&&+&",*&)'-./*&(%*$&''&
()+&#0"*)&%1**2&(1&",*&.)"*%!/".#)&0#$&",*&
*31*$"&(%*$&%(",&",!"&",*&%+%"*4&/!)&/!"*$&"#&
5#",&.)*31*$.*)/*2&!)2&*31*$.*)/*2&(%*$%6&
!$$'7&(%*$%&"#&"!.8#$&0$*9(*)"&!/".#)%6

32. !"#$%&
!"#$%&'()*)+%'$,*-%.*/%-.#"-*"-0%12#."%-*
!+"/+*")*"11($("#-.*%1*1#1($3*-((,(,4*5"(13*
(6.1#*'-".*%0*"-0%12#."%-*"-*#*,"#$%&'(*/%2
7(.()*8".+*.+(*1($("#-.*'-".)*%0*"-0%12#."%-*
#-,*,"2"-")+()*.+("1*1($#.#"(*9")":"$".34*****************

33. !"#$%"!&
!""#"$%&''()&'$'*#+,-$.&$&/0"&''&-$12$
0,(12$,(2)+()&$32#$4#-&'56$0"&41'&,7$
12-14(8&$8*&$0"#.,&%6$(2-$4#2'8"+4
81!&,7$'+))&'8$($'#,+81#29

34. !"#$%"!&
!""#"$%&''()&'$'*#+,-$.&$&/0"&''&-$12$
0,(12$,(2)+()&$32#$4#-&'56$0"&41'&,7$
12-14(8&$8*&$0"#.,&%6$(2-$4#2'8"+4
81!&,7$'+))&'8$($'#,+81#29

35. !"#$
!"!"#$%&'(%#)$#)*#+!$$!,#)-#$%!#*.*$!/#01"#+!#
'*!2#3)$%&'$#2&0'/!"$1$)&"4#)$#/1.#+!#"!0!*
*1,.#$&#5,&6)2!#%!75#1"2#2&0'/!"$1$)&"8##$.#
*'0%#)"-&,/1$)&"#*%&'72#+!#!1*.#$&#*!1,0%4#
-&0'*!2#&"#$%!#'*!,9*#$1*:4#7)*$#0&"0,!$!#*$!5*#
$&#+!#01,,)!2#&'$4#1"2#"&$#+!#$&&#71,(!8

36. Usability Test
•Real (or representative )users perform specific tasks
•User behavior is observed and captured
•User reaction/feedback is elicited and captured
•Results are analyzed
•Task completion, time, errors
•Critical incidents: where something notable happened
•User perceptions and feedback

37. The “Think-Aloud”
Protocol
•Need to know what users are thinking, not just what they are doing
•Ask users to talk while performing tasks
•What are they thinking, feeling, paying attention to, reading
•What are they trying to do
•Questions that arise as they work
•Make a recording or take good notes
•Make sure you can tell what they were doing

38. Build My Own Pizza

39. !"#"$%&'
(%$)'*&+,"#*-.
/.01%2$3*1.+,"#*-.

40. Graphic Design
The art or profession of using design elements (as typography and
images ) to convey information or create an effect.
It focuses on the art and science of
visual communication.
•Designing Principles
•Layout
•Fonts
•Icons

41. Interaction Design Practices
*'(#+, &'()
!"#$%&'$() !"8.%/1#'."2I$)'<" H%10;'72I$)'<" !"#$%&'$()
388'"'#,2914:#;%.+<; 388'"'#,2914:#;%.+<;
*+%&$,)
*+%&$,)
-./01%1#'&$23"14,)')
5 -./01%1#'&$23"14,)')
4 D')+14
!"#$%
5$%)."1)262*7$"1%'.) 5$%)."1)262*7$"1%'.)
3 A1,.+# !"#$%17#'."2G10
2 *#%+7#+%$ C$+%')#'72J&14+1#'."
E)1F'4'#,2?$)#'"<
1 *7.0$
*#%1#$<,
C'B8'20%.#.#,0$
A.B8'20%.#.#,0$ !"#$%&
!"8.%/1#'."23%7;'#$7+%$
@1&'<1#'."
=+"7#'."142)0$7'8'71#'.")
-."#$"#2%$K+'%$/$"#)
>+)'"$))2<.14 '"#(
?;$2<.142.827+)#./$%)
)*$+,

42. Graphic Design
1 2 3 4
Designing Principles
•Balances (equilibrium)
•Rhythm (repetition)
•Emphasis (attention control)
•Utility (harmonious agreement)
•Direction and Movement
•Proportion (Relationship)

43. Graphic Design
1 2 3 4
What is layout?
•A layout is a graphic design in which a designer
establishes the arrangement, proportions, and
relationship between the individual elements on the
page to be designed, that is: the images, body copy,
headings, captions, and other graphic elements.
•The challenge is to visually structure content and to
create graphically exciting references

45. •Grid makes browse easier
•Emphasize the brand through size

46. What do you feel about the two sites?

47. Also free space...

48. Graphic Design
1 2 3 4
Fonts
•Typeface is design for a set of characters
•Character may have multiple glyphs
•Typeface + Weights + Italics = FONT
•Serifs and Sans-Serifs
•Orphans (words & lines)

49. From Steven Jobs 2005 Stanford Commencement Speech
Ten years later, when we were designing the first Macintosh
computer, it all came to me. And we designed it all into the Mac.
It was the first computer with beautiful typography. If I had never
dropped in on that single course in college, the Mac would never
had multiple typefaces or proportionally spaced fonts. And since
Windows just copied the Mac, its likely that no personal
computers might have the wonderful typography that they do.

50. From a study conducted by Wichita State University
+,,-.,-/012324456.-5270/856.31 •Youthful
! /*-,01, !"#$%&'(")'*'+*,-. •Rebellious
" /"01&- !"#$%&'(")'*'+*,-. •Unstable
#
$
/*01*2*
/*+01,*
!"#$%&'(")'*'+*,-. •Less trustworthy
!"#$%&'(")'*'+*,-.
% /&01*2* !"#$%&'(")'*'+*,-. •Less professional
& /0,*- !"#$%&'(")'*'+*,-.
' /,+&0'1&2'3"+*4 !"#$%&'(")'*'+*,-. The lower a font ranked in
( /"01)*0),* !"#$%&'(")'*'+*,-. appropriateness, the more likely a
) Georgia You’ve got a mail.
!* /&0)#12'3")4,5 !"#$%&'(")'*'+*,-. reader was to assume the writer
!! /"+,0'1*23'41 !"#$%&'(")'*'+*,-. was a level trainee employee, and
less mature.
9/:/5/451;258204150,,-.,-/01256.3156.-5207/85-20<2-=

51. How do you decide which to use?

52. •You want your font to say something about you.
Generally, sans-serif fonts such as Arial convey a more "contemporary" feeling,
while serif fonts such as Times New Roman feel more "classical."
•For the sake of your audience.
Not all fonts are equally readable - especially on a computer screen. Fonts with
wider, more open shapes - including Verdana and Georgia - are easier to
read. If you frequently send emails to an older audience, consider using one of
these "easy on the eyes" fonts.

53. Graphic Design
1 2 3 4
Icons
•Should be recognizable, memorable, and discriminable •files & folders
•Applications(Buttons)
•Perceived Affordance is about characteristics in the •Bookmarks(Favicons)
appearance of a device that give clues for the proper •Symbols
operation.

54. Design Based on Affordance
what are the clues?
Turn
Push

55. Design Based on Affordance
!"#$%&'&($
!""#$%&&'''()*+(,-.&/#!-01

56. !"#"$%&'
(%$)'*&+,"#*-.
/.01%2$3*1.+,"#*-.

57. Interaction Design Practices
*'(#+, &'()
!"#$%&'$() !"8.%/1#'."2I$)'<" H%10;'72I$)'<" !"#$%&'$()
388'"'#,2914:#;%.+<; 388'"'#,2914:#;%.+<;
*+%&$,)
*+%&$,)
-./01%1#'&$23"14,)')
5 -./01%1#'&$23"14,)')
4 D')+14
!"#$%
5$%)."1)262*7$"1%'.) 5$%)."1)262*7$"1%'.)
3 A1,.+# !"#$%17#'."2G10
2 *#%+7#+%$ C$+%')#'72J&14+1#'."
E)1F'4'#,2?$)#'"<
1 *7.0$
*#%1#$<,
C'B8'20%.#.#,0$
A.B8'20%.#.#,0$ !"#$%&
!"8.%/1#'."23%7;'#$7+%$
@1&'<1#'."
=+"7#'."142)0$7'8'71#'.")
-."#$"#2%$K+'%$/$"#)
>+)'"$))2<.14 '"#(
?;$2<.142.827+)#./$%)
)*$+,

58. Availability Heuristics
Anchoring and Adjustment
Framing
Story Telling

59. Availability Heuristics
•AH can result from ease of recall
“A person is said to employ the availability heuristic whenever he estimates frequency
or probability by the ease with which instances or associations could be brought to
mind.” (TK, 1973)
•When is the heuristic likely to be invoked?
“When we are estimating the frequency of a class or the probability of an event it will
be mediated by an assessment of availability.” (TK, p. 164)
•What are the underlying mechanisms
Associative bonds are strengthened by repetition, enhanced by ease, enhanced
amount of recall

60. Which causes more deaths in the United States?
(A) shark attacks
(B) getting hit by falling airplane

61. Anchoring and Adjustment
How we choose by
comparing with a
nearby reference point?
•Anchoring - the tendency make judgments consistent with some prior cue or
anchor, regardless of the relevance of that anchor.
•Anchoring arises from mental mechanisms of selective accessibility

62. Is this grill expensive? $5,984.05
from www. barbecue-grill-guide.com

63. $5,984.05
How about now?
$6,299.00
from www. barbecue-grill-guide.com

64. How about now?
Beefeater Signature SL - 6 Burner BBQ
$5,984.05
$6,299.00
from www. barbecue-grill-guide.com
Beefeater Signature SL - 6 Burner BBQ: Gold Plated Edition
$12,500.00

65. What does it imply for the marketing strategy?
•Producers want to anchor to a higher priced alternative
•Even if it means creating an artificial alternative
•Producers avoid anchoring to a lower priced alternative
•Differentiation is key

66. Framing and the Reversal of Preferences
•Alternative wording of the same objective information that
significantly alters the decisions that people make
The U.S. government is preparing for the outbreak of an unusual Asian disease
which is expected to kill 600 people. Two alternative programs are being
considered. Which do you favor? Circle either program A or program B?
•Program A: If adopted, 200
people will be saved.
•Program B: If adopted, there is
a one-third probability that all
will be saved and a two-thirds
probability that none will be
saved.

67. Framing and the Reversal of Preferences
•Alternative wording of the same objective information that
significantly alters the decisions that people make
The U.S. government is preparing for the outbreak of an unusual Asian disease
which is expected to kill 600 people. Two alternative programs are being
considered. Which do you favor? Circle either program A or program B?
•Program A: If adopted, 400
people will die.
•Program B: If adopted, there is
a one-third probability that all
will be saved and a two-thirds
probability that none will be
saved.

68. Value
Value in Prospect Theory
Losses Gains
•Reference Dependence
People are sensitive to loses and gains relative to their reference state (e.g., the status
quo). The reference state can be manipulated through framing.
•Diminishing Sensitivity
People are less and less sensitive to each additional dollar gained or lost (i.e., the value
function is concave for gains and convex for losses)
•Loss Aversion
Losses loom larger than gains (i.e., the value function is steeper for losses than for gains)

69. •Risk aversion for gains
•Risk seeking for losses
Value
Losses Gains

70. •Framing and the irrationality of the sum of our choices
•We like certainty, even pseudocertainty
•The framing and the overselling of insurance
•The value we place on what we own
•mental accounting
•Do not harm, the omission bias, and the status Quo

71. How would you frame this?

72. Example from the NY TIMES Headline (March 2, 2010)
March 01, 2010, 3:58 PM
Biden to Labor Leaders: Things Could Be Worse
The vice president counsels patience on creating jobs, and continues to say
that things could've been a lot worse without the stimulus package.
Background: When Vice President Joseph R. Biden Jr. spoke to the nation’s labor leaders at the A.F.L.-
C.I.O.’s executive council meeting, he was trying to explain why the administration decided to commit
“hundreds of billions …to bail out the banks that got us in trouble”. These bailouts have been very unpopular,
and voters are angry about them because they have not seen an immediate change in their employment
outlook will bankers appear to be taking home big bonuses. Biden was trying to explain to them that the
bailouts actually helped the average employee by avoiding even larger losses. He said: ”We would have lost
300,000 high-paying jobs immediately, and 700,000 more as their suppliers went under.” However, the
headline that the NY Times choose for this speech was “Biden to Labor Leaders: Things Could Be Worse”.

73. Example from the NY TIMES Headline (March 2, 2010)
March 01, 2010, 3:58 PM
Biden to Labor Leaders: Things Could Be Worse
The vice president counsels patience on creating jobs, and continues to say
that things could've been a lot worse without the stimulus package.
Background: When Vice President Joseph R. Biden Jr. spoke to the nation’s labor leaders at the A.F.L.-
C.I.O.’s executive council meeting, he was trying to explain why the administration decided to commit
“hundreds of billions …to bail out the banks that got us in trouble”. These bailouts have been very unpopular,
and voters are angry about them because they have not seen an immediate change in their employment
outlook will bankers appear to be taking home big bonuses. Biden was trying to explain to them that the
bailouts actually helped the average employee by avoiding even larger losses. He said: ”We would have lost
300,000 high-paying jobs immediately, and 700,000 more as their suppliers went under.” However, the
headline that the NY Times choose for this speech was “Biden to Labor Leaders: Things Could Be Worse”.
Biden to Labor Leaders: The actions we took saved 1,000,000 jobs for people just like you

74. Be aware of good storytellers!
•When Jobs speaks, he doesn’t talk about his company. He shares his passion over
how a MacBook will help unleash your personal creativity or how an iPhone will put
your office in the palm of your hand, and help to bring the world closer together.
And, all that makes news. What Jobs says is meaningful, and is repeated by his
broad audiences, over and over.

75. Thank You!