Mental Models

Nurulhuda Noordin (Ph.D)

March-August 2023
 Mental Model
❖ Mental Model
➢ based on belief, not facts
➢ is often partial, unstable, internally inconsistent, unscientific
➢ 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)
❖ Errors can occur if the mental model of a system differs from the
actual operations

2
 Mental Model

Individual users each have their own mental model

3
 Mental Model
❖Users develop an understanding of a system through
learning & 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
 Mental Model
❖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)

How deep is your mental

modal of a VCR remote
control?
Everyday Reasoning & Mental Models
❖You arrive home on a hot day to a hot house. How do you get the house
to cold down as quickly as possible? Set the air-cond to be at its highest
or to the desired temperature?
❖Many people have erroneous mental models (Kempton, 1996)
❖Why?
➢General valve theory, where ‘more is more’ principle is generalized to
different settings (e.g. gas pedal, gas cooker, tap, radio volume)
➢But: Aircond is based on the model of an on-off switch
❖Core abstractions about how things work
Everyday Reasoning & Mental Models
❖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. frozen cursor/screen - most people will bash all manner of keys
What’s wrong with this?
Spot the difference?
 Norman’s Principles of Design
❖Visibility
➢Make the relevant parts visible. By looking the user should be
able to tell the state of the device and the alternatives for action
(affordances)
❖Provide a good conceptual model
➢Affordance
➢Mapping
➢Feedback
➢Constraints
❖Minimize the gulf of interpretation and gulf of execution.
 Visibility
• When functionality is hidden, problems in use occur
• occurs when the number of functions is greater than the number of
controls
• When capabilities are visible, it does not require memory of how to use
• remind the person how to use something

make relevant parts visible

make what has to be done obvious
Example: Bathroom Faucets
❖ How to use it?
❖ Hot/cold? Flow?

Independent volume controls Push forward for volume, twist for

determine temperature. To get a temperature. Still need to
temperature, have to experiment experiment with temperature.
with hot and cold, trial and error
 Example: Car Radio
❖ By looking, the user can tell the state of the device and
the alternatives for action.
❖ Controls on simple car radio
➢ #controls = #functions
➢ controls are labeled and grouped together

Make Things Visible

 Example: Watches
❖ Which is Faster for Setting Time?

Analog watch – only one function, one control, it’s obvious what to do.
Digital watch has multiple controls with no labels. Probably can’t set it without the
manuals.
 Conceptual Model
❖What does Norman mean by that?
➢Our conception of how something works
➢Mental “picture” of a device
❖people build their own systems of how things work
➢e.g. car (conceptual model of how cars work)
❖a conceptual model allows the user to simulate the operation of the
device.
❖a good conceptual model allows us to predict the effects of our actions
❖without a good model we operate blindly
➢simply follow rules without understanding a reason
➢no understanding of cause or effect
 Conceptual Model
❖we know the bicycle won’t work
➢clues from affordances, constraints, and mappings
❖a good conceptual model allows us to predict the effects
of our actions
❖Designer can help user foster an appropriate conceptual
model
➢Appearance, instructions, behavior...
 Conceptual Model and User
Understanding
❖Design Model
➢How designer thinks
Design Model User’s Model system should work
DESIGNER USER
❖System Image
➢How system works
❖User Model
➢How user thinks system
works
SYSTEM System Image:
the only way to ❖Ideally all should be the same
communicate
System Image the designer’s
model!
❖Poor system image = poor
understanding
 Affordance
❖Affordances are an object’s properties that show the possible actions
users can take with it.

❖Visual Affordances
➢ Perceived and actual properties of an object that determine how
it could be used. The characteristics of the button which make it
look “turnable” or “pushable” together form its affordances.

➢ e.g:
▪ Door handle for pushing or pulling
▪ Scroll arrow for clicking or dragging
 Visual Affordances

❖Poor affordances
➢Doors
➢Push or Pull?
➢Where to push?
❖Good affordances
➢Buttons that appear
clickable
 Visual Affordances
❖The perceived properties of the object that suggest how one could use it

chairs are for sitting

knobs are for turning
table for placing things on

slots are for inserting buttons are

switch computer for…
handles are for turning for
for
pressing
toggling
 Visual Affordances
❖No picture, label, or instruction is required
❖Affordances provide “strong clues” to the
❖ operation of things
❖Affordances should make it obvious what to do
❖Complex things may need explanation, but simple things
should not
➢If a simple thing requires instructions, it is likely a failed
design
 Widget Affordances

❖Well-designed widgets have clear affordances

e.g. resize handles:

e.g. crop handles:

 Mapping
❖What does this mean?
“relationship between two things” (Norman)
❖Natural mappings lead to immediate understanding
❖It is possible to determine the relationships between:
➢Actions and results
➢Controls and their effects
➢The system state and what is visible
 Mapping
❖User intentions to available actions
➢Is there a natural mapping between what users want to do and
what appears possible?
➢Do users stare at technology for sometime before they take
action?
➢Or do they immediately know what to do?
 Mapping
❖Natural mapping: no explanations needed

Available actions

User intentions Perceived system state

Actual system state

 Mapping

❖e.g. Mercedes power seat adjustment

Mapping Example: Euros
❖Color, size, shape mapping
❖Size : value
 Poor Mapping: Stove

Which controls which?

Dial and burner

arrangement not at all
clear – linear controls for
a grid device
Good Mapping: Stove
 Yikes!

What is the
mapping here?
 Feedback
❖Sending information back to the user about what
has been done
❖Includes sound, highlighting, animation, change in
physical state and combinations of these
 Feedback Examples
1. Home security system – when armed,
system beeps, message is displayed
“system armed”, and light glows red.
When disarmed, light glows green,
message reads “system ready”.

2. when screen button clicked on, provides

sound or red highlight feedback:
“ccclichhk”
More Feedback Examples
How do you tell which
burner is on?
On a gas stove, you see
flames!

iPod video – shows which

song is playing and how
much of the song has
been played.
 Constraints

❖restricting the possible actions that can be performed (limit

the ways in which something can be used)
❖helps prevent a user from selecting incorrect options
 Mouse or keyboard?

❖Where do you plug the

mouse?
❖Where do you plug the
keyboard?
❖top or bottom connector?
❖Do the color-coded icons
help?
From: www.baddesigns.com
How to design them more logically?

❖A provides a direct adjacent

mapping between the icon
and the connector
❖B provides color coding to
associate the connectors with
the labels

From: www.baddesigns.com
 Example
Conceptual model - Suggested by
how parts fit together and move
Scissors
Affordances - Insert something
into holes

Mapping - How to insert fingers

into holes suggested by visible
Appearance

Constraints - Bigger hole for

several fingers, small for thumb
 Individual Differences
❖ How do individuals differ? ❖Designers are not
representative of the user
➢ Personality
population for whom they are
➢ Physical capability designing
➢ Anxiety ❖Don’t expect users to think or
❖ Long term act like you
➢ physical and intellectual ❖People vary in both physical
abilities attributes and mental/cognitive
❖ Short term attributes
➢ effect of stress or fatigue
❖ Changing
➢ age
 Example: “Big Talker”
Leonid Stadnyk uses
a cell phone at his
home in Ukraine. He
finds the keys
difficult to work.

Principles of Interactive Design 39

 Conclusion
❖Things don’t have to be so hard to use.
❖Even the best-trained and best-motivated designers can go wrong
when they listen to their instincts instead of testing their ideas on
users.
 Reference
❖Lecture Notes – Madam Romiza