Lesson02

Conceptualizing Interaction
• Conceptualizing Interaction
• Conceptual Models
• Interface Metaphors

http://fpt.edu.vn 12/01/24 2
1. Introduction
When coming up with new ideas as part of a design project, it is
important to conceptualize them in terms of what the proposed
product will do. Sometimes, this is referred to as creating a proof
of concept. In relation to the double diamond framework, it can be
viewed as an initial pass to help define the area and also when
exploring solutions. One reason for needing to do this is as a
reality check where fuzzy ideas and assumptions about the
benefits of the proposed product are scrutinized in terms of their
feasibility: How realistic is it to develop what they have suggested,
and how desirable and useful will it actually be? Another reason is
to enable designers to begin articulating what the basic building
blocks will be when developing the product. From a user
experience (UX) perspective, it can lead to better clarity, forcing
designers
http://fpt.edu.vn
to explain how users will understand, learn about, and
12/01/24 3
interact with the product
1. Introduction
For example, consider the bright idea that a designer has of
creating a voice-assisted mobile robot that can help waiters in
a restaurant take orders and deliver meals to customers (see
Figure 3.1). The first question to ask is: why? What problem
would this address? The designer might say that the robot
could help take orders and entertain customers by having a
conversation with them at the table. They could also make
recommendations that can be customized to different
customers, such as restless children or fussy eaters. However,
none of these addresses an actual problem. Rather, they are
couched in terms of the putative benefits of the new solution.
In contrast, an actual problem identified might be the
following: “It is difficult to recruit good wait staff who provide
12/01/24 4
http://fpt.edu.vn
the level of customer service to which we have become
1. Introduction
For example, consider the bright idea that a designer has of
creating a voice-assisted mobile robot that can help waiters in
a restaurant take orders and deliver meals to customers (see
Figure 3.1). The first question to ask is: why? What problem
would this address? The designer might say that the robot
could help take orders and entertain customers by having a
conversation with them at the table. They could also make
recommendations that can be customized to different
customers, such as restless children or fussy eaters. However,
none of these addresses an actual problem. Rather, they are
couched in terms of the putative benefits of the new solution.
In contrast, an actual problem identified might be the
following: “It is difficult to recruit good wait staff who provide
12/01/24 5
http://fpt.edu.vn
the level of customer service to which we have become
1. Introduction
Having worked through a problem space, it is important to
generate a set of research questions that need to be
addressed, when considering how to design a robot voice
interface to wait on customers. These might include the
following: How intelligent does it have to be? How would it
need to move to appear to be talking? What would the
customers think of it? Would they think it is too gimmicky
and get easily tired of it? Or, would it always be a pleasure
for them to engage with the robot, not knowing what it
would say on each new visit to the restaurant? Could it be
designed to be a grumpy extrovert or a funny waiter?
What might be the limitations of this voice-assisted
http://fpt.edu.vn 12/01/24 6
approach?
1. Introduction
Many unknowns need to be considered in the initial stages of
a design project, especially if it is a new product that is
being proposed. As part of this process, it can be useful to
show where your novel ideas came from. What sources of
inspiration were used? Is there any theory or research that
can be used to inform and support the nascent ideas?

http://fpt.edu.vn 12/01/24 7
1. Conceptualizing Interaction
When beginning a design project, it is important to be clear
about the underlying assumptions and claims. By an
assumption, we mean taking something for granted that
requires further investigation; for example, people now
want an entertainment and navigation system in their
cars. By a claim, we mean stating something to be true
when it is still open to question. For instance, a
multimodal style of interaction for controlling this system
—one that involves speaking or gesturing while driving—is
perfectly safe.

