Human-Computer InteractionVisual perceptionTheoriesSlide 4Slide 5Constructivist approachEffect of context on perceptionGestalt psychologistsGestalt laws of perceptual organizationFigure and GroundSlide 11CamouflageSimilaritySlide 14Proximity/ContiguityContinuityClosureSlide 18AreaSlide 20SymmetryEcological approachGraphical Representation at the InterfaceGraphical modelingDepth cues, continuedSolid modeling v. wireframeApplications of 3DGraphical codingCoding MethodsSlide 30Slide 31Slide 32Slide 33Graphical coding for quantitative dataColor codingResultsGuidelines for using colorColor and textColor v. monochromeColorGood visual representations:Slide 42Slide 43Slide 44Slide 45Slide 46IconsIcons: ProsIcons: ConsMeaning of iconsDesign principles: iconsIconic representationsSlide 53Evaluating iconsIcons: add’l considerationsIcon screen design issuesIcons: example 1Icons: example2Representational FormsFunctionUnderlying conceptCombinationAnimated iconsYour job now …Group BAttention and Memory Constraints“cocktail party phenomenon”AttentionFocusing attention at the interfaceExercise: structuring informationExamples of structured infoTechniques for guiding attentionNote that:Multitasking and interruptionsCognitive AidsExercise - Stroop EffectCognitive ProcessesEffect on UI design decisionsMemory constraintsSlide 80Unix commandsPaper of interestHuman-Computer InteractionHuman perception, attention, memoryVisual perceptionHumans capable of obtaining information from displays varying considerably in size and other featuresbut not uniformly across the spectrum nor at all speedsTheoriesConstructive theorists: the process of seeing is active; view of the world constructed from info in environment and previously stored knowledgeEcological theorists: perception involves the process of picking up info from the environment; doesn’t require construction or elaborationVisual perceptionHow long did it take to recognize the Dalmation?Only after you knew what you were looking for?After recognizing the Dalmation, what else could you see?Interpretation of the scene is possible because we know what Dalmations, trees, etc. look like -- active construction of the image.Constructivist approachPerception involves intervention of representations and memoriesnot like the image a camera would produce -- instead, a model that is transformed, enhanced, distorted, and portions discardedability to perceive objects on a screen is a result of prior knowledge and expectations + image on retinaEffect of context on perceptionWhen presented with ambiguous stimuli, our knowledge of the world helps us to make sense of it -- same with ambiguous info on computer screen Constructive process also involves decomposing images into recognizable entities: figure and backgroundGestalt psychologistsBelieved that our ability to interpret the meaning of scenes and objects is based on innate human laws of organizationGestalt laws of perceptual organizationProximity - dots appear as groups rather than a random cluster of elementsSimilarity - tendency for elements of same shape or color to be seen as belonging togetherClosure - missing parts of the figure are filled in to complete it, so that it appears as a whole circleContinuity - the stimulus appears to be made of two lines of dots, traversing each other, rather than a random set of dotsSymmetry - regions bounded by symmetrical borders tend to perceived as coherent figuresFigure and GroundFigure – similar elementsGround – contrasting, dissimilar elementsFigure and GroundWhite horsesBlack horses?Escher art often plays with figure/groundCamouflageFigure so similar to ground that it tends to disappearSimilarityThings that share visual characteristics like shape, size, color, texture, orientation seen as belonging togetherSimilarityLarger circles seen as belonging togetherProximity/ContiguityThings that are closer are seen as belonging togetherSee vertical vs. horizontal linesSee two groups of twoContinuityTend to see figures as continuousClosureTend to see complete figures, even when part of info is missingClosureWhat do you see?AreaThe smaller of two overlapping figures is perceived as figure while larger is perceived as groundAreaCan reverse effect with shadingSymmetryWhole figure is perceived rather than individual partsWhat do you see?Ecological approachPerception is a direct process; information is detected not constructedhumans will actively engage in activities that provide the necessary info to achieve goalsaffordances: our understanding of the behavior of a system is what is afforded or permitted by the system–obvious -> easy to interact with–ambiguous -> more mistakes–examples: door handles, scroll barsGraphical Representation at the InterfaceUse realistic graphics in interface–effective–too expensive–often unnecessaryMethods–graphical modeling–graphical codingGraphical modelingRepresent 3D objects on 2D surface, requires depth cues–size - larger of two otherwise identical objects appears closer than smaller one–interposition - blocked object perceived as behind blocking object–contrast, clarity, brightness - sharper and more distinct indicates near, duller appear far–shadow - cues re: relative position–texture - as apparent distance increases texture of detailed surface becomes less grainyDepth cues, continuedMotion parallax- –move head side to side, objects displaced at different rates–on screen: move camera so image on screen moves, following rules of motion parallaxstereoscopic -–two images, one per eye, shown from slightly different angles (used in VR head-mounted displays)Solid modeling v. wireframeSolid modeling: color and shading used to achieve high-fidelity –more info about from, shape, surface–compute-intensiveWireframe - schematic line drawings–good for showing internal structure–cheaper to computeApplications of 3DDesign of buildings, cars, aircraftvirtual realitymolecular modelingGraphical codingSymbols, colors, other attributes represent state of systemExamples:–reverse video to represent current status of files–abstract shapes to represent different objects–color represents options–alphanumerics represent data object–size of icon maps to file size–wastebin image for deletion capabilityCoding MethodsAlphanumerics–unlimited number of