Understanding

and
Conceptualizing
interaction

www.id-book.com 1 ©2011
Outline

•‘Problem space’
•Conceptualizing interaction
•Use of metaphors in conceptual model
•Theories, models and frameworks

www.id-book.com 2 ©2011
 Problem space

•A mental representation of a particular

problem, including initial, final and possible
intermediates states (Wiktionary, 2011)

•The human's way of characterizing the problem

or decision space (Latour , 1995)

www.id-book.com 3 ©2011
 A framework for analysing the problem space

•Core questions to aid a design team:

•Are there problems with an existing
product, portal or user experience?
•Why do you think your proposed
design ideas might overcome these?
•How will the proposed design extend
or change the current ways of doing
things?

www.id-book.com 4 ©2011
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 and

functionality to provide
• Design based on conceptual model

www.id-book.com 5 ©2011
Conceptualizing

• To form a concept or concepts of, and especially to

interpret in a conceptual way

• To form an idea about what something is like or

how it should work

• The ability to invent or formulate an idea or

concept.

www.id-book.com 6 ©2011
Benefits of conceptualising
• Orientation
• enables design teams to ask specific questions about how
the conceptual model will be understood
• Open-minded
• prevents design teams from becoming narrowly focused
early on
• Common ground
• allows design teams to establish a set of commonly agreed
terms

Id-book.com
www.id-book.com 77 ©2011
©2011
 Benefits of conceptualising
• Design a web for individuals with vision impairment
• A developer could consider that someone who is
blind "does not see“
• The developer must ensures all the technical
specifications necessary to make a page accessible
for someone who is blind
• Provide equivalent alternatives page elements (e.g.,
alternative text, associated form labels or
associated column and row headers in data tables)

www.id-book.com 8 ©2011
Benefits of conceptualising
• Design considerations for individuals with cognitive disabilities.
• Pair icons or graphics with text so that contextual cures are
available.
• Use the simplest language possible for the content
• Allow for text to be enlarged.
• Avoid scrolling text as it increases pressure to read at set
speeds.
• Save your best contrast for items that carry content, allow
non-content areas to be muted or displayed in pastels.
• Provide demonstrations or audio descriptions whenever
possible.
• Avoid animated or blinking icons unless necessary for
content.

www.id-book.com 9 ©2011
 Conceptual model
• A model is anything used in any way to represent
anything else
• A toy model which may be assembled, and may even
be made to work like the object it represents.
• They are used to help us know and understand the
subject matter they represent
• Need to think about how the system will appear to
users (i.e how they will use it)

www.id-book.com 10 ©2011
 Conceptual model
• Need to think about how the system will appear to
users (i.e how they will use it)
• A conceptual model is a high level description of how
a system is organized and operates (Johnson and
Henderson, 2002, p.26)
• It is used to convey the fundamental principles and
basic functionality of the system in which it
represents.

www.id-book.com 11 ©2011
 Conceptual models
• Many kinds and ways of classifying them
• We describe them in terms of core activities and objects
• Also in terms of interface metaphors
"The way we think, what we experience, and what we do every day
is very much a matter of metaphor."
- Lakoff and Johnson

www.id-book.com 12 ©2011
Conceptual model of calendars

www.id-book.com 13 ©2011
Conceptual model of physical
calendars

• Compare a pocket size calendar, a wall calendar and a wall

planner.
• The conceptual model for the pocket calendar was for someone who
wanted to know a specific date, and their personal schedule.
• The conceptual model for the wall calendar was for someone or a group
of people to know the events in a entire month.
• The conceptual model for the wall planner is for an organization to map
out an entire year’s worth of information.
• All three of these objects arose from the different needs of ways to
conceptually represent time and information.

www.id-book.com 14 ©2011
Conceptual model of electronic calendars

• The electronic calendars follow the same conceptual design as

the hard copy calendars, but they offer much more
functionality, that might take some getting used to.

• Electronic calendars are easier to use and maintain.

