Interaction design

741 views

Published on

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

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
741
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 什么是交互设计?提到交互设计你们想到了什么?\n
  • 我们的设计空间是建立在3个显性主体的相互作用之上:human,task,technology\n易于忽略隐性要素:organizational & social issues\n社会和组织背景定义了我们的设计针对的是什么样的用户,什么样的任务,什么样的科技\n
  • 设计人员:理解组织和社会环境,人员特征,任务性质---从而影响科技和设计\n\n
  • 我们要建立一个怎样的交互系统?或者说我们的交互设计追求的是一个什么样的目标?valuable?(太笼统)\n用户体验的蜂巢模型\n
  • \n
  • 以用户为中心(我们永远都在测试)\n
  • \n
  • \n
  • \n
  • brainstorming, new design 出台的时候,需要基于先前represent的功课来justify(改进)的合理性,优势\n是项目文档的重要组成不分:经得起人员变动的影响\n
  • interview 的目标\n
  • interview:能对用户及其行为产生更广泛的理解(用户的回答往往是启发式的,有很大的自由度),能够给我们带来意外的思路 \nsurvey:有利于获取大量数据,成本低,能提供统计依据\n 增强了特定研究问题的可信度(普遍问题/罕见问题)\n \n \n
  • survey 和 interview 搭配的研究方法 (2种)\n1,探索论证:用interview来揭露现象,明确研究调查的范畴-survey来进行所针对问题的程度测量\n2 识别深究:用survey来识别目标群体的分类,行为差异-interview来揭露差异存在的原因\n\n关键:对于目标群体的明确程度\n\n\n
  • 角色+场景=虚拟用户代表\n角色的基本要素 -增强真实性\n\n
  • 直接竞争者:以相同的方式提供相同的功能\n间接竞争者:通过不同的方式提供相同的功能\n部分覆盖:2个系统只有部分功能相同\n类似系统:非竞争者,但是会对我们的部分功能的设计提供一定的启发\n\ncomparative analysis的目标:\n了解你的竞争对手和产品\n了解用户的期望及我们当前产品的成功之处或败笔\n了解不同产品的市场定位和功能特色\n取长补短:best practices, solutions to challenging issues, good design ideas\n\n
  • 竞争对象的划分是criteria相关的,选取不同的划分标准就会有不同的结果\n1从美国移动运营商的角度来划分(at&t wireless, verizon wireless, sprint nextel, T-mobile)\n2从手机的输入格式来进行划分\n\n
  • Neilsen‘s Heuristic Evaluation (启发式评估)\n基于11个项目的249个可用性问题进行研究的结果\n\n
  • 系统应当总是能告知用户当前进程:在合理的时间内给出合适的反馈\nvisibility of system status\n\n
  • visibility of system feedback\n
  • 系统应当总能使用用户的语言,而非系统导向的术语,并且使操作与现实世界的应用和逻辑能够对应(match between system & real-world)\nspeak user’s language \n
  • 系统应当总能使用用户的语言,而非系统导向的术语,并且使操作与现实世界的应用和逻辑能够对应(match between system & real-world)\nBad example: Old Mac Desktop\n支持拖拽磁盘到垃圾箱(删除而非弹出)\n
  • Better:当前Mac OS不支持拖拽磁盘到垃圾箱的操作\n\n
  • 好的系统能让强化用户的掌控和自由度(user control and freedom)能对用户的失误操作提供紧急出口(redo,undo)\n
  • 用户需要做出回应才能进行到下一步(好的指引)\n问题?\nbeginner + infrequent tasks---good navigation\nexperts + common tasks---efficiency tradeoff\n
  • 不应该让用户对系统的各种元素的对应产生疑惑\n\n
  • leather?\nhorse?\n---better classification + words\n
  • leather?\nhorse?\n---better classification + words\n
  • \n
  • 防患于未然 > 亡羊补牢\n细节设计可以有效避免用户的操作失误\n eg. 减少误导性设计 \n
  • 系统记忆: recognition >(rather than) recall\n\n
  • 效率性设计--针对expert + common tasks\nnovice user:invisible\nexpert user:quite helpful\nExample: shortcuts\n
  • Aesthetic and minimalist design(审美和最低标准设计)\n不应该在页面上引入无关或者低度相关的dialogue\n因为每个额外的低关联度信息的引入都会和我们的关键信息产生竞争(用户关注分散)\n\n\n\n
  • Recovery 是指好的系统应当能诊断异常,用清晰易懂的语言来报告用户,并且提供相应解决方案\n\nEg. How could users deal with these?\n\n
  • Better\n
  • “帮助文档”提供了用户操作指导,就像“售后服务“一样,不一定需要,但是一旦有需要的时候,就会对用户体验产生很重要的影响\n好的帮助文档应该能易于搜索,关注用户任务,列出具体步骤,并且不能繁雍\n\n
  • 建立真实使用场景\n通过观察用户对具体任务的执行,记录用户的行为和思路\n造价高,需要设备,耗时长,但是最有效---引入了对产品的针对性,是检验设计有效性的有力工具\n\n
  • 我们关注用户的思路,而不仅仅是行为\n\n\n
  • 你会怎样来DIY一个你和朋友共同购买的pizza?\n从面点师的角度:拿起配料--决定放在哪一边(尽量减少动作代价)\n从顾客的角度:只会先考虑一半,再考虑另一半(减少记忆负荷)\ntradeoff\n----我们需要捕捉用户的思维\n
  • \n
  • Graphic Design 是通过使用设计元素来传递信息,制作特效的一门艺术和专业。\n集中于视觉交流的艺术和科学性\n讨论4个基本元素\n
  • \n
  • \n
  • Layout 是指设计师对各种页面元素进行关于摆放位置,比例大小,相互关系的整体布局。\n挑战:视觉上构建内容(非逻辑处理文字)并给予精彩的设计参照\n
  • \n
  • 用网格来辅助设计\nGrid makes browse easier\n网格是用来对齐和分组的---支持视觉流的连续性(浏览是产生的patten)\n分组:相互关联\n对齐:完成的任务相似\n理论建立:20世纪又格式塔(Gestalt)心理学家建立起来\n4个方面:\n相邻性:把物体相邻放在一起,用户会把它们相互关联起来( 八卦男女)\n相似性:如果两个元素有着相同的大小,形状,颜色或方向,用户会把它们关联起来(双胞胎,一个爸妈生的)\n连续性:我们的眼镜想要看到由对齐,或更小元素组成的连续像条和曲线(一个区域内,等间隔均匀安置)\n封闭性:我们也希望看到简单封闭的区域(集中)\n\n大小网站对于home page的构建原则(brand impression vs. efficiency)\n
  • \n
  • 1.设计受到空间大小的限制\n2.free space可以在整个页面中起到衬托主题的作用,以虚代实,以无代有\n3.给人清新舒适的感觉(豆瓣)\n
  • \n
  • Fonts 不容忽视,是视觉交互上很重要的工具,不只是readability(涉及到屏幕分辨率)\n还能传达个性,感受等的无形信息\n
  • 针对email-fonts做得统计调查\n读者会根据作者对fonts的选择来判断其成熟度和职务级别,甚至可能涉及到个性感知\n
  • \n
  • 1.让fonts来表达你\n2.照顾读者(字母间隙大,更开阔的fonts)\n
  • icons的4个应用,3个标准\n所谓“功能可见性”,就是拿起一样东西,你就知道它是做什么用的。\n\n
  • Affordance ,这个字是知觉心理学家J. J. Gibson 所创造的,(1904 ~ 1979,普林斯顿大学心理学博士,康乃尔大学教授)他用这词来描述一位行为者(或者人或者动物)面对世界的万物之间存在或潜在的互动行为属性。\n\n\n看见塑料薄膜泡便不知不觉地想去挤压它,这是在心理学上就被称为“affordance”的现象之一 。如果设计产品时,能够考虑人的本能意识和行为,那所设计的交互式产品将具有很大创造力。\n\n
  • \n
  • \n
  • \n
  • Bounded rationality & incomplete information 都会扭曲我们的偏好并导致人们做出很多”不聪明的”决定\n心理学角度探讨一些现象\n
  • AH-便利直觉:决策者倾向于以其方便获得的信息来做出判断\n\n尤其在衡量概率和可能性的问题上会被误用\n重复性多的,易于想象的情况都会导致我们使用便利直觉\n\n\n\n
  • 大白鲨,动物世界\n
  • 我们的判断会参照一些之前的线索,而不会考虑这些线索的相关性与否\n
  • \n
  • \n
  • \n
  • 生产者倾向于提供消费者一个更高的参照点\n
  • 对客观信息的不同表述会强烈影响人们对情况的感知及其决策结果\n
  • \n
  • 参照依赖性---人们总是对与当前状态相关的损失和获得更加敏感,\n\n\n
  • \n
  • mental accounting\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Interaction design

    1. 1. AboutInteraction Design
    2. 2. The Context of Interaction $(&)%$*+,+-).&$ $%& *+/0 "# 01 ! 20 *+,-%. 0".1(% !-./. !"#$%&&()
    3. 3. The Context of Interaction $(&)%$*+,+-).&$ $%& *+/0 "# 01 ! 20 *+,-%.Understand To impact these 0".1(% these !-./. !"#$%&&()
    4. 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%,,(***012(30!"#$0"16 %#$0)*(-012(0*3*1(46 ,-($"&( >%#0)*(-*01-)*1012(0*3*1(46
    5. 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%,,(***012(30!"#$0"16 %#$0)*(-012(0*3*1(46 ,-($"&( >%#0)*(-*01-)*1012(0*3*1(46
    6. 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)1F4#,2?$)#"< 1 *7.0$*#%1#$<, CB820%.#.#,0$ A.B820%.#.#,0$ !"#$%& !"8.%/1#."23%7;#$7+%$ @1&<1#." =+"7#."142)0$7871#.") -."#$"#2%$K+%$/$"#)>+)"$))2<.14 "#(?;$2<.142.827+)#./$%) )*$+,
    7. 7. !"#"$%&!"#$%& (%$)*&+,"#*-. /.01%2$3*1.+,"#*-.
    8. 8. !"#"$%&(%$)*&+,"#*-./.01%2$3*1.+,"#*-.
    9. 9. UX Research1 !"#$%&()*$(+,"-+2 .(%(/)0)&11%2)#(3"43 56$&().$424 7-&%28()0),-(91(()4&&5 :(1"9)9(1"9+
    10. 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. 11. Interviews8.//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. 12. Surveys Vs. InterviewsInterviews•Better for exploring and gaining a broad understanding of aset of users & activities•Ability to follow unanticipated paths•Qualitative & quantitative dataSurveys•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. 13. Surveys with InterviewsExplore & 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. 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. 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. 16. Compare PhonesApple Iphone Blackberry Bold HTC Touch Pro HTC G1 3GS 9000 Verizon Wireless AT&T AT&T Sprint Nextel T-MobileDirect Competitors Indirect Competitors Partial Overlap Analogous Systems
    17. 17. HeuristicEvaluation 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. 18. !""#$%& #.)/5/-&)/.$,6()*6!*5/)32),/%/) !"#$%&()*+$,-)!.*-)!/)0$!"0)$"1) -.%$,0.)*22%$2%!*-)#(+*"3)4!-.!") %*/$"*+6)-!&7 Example: Pay attention to time before feedback >10 sec, useFast, no special Tolerable, but percent-completeindicators needed not immediate progress bars Time 0.1 sec 1.0 sec 10 sec Maximum duration to keep user focused
    19. 19. !""#$%&#.)/5/-&)/.$,6()*6!*5/)32),/%/)!"#$%&()*+$,-)!.*-)!/)0$!"0)$"1)-.%$,0.)*22%$2%!*-)#(+*"3)4!-.!")%*/$"*+6)-!&7
    20. 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. 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. 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. 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. 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. 25. !"#$%$&#!(!"#$"%"&()*%+,%&!"#%,%#+*#$%#&#,&#$%*-..#$#+,%#$*"/%"-,(0,-+"/%$%01,-+"%2#0+%,&#%"02#%,&-+34%$))5%6)0,.$2%1+7#+,-+"4
    26. 26. !"#$%$&#!(!"#$"%"&()*%+,%&!"#%,%#+*#$%#&#,&#$%*-..#$#+,%#$*"/%"-,(0,-+"/%$%01,-+"%2#0+%,&#%"02#%,&-+34%$))5%6)0,.$2%1+7#+,-+"4
    27. 27. !"#$%$&#!(!"#$"%"&()*%+,%&!"#%,%#+*#$%#&#,&#$%*-..#$#+,%#$*"/%"-,(0,-+"/%$%01,-+"%2#0+%,&#%"02#%,&-+34%$))5%6)0,.$2%1+7#+,-+"4
    28. 28. !"#$%$&#!(!"#$"%"&()*%+,%&!"#%,%#+*#$%#&#,&#$%*-..#$#+,%#$*"/%"-,(0,-+"/%$%01,-+"%2#0+%,&#%"02#%,&-+34%$))5%6)0,.$2%1+7#+,-+"4
    29. 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 formatEnter birthdate (MM/DD/YYYY): (better) Enter birthdate: (best) Month Day Year
    30. 30. !"!#$%!"#"$"%&()&*+&,-+$&$.,/0.12!/$13"#4.56&7(+817(".#+81#2.9(".#+:"+"50&;")&*+&,+).*02#.()1:&(.,&$&$5&,"#<.,$1(".#<,.$.#&91,(.<()&2"10.4*&(.1#.()&,;=#+(,*7(".#+<.,*+&.<()&+/+(&$+).*025&:"+"50&.,&1+"0/,&(,"&:150&#)&#&:&,199,.9,"1(&;
    31. 31. !""#$#!%$&!""#$#%!"#$%&&()%**)&&+&",*&)-./*&(%*$&&()+&#0"*)&%1**2&(1&",*&.)"*%!/".#)&0#$&",*&*31*$"&(%*$&%(",&",!"&",*&%+%"*4&/!)&/!"*$&"#&5#",&.)*31*$.*)/*2&!)2&*31*$.*)/*2&(%*$%6&!$$7&(%*$%&"#&"!.8#$&0$*9(*)"&!/".#)%6
    32. 32. !"#$%&!"#$%&()*)+%$,*-%.*/%-.#"-*"-0%12#."%-*!+"/+*")*"11($("#-.*%1*1#1($3*-((,(,4*5"(13*(6.1#*-".*%0*"-0%12#."%-*"-*#*,"#$%&(*/%27(.()*8".+*.+(*1($("#-.*-".)*%0*"-0%12#."%-*#-,*,"2"-")+()*.+("1*1($#.#"(*9")":"$".34*****************
    33. 33. !"#$%"!&!""#"$%&()&$*#+,-$.&$&/0"&&-$12$0,(12$,(2)+()&$32#$4#-&56$0"&41&,7$12-14(8&$8*&$0"#.,&%6$(2-$4#28"+481!&,7$+))&8$($#,+81#29
    34. 34. !"#$%"!&!""#"$%&()&$*#+,-$.&$&/0"&&-$12$0,(12$,(2)+()&$32#$4#-&56$0"&41&,7$12-14(8&$8*&$0"#.,&%6$(2-$4#28"+481!&,7$+))&8$($#,+81#29
    35. 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. 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. 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. 38. Build My Own Pizza
    39. 39. !"#"$%&(%$)*&+,"#*-./.01%2$3*1.+,"#*-.
    40. 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 ofvisual communication. •Designing Principles •Layout •Fonts •Icons
    41. 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)1F4#,2?$)#"< 1 *7.0$*#%1#$<, CB820%.#.#,0$ A.B820%.#.#,0$ !"#$%& !"8.%/1#."23%7;#$7+%$ @1&<1#." =+"7#."142)0$7871#.") -."#$"#2%$K+%$/$"#)>+)"$))2<.14 "#(?;$2<.142.827+)#./$%) )*$+,
    42. 42. Graphic Design1 2 3 4 Designing Principles •Balances (equilibrium) •Rhythm (repetition) •Emphasis (attention control) •Utility (harmonious agreement) •Direction and Movement •Proportion (Relationship)
    43. 43. Graphic Design1 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
    44. 44. •Grid makes browse easier•Emphasize the brand through size
    45. 45. What do you feel about the two sites?
    46. 46. Also free space...
    47. 47. Graphic Design1 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)
    48. 48. 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.
    49. 49. 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,*- !"#$%&(")*+*,-. /,+&01&23"+*4 !"#$%&(")*+*,-. The lower a font ranked in ( /"01)*0),* !"#$%&(")*+*,-. appropriateness, the more likely a ) Georgia You’ve got a mail. !* /&0)#123")4,5 !"#$%&(")*+*,-. reader was to assume the writer !! /"+,01*2341 !"#$%&(")*+*,-. was a level trainee employee, and less mature.9/:/5/451;258204150,,-.,-/01256.3156.-5207/85-20<2-=
    50. 50. How do you decide which to use?
    51. 51. •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.
    52. 52. Graphic Design1 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.
    53. 53. Design Based on Affordance what are the clues? Turn Push
    54. 54. Design Based on Affordance !"#$%&&($ !""#$%&&()*+(,-.&/#!-01
    55. 55. !"#"$%&(%$)*&+,"#*-./.01%2$3*1.+,"#*-.
    56. 56. 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)1F4#,2?$)#"< 1 *7.0$*#%1#$<, CB820%.#.#,0$ A.B820%.#.#,0$ !"#$%& !"8.%/1#."23%7;#$7+%$ @1&<1#." =+"7#."142)0$7871#.") -."#$"#2%$K+%$/$"#)>+)"$))2<.14 "#(?;$2<.142.827+)#./$%) )*$+,
    57. 57. Availability HeuristicsAnchoring and Adjustment Framing Story Telling
    58. 58. 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
    59. 59. Which causes more deaths in the United States?(A) shark attacks(B) getting hit by falling airplane
    60. 60. 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
    61. 61. Is this grill expensive? $5,984.05 from www. barbecue-grill-guide.com
    62. 62. $5,984.05How about now? $6,299.00 from www. barbecue-grill-guide.com
    63. 63. 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
    64. 64. 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
    65. 65. Framing and the Reversal of Preferences•Alternative wording of the same objective information thatsignificantly 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.
    66. 66. Framing and the Reversal of Preferences•Alternative wording of the same objective information thatsignificantly 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.
    67. 67. ValueValue 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)
    68. 68. •Risk aversion for gains •Risk seeking for losses ValueLosses Gains
    69. 69. •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
    70. 70. How would you frame this?
    71. 71. 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 couldve 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 employmentoutlook will bankers appear to be taking home big bonuses. Biden was trying to explain to them that thebailouts actually helped the average employee by avoiding even larger losses. He said: ”We would have lost300,000 high-paying jobs immediately, and 700,000 more as their suppliers went under.” However, theheadline that the NY Times choose for this speech was “Biden to Labor Leaders: Things Could Be Worse”.
    72. 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 couldve 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 employmentoutlook will bankers appear to be taking home big bonuses. Biden was trying to explain to them that thebailouts actually helped the average employee by avoiding even larger losses. He said: ”We would have lost300,000 high-paying jobs immediately, and 700,000 more as their suppliers went under.” However, theheadline 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
    73. 73. Be aware of good storytellers!•When Jobs speaks, he doesn’t talk about his company. He shares his passion overhow a MacBook will help unleash your personal creativity or how an iPhone will putyour 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 hisbroad audiences, over and over.
    74. 74. Thank You!

    ×