UNIT 5: Understanding and Conceptualizing

Interaction
Ms. Sherilene B. Pamintuan, MIT
 INTRODUCTION
This unit introduces paradigms, visions, theories,
models, and frameworks informing interaction design.

ESSENTIAL QUESTION
How to conceptualize interaction?
 INTENDED LEARNING OUTCOMES
• Understand the Problem Space and Conceptualizing
Design.
• Introduce paradigms, visions, theories, models, and
frameworks informing interaction design.
LESSON 5: UNDERSTANDING
AND CONCEPTUALIZING
INTERACTION
ACTIVITY 1:
Diagnostic Assessment

1. What are your assumptions for having the

following?
2. Write at least three (3) assumptions in
using of the following
ACTIVITY 1:
Diagnostic Assessment

1.

2.

3.
1.

2.

3.
ACTIVITY 1:
Diagnostic Assessment

1.

2.

3.
1.

2.

3.
ACTIVITY 1:
Diagnostic Assessment

1.

2.

3.
INTRODUCTION
Imagine you have been asked to design an application to enable people to
share their photos, movies, music, chats, documents, and so on in an
efficient, safe, and enjoyable way.
• What would you do?
• How would you start?
• Would you begin by sketching out how the interface might look, work
out how the system architecture should be structured, or start coding?
• Would you start by asking users about their current experiences of
sharing files and look at existing tools, e.g. Dropbox, and, based on
this, begin thinking about why and how you were going to design the
application?
INTRODUCTION

Interaction designers would begin importantly to realize that having a clear

understanding of why and how they are going to design something, before
writing any code, can save enormous amounts of time, effort and money
later on in the design process.
INTRODUCTION: UNDERSTANDING THE PROBLEM
SPACE AND CONCEPTUALIZING DESIGN
In the process of creating an interactive product, it can be tempting to
begin at the nuts and bolts level of design. By this, we 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.
For example, consider the possibility of designing an integrated in-car
entertainment, phone, and navigation system that allows drivers to follow
directions, find nearby eating places, watch TV and read their email (Figure
5.1 – already possible in Korea)
INTRODUCTION: UNDERSTANDING THE PROBLEM
SPACE AND CONCEPTUALIZING DESIGN
Figure 5.1: (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 with the vehicle when
driving. How safe do you think this would be?
The process of articulating the problem space is typically done as a team
effort. Invariably, team members will have differing perspectives on the problem
space. For example, a project manager is likely to be concerned about a proposed
solution in terms of budgets, timelines, and staffing costs, whereas a software
engineer will be thinking about breaking it down into specific technical concepts. It
is important that the implications of pursuing each perspective are considered in
relation to one another.
INTRODUCTION: UNDERSTANDING THE PROBLEM
SPACE AND CONCEPTUALIZING DESIGN
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.
INTRODUCTION
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?
• 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?
INTRODUCTION: BENEFITS OF
CONCEPTUALIZING
• 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.
THE CONCEPTUAL MODELS
The most important thing to design is the users’
conceptual model. Everything else should be subordinated
that model clear, obvious, and substantial. That is almost
exactly the opposite of how most software is designated.
(David Liddle, 1996)
“How will users understand the system not you”
In a nutshell, a conceptual model provides a working
strategy and a framework of general concepts and their
interrelations.
THE CONCEPTUAL MODELS
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).
THE CONCEPTUAL MODELS
• 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 (e.g. one can revisit through looking at a list of
visited sites, most frequently visited, or saved
websites).
THE CONCEPTUAL MODELS
The Best Conceptual Model?
• Those that appear obvious.
• The operations they support
being intuitive to use.

A Classic Conceptual Model: The

