CSE 6275 / 6391
Advanced Human Computer Interaction (HCI)
Lecture 6 – Conceptualizing Interaction
Winter 2024
Dr. Hasan Mahmud | hasan@iut-dhaka.edu
Conceptualizing Interaction
• Imagine you have been asked to design an
application to let people organize, store, and
retrieve their email in a fast, efficient and
enjoyable way.
• What would you do? How would you start?
CSE 6275 | Adv. HCI | Winter 2024 2
Understanding the problem space
• Why, what and how?
– 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?
CSE 6275 | Adv. HCI | Winter 2024 3
Understanding the problem space…
CSE 6275 | Adv. HCI | Winter 2024 5
Understanding the problem space…
• Based on this analysis of the previous
scenario, a set of assumptions about the user
needs for supporting this activity more
effectively were then made. These included:
– If the bookmarking function was improved users
would find it more useful and use it more to
organize their web addresses.
– Users need a flexible way of organizing web
addresses they want to keep for further reference
or for sending on to other people.
CSE 6275 | Adv. HCI | Winter 2024 6
A framework for analysing the
problem space
• 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?
• When designing for a new user experience how will the
proposed design extend or change current ways of doing
things?
CSE 6275 | Adv. HCI | Winter 2024 7
What is assumption and claim?
• Assumption:
– Taking something for granted when it needs further investigation.
– E.g. People will want to watch TV while driving
• Claim:
– Stating something to be true when it still open to question.
– E.g. a multimodal style of interaction for controlling GPS, one that
involves speaking while driving, is safe.
CSE 6275 | Adv. HCI | Winter 2024 8
An example
• What do you think were the main
assumptions made by developers of online
photo sharing and management applications,
like Flickr?
CSE 6275 | Adv. HCI | Winter 2024 9
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 Flickr’s website (2005): “is almost certainly the best
online photo management and sharing application in the
world”
CSE 6275 | Adv. HCI | Winter 2024 10
Another example
• What are the assumption you will take to
provide WAP-enabled services in your mobile
phone or handheld devices?
• What about the problem space?
CSE 6275 | Adv. HCI | Winter 2024 11
CSE 6275 | Adv. HCI | Winter 2024 12
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
CSE 6275 | Adv. HCI | Winter 2024 13
Conceptual model
• A conceptual model is:
“A high-level description of how a system is organized and
operates.” (Johnson and Henderson, 2002, p. 26)
• Conceptual models enables:
“designers to straighten out their thinking before they start
laying out their widgets” (p. 28)
• Developing a conceptual model involves, envisioning the
proposed product based on the users' needs and other
requirements identified.
• Conceptual model based on objects
• Conceptual model based on interface metaphor.
• Conceptual model based on activities
CSE 6275 | Adv. HCI | Winter 2024 14
Conceptual model
• Conceptual model is a strategy; a framework of
general concepts and their interrelations.
• Johnson and Hnderson (2002) propose that, a
conceptual model should comprise the following
components:
– The major metaphor and analogies to understand what a
product is for and how to use it for an activity
– The concepts that people are exposed to through the
product, task–domain objects, their attributes, and
operations (e.g. saving, revisiting, organizing)
– The relationships and mapping between these concepts
CSE 6275 | Adv. HCI | Winter 2024 15
CSE 6275 | Adv. HCI | Winter 16
2024
What is and why need a conceptual model?
• A conceptual model is 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 colour
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
– Mode of interaction vs. Style of interaction
– Interface metaphor
CSE 6275 | Adv. HCI | Winter 2024 17
A classic conceptual model: the spreadsheet
• VisiCalc (Bricklin and
Frankston)
• Analogous to ledger sheet
• Interactive and
computational
• Easy to understand
• Greatly extending what
accountants and others
could do
www.bricklin.com/history/refcards.htm
CSE 6275 | Adv. HCI | Winter 2024 18
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 user’s familiarity with ledger sheets
• Got the computer to perform a range of different calculations
and recalculations in response to user input
CSE 6275 | Adv. HCI | Winter 2024 19
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)
CSE 6275 | Adv. HCI | Winter 2024 20
The Star interface
CSE 6275 | Adv. HCI | Winter 2024 21
Conceptual model based on Interface
metaphor
• Metaphors are commonly used to explain
something that is unfamiliar or hard to grasp
by way of comparison with something that is
familiar and easy to grasp.
• Metaphors are used in interaction design
• Interface metaphors are often composites
CSE 6275 | Adv. HCI | Winter 2024 22
Interface metaphor
• E.g. Button, Folders, Icons, Window controls, paint apps,
notepad, task bar, sticky notes, speaker volume control,
PowerPoint slides, email, media player, recycle bin, calculator,
etc.
CSE 6275 | Adv. HCI | Winter 2024 23
Benefits of interface metaphors
CSE 6275 | Adv. HCI | Winter 2024 24
Problems with interface metaphors
CSE 6275 | Adv. HCI | Winter 2024 25
Conceptual model based on activities -
Interaction types
• Instructing
– Users issues instructions to a system
– Typing in commands using keyboard and function keys, selecting options via
menus, pressing buttons etc.
• Conversing
– interacting with the system as if having a conversation via dialog
– Users speak to the system or type in questions to which the system replies
via text or speech output.
• Manipulating
– interacting with objects in a virtual or physical space by manipulating them
– Opening, holding, closing, placing.
• Exploring
– Moving through a virtual environment or a physical space
– Virtual reality systems and 3D world.
CSE 6275 | Adv. HCI | Winter 2024 26
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
CSE 6275 | Adv. HCI | Winter 2024 27
Vending machines
Describe the
conceptual model
underlying the
two vending
machines
Which is easiest
to use?
CSE 6275 | Adv. HCI | Winter 2024 28
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 menu-driven
systems to more complex ‘natural language’ dialogues
• Examples include advice-giving systems and help systems
CSE 6275 | Adv. HCI | Winter 2024 29
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:
CSE 6275 | Adv. HCI | Winter 2024 30
Manipulating
• Exploit’s users’ knowledge of how they move and
manipulate in the physical world
• Virtual objects can be manipulated by moving, selecting,
opening, and closing them
CSE 6275 | Adv. HCI | Winter 2024 31
Direct manipulation
• 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
CSE 6275 | Adv. HCI | Winter 2024 32
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
CSE 6275 | Adv. HCI | Winter 2024 33
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
CSE 6275 | Adv. HCI | Winter 2024 34
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
CSE 6275 | Adv. HCI | Winter 2024 35
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
CSE 6275 | Adv. HCI | Winter 2024 36
A virtual world
CSE 6275 | Adv. HCI | Winter 2024 37
Which conceptual model is best?
CSE 6275 | Adv. HCI | Winter 2024 38
Design Metaphor in HCAI
• Builds on the HCAI framework
• Design metaphors in HCAI directly deals with
two design goals:
– Science goal: Study of computational agents that
act intelligently. E.g. autonomous vehicle, playing
chess, identifying cancer tumor
– Innovation goal: develop computers that amplify
human abilities so people can do the job
themselves. E.g. Map-based navigation systems,
NL translation, search query completion
CSE 6275 | Adv. HCI | Winter 2024 39
Design Metaphor in HCAI
Four pairs of design metaphors:
• Intelligent Agents and Supertools
• Teammates and Tele-bots
• Assured Autonomy and Control Centers
• Social Robots and Active Appliances
CSE 6275 | Adv. HCI | Winter 2024 40
Design Metaphor in HCAI
Example 1: Example 2: User-
Design Metaphor
Description Autonomous (High Controlled (High
Pair
Autonomy) Human Control)
Autonomous agents Intelligent Agent: Supertool: DSLR
that perform tasks Google Assistant or Camera with
Intelligent Agents independently vs. Amazon Alexa manual settings for
vs. Supertools tools that empower autonomously user control over
users by enhancing responds to focus, exposure,
control requests. etc.
Systems designed Teammate:
Tele-bot: da Vinci
to work alongside Assembly-line robot
Surgical System,
humans as that collaborates
Teammates vs. operated by a
"partners" vs. tele- with humans,
Tele-bots surgeon for precise
operated devices adjusting
control during
under full human movements in real-
surgery.
control time.
CSE 6275 | Adv. HCI | Winter 2024 41
Design Metaphor in HCAI
Example 1: Example 2: User-
Design Metaphor
Description Autonomous (High Controlled (High
Pair
Autonomy) Human Control)
Autonomous
systems designed Control Center: Air
Assured Autonomy:
for safe, traffic control
Agricultural drone
Assured Autonomy independent system with
scans crops
vs. Control Centers operation vs. automated tracking
autonomously for
systems monitored but overseen by
health monitoring.
and controlled by human controllers.
humans
Active Appliance:
Robots designed for Social Robot: Paro
Smart washing
social interaction the therapeutic
machine with
Social Robots vs. vs. devices that robot, which
programmable
Active Appliances perform tasks interacts with
cycles that runs
without social patients like a
independently of
engagement companion.
human input.
CSE 6275 | Adv. HCI | Winter 2024 42
Design Metaphor in HCAI
• Successful designs seem to come from a
combined strategy: employing automation for
tasks for which machines produce reliable
results, while leaving users the creative or
safety choices that are important to them.
CSE 6275 | Adv. HCI | Winter 2024 43
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
• 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
• Design metaphor used by the developers in HCAI research
CSE 6275 | Adv. HCI | Winter 2024 44
