2/5/2013
Chapter 3
Cognitive aspects
Anna Loparev
Intro HCI
University of Rochester
01/31/2013
www.id-book.com
1
©2011
What is cognition?
• Set of mental processes relevant to knowledge
• Ex:
Remembering
Daydreaming
Thinking
Learning
www.id-book.com
2
Decision Making
©2011
1
2/5/2013
What is cognition?
Seeing
Writing
Reading
Talking
www.id-book.com
3
©2011
According to Norman
• Two modes
• Experiential
– Perceive, act, and react to external events
– Requires expertise and engagement
– Ex:
www.id-book.com
4
©2011
2
2/5/2013
According to Norman
• Reflective
– Involves thinking, comparing, decision making
– Leads to new ideas and creativity
– Ex:
www.id-book.com
5
©2011
For the future…
• Remember these words:
Ball
Critter
www.id-book.com
6
©2011
3
2/5/2013
Mental processes
www.id-book.com
7
©2011
Attention
• Selecting things to concentrate on
• Allows focus on relevant info
• Involves audio and/or visual senses
• Easy or hard?
– Goals
– Info Presentation
www.id-book.com
8
©2011
4
2/5/2013
Attention: Goals
• Weak
– Hard
– Allow info to guide attention
– Ex: Amazon – MP3 player
• Strong
– Easy
– Match goal with available info
– Ex: Amazon – Cowon iAUDIO 9 (16GB)
www.id-book.com
9
©2011
Attention:
Information presentation
• Digikey vs Adafruit
www.id-book.com
10
©2011
5
2/5/2013
Information presentation:
Find price of double room at Holiday Inn in Bradley
www.id-book.com
11
©2011
Information presentation:
Find price for double room Quality Inn in Columbia
www.id-book.com
12
©2011
6
2/5/2013
Multitasking and attention
• Effects on memory and attention
– Depends on tasks
– Depends on attention demands
• Ex:
– Gentle music tunes out background noise
– But loud music is distracting
• Light multitaskers better at allocating
attention
www.id-book.com
13
©2011
Attention: Design implications
• Make important info noticeable
• Make things stand out
–
–
–
–
–
Color
Ordering
Spacing
Underlining
Animation
www.id-book.com
14
©2011
7
2/5/2013
Attention: Design implications
• Avoid cluttering with too much info
www.id-book.com
15
©2011
Attention: Design implications
• Avoid using too much just cuz
www.id-book.com,
http://arngren.net/
16
©2011
8
2/5/2013
Over-use of graphics
www.id-book.com
17
©2011
Perception
• How info acquired and transformed into
experiences
• Complex; involves
– Memory
– Attention
– Language
• Vision > Hearing > Touch
www.id-book.com
18
©2011
9
2/5/2013
Perception: Gestalt laws
• Mind tends to perceive patterns
• Groupings based on certain rules
• Relative strength not really known
www.id-book.com
19
©2011
Perception: Gestalt laws
• Core principle:
• Pragnanz
– Regular, simple, orderly
www.id-book.com, http://www.borisfx.com/tutorials/olympic_promo.php
20
www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
©2011
10
2/5/2013
Perception: Gestalt laws
• Proximity – Close together
• Too much whitespace can be detrimental
www.id-book.com, https://en.wikipedia.org/wiki/Principles_of_grouping,
21
http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
©2011
Perception: Gestalt laws
• Similarity
www.id-book.com,
22
http://www.scholarpedia.org/article/Gestalt_principles
©2011
11
2/5/2013
Perception: Gestalt laws
• Similarity
www.id-book.com,
23
http://www.baycongroup.com/excel2007/04_excel.htm
©2011
Perception: Gestalt laws
• Closure – Incomplete shapes
www.id-book.com, https://en.wikipedia.org/wiki/Principles_of_grouping,
24
www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
©2011
12
2/5/2013
Perception: Gestalt laws
• Symmetry
[ ] { } [ ]
www.id-book.com, https://en.wikipedia.org/wiki/Gestalt_psychology#Gestalt_laws_of_grouping,
25
www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
©2011
Perception: Gestalt laws
• Common fate – All moving same way
www.id-book.com,
26
https://en.wikipedia.org/wiki/Principles_of_grouping
©2011
13
2/5/2013
Perception: Gestalt laws
• Continuity– Continuous direction
www.id-book.com,
27
https://en.wikipedia.org/wiki/Principles_of_grouping
©2011
Perception: Gestalt laws
• Past experience
www.id-book.com,
28
http://www.scholarpedia.org/article/Gestalt_principles
©2011
14
2/5/2013
Perception: Gestalt laws
• Convexity
www.id-book.com,
29
http://www.codesampler.com/d3dbook/chapter_02/chapter_02.htm
©2011
Perception: Gestalt laws
• Common region
www.id-book.com,
30
http://www.scholarpedia.org/article/Gestalt_principles
©2011
15
2/5/2013
Perception: Gestalt laws
• Element connectedness
www.id-book.com,
31
http://www.scholarpedia.org/article/Gestalt_principles
©2011
Perception:
Is color contrast good?
Find Italian
www.id-book.com
32
©2011
16
2/5/2013
Perception:
Borders and white space?
Find French
www.id-book.com
33
©2011
Perception:
Which is easiest to read?
What is the time?
What is the time?
What is the time?
What is the time?
What is the time?
www.id-book.com
34
©2011
17
2/5/2013
Perception: Design implications
• Icons
– Enable users to distinguish meaning
• Bordering and spacing are effective
• Sounds
– Audible and distinguishable
• Speech output
– Space out words
• Text
– Legible
– Distinguishable from the background
• Tactile feedback
– Allow users to recognize and distinguish meanings
www.id-book.com
35
©2011
Memory
• Includes creating and retrieving memories
• Don’t remember everything
• During creation, affected by:
Attention
www.id-book.com
Context (when, where)
36
©2011
18
2/5/2013
Memory
• Recall
– Remember something without clues
– Can be hard to do
• Passwords
• Recognition
– Remember via reencounter
– Easier to do than recall
www.id-book.com,
37
http://drafthouse.com/movies/total_recall_1990/austin
©2011
Recognition versus recall
• Command-based interfaces
– Require recall
• GUIs
– Provide visually-based options
– Users browse through until they recognize one
• Web browsers, MP3 players, etc.
– Support recognition memory
– Provide lists of visited URLs, song titles etc.
www.id-book.com
38
©2011
19
2/5/2013
Memory: Search
• Start with recall
• Move on to recognition
• Can improve via
– Multiple encodings
– Autofill
– Searchbox AND history list
www.id-book.com,
http://www.google.com
39
©2011
Memory: Activity
• Do you remember the words?
• Can you identify them in this list?
–
–
–
–
–
–
–
–
–
Basket
Milk
Ferret
Ball
Soda
Shirt
Coffee
Staple
Critter
www.id-book.com
Ball
Critter
40
©2011
20
2/5/2013
Memory: Activity
•
•
•
•
Grandparents’ birthdays
Cover of last two bought DVDs
Which easiest? Why?
Good at remembering visual cues
– Color
– Location
– Marks
• Harder to remember arbitrary material
– Birthdays
– Phone numbers
www.id-book.com
41
©2011
Memory: The classic ‘72’
• George Miller’s (1956)
• How much info people can remember
• Short-term memory capacity is limited
www.id-book.com,
42
http://www.pawesome.net/2012/01/too-big-bulldog-and-the-too-small-box/
©2011
21
2/5/2013
Memory: What not to do
•
•
•
•
•
Only 7 menu options
Display only 7 tool bar icons
No more than 7 bullets in a list
Only 7 items on pull down menu
Only 7 tabs at the top of a webpage
• Wrong because recognition, not recall!
www.id-book.com
43
©2011
Memory: Design implications
• Don’t require complicated procedures
• Promote recognition rather than recall
• Provide various ways of encoding info
–
–
–
–
Categories
Color
Flagging
Time stamping
www.id-book.com
44
©2011
22
2/5/2013
Learning
• How to learn to use an application
• Use an application to understand a topic
• Hard to learn via manual
– Prefer to learn by doing
www.id-book.com
45
©2011
Learning: Design implications
• Encourage exploration
• Constrain and guide learners
• Dynalinking
www.id-book.com,
http://mcs.open.ac.uk/yr258/rthemes.html
46
©2011
23
2/5/2013
Reading, speaking, and
listening
•
•
•
•
•
•
Sentences or phrases mean same thing
Many prefer listening to reading
Written is permanent, spoken is transient
Reading quicker than speaking or listening
Listening requires less cognitive effort
Written grammatical, spoken not so much
www.id-book.com
47
©2011
RSL: Design implications
• Speech-based interfaces
– Short menus and instructions
– Accentuate intonation of artificial speech
• Allow text to be enlarged
– Zoom
– Actual change in size
www.id-book.com
48
©2011
24
2/5/2013
Problem-solving, planning,
reasoning and decision-making
• Reflective cognition:
What to do
www.id-book.com
Consequences
Options
49
©2011
Problem-solving, planning,
reasoning and decision-making
• Often involves
– Conscious processes
– Discussion with others (or oneself)
– Use of artifacts
• May involve analyzing different scenarios
www.id-book.com
50
©2011
25
2/5/2013
Problem-solving, planning,
reasoning and decision-making
• Extent depends on level of expertise
– Novices
•
•
•
•
Make assumptions
Similar situations
Trial and error
Slow and error prone
– Experts
• Optimal strategies
• Think ahead
www.id-book.com
51
©2011
Problem-solving, planning,
reasoning and decision-making
• Overwhelming choice
– Simple heuristics
– Fast decisions that are ‘just good enough’
– Influences product packaging
www.id-book.com,
52
http://stuffpoint.com/pringles/image/137454/pringles-picture/
©2011
26
2/5/2013
PS,P,R,DM: Design implications
• Additional info/functions for those who care
• Support rapid decision-making and planning
www.id-book.com
53
©2011
Cognitive Frameworks
www.id-book.com
54
©2011
27
2/5/2013
Framework
• Set of interrelated concepts
• Advice in the form of
–
–
–
–
Steps
Challenges
Principles
Etc.
• Help constrain and scope
www.id-book.com
55
©2011
Mental models
• Includes:
– How to use the system
– How the system works
• Use to infer how to carry out tasks
• Best if matches conceptual model
www.id-book.com
56
©2011
28
2/5/2013
Mental models: Examples
Thermostat
Oven
Elevator
• More is more
– The more you turn/push, the greater the effect
www.id-book.com
57
©2011
Mental models: Transparency
•
•
•
•
•
Useful feedback
Facilitate simple, intuitive interaction
Clear, easy to follow instructions
Appropriate help/tutorials
Context-sensitive guidance
• Two types of users
– Those who care about how system works
– Those who don’t
www.id-book.com
58
©2011
29
2/5/2013
Gulfs of execution and
evaluation
• Gaps between the user and the interface
• Bridge to reduce required cognitive effort
www.id-book.com
59
©2011
Norman, 1986; Hutchins et al, 1986
Gulfs of execution and
evaluation
• The gulf of execution
– Input: Distance from user to system
• The gulf of evaluation
– Output: Distance from system to user
www.id-book.com
60
©2011
Norman, 1986; Hutchins et al, 1986
30
2/5/2013
Information processing model
• Done to mental representations
–
–
–
–
Images
Mental models
Rules
Other forms of knowledge
www.id-book.com
61
©2011
Human processor model
• Card et al. (1983)
• Cognition = series of processing stages
• Three types of processes
Perceptual
www.id-book.com
Cognitive
62
Motor
©2011
31
2/5/2013
Human processor model:
Pros and Cons
• The Good
– Predicts which processes involved
– Can calculate how long user will take
• The Bad
– Does not account for interactions in real world
www.id-book.com
63
©2011
External cognition
• Cognitive processes involved when
interact with external representations
• Interaction includes
– Representations
– Tools
• Main goal is to analyze
– Cognitive benefits
– Processes involved64
www.id-book.com
©2011
32
2/5/2013
External cognition:
Reduce memory load
• Recall hard
– Especially non-visual
• Recognition easy
• Individual notes
– Many times with relevant or prominent location
• Note aggregates
www.id-book.com
65
©2011
External cognition:
Reduce memory load
• Remind need to do something
– Buy something for Christmas
• Remind what to do
– Buy llamas
• Remind when to do
– Order llamas by certain date
www.id-book.com
66
©2011
33
2/5/2013
External Cognition:
Computational offloading
• Tool + external representation for computation
• Ex:
www.id-book.com
67
©2011
External Cognition: Annotation
• Modifying existing representations
• Ex:
– Underlining
www.id-book.com
68
©2011
34
2/5/2013
External Cognition:
Cognitive tracing
• Manipulate into different orders or structures
• Ex:
www.id-book.com,
69
http://www.pearldrummersforum.com/showthread.php?87973-A-fun-Scrabble-hand-I-got-tonight
©2011
External Cognition:
Design implication
• Provide external representations that
– Reduce memory load
– Facilitate computational offloading
• Ex:
www.id-book.com,
www.amazon.com
70
©2011
35
2/5/2013
Distributed cognition
• Nature of cognitive phenomena across
Individuals
Artifacts
www.id-book.com
Internal Representations
External Representations
71
©2011
Distributed cognition
• Propagation across representational state
• Info transformed through different media
• Ex:
www.id-book.com
72
©2011
36
2/5/2013
Distributed cognition
• Different from other frameworks
– More extensive than external cognition
– Focus on system of people and artifacts
www.id-book.com
73
©2011
Distributed cognition analysis:
What’s involved
• Distributed problem-solving
• Role of verbal and non-verbal behavior
• Coordinating mechanisms that are used
– Rules
– Procedures
• Communication
• How knowledge shared and accessed
www.id-book.com
74
©2011
37