Star The Star interface, developed
by Xerox back in 1981
THE CONCEPTUAL MODELS
First steps in formulating a conceptual model:
• What will the users be doing when carrying out their
tasks?
• How will the system support these?
• What kind of interface metaphor, if any, will be
appropriate?
• What kinds of interaction modes and styles to use?
Always keep in mind when making design decisions how the
user will understand the underlying conceptual model
INTERFACE METAPHORS
• Conceptualizing what we are
doing, e.g. surfing the web.
• A conceptual model
instantiated at the interface,
e.g. the desktop metaphor.
• Visualizing an operation, –
e.g. an icon of a shopping
cart for placing items into
INTERFACE METAPHORS
• Interface designed to be like a physical entity but also has
own properties – e.g. desktop metaphor, web portals.
• Can be based on activity, object, or a combination of both.
• Exploit user’s familiar knowledge, helping them to
understand ‘the unfamiliar’.
• Conjures up the essence of the unfamiliar activity,
enabling users to leverage of this to understand more
aspects of the unfamiliar functionality
INTERFACE METAPHORS
Benefits of interface 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 users
INTERFACE METAPHORS
Problems with interface metaphors
• Break conventional and cultural rules – e.g. recycle bin placed on
desktop.
• Can constrain designers in the way they conceptualize a problem
space.
• Conflict with design principles.
• Forces users to only understand the system in terms of the metaphor.
• Designers can inadvertently use bad existing designs and transfer the
bad parts over.
• Limits designers’ imagination in coming up with new conceptual
models
INTERACTION TYPES
• Instructing – issuing commands and selecting options
• Conversing – interacting with a system as if having a
conversation
• Manipulating – interacting with objects in a virtual or
physical space by manipulating them
• Exploring – moving through a virtual environment or a
physical space
 INTERACTION TYPES
