Chapter 2:

Understanding and
conceptualizing interaction
Adam Amril Jaharadak
May 2012

Recap
HCI has moved beyond designing interfaces
for desktop machines
Concerned with extending and supporting all
manner of human activities
Designing for user experiences, including:

Making work effective, efficient and safer

Improving and enhancing learning and training
Providing enjoyable and exciting entertainment
Enhancing communication and understanding
Supporting new forms of creativity and expression

Adam, 2012

Understanding the problem

space
What do you want to create?
What are your assumptions?
What are your claims?
Will it achieve what you hope it will?
If so, how?

Adam, 2012

A framework for analysing

the problem space
Are there problems with an existing
product or user experience?
Why do you think there are problems?
How do you think your proposed design
ideas might overcome these?
When designing for a new user
experience how will the proposed
design extend or change current ways
of doing things?
Adam, 2012

An example
What do you think were the main
assumptions made by developers
of online photo sharing and
management applications, like
Flickr?

Adam, 2012

Adam, 2012

Assumptions and claims

Assumptions
Able to capitalize on the hugely successful
phenomenon of blogging
Just as people like to blog so will they want
to share with the rest of the world their
photo collections and get comments back
People like to share their photos with the
rest of the world

A claim
From Flickrs website (2005): is almost
certainly the best online photo management
and sharing application in the world

Adam, 2012

From problem space to

design space
Having a good understanding of
the problem space can help inform
the design space
e.g., what kind of interface, behavior,
functionality to provide

But before deciding upon these it

is important to develop a
conceptual model
Adam, 2012

Conceptual model
Need to first think about how the
system will appear to users (i.e. how
they will understand it)
A conceptual model is:
a high-level description of how a system is
organized and operates. (Johnson and
Henderson, 2002, p. 26)

Adam, 2012

What is and why need a

conceptual model?
Not a description of the user interface
but a structure outlining the concepts
and the relationships between them
Why not start with the nuts and bolts of
design?
Architects and interior designers would not think
about which color curtains to have before deciding
where the windows will be placed in a new building
Enables designers to straighten out their thinking
before they start laying out their widgets (p. 28)
Provides a working strategy and a framework of
general concepts and their interrelations
Adam, 2012

Helps the design team

Orient themselves towards asking
questions about how the conceptual
model will be understood by users
Not to become narrowly focused early
on
Establish a set of common terms they
all understand and agree upon
Reduce the chance of
misunderstandings and confusion
arising later on
Adam, 2012

Main components
Major metaphors and analogies that are
used to convey how to understand what
a product is for and how to use it for an
activity.
Concepts that users are exposed to
through the product
The relationships between the concepts
e.g., one object contains another

The mappings between the concepts

and the user experience the product is
designed to support
Adam, 2012

A classic conceptual model: the

spreadsheet
Analogous to ledger
sheet
Interactive and
computational
Easy to understand
Greatly extending
what accountants
and others could do

www.bricklin.com/history/refcards.htm

Adam, 2012

Why was it so good?

It was simple, clear, and obvious to the
users how to use the application and
what it could do
it is just a tool to allow others to work
out their ideas and reduce the tedium of
repeating the same calculations.
capitalized on users familiarity with
ledger sheets
Got the computer to perform a range of
different calculations and recalculations
in response to user input
Adam, 2012

Another classic
8010 Star office system targeted at
workers not interested in computing per
se
Spent several person-years at
beginning working out
the conceptual model
Simplified the electronic world, making
it seem more familiar, less alien, and
easier to learn
Johnson et al (1989)
Adam, 2012

The Star interface

Adam, 2012

Interface metaphors
Designed to be similar to a physical entity but
also has own properties
e.g. desktop metaphor, search engine
Exploit users 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
People find it easier to learn and talk about
what they are doing at the computer interface
in terms familiar to them
Adam, 2012

Benefits of interface
metaphors
Makes learning new systems easier
Helps users understand the
underlying conceptual model
Can be innovative and enable the
realm of computers and their
applications to be made more
accessible to a greater diversity of
users
Adam, 2012