• The conceptual model of the electronic calendar is to not just
store time and information but also be interactive with the
user.

• The electronic calendars still go by the metaphor of bigger

calendar equals longer span of time. So user do not need to
learn anything new.
www.id-book.com 15 ©2011
Components
• Metaphors and analogies
• understand what a product is for and how to
use it for an activity
• Concepts that people are exposed to through the
product
• task–domain objects, their attributes, and
operations (e.g. saving, revisiting, organizing)
• Relationship and mappings between these
concepts

www.id-book.com 16 ©2011
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 17 ©2011
Metaphors
• Commonly used to explain something that is unfamiliar and easy to
grasp by way of comparison with something that is easy and familiar
• Example:
• Online game – rules, a winner,

www.id-book.com 18 ©2011
Metaphors
• Metaphors can be a powerful tool for improving the user
experience. Metaphors can:
• explain abstract or complex concepts
• create a sense of familiarity
• trigger emotions
• draw attention to your site or certain components of it
• motivate users to take action

www.id-book.com 19 ©2011
Metaphors
Metaphors can also be used to explain a process. Datashift shows
an imaginary machine that turns different social media icons into
statistics that can be displayed on your screen:

www.id-book.com 20 ©2011
Metaphors
Metaphors Can Draw the Attention of Users

A nametag means that you are a

registered member, a paying
attendee, or entitled to things
people without a nametag are not
entitled to.

www.id-book.com 21 ©2011
Interface metaphors

www.id-book.com 22 ©2011
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 23 ©2011
Interface metaphors

www.id-book.com 24 ©2011
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 25 ©2011
 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 26 ©2011
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 27 ©2011
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 28 ©2011
1. Instructing

• Where users instruct asystem 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 29 ©2011
 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 30 ©2011
 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 31 ©2011
Conversing

• “If our line is busy,

kindly press '1 to leave your telephone number or ….
press '2' to leave a voice message.
Our Customer Service Assistant will return your call as soon as
possible”

www.id-book.com 32 ©2011
 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 33 ©2011
Direct Manipulation
• Shneiderman (1983) coined the term DM, came from
his fascination with computer games at the time
• Came from his fascination with computer games at
the time
• Proposes that digital objects can 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

www.id-book.com 34 ©2011
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 35 ©2011
 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
• Moving a mouse around the screen can be slower than pressing
function keys to do same actions

www.id-book.com 36 ©2011
 4. Exploring

• Involves users moving through virtual or physical

environments

• Physical environments with embedded sensor

technologies
• Context aware
• Examples:
• 3D Virtual Tour to Masjid al-Haram - Kaaba –

www.id-book.com 37 ©2011
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 38 ©2011
 Many kinds of interface types available…

• Command
• Speech
• Data-entry
• Form fill-in
• Query
• Graphical
• Web
• Pen
• Augmented reality
• Gesture
(for more see chapter 6)

www.id-book.com 39 ©2011
 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 40 ©2011
 Theory

• Explanation of a phenomenon
• e.g. information processing that explains how the mind, or some aspect of it, is
assumed to work
• Can help identify factors
• e.g. cognitive, social, and affective, relevant to the design and evaluation of
interactive products

www.id-book.com 41 ©2011
 Models

• 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

www.id-book.com 42 ©2011
Framework

• Set of interrelated concepts and/or specific questions

for ‘what to look for’
• Many in interaction design
• e.g. Norman’s conceptual models, Benford’s trajectories
• Provide advice on how to design
• e.g. steps, questions, concepts, challenges, principles, tactics and dimensions

www.id-book.com 43 ©2011
 Summary

• Important to have a good understanding of the problem space

• Fundamental aspect of interaction design is to develop a
conceptual model
• Interaction modes and interface metaphors provide a
structure for thinking about which kind of conceptual model to
develop
• Interaction styles are specific kinds of interfaces that are
instantiated as part of the conceptual model
• Paradigms, theories, models and frameworks can also shape a
conceptual model

www.id-book.com 44 ©2011