Understanding and

Conceptualizing
Interaction
Chapter 2

1
 TOPIC
• Understanding the Problem Space and
Conceptualizing Interactions
• Interface Metaphors
• Interaction Types
• Theories, Models and Frameworks

2
 LEARNING OUTCOMES
• Explain what is meant by the problem space.
• Explain how to conceptualize interaction.
• Describe what a conceptual model is and how to
begin to formulate one.
• Discuss the use of interface metaphors as part
of a conceptual model.
• Outline the core interaction types for informing
the development of a conceptual model.
• Introduce theories, models, and frameworks
informing interaction design.
3
 INTRODUCTION
• Traditionally, interaction designers begin by
doing user research and then sketching their
ideas.
• In AgileUX ideas are often expressed in code
early in the design process.
• It is important to realize that having a clear
understanding of why and how you are going to
design something can save enormous amounts
of time, effort, and money later on in the design
process.
4
UNDERSTANDING THE PROBLEM SPACE AND
CONCEPTUALIZING INTERACTION

• It’s mean working out how to design the

physical interface and what technologies
and interaction styles to use, e.g. whether
to use multitouch, speech, graphical user
interface, head-up display, augmented
reality, gesture-based, etc.
• The problem with starting here is that
usability and user experience goals can be
overlooked.
5
 EXAMPLE

(a) Combined GPS and TV system available in Korea and

(b) A screen shot taken from HP's vision of the future, CoolTown.
In this hypothetical scenario, digital information about the vehicle's state and the
driver's navigation plans is projected onto the windshield. A multimodal voice
browsing interface is proposed that allows the driver to control interactions 6
with the vehicle when driving. How safe do you think this would be?
UNDERSTANDING THE PROBLEM SPACE AND
CONCEPTUALIZING INTERACTION
• This requires a design team thinking through
how their ideas will support or extend the way
people communicate and interact in their
everyday activities.
• In the above example, it involves finding out
what is problematic with existing forms of
navigating while driving, e.g. trying to read maps
while moving the steering wheel or looking at a
small GPS display mounted on the dashboard
when approaching a roundabout, and how to
ensure that drivers can continue to drive safely
without being distracted. 7
UNDERSTANDING THE PROBLEM SPACE AND
CONCEPTUALIZING INTERACTION

• As emphasized in Chapter 1, identifying

usability and user experience goals is a
prerequisite to understanding the problem
space.
• Another important consideration is to
make explicit underlying assumptions
and claims.

8
UNDERSTANDING THE PROBLEM SPACE AND
CONCEPTUALIZING INTERACTION

Assumptions
•taking something for granted when it needs
further investigation, e.g. people will want to
watch TV while driving.
Claims
•stating something to be true when it is still
open to question, e.g. a multimodal style of
interaction for controlling a car navigation
system – one that involves speaking while
9
driving – is perfectly safe.
UNDERSTANDING THE PROBLEM SPACE AND
CONCEPTUALIZING INTERACTION

• Explicating 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, reveal conflicting and
problematic ones.
• The following framework is intended to
provide a set of core questions to aid
design teams in this process. 10
UNDERSTANDING THE PROBLEM SPACE AND
CONCEPTUALIZING INTERACTION

FRAMEWORK

• Are there problems with an existing product or

user experience? If so, what are they?
• Why do you think there are problems?
• How do you think your proposed design ideas
might overcome these?
• If you have not identified any problems and
instead are designing for a new user
experience, how do you think your proposed
design ideas support, change, or extend current
ways of doing things? 11
 ACTIVITY

Use the framework in the above list to

explicate the main assumptions and claims
behind 3D TV. Then do the same for curved
TV screens. Are the assumptions similar?

12
 ACTIVITY- COMMENT