Problems with interface

metaphors (Nelson, 1990)
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

Adam, 2012

Interaction types
Instructing
issuing commands using keyboard and function keys
and selecting options via menus

Conversing
interacting with the 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

Adam, 2012

Instructing
Where users instruct a system by telling
it what to do
e.g., tell the time, print a file, find a photo

Very common interaction type

underlying a range of devices and
systems
A main benefit of instructing is to
support quick and efficient interaction
good for repetitive kinds of actions
performed on multiple objects
Adam, 2012

Vending machines
Describe the
conceptual
model
underlying the
two vending
machines
Which is
easiest to use?

Adam, 2012

Ticketing System
How about the
conceptual
model of this
ticketing
system?
Can you
describe it?

Adam, 2012

Conversing
Like having a conversation with another
human
Differs from instructing in that it more like
two-way communication, with the system
acting like a partner rather than a machine
that obeys orders
Ranges from simple voice recognition menudriven systems to more complex natural
language dialogues
Examples include search engines, advicegiving systems and help systems
Adam, 2012

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
e.g. child types into a search engine, that
uses natural language the question:
How many legs does a centipede have? and
the system responds:

Adam, 2012

Conversing

Adam, 2012

Manipulating
Exploits users knowledge of how they move
and manipulate in the physical world
Virtual objects can be manipulated by moving,
selecting, opening, and closing them
Tagged physical objects (e.g., bricks, blocks)
that are manipulated in a physical world (e.g.,
placed on a surface) can result in other
physical and digital events

Adam, 2012

Manipulatives (PicoCrickets)

Adam, 2012

Direct Manipulation (DM)

Shneiderman (1983) coined the term Direct
Manipulation
Came from his fascination with computer
games at the time
Proposes that digital objects be designed so
they can be interacted with analogous to how
physical objects are manipulated
Assumes that direct manipulation interfaces
enable users to feel that they are directly
controlling the digital objects

Adam, 2012

Example of DM
Visual progress of moving a
folder to the trash:
The "trash" on the desktop
is an excellent example of
direct manipulation within
computer systems

Adam, 2012

Core principles of DM
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
Adam, 2012

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

Adam, 2012

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 rather than manipulating
e.g., spell checking
Moving a mouse around the screen can be
slower than pressing function keys to do same
actions
Adam, 2012

Exploring
Involves users moving through virtual
or physical environments
Examples include:
3D desktop virtual worlds where people
navigate using mouse around different
parts to socialize (e.g., Second Life)
CAVEs where users navigate by moving
whole body, arms, and head
physical context aware worlds, embedded
with sensors, that present digital
information to users at appropriate places
and times

Adam, 2012

A virtual world

Adam, 2012

A CAVE

Adam, 2012

Activity
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?
Adam, 2012

Theories, models and

frameworks
Are used to inform and inspire design
A theory is a well-substantiated explanation of
some aspect of a phenomenon
A model is a simplification of some aspect of
humancomputer interaction intended to
make it easier for designers to predict and
evaluate alternative designs
A framework is a set of interrelated concepts
and/or a set of specific questions

Adam, 2012

Main differences
Theories tend to be comprehensive,
explaining humancomputer
interactions
Models tend to simplify some aspect of
humancomputer interaction
Frameworks tend to be prescriptive,
providing designers with concepts,
questions, and principles to consider
Adam, 2012

Summary points
Need to have a good understanding of the problem space
specifying what it is you are doing, why, and how it will
support users in the way intended

A conceptual model is a high-level description of a

product
what users can do with it and the concepts they need to
understand how to interact with it

Decisions about conceptual design should be made

before commencing any physical design
Interface metaphors are commonly used as part of a
conceptual model

Adam, 2012

Summary points
Interaction types (e.g., conversing,
instructing) provide a way of thinking about
how best to support the activities users will be
doing when using a product or service
Theories, models, and frameworks provide
another way of framing and informing design
and research

Adam, 2012