Human-Computer Interaction

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

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

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

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

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

9. 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

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

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

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

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

14. Similarity • Larger circles seen as belonging together

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

16. Continuity • Tend to see figures as continuous

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

18. Closure • What do you see?

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

20. Area • Can reverse effect with shading

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

22. 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

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

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

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

26. 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

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

28. 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

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

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

38. 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)

39. 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

40. 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

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

47. 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

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

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

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