HUMAN - COMPUTER INTERACTION
CT273
Chapter 2: Conceptual Model
Bui Dang Ha Phuong
Content
Conceptual Model
Metaphors in Design
Interaction Types
2
Conceptual Model
What is a Conceptual Model
What is a Mental Model
The Core Components of Conceptual Model
Conceptual and Physical Design
Exploring Design Concepts
Exploring the Design Space
3
What is a Conceptual Model
A conceptual model is a high-level description of how a
system is organized and operates.
(Johnson and Henderson, 2002)
A conceptual model is the mental model that people carry of
how something should be done.
(Interaction Design Association – IxDA)
4
What is a Mental Model
The understanding and knowledge that we possess of something is
often referred to as a mental model
(Norman, 1998)
Mental models are used
to reason about a system
to try to fathom out what to do when something unexpected happens
with the system or when encountering unfamiliar systems
(Preece, Sharp and Rogers, 2015)
5
What is a Mental Model
The more someone learns about a system and how it
functions, the more their mental model develops
(Preece, Sharp and Rogers, 2015)
If people do not have a good mental model of something they
can only perform actions by rote => if something goes wrong,
they will not know why and will not be able to recover
(Benyon, 2014)
6
The Core Components of Conceptual Model
Metaphors
Concepts
The relationships between the different concepts
The mapping between the concepts and the user experience
(Preece, Sharp and Rogers, 2015)
7
Conceptual and Physical Design
(Benyon, 2014)
8
Exploring Design Concepts
Interaction design is design for human use and focuses on
three main things:
How do you do? is concerned with the ways in which we affect the
world.
How do you feel? concerns how we make sense of the world and the
sensory qualities that shape media.
How do you know? concerns the ways that people learn and plan; how
designers want people to think about their system.
(Verplank, 2007)
9
Exploring the Design Space
A design space constrains a design in some dimensions whilst
allowing exploration of alternatives in others.
(Beaudouin-Lafon and Mackay, 2012)
10
Metaphors in Design
What is a Metaphor
Metaphor Examples
Benefits of Metaphors
Problems with Metaphors
11
What is a Metaphor
Metaphor is a device for seeing something in terms of
something else. It brings out the thisness of a that or the
thatness of a this.
(Kenneth Burke, 1945)
12
What is a Metaphor
Metaphors are used in three main ways:
As a way of conceptualizing what we are doing (e.g. surfing the web)
As a conceptual model instantiated at the interface (e.g. the card
metaphor)
As a way of visualizing an operation (e.g. an icon of a shopping cart
into which we place items we wish to purchase on an online shopping
site)
(Preece, Sharp and Rogers, 2015)
13
Metaphor Examples
The desktop metaphor Google Now Card
14
Benefits of Metaphors
Makes learning new systems easier
Helps users understand the underlying conceptual model
Can be very innovative and enable the realm of computers and
their applications to be made more accessible to a greater
diversity of use
Source: https://www.academia.edu/
15
Problems with Metaphors
Break conventional and cultural rules e.g. recycle bin placed on desktop
Can constrain designers in the way they conceptualise a problem space
Conflict with design principles
Forces users to only understand the system in terms of the metaphor
Limits designers’ imagination in coming up with new conceptual models
Source: https://www.academia.edu/
16
Mental Models and Icons
We look at icons and our neural nets unconsciously map them
to what we know already about the image or components of
the image.
Source: https://www.lifechallenge.top/
17
Icons
Horton’s icon checklist (Benyon, 2014) for icon design
Understandable Does the image spontaneously suggest the intended concept to the viewer?
Familiar Are the objects in the icon ones familiar to the user?
Unambiguous Are additional cues (label, other icons, documentation) available to resolve any
ambiguity?
Memorable Where possible, does the icon feature concrete objects in action? Are actions
shown as operations on concrete objects?
Informative Why is the concept important?
Few Is the number of arbitrary symbols less than 20?
18
Icons
Horton’s icon checklist (Benyon, 2014) for icon design
Distinct Is every icon distinct from all others?
Attractive Does the image use smooth edges and lines?
Legible Have you tested all combinations of colour and size in which the icon will
be displayed?
Compact Is every object, every line, every pixel in the icon necessary?
Coherent Is it clear where one icon ends and another begins?
Extensible Can I draw the image smaller? Will users still recognise it?
19
Interaction Types
Another way of conceptualizing the design space is in terms of the
interaction types that will underlie the user experience.
Essentially, these are the ways a person interacts with a product or
application.
The four main types of interaction are:
Instructing
Conversing
Manipulating
Exploring
(Preece, Sharp and Rogers, 2015)
20
Instructing
This type of interaction describes how users carry out their tasks by telling
the system what to do.
21
Conversing
This form of interaction is based on the idea of a person having a
conversation with a system, where the system acts as a dialog partner.
22
Manipulating
This form of interaction involves manipulating objects and capitalizes on
users’ knowledge of how they do so in the physical world.
23
Exploring
This mode of interaction involves users moving through virtual or physical
environments.
24
Which type of interaction is best?
Issuing instructions is good for repetitive tasks, e.g. spell-checking, file
management
Having a conversation is good for children, computer-phobic, disabled
users and specialised applications (e.g. phone services)
Direct manipulation is good for ‘doing’ types of tasks, e.g. designing,
drawing, flying, driving, sizing windows
Hybrid conceptual models are often employed, where different ways of
carrying out the same actions is supported at the interface - but can take
longer to learn
Source: https://www.academia.edu/
25
Summary
A conceptual model is a high-level description of a product in terms of
what users can do with it and the concepts they need in order to
understand how to interact with it.
Metaphors are commonly used as part of a conceptual model.
Interaction types provide a way of thinking about how best to support the
activities users will be doing when using a product.
26
Additional resources
Designing Interactive Systems: A comprehensive guide to HCI, UX and
interaction design, 3rd Edition (David Benyon, 2014)
Interaction Design: Beyond Human-Computer Interaction, 4th Edition
(Jennifer Preece, Helen Sharp, Yvonne Rogers, 2015)
27
