Académique Documents
Professionnel Documents
Culture Documents
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
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; doesnt require construction or elaboration
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.
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
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
Gestalt psychologists
Believed that our ability to interpret the meaning of scenes and objects is based on innate human laws of 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
White horses Black horses? Escher art often plays with figure/ground
Camouflage
Similarity
Things that share visual characteristics like shape, size, color, texture, orientation seen as belonging together
Similarity
Proximity/Contiguity
Things that are closer are seen as belonging together See vertical vs. horizontal lines See two groups of two
Continuity
Closure
Closure
Area
The smaller of two overlapping figures is perceived as figure while larger is perceived as ground
Area
Symmetry
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 bars
Methods
graphical modeling graphical coding
Graphical modeling
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)
Applications of 3D
Graphical coding
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
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
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
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
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
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
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
to distinguish layers to make items of interest stand out use dark or dim backgrounds
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)
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
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
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
Icons: Pros
Recognition v. recall = low memory load International symbols Compact Support direct manipulation
Icons: Cons
Arbitrary icons not intuitive Designing good icons is an art Limited number can be recalled Context dependent
Meaning of icons
Mapping from computer icon to function it represents is often arbitrary, has to be learned
Iconic representations
A) resemblance
depict the underlying concept through analogous image (rocks falling)
B) exemplar
- a typical example (silverware -> restaurant)
C) symbolic
conveys underlying meaning more abstract than image (cracked wine glass > fragile)
D) arbitrary
bear no relation to underlying concept
Iconic representations
Concrete icons more easily interpreted than abstract ones Thus: object icons easier than action icons
Evaluating icons
Graphic legibility what objects does the icon show, graphic resolution? Interpretation accuracy does the icon suggest the right concept? Interpretation strength does the icon suggest the right concept first? Contrast set distinction does each icon stand out from the family? Contrast set inclusion do the icons in a family group together? Also - is the icon aesthetically pleasing?
Allow for different icon states Avoid jaggy lines Be aware of background patterns Stick to platforms graphical style Design for lowest screen quality Color: subtle, small palette, redundancy,
Icons: example 1
Icons: example2
Desktop icons
Representational Forms
Concrete objects abstract symbols(lines, circles, dots, arrows) combination most meaningful icons use a combined form of representation, provided users are familiar with conventions depicted by abstract symbols
Function
Text better than graphics for retrieving verbal information Icons better when: recognition plays a major part in task
select type of restaurant, method of payment
Underlying concept
Combination
Users less likely to forget icon meaning than to forget name of command redundancy often used
pro: text makes meaning clear; icon easier to remember con: more screen space
Animated icons
Effectively portray complex and abstract processes must focus on key aspects of function bad ones confusing selection a problem mode (animation v selection) a problem
Group A:
Design icons to represent:
Move a block of text Copy a block of text View text in temp storage Insert a block of text
Sketch 3 solutions for each use color if you can Evaluate your solutions Revise Demonstrate
Group B
Design signage for new high-speed train that will travel Europe-Russia-Asia Signs for:
Baggage Sleeping cars Diapering station Dining
Everyone knows what attention is. It is the taking possession of mind, in clear and vivid form, of one out of what seem several simultaneously possible objects or trains of thought It requires withdrawal from some things in order to deal effectively with others.
W. James, 1890
Ability to focus on one activity, while tuning out others can be distracted from one task if attention called to another
Attention
Focused attention -- ability to attend to one event from a mass of competing stimuli ivided attention -- attempt to attend to more than one thing at a time
Structuring information
structure interface so it is easy to navigate through right amount of info per screen grouped and ordered into meaningful parts (See Gestalt laws of perceptual grouping)
Version 1 Version 2
DC metro map
Spatial and temporal cues color alerting -- flashing, reverse video, auditory warnings windowing
Note that:
Info needing immediate attention should be displayed in a prominent place less urgent info to less prominent place, but in a specific location info needed intermittently shouldnt be displayed unless requested
People are interrupted while working, and often carry out several tasks at once Primary v. secondary task, suspend and resume Problem: resume from wrong point Common solution: cognitive aid
lists, post-its, coffee cup on flap handle
Cognitive Aids
Goal: design system to provide information systematically about status of an activity what has been done, what needs to be done
Example
Cognitive Processes
Automatic
fast; demand minimal attention; dont interfere with other activities unavailable to consciousness hard to change once learned
Controlled
limited capacity; require attention and conscious control easier to change
Interactions that have become automatic are difficult to unlearn Consistency across versions, tools can help avoid this problem
Memory constraints
Meaningfulness
familiarity imagery
Items that need to be remembered should be as meaningful as possible Problem: familiar names need to make sense in computer domain Computer science: names often abstract or arbitrary
Unix commands
Paper of interest
Donald A. Norman, The trouble with UNIX: the user interface is horrid. Datamation, 27(12), 139-50, November 1981. -- extended critique of UNIX commands