• 3D TV went on sale in 2010 and curved TV in 2014. There was much hype and fanfare
about the enhanced user experience they would offer, especially when watching movies,
sports events, and dramas. An assumption for 3D TV was that people would not mind
wearing the glasses that were needed to see in 3D, nor would they mind paying a lot more
for a new 3D-enabled TV screen. A claim was that people would really enjoy the enhanced
clarity and color detail provided by 3D, based on the favourable feedback received
worldwide when viewing 3D films, such as Avatar, at a cinema. An assumption for curved
TV was that it would provide more flexibility for viewers to optimize the viewing angle for
someone's living room. But the unanswered question for both was: Could the enhanced
cinema viewing experience that both claim become an actual desired living room
experience? There is no existing problem to overcome – what is being proposed is a new
way of experiencing TV. Were people prepared to pay more money for a new TV because
of this enhancement? A number of people did. However, a fundamental usability problem
was overlooked: many people complained of motion sickness. The glasses were also easily
lost, slipping down the back of the sofa. And wearing them made it difficult to do other things
like flicking through multiple channels, texting, and tweeting (many people simultaneously
use second devices, such as smartphones and tablets, while watching TV). Most people
who bought 3D TVs stopped watching them after a while because of the usability problems.
While curved TV doesn't require viewers to wear special glasses, it is not clear whether the
claim about the enhanced viewing experience warrants the extra cost of buying a new TV.
Source: Andrey Popov/Shutterstock.com.
13
UNDERSTANDING THE PROBLEM SPACE AND
CONCEPTUALIZING INTERACTION
• Having a good understanding of the problem space greatly
helps design teams to then be able to conceptualize the
design space.
• The benefits of conceptualizing the design space early on
are:
– 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 – preventing the design team from
becoming narrowly focused early on.
– 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
confusion arising later on. 14
 CONCEPTUAL MODEL
• “a high-level description of how a system
is organized and operates” (Johnson and
Henderson, 2002, p. 26).
• In a nutshell, a conceptual model provides
a working strategy and a framework of
general concepts and their interrelations.

15
 CONCEPTUAL MODEL
The core components are:
•Metaphors and analogies that convey to people how to understand
what a product is for and how to use it for an activity (e.g. browsing,
bookmarking).
•The concepts that people are exposed to through the product,
including the task–domain objects they create and manipulate, their
attributes, and the operations that can be performed on them (e.g.
saving, revisiting, organizing).
•The relationships between those concepts (e.g. whether one object
contains another, the relative importance of actions to others, and
whether an object is part of another).
•The mappings between the concepts and the user experience the
product is designed to support or invoke (e.g. one can revisit through
looking at a list of visited sites, most-frequently visited, or saved
websites). 16
 CONCEPTUAL MODEL
• The best conceptual models are those that
appear obvious; the operations they support
being 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.
• Most interface applications are actually based
on well-established conceptual models. 17
A Classic Conceptual Model :
The Star

The Star interface, developed by Xerox back in 1981,

revolutionized the way interfaces were designed for
personal computing (Smith et al, 1982; Miller and Johnson,
1996).
18
 A Classic Conceptual Model :
The Star
• It was designed as an office system, targeted at workers not interested
in computing per se, and was based on a conceptual model that
included the familiar knowledge of an office.
• Paper, folders, filing cabinets, and mailboxes were represented as icons
on the screen and were designed to possess some of the properties of
their physical counterparts.
• Dragging a document icon across the desktop screen was seen as
equivalent to picking up a piece of paper in the physical world and
moving it (but this, of course, is a very different action).
• Similarly, dragging an electronic document onto an electronic folder was
seen as being analogous to placing a physical document into a physical
cabinet.
• In addition, new concepts that were incorporated as part of the desktop
metaphor were operations that could not be performed in the physical
world.
19
 Interface Metaphors
• Metaphors are considered to be a central
component of a conceptual model.
• Provide a structure that is similar in some
way to aspects of a familiar entity (or
entities) but also have their own
behaviours and properties.
• For example, the desktop metaphor and
another well-known one is the search
engine.
20
 Material Metaphors
• An interface metaphor that has become
pervasive in the last few years is the card.
• Many of the social media apps, such as
Facebook, Twitter, and Pinterest, started
presenting their content on cards.
• Google, for example, launched Material
Design in 2014 to provide a new kind of UI
framework for all of its devices, including
smartwatches, phones, and tablets.
21
Material Metaphors

Google Now Card (that

provides short snippets of
useful information)
appears on and moves
across a smartphone
screen in the way people
would expect a real card
to do – in a lightweight,
paper-based sort of way.
22
 Why are Metaphors So
Popular?
• Metaphors are commonly used to explain
something that is unfamiliar or hard to grasp
by way of comparison with something that is
familiar and easy to grasp.
• Metaphors have been used in interaction
design to conceptualize abstract, hard to
imagine, and difficult to articulate computer-
based concepts and interactions in more
concrete and familiar terms and as graphical
visualizations at the interface.
23
 Why are Metaphors So
Popular?
Metaphors and analogies are used in three
main ways:
1. As a way of conceptualizing what we are
doing (e.g. surfing the web).
2. As a conceptual model instantiated at the
interface (e.g. the card metaphor).
3. 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).
24
 Interaction Types
• Another way of conceptualizing the design
space.
• There are four main types of interactions
which are instructing, conversing,
manipulating, and exploring.

25
 Problem

A company has been asked to design a