http://fpt.edu.vn 12/01/24 8
1. Conceptualizing Interaction
Writing down your assumptions and claims and then trying
to defend and support them can highlight those that are
vague or wanting. In so doing, poorly constructed design
ideas can be reformulated. In many projects, this process
involves identifying human activities and interactivities
that are problematic and working out how they might be
improved through being supported with a different set of
functions. In others, it can be more speculative, requiring
thinking through how to design for an engaging user
experience that does not exist. Box 3.1 presents a
hypothetical scenario of a team working through their
assumptions and claims; this shows how, in so doing,
http://fpt.edu.vn 12/01/24 9
problems are explained and explored and leads to a
Explaining people’s assumptions and claims about why they
think something might be a good idea (or not) enables the
design team as a whole to view multiple perspectives on the
problem space and, in so doing, reveals conflicting and
problematic ones. The following framework is intended to
provide a set of core questions to aid design teams in this
process:
• Are there problems with an existing product or user
experience? If so, what are they?
• Why do you think there are problems?
• What evidence do you have to support the existence of these
problems?
• How do you think your proposed design ideas might overcome
these problems?
http://fpt.edu.vn 12/01/24 10
Making clear what one’s assumptions are about a problem and
the claims being made about potential solutions should be
carried out early on and throughout a project. Design teams also
need to work out how best to conceptualize the design space.
Primarily, this involves articulating the proposed solution as a
conceptual model with respect to the user experience. The
benefits of conceptualizing the design space in this way are as
follows: Orientation Enabling the design team to ask specific
kinds of questions about how the conceptual model will be
understood by the targeted users. Open-Mindedness Allowing
the team to explore a range of different ideas to address the
problems identified. Common Ground Allowing the design team
to establish a set of common terms that all can understand and
agree upon, reducing the chance of misunderstandings and
12/01/24 11
confusion arising later.
http://fpt.edu.vn
Once formulated and agreed upon, a conceptual model can then
become a shared blueprint leading to a testable proof of
concept. It can be represented as a textual description and/ or in
a diagrammatic form, depending on the preferred lingua franca
used by the design team. It can be used not just by user
experience designers but also to communicate ideas to business,
engineering, finance, product, and marketing units. The
conceptual model is used by the design team as the basis from
which they can develop more detailed and concrete aspects of
the design. In doing so, design teams can produce simpler
designs that match up with users’ tasks, allow for faster
development time, result in improved customer uptake, and
need less training and customer support (Johnson and
Henderson, 2012).
http://fpt.edu.vn 12/01/24 12
2. Conceptual Models
A model is a simplified description of a system or process that
helps describe how it works. In this section, we look at a particular
kind of model used in interaction design intended to articulate the
problem and design space—the conceptual model. In a later
section, we describe more generally how models have been
developed to explain phenomena in humancomputer interaction.
Jeff Johnson and Austin Henderson (2002) define a conceptual
model as “a high-level description of how a system is organized
and operates” (p. 26). In this sense, it is an abstraction outlining
what people can do with a product and what concepts are needed
to understand how to interact with it. A key benefit of
conceptualizing a design at this level is that it enables “designers
to straighten out their thinking before they start laying out their
widgets” (p. 28).
http://fpt.edu.vn 12/01/24 13
In a nutshell, a conceptual model provides a working strategy and
a framework of general concepts and their interrelations. The core
components are as follows:
• Metaphors and analogies that convey to people how to
understand what a product is used for and how to use it for an
activity (for example browsing and bookmarking).
• The concepts to which people are exposed through the product,
including the task-domain objects they create and manipulate,
their attributes, and the operations that can be performed on them
(such as saving, revisiting, and organizing).

http://fpt.edu.vn 12/01/24 14
• The relationships between those concepts (for instance, whether
one object contains another).
The mappings between the concepts and the user experience the
product is designed to support or invoke (for example, one can
revisit a page through looking at a list of visited sites, most-
frequently visited, or saved websites)

http://fpt.edu.vn 12/01/24 15
How the various metaphors, concepts, and their
relationships are organized determines the user
experience. By explaining these, the design team can
debate the merits of providing different methods and
how they support the main concepts, for example,
saving, revisiting, categorizing, reorganizing, and their
mapping to the task domain. They can also begin
discussing whether a new overall metaphor may be
preferable that combines the activities of browsing,
searching, and revisiting. In turn, this can lead the design
team to articulate the kinds of relationships between
them, such as containership.
http://fpt.edu.vn 12/01/24 16
For example, what is the best way to sort and revisit
saved pages, and how many and what types of
containers should be used (for example, folders, bars, or
panes)? The same enumeration of concepts can be
repeated for other functions of the web browser—both
current and new. In so doing, the design team can begin
to work out systematically what will be the simplest and
most effective and memorable way of supporting users
while browsing the Internet

