USER EXPERIENCE

DESIGN
Conceptualizing Interaction
 Conceptualizing design

Proof of concept Why the need to conceptualizing

design?
Conceptualize what the proposed product will do To scrutinize vague ideas and assumptions about the
benefits of the proposed product in terms of their
feasibility
How realistic is it to develop?
How desirable and useful?
 Assumptions and claims

Write down your assumptions and claims when coming up with a new design

Try to defend and support them by what they will provide

Can highlight what ideas are vague or unrealistic

Those that are difficult to articulate Identify human activities and interactivities that are problematic

Iteratively work out how the design ideas might be improved

 What is an
assumption?
◦ Taking something for granted when it needs further
investigation
◦ For example, people will want to watch TV while driving

Technotopic Narratives and Networked Subjects: Preparations fo

r Everyday Life in Cooltown
What is a
claim?
◦ A claim is stating something to
be true when it is still open to
question

◦ For example, “a
multimodal style of
interaction for controlling
GPS — one that involves
speaking while driving —
is safe.”
Activity: How will enabling
robot waiters to speak to
customers enhance their
experience?

◦Source: Xinhua, Guo Cheng

www.id-book.com
 What is the problem being addressed?

The benefits: But just assumptions The real problem being “It is difficult to recruit good
addressed: wait staff who provide the
level of customer service to
which we have become
accustomed.”

The robot could take orders and

entertain customers by having a
conversation with them
The robot could make
recommendations for different
customers, such as restless children or
fussy eaters
 Working through assumptions

Many unknowns need to be considered in the During the early ideation process
initial stages of a design project

Where do your ideas come from? Ask questions, reconsider assumptions, and articulate concerns
What sources of inspiration were used?
Is there any theory or research that can be used to inform them?
 Are there problems with an existing product or user
experience? If so, what are they?

A framework Why do you think there are problems?

for analyzing
the problem How do you think your proposed design ideas might

space
overcome these?

If you are designing for a new user experience, how do

you think your proposed design ideas support, change, or
extend current ways of doing things?
 Activity
◦ What were the assumptions and claims made
about watching 3D TV?
Figure 3.2 A family watching 3D TV

Source: Andrey Popov, Shutterstock

 There was no existing problem to overcome

• What was being proposed was a new way of experiencing TV

Assumptions An assumption

and claims: • People would really enjoy the enhanced clarity and color detail
provided by 3D

how realistic? A claim

• People would not mind paying a lot more for a new 3D-enabled TV
screen because of the new experience
 Orientation

• Enables design teams to ask specific questions

about how the conceptual model will be
understood

Benefits of Open-minded

conceptualizing • Prevents design teams from becoming

narrowly focused early on

Common ground

• Allows design teams to establish a set of

commonly agreed terms
◦ Having a good understanding of the problem space can
help inform the design space
From problem
◦ For example, what kind of interface, behavior, functionality
to provide space to design
space
◦ Before deciding upon these, it is important to develop a
conceptual model
 A conceptual model is:
• “…a high-level description of how a system is organized and
operates” (Johnson and Henderson, 2002, p26)

Conceptual A conceptual model enables:

model • “…designers to straighten out their thinking before they start
laying out their widgets” (Johnson and Henderson, 2002, p28)

Provides a working strategy and framework of

general concepts and their interrelations
 Metaphors and analogies
• Understand what a product is for and how to
use it for an activity

Concepts that people are exposed to

Components through the product
• Task–Domain objects, their attributes, and
operations (for example, saving, revisiting,
organizing)

Relationship and mappings between

these concepts
 What will the users be doing when carrying
out their tasks?

First steps in How will the system support these?

formulating a What kind of interface metaphor, if any,

conceptual will be appropriate?

model 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
 Many kinds and ways of classifying them

Conceptual
models
The best conceptual models are often
those that appear:
The operations they
Obvious and simple support are intuitive to
use
◦ Interface designed to be similar to a physical entity but
also has own properties
◦ For example, desktop metaphor, and web portals
◦ Can be based on activity, object, or a combination of
both Interface
◦ Exploit user’s familiar knowledge, helping them to
understand ‘the unfamiliar’
metaphors
◦ Conjures up the essence of the unfamiliar activity,
enabling users to leverage this to understand more
aspects of the unfamiliar functionality
 Conceptualizing For instance,