computer-based system that will encourage
autistic children to communicate and
express themselves better. What type of
interaction would be appropriate to use at
the interface for this particular user group?

26
 Instructing
• Where users issue instructions to a
system.
• This can be done in a number of ways,
including: typing in commands, selecting
options from menus in a windows
environment or on a multitouch screen,
speaking aloud commands, gesturing,
pressing buttons, or using a combination
of function keys.
• Benefits - quick and efficient. 27
Activity
Figure shows photos of two
different vending machines, one
that provides soft drinks and the
other a range of snacks. Both use
an instructional mode of
interaction. However, the way
they do so is quite different.

What instructions must be issued

to obtain a soda from the first
machine and a bar of chocolate
from the second? Why has it
been necessary to design a more
complex mode of interaction for
the second vending machine?
What problems can arise with
this mode of interaction? 28
 Conversing
• Where users have a dialog with a system.
• Users can speak via an interface or type in questions to
which the system replies via text or speech output.
• 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.
• Examples include advisory systems, help facilities, and
search engines.
• Benefits - allows people to interact with a system in a way
that is familiar to them. For example, Apple's speech
system, Siri, lets you talk to it as if it were another person.
• Problem - certain kinds of tasks are transformed into
cumbersome and one-sided interactions. 29
Conversing

Siri's response to the question “Do I need an

umbrella?”

30
 Manipulating
• Where users interact with objects in a virtual or
physical space by manipulating them (e.g.
opening, holding, closing, placing).
• Users can hone their familiar knowledge of how
to interact with objects.
• For example, digital objects can be manipulated
by moving, selecting, opening, and closing.
• Direct manipulation interfaces are assumed to
enable users to feel that they are directly
controlling the digital objects represented by the
computer. 31
 Manipulating
Benefits
•helping beginners learn basic functionality rapidly;
•enabling experienced users to work rapidly on a wide range
of tasks;
•allowing infrequent users to remember how to carry out
operations over time;
•preventing the need for error messages, except very rarely;
•showing users immediately how their actions are furthering
their goals;
•reducing users’ experiences of anxiety;
•helping users gain confidence and mastery and feel in
control.
32
 Exploring
• Where users move through a virtual
environment or a physical space. Virtual
environments include 3D worlds, and
augmented and virtual reality systems.
• They enable users to hone their familiar
knowledge of physically moving around.
• Physical spaces that use sensor-based
technologies include smart rooms and
ambient environments, also enabling
people to capitalize on familiarity. 33
 Exploring

(a) A CAVE that enables the user to stand near a huge insect, e.g. a
beetle, be swallowed, and end up in its abdomen;
(b) NCSA's CAVE being used by a scientist to move through 3D
visualizations of the datasets 34
 Theories, Models, and
Frameworks
• Other sources of inspiration and
knowledge that are used to inform design
and guide research are theories, models,
and frameworks (Carroll, 2003).
• These vary in terms of their scale and
specificity to a particular problem space.

35
 Theories
• A theory is a well-substantiated explanation of
some aspect of a phenomenon; for example, the
theory of information processing that explains
how the mind, or some aspect of it, is assumed
to work.
• One of the main benefits of applying such
theories in interaction design is to help identify
factors (cognitive, social, and affective) relevant
to the design and evaluation of interactive
products.
36
 Models
• A model is a simplification of some aspect
of human–computer interaction intended
to make it easier for designers to predict
and evaluate alternative designs.
• For example, Norman (1988) developed a
number of models of user interaction
based on theories of cognitive processing,
arising out of cognitive science, that were
intended to explain the way users
interacted with interactive technologies. 37
 Models
• More recent models developed in
interaction design are user models, which
predict what information users want in
their interactions, and models that
characterize core components of the user
experience, such as Norman's (2005)
model of emotional design.

38
 Frameworks
• A framework is a set of interrelated concepts
and/or a set of specific questions that are
intended to inform a particular domain area (e.g.
collaborative learning), online communities, or
an analytic method (e.g. ethnographic studies).
• Frameworks, like models, have traditionally been
based on theories of human behaviour, but they
are increasingly being developed from the
experiences of actual design practice and the
findings arising from user studies.
39
 Frameworks
• Many frameworks have been published in
the HCI/interaction design literatures,
covering different aspects of the user
experience and a diversity of application
areas.
• The framework comprises three interacting
components: the designer, the user, and
the system.

40
 Frameworks
• Behind each of these are:

– The designer's model – the model the

designer has of how the system should work.
– The system image – how the system actually
works is portrayed to the user through the
interface, manuals, help facilities, and so on.
– The user's model – how the user understands
how the system works.
41