1. Instructing
- Where users instruct a system and tell it
what to do – e.g. tell the time, print a
file, save a file.
- Very common conceptual model,
underlying a diversity of devices and
systems – e.g. word processors, VCRs,
vending machines.
- Main benefit is that instructing supports
quick and efficient interaction – good
for repetitive kinds of actions
performed on multiple objects Which is
easiest and why?
INTERACTION TYPES
2. Conversing
- Underlying model of having a
conversation with another human.
- Range from simple voice recognition
menu driven systems to more complex
‘natural language’ dialogs.
- Examples include timetables, search
engines, advice-giving systems, help
systems.
- Also, virtual agents, toys and pet robots
designed to converse with you
INTERACTION TYPES
Pros and Cons of Conversational Model
• Allows users, especially novices and
technophobes, to interact with the
system in a way that is familiar – makes
them feel comfortable, at ease and less
scared.
• Misunderstandings can arise when the
system does not know how to parse
what the user says
INTERACTION TYPES
3. Manipulating
- Involves dragging, selecting, opening, closing, and zooming
actions on virtual objects.
- Exploit’s users’ knowledge of how they move and manipulate in
the physical world.
- Can involve actions using physical controllers (e.g. Wii) or air
gestures (e.g. Kinect) to control the movements of an on-screen
avatar.
- Tagged physical objects (e.g. balls) that are manipulated in a
physical world result in physical/digital events (e.g. animation)
INTERACTION TYPES
4. Exploring
- Involves users moving through virtual or physical environments
- Physical environments with embedded sensor technologies
- Context aware
DIRECT MANIPULATION
Shneiderman (1983) coined the term DM, came from his
fascination with computer games at the time.
- Continuous representation of objects and actions of
interest
- Physical actions and button pressing instead of issuing
commands with complex syntax.
- Rapid reversible actions with immediate feedback on
object of interest
DIRECT MANIPULATION
Why are DM interfaces so enjoyable?
- Novices can learn the basic functionality quickly
- Experienced users can work extremely rapidly to carry out a
wide range of tasks, even defining new functions.
- Intermittent users can retain operational concepts over time.
- Error messages rarely needed.
- Users can immediately see if their actions are furthering their
goals and if not do something else.
- Users experience less anxiety.
- Users gain confidence and mastery and feel in control
DIRECT MANIPULATION
What are the disadvantages with DM?
- Some people take the metaphor of direct manipulation too
literally.
- Not all tasks can be described by objects and not all actions can
be done directly.
- Some tasks are better achieved through delegating e.g. spell
checking.
- Can become screen space ‘gobblers’
- Moving a mouse around the screen can be slower than pressing
function keys to do same actions
DIRECT MANIPULATION
Which Conceptual Model is Best?
- Direct manipulation is good for ‘doing’ types of tasks, e.g.
designing, drawing, flying, driving, sizing windows.
- 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 specialized applications (e.g. phone
services).
- 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
DIRECT MANIPULATION
Conceptual Models
- Interaction and Interface
- Interaction type:
- What the user is doing when interacting with a system, e.g.
instructing, talking, browsing or other
- Interface type:
- The kind of interface used to support the mode, e.g. speech,
menu-based, gesture
DIRECT MANIPULATION
Many Kinds of Interface Types Available…
• Command
• Speech
• Data-entry
• Form fill-in
• Query
• Graphical
• Web
• Pen
• Augmented reality
• Gesture
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
These vary in terms of their scale and specificity to a problem space.
Paradigm - A paradigm refers to a general approach that has been adopted
by a community of researchers and designers for carrying out their work in
terms of shared assumptions, concepts, values, and practices. Following a
paradigm means adopting a set of practices upon which a community has
agreed. These include the following:
• The questions to be asked and how they should be framed
• The phenomena to be observed
• The way in which findings from studies are to be analyzed and
interpreted (Kuhn, 1972)
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
Examples of New Paradigms
• Ubiquitous computing (mother of them all)
• Pervasive computing
• Wearable computing
• Tangible bits, augmented reality
• Attentive environments
• Transparent computing
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
Vision - A vision is a future scenario that frames
research and development in interaction design—often
depicted in the form of a film or a narrative.
The different kinds of future visions provide concrete
scenarios of how society can use the next generation of
imagined technologies to make their lives more
comfortable, safe, informative, and efficient.
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
Many new challenges, themes, and questions have been
articulated through such visions (see, for example, Rogers, 2006;
Harper et al., 2008; Abowd, 2012), including the following:
• How to enable people to access and interact with information in
their work, social, and everyday lives using an assortment of
technologies.
• How to design user experiences for people using interfaces that
are part of the environment but where there are no obvious
controlling devices.
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
• How and in what form to provide contextually relevant
information to people at appropriate times and places to
support them while on the move.
• How to ensure that information that is passed around via
interconnected displays, devices, and objects is secure and
trustworthy.
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
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.
• Explanation of a phenomenon
– e.g. information processing that explains how the
mind, or some aspect of it, is assumed to work
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
• Can help identify factors
– e.g. cognitive, social, and affective, relevant to the
design and evaluation of interactive products
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
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.
• A simplification of an HCI phenomenon
– Intended to make it easier for designers to predict and
evaluate alternative designs.
– Abstracted from a theory coming from a contributing
discipline, e.g. psychology, e.g. keystroke model
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
Frameworks - A framework is a set of interrelated concepts and/or a set of
specific questions that are intended to inform a domain area (for example,
collaborative learning), or an analytic method (for instance, ethnographic
studies).
• Set of interrelated concepts and/or specific questions for ‘what to look
for’
• Many in interaction design
– Example: Norman’s conceptual models, Benford’s trajectories
• Provide advice on how to design
– Example: steps, questions, concepts, challenges, principles, tactics,
and dimensions
PARADIGMS, VISIONS, THEORIES,
MODELS & FRAMEWORKS
Concern Past Future
Frame of reference • Users Scientific • Context
Method, theory, and approach • Pluralistic
perspective Output • Interaction design • Mixing
• Ethnographic • Insights
• Models and tools • Creating new ways
for analysis of experiencing
• Design guidance • Value based
analyses
Asynchronous Activity
The aim of this activity is for you to think about the
appropriateness of different kinds of conceptual
models that have been designed for similar physical
and digital information artifacts.
Compare the following:
A. A paperback book (textbook) and an ebook;
B. A paper-based map and a smartphone map
ACTIVITY 3:
Performance Task

Conceptualize a NEW product and answer the

following.
1. What do you want to create?
2. What are the assumptions?
3. Do you think it will achieve what you hope it will?
REFERENCES
• Sharp, H., Preece, J., & Rogers, Y. (2019).
Interaction Design: Beyond human-computer
interaction. John Wiley & Sons.
• Dix, A., Finaly, J., Abowd, G., Beale, R. Human-
computer interaction 3rd Edition. Pearson
Education Limited.
• (n.d.). Pizza – Ask. Answer. Explore. Whenever.
https://piazza.com/class_profile/get_resource/ilfs
qfxii65ie/ilqij1vz6911i1
THANK YOU!