what users are doing surfing the Web

Examples of A conceptual model

interface instantiated at the
interface
For example, the
desktop metaphor

metaphors
For instance, an
Visualizing an icon of a shopping
operation cart into which the
user places items
The card
metaphor
◦ The card is a very popular UI. Why?
◦ It has familiar form factor
◦ It can easily be flicked through, sorted, and
themed
◦ It structures content into meaningful chunks
(similar to how paragraphs are used to chunk a
set of related sentences into distinct sections)
◦ Its material properties give the appearance of the
surface of paper

Figure 3.5 Google Now card for restaurant

recommendation in Germany
Source: Johannes Shonning
 Makes learning new systems easier

Benefits of
interface Helps users understand the underlying
conceptual model

metaphors
Can be very innovative and enable the realm of
computers and their applications to be made
more accessible to a greater diversity of users
◦ Break conventional and cultural rules
◦ For instance, recycle bin placed on desktop
◦ Can constrain designers in the way that they
conceptualize a problem space
◦ Conflicts with design principles Problems with
◦ Forces users to understand only the system in terms of interface
the metaphor
◦ Designers can inadvertently use bad existing designs
metaphors
and transfer the bad parts over
◦ Limits designers’ imagination in coming up with new
conceptual models
◦ Describe the components of the conceptual model
underlying most online shopping websites, for
example:

◦ Shopping cart Activity

◦ Proceeding to check-out
◦ 1-click
◦ Gift wrapping
◦ Cash register
 Instructing
• Issuing commands and selecting options

Conversing
• Interacting with a system as if having a conversation

Interaction Manipulating
• Interacting with objects in a virtual or physical space by
types manipulating them

Exploring
• Moving through a virtual environment or a physical space

Responding
• The system initiates the interaction and the user chooses
whether to respond
 Where users instruct a For example: Tell
the time, print a
system and tell it what to do file, or save a file

Very common conceptual For instance: Word

1. Instructing model underlying a

diversity of devices and
systems
processors, VCRs,
and vending
machines

The main benefit is that Good for repetitive

kinds of actions
instructing supports quick performed on
and efficient interaction multiple objects

www.id-book.com
WHICH IS
EASIEST
AND
WHY?
◦ Underlying model of having a conversation with
another human
◦ Ranges from simple voice recognition menu-driven
systems to more complex ‘natural language’ dialogs
◦ Examples include timetables, search engines, advice- 2. Conversing
giving systems, and help systems
◦ Also virtual agents, chatbots, toys, and pet robots
designed to converse with you
◦ Allows users, especially novices, to interact with a
system in a way that is familiar to them

◦ Can make them feel comfortable, at ease, and less scared

Pros and cons of
◦ Misunderstandings can arise when the system does not conversational
know how to parse what the user says
model
◦ For example, voice assistants can misunderstand what
children say
 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

3. Manipulating
Can involve actions using physical controllers (for example,
Nintendo Wii) or air gestures (such as, Microsoft Kinect) to
control the movements of an on-screen avatar

Tagged physical objects (for instance, balls) that are

manipulated in a physical world result in physical/digital events
(such as animation)
 Ben Shneiderman (1983) coined the
term DM

Three core properties:

Direct
Manipulation • Continuous representation of objects and
actions of interest
(DM) • Physical actions and button pressing instead
of issuing commands with complex syntax
• Rapid reversible actions with immediate
feedback on object of interest
 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

Benefits of Intermittent users can retain operational concepts over time

direct Error messages rarely needed

manipulation 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

 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

Disadvantages of Some tasks are better achieved through delegating, for example,

DM spell checking

Can become screen space ‘gobblers’

Moving a cursor using a mouse or touchpad can be slower than

pressing function keys to do the same actions
 Involves moving through virtual or physical
environments

• Users can explore aspects of a virtual 3D environment

• Physical environments can also be embedded with
sensors that when detect the presence of someone will

4. Exploring trigger digital or physical events to happen

Many examples of virtual environments,

including cities, parks, buildings, rooms, and
datasets
• Enable users to fly over them and zoom in and out of
different parts
Seeing things
larger than life
in VR

Cyber-Insects in the CAVE Source: Alexei A. Sharov

Exploring data
in VR
Image courtesy of Kalev
Leetaru, National Center for
Supercomputing Applications,
University of Illinois.
Responding
System takes the initiative to alert user to something that it “thinks” is of interest

