1 / 82

Human-Computer Interaction

Human-Computer Interaction. Human perception, attention, memory. Visual perception. Humans capable of obtaining information from displays varying considerably in size and other features but not uniformly across the spectrum nor at all speeds. Theories.

donald
Download Presentation

Human-Computer Interaction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Human-Computer Interaction Human perception, attention, memory

  2. Visual perception • Humans capable of obtaining information from displays varying considerably in size and other features • but not uniformly across the spectrum nor at all speeds

  3. Theories • 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 elaboration

  4. Visual 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.

  5. 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 retina

  6. Effect 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 background

  7. Gestalt psychologists • Believed that our ability to interpret the meaning of scenes and objects is based on innate human laws of organization

  8. Gestalt 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 figures

  9. Figure and Ground • Figure – similar elements • Ground – contrasting, dissimilar elements

  10. Figure and Ground • White horses • Black horses? • Escher art often plays with figure/ground

  11. Camouflage • Figure so similar to ground that it tends to disappear

  12. Similarity • Things that share visual characteristics like shape, size, color, texture, orientation seen as belonging together

  13. Similarity • Larger circles seen as belonging together

  14. Proximity/Contiguity • Things that are closer are seen as belonging together • See vertical vs. horizontal lines • See two groups of two

  15. Continuity • Tend to see figures as continuous

  16. Closure • Tend to see complete figures, even when part of info is missing

  17. Closure • What do you see?

  18. Area • The smaller of two overlapping figures is perceived as figure while larger is perceived as ground

  19. Area • Can reverse effect with shading

  20. Symmetry • Whole figure is perceived rather than individual parts • What do you see?

  21. 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 bars

  22. Graphical Representation at the Interface • Use realistic graphics in interface • effective • too expensive • often unnecessary • Methods • graphical modeling • graphical coding

  23. Graphical 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 grainy

  24. Depth 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)

  25. 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 compute

  26. Applications of 3D • Design of buildings, cars, aircraft • virtual reality • molecular modeling

  27. Graphical 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 capability

  28. Coding Methods • Alphanumerics • unlimited number of codes • versatile; self-evident meaning; location time often higher than for graphic coding • Shapes • 10-20 codes • effective if code matches object or operation represented

  29. Coding Methods • Color • 4-11 • attractive, efficient; excessive use is confusing • limited value for the color-blind • Line angle • 8-11 • good in special cases (e.g., wind direction) • Line length • 3-4 • good, but can clutter display if many codes shown

  30. Coding Methods • Line width • 2-3 • good • Line style • 5-9 • good • Object size • 3-5 • fair; can take up considerable space • location time longer than for shape and color

  31. Coding Methods • Brightness • 2-4 • fatigue can result w/ poor screen contrast • Blink • 2-4 • good for getting attention; should be suppressible afterward; annoying if overused; limit to small fields

  32. Coding Methods • Reverse video • no data • effective for making data stand out; can emphasize flicker • Underlining • no data • useful, but can reduce text legibility • Combinations of codes • unlimited • can reinforce coding; complex combos confusing

  33. Graphical coding for quantitative data • Advantage is that graphs make it easier to perceive • relationships between multidimensional data • trends in data that is constantly changing • defects in patterns of real-time data

  34. Color coding • Good for structuring info and creating pleasing look • excessive use can lead to “color pollution” • experiments performed to determine effectiveness of using color coding in cognitive tasks, emphasis on identifying target stimuli from crowded displays, categorizing, memorizing

  35. Results • Segmentation • color good for dividing display into regions; areas that “belong together” should have the same color • Amount of color • too many colors increases search times; use conservatively • Task demands • color most powerful for search tasks, less useful for categorization and memorization tasks • Experience of user • in search tasks color benefits inexperienced more

  36. Guidelines for using color • to distinguish layers • to make items of interest stand out • use dark or dim backgrounds

  37. Color and text • White text w/out intervening space is difficult to read; color can help if used to separate boundaries of words • red and blue words appear to lie in different planes -- can be used to attract attention, or may cause problems (color stereoscopy)

  38. Color v. monochrome • Alphanumeric coding superior to color coding for identification tasks (Christ, ‘75) • No difference in response time or accuracy for ID of objects based on b&w line drawing v. full color photos

  39. Color • 8% of male population is color-blind • redundant coding suggested -- both color and some other feature • e.g., traffic lights -- both color and order

  40. Good visual representations: • Classic example: Minard’s map of Napoleon’s march on Moscow

  41. Icons • Small pictorial images used to represent system objects, applications, utilities, commands • Assumption: icons can reduce complexity of the system, making it easier to learn and use • Problem: distinguishing among a large number of icons • Solution -- icon to show type; color shape, or size to distinguish among elements of same type

  42. Icons: Pros • Recognition v. recall = low memory load • International symbols • Compact • Support direct manipulation

  43. Icons: Cons • Arbitrary icons not intuitive • Designing good icons is an art • Limited number can be recalled • Context dependent

  44. Meaning of icons • Mapping from computer icon to function it represents is often arbitrary, has to be learned

More Related