HCI:

CONCEPTUALIZING
INTERACTION
DESIGN
Dr Kami Vaniea

1
First, the news…
 Animal-Computer Interaction
 https://www.youtube.com/embed/MyHjq8Od-Xg
 https://www.youtube.com/watch?v=_vYdDrMHC0
U

2
 Chapter 2
UNDERSTANDING AND CONCEPTUALIZING
INTERACTION DESIGN?
Today I will be using allot of the book’s
slides
 You can easily identify slides from the book by their
orange boarder
 We are shifting to talking about design for the next
part of the class
 The basics of design are, well, the basics and the
book explains them well

4
Understanding the problem space

– What do you want to create?

– What are your assumptions?

– Will it achieve what you hope it will?

www.id-book.com 5
 What is an assumption?
• taking something for granted when it
needs further investigation
– e.g. people will want to watch TV while driving

http://www.ibiblio.org/jlillie/cooltown/lillie.htm

www.id-book.com 6
Assumptions: realistic or wish-list?

• People would not mind wearing the glasses that are

needed to see in 3D in their living rooms –
reasonable
• People would not mind paying a lot more for a new
3D-enabled TV screen – not reasonable
• People would really enjoy the enhanced clarity and
color detail provided by 3D – reasonable
• People will be happy carrying around their own
special glasses – reasonable only for a very select
bunch of users

www.id-book.com 7
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

www.id-book.com 8
 Conceptual model
• A conceptual model is:
– “…a high-level description of how a system is
organized and operates” (Johnson and Henderson,
2002, p26)

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

www.id-book.com 9
In other words: have a plan for what
you are going to build and why

10
 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

www.id-book.com 11
Think-pair-share
Design a new  What will the users be doing
stopwatch app 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?

12
Many of the methods we have already
learned can help you build a conceptual
model of what you want to build

13
 Which interaction type to choose?
• Need to determine requirements and user needs

• Take budget and other constraints into account

• Also will depend on suitability of technology for

activity being supported

• This is covered in course when designing

conceptual models

www.id-book.com 14
 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

www.id-book.com 15
Video playing interface metaphors

16
 Material Metaphors
• The card is a very popular UI

• Why?: Has familiar form factor

• Material properties are added,

giving appearance and
physical behavior, e.g. surface
of paper

www.id-book.com 17
 Activity
• Describe the components of the
conceptual model underlying most online
shopping websites, e.g.
– Shopping cart
– Proceeding to check-out
– 1-click
– Gift wrapping
– Cash till?

www.id-book.com 18
 Interface metaphors
• Interface designed to be similar to 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

www.id-book.com 19
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

www.id-book.com 20
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

www.id-book.com 21
 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

www.id-book.com 22
 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

www.id-book.com 23
 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

www.id-book.com 24
Which is easiest and why?

www.id-book.com 25
 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

www.id-book.com 26
Would you talk with Anna?

www.id-book.com 27
 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

www.id-book.com 28
 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)
www.id-book.com 29
 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

www.id-book.com 30
 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

www.id-book.com 31
 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

www.id-book.com 32
 4. Exploring
• Involves users moving through virtual or physical
environments

• Physical environments with embedded sensor

technologies

www.id-book.com 33
 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 specialised 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

www.id-book.com 34
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

www.id-book.com 35
 Many kinds of interface types
available including…

• Command
• Speech
• Data-entry
• Form fill-in
• Query
• Graphical
• Web
• Pen
• Augmented reality
• Gesture
www.id-book.com 36
 Paradigm
• Inspiration for a conceptual model
• General approach adopted by a
community for carrying out research
– shared assumptions, concepts, values, and
practices
– e.g. desktop, ubiquitous computing, in the wild

www.id-book.com 37
 Examples of new paradigms
• Ubiquitous computing (mother of them all)
• Pervasive computing
• Wearable computing
• Tangible bits, augmented reality
• Attentive environments
• Transparent computing
– and many more….

www.id-book.com 38
 Fitts’ Law (Fitts, 1954)
• Fitts’ Law predicts that the time to point at an
object using a device is a function of the
distance from the target object & the object’s
size.

• The further away and the smaller the object,

the longer the time to locate it and point to it.

• Fitts’ Law is useful for evaluating systems for

which the time to locate an object is
important, e.g., a cell and smart phones,
a handheld and mobile devices.
www.id-book.com 39
Fitts’ Law
𝐷
𝑇=𝑘 𝑙𝑜𝑔2 ( ) + 1.0
𝑆
 Where
 T = Time to move the pointer to the target
 D = Distance between the pointer and the target
 S = Size of the target
 k is a constant of approximately 200ms/bit

40
 Summary
• Developing a conceptual model involves good understanding
of the problem space, specifying what it is you are doing, why,
and how it will support users

• A conceptual model is a high-level description of a product in

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

• Interaction types (e.g. conversing, instructing) provide a way

of thinking about how best to support user’s activities

• Paradigms, visions, theories, models, and frameworks provide

different ways of framing and informing design and research

www.id-book.com 41
Questions?

42