Transcript Conceptual design: mental models and interface metaphors

Understanding users
Lecture slides are adapted from www.id-book.com
Text: Sharp, H., Rogers, Y. &. Preece, J (2007) Interaction Design: Beyond
Human-Computer Interaction. 2nd Edition New York, NY: John Wiley & Sons,
Inc.
cois12036
Slide 1
Overview
• Introduction
• How do user’s think
– Cognition
– Processes of cognition
– Design ideas
• Mental models
• External cognition
• Design implications
cois12036
Slide 2
Introduction
• Cognition is the mind aspect of activity
• Two general modes:
– experimential (perceive, act, react)
– Reflective (thinking, comparing,decision
making – new ideas, creativity)
• Critical to design of technology
– Understand human capabilities and
approaches to activities
– Design may extend capabilities, compensate
for weaknesses
cois12036
Slide 3
What goes on in the mind?
cois12036
Slide 4
Core cognitive processes
• Attention
• Perception and recognition
• Memory
• Learning
• Reading, speaking and listening
• Problem-solving, planning,
reasoning and decision-making
cois12036
Slide 5
Attention
• Selecting and focusing on things
• Competing stimuli limits ability to focus
(see p.96/97 for examples)
• Interface suggestions
–
–
–
–
cois12036
use of perceptual boundaries (windows),
colour,
reverse video,
sound and flashing lights
Slide 6
An example of over-use of
graphics
cois12036
Slide 7
Attention
• User Goals
– when we know what we want, we
find a way to achieve it
– When we are not sure, we browse
• Information presentation
– Display is critical for attention
– Structure or categories
cois12036
Slide 8
Design implications: attention
read page 98
• Make information salient when it needs
attending to
• Use techniques that make things stand out
• Avoid cluttering the interface - follow the
google.com example of crisp, simple design
• Search engines and forms are much easier to
locate where to place information
cois12036
Slide 9
Perception and recognition
• How information is acquired from the world
and transformed into experiences
• Obvious implication is to design
representations that are readily perceivable,
e.g.
– Text should be legible
– Icons should be easy to distinguish and read
cois12036
Slide 10
Activity
• Go to page 100
• Webpage 1: shaded text
– Find “ Italian”
• Webpage 2: text framed by box
– Find “French”
cois12036
Slide 11
Activity
• Weller (2004) found people took less
time to locate items for information that
was grouped
– using a border compared with using colour
contrast
– Galitz (1997) – borders are more effective
• Some argue that too much white space
on web pages is detrimental to search
– Makes it hard to find information
• Do you agree?
cois12036
Slide 12
Which is easiest to read and
why?
What is the time?
What is the time?
What is the time?
What is the time?
What is the time?
cois12036
Slide 13
Design implications - Perception
and recognition
• Representation of information need to be
easily understood and recognisable
Considerations
– Icons and other graphical representations
– Bordering and spacing
– Sounds
– Speech output
– Text
– Tactile feedback
cois12036
Slide 14
Memory
How information is interpreted, affects how it
is represented in memory and how it can be
retrieved
• Involves encoding and retrieving later
• We filter information and only process parts
of it
• Context is important (i.e., where, when)
• We recognize things much better than being
able to recall things
cois12036
Slide 15
Filter process
• Encoding is first stage of memory
– determines which information is attended to in the
environment and how it is interpreted
• Recall depends on
– attention levels
– processing activity
– e.g., when learning about HCI, it is much better to
reflect upon it, carry out exercises, have discussions
with others about it, and write notes than just
passively read a book, listen to a lecture or watch a
video about it
cois12036
Slide 16
Context is important
• Context affects the extent to which
information can be subsequently
retrieved
• Sometimes it can be difficult for people
to recall information that was encoded
in a different context
– Eg meeting people in different locations and different
context
– See activity 3.2, page 102
cois12036
Slide 17
Recognition versus recall
• People better at recognition than recall
• Compare interface design
Recall
– Command-based interfaces
Recognition
– GUIs
– Web browsers
– MP3 players
• Mnemonics – memory aid for recall
• How do you encode and then recall file
names?
cois12036
Slide 18
Interface and memory
• Recall-directed
– Memorised information
• the file/url name/email/music
title/phone number
• Needs to be exact
• Recognition-based scanning
– Used when no exact memory
• Browsing and reading through lists
• Scanning through history of use
cois12036
Slide 19
The problem with the classic
‘72’
• George Miller’s (1956) theory
– 7  2 chunks of information can be held in
short term memory at any one time
• Therefore people’s immediate memory
capacity is very limited
• Many designers have been led to
believe that this is useful finding for
interaction design
cois12036
Slide 20
What some designers get up to…
–
–
–
–
–
Present only 7 options on a menu
Display only 7 icons on a tool bar
Have no more than 7 bullets in a list
Place only 7 items on a pull down menu
Place only 7 tabs on the top of a website page
– But this is NOT GOOD DESIGN!!
WHY?
cois12036
Slide 21
Why is ‘7  2’ a problem for
interface design?
• Inappropriate application of the theory
• They don’t have to recall them from memory
having only briefly heard or seen them
• People can scan lists of bullets, tabs, menu
items till they see the one they want
• Sometimes a small number of items is good
design
• But it depends on task and available screen
estate
cois12036
Slide 22
Personal information
management (PIM)
• a growing problem for most users
– vast numbers of documents, images, music files,
video clips, emails, attachments, bookmarks, etc.,
• decide where and how to save them all
• remember names and location
– Naming most common means of encoding them
– Trying to remember a name of a file created some
time back can be very difficult, especially when have
1000s and 1000s
– How might such a process be facilitated taking into
account people’s memory abilities?
cois12036
Slide 23
Personal information
management (PIM)
• Memory involves 2 processes
– recall-directed and recognition-based
scanning
• File management systems should be
designed to optimize both kinds of
memory processes
– e.g., Search box and history list
• Help users encode files in richer ways
– Provide them with ways of saving files using
colour, flagging, image, flexible text, time
stamping, etc
cois12036
Slide 24
readings
• Activity 3.4, p 108
– Bank security and memory load of
users
• Box 3.3, p 109-110
– Memory support for general cooking
cois12036
Slide 25
Design implications - Memory
• Don’t overload users’ memories with
complicated procedures for carrying out
tasks
• Design for recognition rather than recall
– menus., icons, and consistent placement
• Provide users with a variety of ways of
encoding digital information to help
them remember where they have
stored them
– categories, colour, flagging, time stamping
cois12036
Slide 26
Learning
For computer-based applications, two
forms of learning:
• How to use the application
– ‘Learn through doing’
– training wheels
• Using application to understand the
topic
– Web-based, MM designs, virtual reality
– Offer different ways to interact with the
topic over traditional methods
cois12036
Slide 27
dynalinking
• Abstract representations linked to
concrete images
– graphs or schemas linked to
simulation
– Changes in one affects the other
– Eg foodweb in Pondworld (p.111-112)
• Very useful in education
cois12036
Slide 28
reading
• Dilemna p. 112
– Upgrading software
– Where to put the new functions?
cois12036
Slide 29
Design Implications:Learning
P. 113
• encourage exploration
– undo option
• limit number of steps to guide user
to select appropriate actions
• Dynamically link concrete images
with abstractions
cois12036
Slide 30
Reading, speaking and
listening
• Similar and different properties
– Similar property
• Language construction
– Different property
• Users approach is different
• Listening requires less cognitive effort than
speaking or reading
• Applications
– See list on page 114
cois12036
Slide 31
Design implications- Reading,
speaking and listening
• P.114
– Keep length of speech based menus to
mimimum
• 3-4 options in menus
• Few instructions
– Digitised speech is hard to understand
– Enable text to be enlarged with effecting the
screen format
cois12036
Slide 32
Problem-solving, planning,
reasoning and decision-making
• Reflective cognition
– Think about what to do
– What options are available
– What are the consequences for a given
option
• Processes might include
– Being conscious of the thinking process
– Discussion
– Use of different artefacts – pens, maps,
books etc
– Comparing different sources of information
cois12036
Slide 33
Design – reflective cognition
• Design interaction to match user
experience with application
– Novices (limited reflection)
• trial and error (explore and experiment)
• Not able to think ahead
– Experts (uses reflection)
• Select optimum strategies
• Think ahead
cois12036
Slide 34
Physical to digital world
• Not all processes can be emulated
– Depends on level of complexity of
task
– Depends on designers’ understanding
of this complexity
• Powerful strategy provided that
translation extends benefits of
physical world
cois12036
Slide 35
Conceptual frameworks
• Mental models
• Information processing
• External cognition
cois12036
Slide 36
Mental models
• Craik (1943) described mental models
as internal constructions of some aspect
of the external world enabling
predictions to be made
• Involves unconscious and conscious
processes, where images and analogies
are activated
• Deep versus shallow models (e.g. how
to drive a car and how it works)
cois12036
Slide 37
Mental models
• Users develop an understanding of a system
through learning and using it
• Knowledge is often described as a mental model
– How to use the system (what to do next)
– What to do with unfamiliar systems or unexpected
situations (how the system works)
• People make inferences using mental models of
how to carry out tasks
cois12036
Slide 38
Everyday reasoning and mental
models
(a) You arrive home on a cold winter’s night to a cold
house. How do you get the house to warm up as
quickly as possible? Set the thermostat to be at
its highest or to the desired temperature?
(b) You arrive home starving hungry. You look in the
fridge and find all that is left is an uncooked pizza.
You have an electric oven. Do you warm it up to
375 degrees first and then put it in (as specified
by the instructions) or turn the oven up higher to
try to warm it up quicker?
cois12036
Slide 39
Heating up a room or oven that
is thermostat-controlled
• Many people have erroneous mental models
(Kempton, 1996)
• Why?
– General valve theory, where ‘more is more’ principle
is generalised to different settings (e.g. gas pedal,
gas cooker, tap, radio volume)
– Thermostats based on model of on-off switch model
cois12036
Slide 40
Heating up a room or oven that
is thermostat-controlled
• Same is often true for understanding
how interactive devices and computers
work:
– Poor, often incomplete, easily confusable,
based on inappropriate analogies and
superstition (Norman, 1983)
– e.g. elevators and pedestrian crossings - lot
of people hit the button at least twice
– Why? Think it will make the lights change
faster or ensure the elevator arrives!
cois12036
Slide 41
Design - Mental models
Interaction needs to be transparent with the
right kind and level of information
Read Dilemma, page 119
Design aims for transparency:
• useful feedback
• easy to understand and intuitive to use
• clear & easy to follow instructions
• appropriate online help and tutorials
• context sensitive guidance of how to
proceed when stuck
cois12036
Slide 42
Norman’s (1986) Theory of
action
• Model of how users interact with
interactive products:
–
–
–
–
–
–
–
cois12036
Establish a goal
Form an intention
Specify an action sequence
Execute an action
Perceive the system state
Interpret the state
Evaluate the system state with respect to
the goals and intentions
Slide 43
An example: reading
breaking news on the web
(i)
Set goal to find out about breaking news
decide on news website
(ii) Form an intention
check out BBC website
(iii) Specify what to do
move cursor to link on browser
(iv) Execute action sequence
click on mouse button
(v) Check what happens at the interface
see a new page pop up on the screen
(vi) Interpret it
read that it is the BBC website
(vii) Evaluate it with respect to the goal
read breaking news
cois12036
Slide 44
How realistic?
• Human activity not so ordered
– More usual for stages to be missed,
repeated or out of order
– Do not always have a clear goal in mind but
react to the world
• Theory is only approximation of what
happens and is greatly simplified
• Help designers think about how to help
users monitor their actions
cois12036
Slide 45
The gulfs
• Gulfs
– gaps between the user and the interface
• The gulf of execution (user)
– the distance from the user to the physical system
– User needs goals, plans and action sequence
based on how the interface works
–
• The gulf of evaluation (designer)
– the distance from the physical system to the user
– Design for physiological characteristics of user
cois12036
Slide 46
Information processing
• Prediction of human performance
• See page 123 for diagram
• Metaphor from cognitive psychology
• Built on comparing and matching
cois12036
Slide 47
Human Processor Model
(Card et al, 1983)
• Models the information processes of a
user interacting with a computer
• a sequential approach
– perceptual processor (what is seen)
– cognitive processor (thinking)
– motor processor (action)
• Enables calculations to be made of how
long a user will take to carry out a task
• Issues with model – does not account
for external influences
cois12036
Slide 48
External cognition
• We interact or create information through
– external representations (e.g. books, newspapers,
maps, notes, diagrams)
– tools of interaction – pens, calculators, etc
• Allows us to extend our cognitive processes
• Concepts to explore
– externalising to reduce memory load
– Computional offloading
– Annotating and cognitive tracing
cois12036
Slide 49
Externalizing to reduce
memory load
• External representations
– Diaries, reminders, calendars, notes, shopping
lists, to-do lists
– Post-its, piles, marked emails
• Purpose
– Remind us that we need to do something (e.g.
to buy something for mother’s day)
– Remind us of what to do (e.g. buy a card)
– Remind us when to do something (e.g. send a
card by a certain date)
cois12036
Slide 50
Computational offloading
• use of tools or devices to carry out a
computation (e.g. pen and paper)
• Try doing the two sums below (a) in
your head, (b) on a piece of paper and
c) with a calculator.
1. 234 x 456
2. CCXXXIIII
x CCCCXXXXXVI
• Observations??
cois12036
Slide 51
Annotation and cognitive
tracing
• We modify external representations to reflect
changes that may have happened
1. by Annotation (involves modifying existing
representations through making marks)
• e.g. crossing off items from a to-do list,
ticking, underlining
2. Cognitive tracing involves externally
manipulating items into different orders or
structures
• e.g. playing scrabble, playing cards
cois12036
Slide 52
Design implication
• Provide external representations at
an interface to reduce memory
load and facilitate computational
offloading
– Financial forecasting
– Identifying programming bugs
– Wizards, dialog boxes, guide users
through their interactions
cois12036
Slide 53
Design implication
example
Information
visualizations
have been
designed to
allow people
to make
sense and
rapid
decisions
about masses
of data
cois12036
Slide 54
Distributed cognition
• Concerned with the nature of cognitive
phenomena across individuals,
artefacts, and internal and external
representations (Hutchins, 1995)
• Describes these in terms of propagation
across representational state
• Information is transformed through
different media (computers, displays,
paper, heads)
• See Figure 3.15, page 131
cois12036
Slide 55
How it differs from
information processing
cois12036
Slide 56
Distributed cognition: What’s
involved
• distributed problem-solving
• verbal and non-verbal behaviour
• various coordinating mechanisms
(e.g., rules, procedures)
• communication and collaboration
• knowledge is shared and accessed
cois12036
Slide 57
Key points
• Cognition involves several processes including
attention, memory, perception and learning
• The way an interface is designed can greatly affect
how well users can perceive, attend, learn and
remember how to do their tasks
• Theoretical frameworks such as mental models and
external cognition provide ways of understanding
how and why people interact with products, which
can lead to thinking about how to design better
products
cois12036
Slide 58