System does this by:

• Detecting the location and-or presence of someone in a vicinity and notifies them on their phone or watch,
• What it has learned from their repeated behaviors

Examples:
• Alerts the user of a nearby coffee bar where some friends are meeting
• User’s fitness tracker notifies them of a milestone reached

Automatic system response without any requests made by the user

This type suggested by Christopher Lueg et al. (2018)

◦ Can get tiresome or frustrating if too many notifications
or the system gets it wrong Potential cons of
◦ What does it do when it gets something wrong? system-initiated
 Does it apologize?
 Does it allow the user to correct the advise or information? notifications
◦ Direct manipulation is good for ‘doing’ types of tasks,
for example, designing, drawing, flying, driving, or
sizing windows
◦ Issuing instructions is good for repetitive tasks, for
example, spell-checking and file management Choosing an
◦ Having a conversation is good for certain services, for interaction type
instance, finding information or requesting music
◦ Hybrid conceptual models are good for supporting
multiple ways of carrying out the same actions
◦Interaction type:

◦ A description of what the user is doing when interacting

with a system, for example, instructing, talking, browsing,
Difference
or responding between
interaction types
◦Interface style:
and interface
◦ The kind of interface used to support the interaction, for styles
instance, command, menu-based, gesture, or voice
◦ Command

◦ Speech

◦ Data-entry

◦ Form fill-in Many kinds of

◦ Query interface styles
◦ Graphical
available (see
Chapter 7)…
◦ Web

◦ Pen

◦ Augmented reality

◦ Gesture
Conceptual knowledge that is used to inform design and
guide research include:

• Paradigms
• Visions
• Theories
Other sources
• Models
• Frameworks
 Paradigm

Inspiration for a conceptual model General approach adopted by a

community for carrying out research
Shared assumptions, concepts, values, and practices
For example, desktop, ubiquitous computing, in the wild
Examples of new paradigms
in HCI
◦ Ubiquitous computing

◦ Pervasive computing

◦ Wearable computing

◦ Internet of Things (IoT)

 Visions

Invites people to imagine Provide concrete scenarios Also raise ethical questions
A driving force that frames what life will be like in 10, of how society can use the such as, privacy and trust
research and development 15, or 20 years’ time next generation of imagined
technologies

For example, Apple’s 1987 knowledge

navigator
Smart cities, smart health
Human-centered AI
◦ How to enable people to access and interact with
information in their everyday lives

◦ How to design user experiences where there is no

obvious user control Questions raised
◦ How and in what form to provide contextually-relevant by tech visions
information to people

◦ How to ensure that information passed around

interconnected devices and objects is secure
◦ Explanation of a phenomenon
◦ For example, information processing that explains how the
mind, or some aspect of it, is assumed to work

Theory
◦ Can help identify factors relevant to the design and
evaluation of interactive products
◦ Such as cognitive, social, and affective
◦ Can be used to predict what users will do with different
interfaces
◦A simplification of an HCI phenomenon

◦ Enables designers to predict and evaluate alternative

designs

◦ Abstracted from a theory coming from a contributing

discipline, for example:
Models
◦ Don Norman’s (1996) model of the Seven Stages of Action

◦ Marc Hassenzahl’s (2010) model of the user experience

◦ Set of interrelated concepts and-or specific questions
for ‘what to look for’
◦ Provide advice on how to design user experiences
◦ Helping designers think about how to conceptualize
learning, working, socializing, fun, and emotion
◦ Focus on how to design particular kinds of interfaces to
Frameworks
evoke certain responses
◦ Come in various forms:
◦ Such as steps, questions, concepts, challenges, principles,
tactics, and dimensions
A classic HCI framework
Don Norman’s (1988) framework of the relationship between the design of a conceptual model
and a user’s understanding of it

Consists of three interacting components:

◦ The Designer’s Model
 The model the designer has of how the system should work
◦ System Image
 How the system actually works, which 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
 Summary
Understanding the problem space
Developing a conceptual model involves: Being clear about your assumptions and claims
Specifying how the proposed design will support users

A conceptual model is a high-level What users can do with it and the concepts they need to understand how to
description of a product in terms of: interact with it

Interaction types provide a way of thinking about how to support user’s activities

Paradigms, visions, theories, models, and Provide ways of framing design and research
frameworks