Human perception, attention, and memory

1
Human perception, attention, and memory

• CSE 491
• Michigan State University
• September 25, 2007
• Kraemer

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
  doesnt require construction or elaboration

4
(No Transcript)
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 -gt easy to interact with
• ambiguous -gt 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

39
Color stereoscopy
Red text appears to lie in one depth plane And
blue text appears to lie in a different plane Red
text appears to lie in one depth plane And blue
text appears to lie in a different plane
40
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 bw line drawing v. full
  color photos

41
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

42
Good visual representations

• Classic example Minards map of Napoleons march
  on Moscow

43
(No Transcript)
44
(No Transcript)
45
(No Transcript)
46
(No Transcript)
47
(No Transcript)
48
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

49
Icons Pros

• Recognition v. recall low memory load
• International symbols
• Compact
• Support direct manipulation

50
Icons Cons

• Arbitrary icons not intuitive
• Designing good icons is an art
• Limited number can be recalled
• Context dependent

51
Meaning of icons

• Mapping from computer icon to function it
  represents is often arbitrary, has to be learned

52
Design principles icons

• Appropriate for context of use
• Appropriate for task

53
Iconic representations

• A) resemblance
• depict the underlying concept through analogous
  image (rocks falling)
• B) exemplar
• - a typical example (silverware -gt restaurant)
• C) symbolic
• conveys underlying meaning more abstract than
  image (cracked wine glass -gt fragile)
• D) arbitrary
• bear no relation to underlying concept

54
Iconic representations

• Concrete icons more easily interpreted than
  abstract ones
• Thus object icons easier than action icons

55
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?

56
Icons addl considerations

• Icons may be used to represent multiple states of
  an object
• Mailbox empty/full
• Agent waiting/busy
• Need to test icons in each state, against whole
  family

57
Icon screen design issues

• 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,

58
Icons example 1

• packing crate icons

59
Icons example2

• Desktop icons

60
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

61
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
• tasks require manipulative operations
• drawing, painting

62
Underlying concept

• Concrete objects easiest to represent
• warnings, operations more difficult

63
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

64
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

65
Your job now

• Break into groups of 3-4
• 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

66
Group B

• Design signage for new high-speed train that will
  travel Europe-Russia-Asia
• Signs for
• Baggage
• Sleeping cars
• Diapering station
• Dining
• Same procedure as for group A.

67
Attention and Memory Constraints

• 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

68
cocktail party phenomenon

• Ability to focus on one activity, while tuning
  out others
• can be distracted from one task if attention
  called to another

69
Attention

• Focused attention -- ability to attend to one
  event from a mass of competing stimuli
• Divided attention -- attempt to attend to more
  than one thing at a time

70
Focusing attention at the interface

• 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)

71
Exercise structuring information

• Version 1
• Version 2

72
Examples of structured info

• DC metro map

73
Techniques for guiding attention

• Spatial and temporal cues
• color
• alerting -- flashing, reverse video, auditory
  warnings
• windowing

74
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

75
Multitasking and interruptions

• 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

76
Cognitive Aids

• Goal design system to provide information
  systematically about status of an activity - what
  has been done, what needs to be done

77
Exercise - Stroop Effect

• Example

78
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

79
Effect on UI design decisions

• Interactions that have become automatic are
  difficult to unlearn
• Consistency across versions, tools can help avoid
  this problem

80
Memory constraints

• Some things easy to learn others hard
• Levels of processing theory
• extent to which new material can be remembered
  depends on its meaningfulness
• analysis of stimulus ranges from shallow - deep
• meaningfulness determines depth of analysis which
  affects how well remembered
• Meaningfulness
• familiarity
• imagery

81
Effect on UI design decisions

• 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

82
Unix commands

• Cat
• grep
• lint
• mv
• pr
• lpr

83
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