UI设计1-心理学基础

1DesigningWiththeMindinMind:ThePsychologicalBasisforUIDesignRulesJeffJohnson,Ph.D.UIWizards,Inc.(Stoneetal,2005)Part1•Visibility:Firststeptogoalshouldbeclear可见性：明确地标明从第一步到目标•Affordance:Eachcontrolindicateshowtouseit示能性:每个控件要暗示使用方法•Feedback:Shouldbeclearwhathappenedorishappening反馈：明确表示发生了什么事或正在发生的问题•Simplicity:assimpleaspossible&task-focused简单：越简单越好，以任务为中心3UIDesignGuidelines(Stoneetal,2005)Part2•Structure:contentorganizedsensibly结构：有条理的组织内容•Consistency:similarityforpredictability一致性：可预测的相似性•Tolerance:preventerrors,helprecovery容错性：防止错误，帮助恢复•Accessibility:usablebyallintendedusers,despitehandicap,accessdevice,orenvironmentalconditions可访问性：应该支持包括：障碍人士，辅助访问设备，或特殊环境条件等各种用户场景4ApplyingUsabilityGuidelines•UIGuidelinesarebasedonhowpeopleperceive,think,learn,actUI设计规范基于人们的所见、所想、所学•UIguidelinesarenotroterecipesUI设计规范不是生搬硬套的教条•Applyingthemeffectivelyrequiresunderstandingtheirscientificbasis应用这些设计规范需要理解它们的科学基础–Determiningruleapplicability&precedence确定规则的适用性和优先级–Balancingtrade-offsbetweencompetingrules在一些相互矛盾的规则中寻求平衡5FactsaboutHumanPerception&CognitionPart1人类认知与识别的几个事实(1)•Weperceivewhatweexpect看到我们所期望的•Ourvisionisoptimizedtoseestructure我们的视觉最后都会优化到结构•Weseekandusevisualstructure我们寻求和使用可视化结构•Ourcolorvisionislimited我们的色觉是有限的6•Ourattentionislimited;Ourmemoryisimperfect我们的注意力是有限的;我们的记忆是不完美的•Limitsonattentionshapeourthought&action注意力的限制塑造了我们的思想和行动•Learnedroutinesareeasy;Newactionsaredifficult依照旧例很容易的;新的行动是困难的FactsaboutHumanPerception&CognitionPart2人类认知与识别的几个事实(2)7Ourperceptionisbiasedby:我们的视觉基于：•Ourexperience我们的经验•Thecontext上下文环境•Ourgoals我们的目标WePerceiveWhatWeExpect看到我们所期望的8WePerceiveWhatWeExpect看到我们所期望的9WePerceiveWhatWeExpect看到我们所期望的Page1BackNextPage2BackNextPage3BackNextPage4NextBack10WePerceiveWhatWeExpect看到我们所期望的TECT11WePerceiveWhatWeExpect看到我们所期望的Polishthesilverwaresausage12WePerceiveWhatWeExpect看到我们所期望的厉害我头疼得我哥哥的篮球很13WePerceiveWhatWeExpect看到我们所期望的•Adults’perception&attentionfocusesalmosttotallyonourgoals成人的视觉和注意力主要集中在目标上•Tendnottonoticethingsunrelatedtogoal与目标不相关的会选择忽略14看到我们所期望的15OurVisionisOptimizedtoSeeStructure我们的视觉最后都会优化到结构GestaltPrinciplesofVisualPerception视觉的形态原则•Proximity亲密性•Similarity相似性•Continuity连续性•Closure闭合性•Symmetry对称性•Figure/ground形象-背景知觉•Commonfate相同结果16GestaltPrinciple:Proximity形态原则：亲密性•Itemsthatarecloserappeargrouped更近的倾向于位于一组•Left:rows左边：行Right:columns右边：列17GestaltPrinciple:Proximity形态原则：亲密性•Good:MozillaThunderbirddialogbox18GestaltPrinciple:Proximity形态原则：亲密性•Bad:DiscreetSoftwareInstaller19GestaltPrinciple:Continuity形态原则：连续性•Wetendtoseecontinuousforms倾向看到连续的形式•Bluelineandorangeline;notblue-and-orangeand蓝色线条和橙色线条，而不是蓝橙与蓝橙•Evenifcross-pointiscovered即便交叉点被盖住20GestaltPrinciple:Continuity形态原则：连续性21GestaltPrinciple:Continuity形态原则：连续性•MacOSslider22GestaltPrinciple:Closure形态原则：闭合性•Wetendtoseewhole,closedobjects,notcollectionsoffragments我们倾向于看到完整、闭合的对象，而不是碎片对象•Overlappingcircles&triangles,notoddfragments我们看到的是重叠的圆圈和三角，而不是零散的碎片结构23GestaltPrinciple:Closure形态原则：闭合性•Wetendtoseewhole,closedobjects,notcollectionsoffragments我们倾向于看到完整、闭合的对象，而不是碎片对象•Stackedletters,notoddbitsofimages叠起来的信笺，而不是零散的图片24•Wetendtoseesimplefigures,notcomplexones我们倾向于看到简单的图形，而非复杂的•E.g.,twooverlappingdiamonds;notother,morecomplexcombinations两个重叠的方块，而非其他复杂的组合GestaltPrinciple:Symmetry形态原则：对称性25GestaltPrinciple:Symmetry形态原则：对称性•Thagard:CoherenceinThought&Action26GestaltPrinciple:CommonFate形态原则：相同结果•Itemsthatmovetogetherappeargrouped一起移动的倾向于在一个分组里27•ItemsthatmovetogetherappeargroupedGestaltPrinciple:CommonFate形态原则：相同结果28WeSeek&UseStructure我们寻求和使用结构Structuredinfoiseasiertoperceive结果信息更易察觉•Unstructured:非结构化YouarebookedonUnitedflight237,whichdepartsfromAucklandat14:30andarrivesatSanFranciscoat11:40Tuesday15Oct.•Structured:结构化Flight:UA237,Auckland=SanFranciscoDepart:14:30Tue15OctArrive:11:40Tue15Oct29StructuredNumbersAreEasiertoScanandRead•Easy:[phone]•Hard:4151234567•Easy:1234567890123456•Hard:123456789012345630OurColorVisionisLimited我们的颜色识别能力是有限的•Ourvisionisoptimizedtoseecontrasts--edges&changes,notabsolutelevels我们的视觉倾向于看到对比性强的：边缘、改变，而不是绝对值31OurColorVisionisLimited我们的颜色识别能力是有限的•Ourvisionisoptimizedtoseecontrasts--edges&changes,notabsolutelevels我们的视觉倾向于看到对比性强的：边缘、改变，而不是绝对值A:B:33OurColorVisionisLimited我们的颜色识别能力是有限的•Wehavetroublediscriminating:我们很难识别–palecolors淡色调–smallcolorpatches小块颜色–separatedpatches割裂的块结构•ITN.net34OurColorVisionisLimited我们的颜色识别能力是有限的35OurColorVisionisLimited我们的颜色识别能力是有限的•Somepeoplehavecolor-blindness照顾色盲人群–~8%ofmales男性8%–~0.5%offemales女性0.5%•E.g.,colorsthatwouldbehardforred-greencolorblindpeopletodistinguish红绿色盲人群很难分辨有些颜色36OurColorVisionisLimited,so我们的颜色识别能力是有限的•Don’trelysolelyoncolor不要单纯依赖颜色–Useredundantlywithothercues依靠其他辅助手段•E.g.,Let’simproveITN.net让我们改进一下ITN.netHowtheyimprovedit:看看他们是怎么改进的37OurAttentionisLimited;OurMemoryisImperfect我们的注意力有限我们的记忆力不完美•Short-termmemory(STM)短期记忆•Long-termmemory(LTM)长期记忆38OurAttentionisLimited;OurMemoryisImperfect我们的注意力有限我们的记忆力不完美Short-termmemory(STM)短期记忆•Representsconsciousmind清晰的记忆–Attention:whatwe’reattendingtoNOW–Notaseparatestore;FociofattentioninLTM•Cap