http://fpt.edu.vn 12/01/24 17
The best conceptual models are often those that appear
obvious and simple; that is, the operations they support
are intuitive to use. However, sometimes applications
can end up being based on overly complex conceptual
models, especially if they are the result of a series of
upgrades, where more and more functions and ways of
doing something are added to the original conceptual
model. While tech companies often provide videos
showing what new features are included in an upgrade,
users may not pay much attention to them or skip them
entirely.

http://fpt.edu.vn 12/01/24 18
Furthermore, many people prefer to stick to the methods
they have always used and trusted and, not surprisingly,
become annoyed when they find one or more have been
removed or changed. For example, when Facebook rolled
out its revised newsfeed a few years back, many users
were unhappy, as evidenced by their postings and
tweets, preferring the old interface that they had gotten
used to. A challenge for software companies, therefore, is
how best to introduce new features that they have added
to an upgrade—and explain their assumed benefits to
users—while also justifying why they removed others.

http://fpt.edu.vn 12/01/24 19
Most interface applications are actually based on well-
established conceptual models. For example, a conceptual
model based on the core aspects of the customer experience
when at a shopping mall underlies most online shopping
websites. These include the placement of items that a
customer wants to purchase into a shopping cart or basket
and proceeding to checkout when they’re ready to make the
purchase. Collections of patterns are now readily available to
help design the interface for these core transactional
processes, together with many other aspects of a user
experience, meaning interaction designers do not have to
start from scratch every time they design or redesign an
application. Examples include patterns for online forms and
navigation on mobile phones
http://fpt.edu.vn 12/01/24 20
It is rare for completely new conceptual models to emerge
that transform the way daily and work activities are carried
out at an interface. Those that did fall into this category
include the following three classics: the desktop (developed
by Xerox in the late 1970s), the digital spreadsheet
(developed by Dan Bricklin and Bob Frankston in the late
1970s), and the World Wide Web (developed by Tim Berners
Lee in the early 1980s). All of these innovations made what
was previously limited to a few skilled people accessible to
all, while greatly expanding what is possible. The graphical
desktop dramatically changed how office tasks could be
performed (including creating, editing, and printing
documents).
http://fpt.edu.vn 12/01/24 21
Performing these tasks using the computers prevalent at the
time was significantly more arduous, having to learn and use
a command language (such as DOS or UNIX). Digital
spreadsheets made accounting highly flexible and easier to
accomplish, enabling a diversity of new computations to be
performed simply through filling in interactive boxes. The
World Wide Web allowed anyone to browse a network of
information remotely. Since then, e-readers and digital
authoring tools have introduced new ways of reading
documents and books online, supporting associated activities
such as annotating, highlighting, linking, commenting,
copying Performing these tasks using the computers
prevalent at the time was significantly more arduous, having
to learn and use a command language (such as DOS or
http://fpt.edu.vn UNIX). 22
12/01/24
Digital spreadsheets made accounting highly flexible and
easier to accomplish, enabling a diversity of new
computations to be performed simply through filling in
interactive boxes. The World Wide Web allowed anyone to
browse a network of information remotely. Since then, e-
readers and digital authoring tools have introduced new
ways of reading documents and books online, supporting
associated activities such as annotating, highlighting,
linking, commenting, copying

http://fpt.edu.vn 12/01/24 23
3. Interface Metaphors
Metaphors are considered to be a central component of a
conceptual model. They provide a structure that is similar in
some way to aspects of a familiar entity (or entities), but they
also have their own behaviors and properties. More specifically,
an interface metaphor is one that is instantiated in some way as
part of the user interface, such as the desktop metaphor.
Another well-known one is the search engine, originally coined in
the early 1990s to refer to a software tool that indexed and
retrieved files remotely from the Internet using various
algorithms to match terms selected by the user. The metaphor
invites comparisons between a mechanical engine, which has
several working parts, and the everyday action of looking in
different places to find something. 12/01/24 24
http://fpt.edu.vn
3. Interface Metaphors
The functions supported by a search engine also include
other features besides those belonging to an engine that
searches, such as listing and prioritizing the results of a
search. It also does these actions in quite different ways
from how a mechanical engine works or how a human
being might search a library for books on a given topic.
The similarities implied by the use of the term search
engine, therefore, are at a general level. They are meant
to conjure up the essence of the process of finding
relevant information, enabling the user to link these to
less familiar aspects of the functionality provided.
http://fpt.edu.vn 12/01/24 25
3. Interface Metaphors
Interface metaphors are intended to provide familiar entities
that enable people readily to understand the underlying
conceptual model and know what to do at the interface.
However, they can also contravene people’s expectations
about how things should be, such as the recycle bin (trash
can) that sits on the desktop. Logically and culturally
(meaning, in the real world), it should be placed under the
desk. But users would not have been able to see it because
it would have been hidden by the desktop surface. So, it
needed to go on the deskstop. While some users found this
irksome, most did not find it to be a problem. Once they
understood why the recycle bin icon was on the desktop,
http://fpt.edu.vn 12/01/24 26
they simply accepted it being there
3. Interface Metaphors
An interface metaphor that has become popular in the last
few years is the card. Many of the social media apps, such as
Facebook, Twitter, and Pinterest, present their content on
cards. Cards have a familiar form, having been around for a
long time. Just think of how many kinds there are: playing
cards, business cards, birthday cards, credit cards, and
postcards to name a few. They have strong associations,
providing an intuitive way of organizing limited content that
is “card sized.” They can easily be flicked through, sorted,
and themed. They structure content into meaningful chunks,
similar to how paragraphs are used to chunk a set of related
sentences into distinct sections (Babich, 2016).
http://fpt.edu.vn 12/01/24 27
3. Interface Metaphors
In the context of the smartphone interface, the Google Now
card provides short snippets of useful information. This
appears on and moves across the screen in the way people
would expect a real card to do—in a lightweight, paper-
based sort of way. The elements are also structured to
appear as if they were on a card of a fixed size, rather than,
say, in a scrolling web page.
In many cases, new interface metaphors rapidly become
integrated into common parlance, as witnessed by the way
people talk about them.

http://fpt.edu.vn 12/01/24 28
3. Interface Metaphors
For example, parents talk about how much screen time
children are allowed each day in the same way they talk
more generally about spending time. As such, the interface
metaphors are no longer talked about as familiar terms to
describe less familiar computer-based actions; they have
become everyday terms in their own right. Moreover, it is
hard not to use metaphorical terms when talking about
technology use, as they have become so ingrained in the
language that we use to express ourselves. Just ask yourself
or someone else to describe Twitter and Facebook and how
people use them. Then try doing it without using a single
metaphor
http://fpt.edu.vn 12/01/24 29
3. Interface Metaphors
Albrecht Schmidt (2017) suggests a pair of glasses as a good
metaphor for thinking about future technologies, helping us
think more about how to amplify human cognition. Just as
they are seen as an extension of ourselves that we are not
aware of most of the time (except when they steam up!), he
asks can we design new technologies that enable users to do
things without having to think about how to use them?

http://fpt.edu.vn 12/01/24 30
3. Interface Metaphors
He contrasts this “amplify” metaphor with the “tool”
metaphor of a pair of binoculars that is used for a specific
task—where someone consciously has to hold them up
against their eyes while adjusting the lens to bring what they
are looking at into focus. Current devices, like mobile
phones, are designed more like binoculars, where people
have to interact with them explicitly to perform tasks.

Readmore Wiley.Interaction.Design.Beyond.Human-Computer.Interaction.5th.Edition page 81