TME3423/TMI3053/TMS3843/TMT3683
Human Computer Interaction
Unit 2: Interaction Design – Basic Introduction
Part 1: Introduction to Interaction
Topics
What is interaction?
Interaction types
The process of interaction design
Approaches to interaction design
Who is involved in interaction design
Conceptualizing interaction
Conceptual models
2
Adapted from Interaction Design Beyond Human Computer Interaction 5 th Edition (Sharp et al, 2019)
Conceptualizing interaction
Before trying to build anything, it is important to conceptualize the new ideas
Also known as creating proof of concept
Many unknowns need to be considered in the initial stages, especially if it is a
new product being proposed
Why do we need to do this?
Check ideas and assumptions about benefits of the product
Enable designers to articulate the basic building blocks when developing the
product
Force designers to explain how users will understand, learn about and interact with
the product
To get concrete models of how a product will work, what design features to
include, and the amount of functionality that is needed
3
Conceptualizing interaction
Interaction can be conceptualized through:
Conceptual models
Interaction types
Paradigms, visions, theories, models and frameworks
It is important to be clear about the assumptions and claims when
starting a project
Assumptions: Taking something for granted that requires further
investigation
Claims: Stating something to be true, when it is still open to question
List down the assumptions and claims, then try to
support/defend/explain why is it a good/bad idea
4
Conceptualizing interaction
Assumption Claim
People want entertainment and navigation A multimodal style of interaction for
system in their car (i.e. they want to controlling the entertainment and
watch TV while driving) navigation system (involves speaking and
gesturing while driving) is perfectly safe
5
Conceptualizing interaction
Working through the assumptions and claims enables the problems to be
explained and explored, and leads to a specific avenue of investigation
Framework of core questions to aid design teams in this process:
Are there problems with an existing product/user experience? If so, what are they?
Why do you think there are problems?
What evidence do you have to support the existence of these problems?
How do you think your proposed design ideas might overcome these problems?
Making clear the assumptions and claims should be carried out early on and
throughout a project
6
Conceptualizing interaction
Next, the design space has to be conceptualized, through articulating the
proposed solution as a conceptual model with respect to the UX
The design team will use the conceptual model as the basis to develop more
detailed and concrete aspects of the design, which leads to
Producing designs that match with users’ tasks
Allowing for faster development time
Resulting in improved customer uptake
Needing less training and customer support
A conceptual model provides a working strategy and a framework of general
concepts and their interrelations
What people can do with the product and what concepts are needed to understand
how to interact with it
7
Conceptual models
A conceptual model is a “high-level description of how a system is organized
and operates” (Johnson & Henderson, 2002)
Can be represented as a textual description/diagrammatic form
Once formulated and agreed upon, the conceptual model can become a
shared blueprint and later on, the testable proof of concept
The conceptual model is used as the basis to add more details and concrete
aspects of the design
8
Conceptual models
The core components of conceptual models are:
Metaphors
& Concepts
Analogies
Relationships Mappings
9
Conceptual models
The metaphors and analogies that convey to people how to understand what a product is for
and how to use it for an activity
E.g. browsing, bookmarking
The concepts that people are exposed to through the product, including task-domain objects
they create and manipulate, their attributes, and operations that can be performed on them
E.g. saving, revisiting, organizing
The relationships between those concepts
E.g. whether one object contains another, the relative importance of actions to others,
whether an object is part of another
The mappings between the concepts and the user experience the product is designed to
support/invoke
E.g. one can revisit through looking at a list of visited sites, most frequently visited, or saved
websites
10
Conceptual models
The user experience is determined by how the various metaphors, concepts, and
their relationships are organized
By explaining these, the design team can debate the pros and cons of providing
different methods and how they support the main concepts
The design team can systematically work out what will be the most simple,
effective and memorable ways of supporting users in carrying out their tasks
The best conceptual models are those that appear obvious – the operations they
support being intuitive to use
Conceptual models can also be overly complex, especially if they are the result of
a series of upgrades (more and more functions and ways of doing something are
added to the original CM)
11
Conceptual models
Example: The desktop/Xerox Star
This is a classic conceptual model
Developed by Xerox in 1981
Forerunner of today’s Mac and Windows desktop interfaces
Based on the conceptual model that include knowledge of an
office
Papers, folders, filing cabinets, mailboxes were
represented as icons on screen
Designed to have some properties of their physical
counterparts
Drag a document across desktop screen = pick up a piece of
paper and move it
Drag a document into a folder = place a physical document
into a physical cabinet
12
Conceptual models
Example: online shopping website
Based on the core aspects of customer experience at a shopping mall
Place items that a customer wants into purchase into a shopping cart/basket
Proceed to checkout when ready to pay
Example: the digital spreadsheet
Based on accounting experience
Example: World Wide Web
Based on reading and browsing through documents
There are collections of patterns that are readily available for ID designers to use –
designers do not need to start from scratch
E.g. online forms, mobile navigation
13
Paradigms, visions, theories, models, frameworks
These are other sources of conceptual inspiration and knowledge that are
used to inform design and guide research
Paradigm: a general approach/set of practices upon which a community has agreed
Vision: future scenario that frames R&D
Theory: a well-substantiated explanation of some aspect of a phenomenon
Model: simplification of some aspect of HCI intended to make it easier for
designers to predict & evaluate alternative designs
Framework: a set of interrelated concepts and/or set of specific questions
intended to inform a particular domain/analytic method
14
Paradigms, visions, theories, models, frameworks
Paradigm Vision Theories Models Frameworks
How do design Apple Knowledge Theory of Don Norman’s 7 Don Norman’s
user-centered Navigator (1987) – information stages of action explanation on the
desktop 25 years before processing model relationship
applications Siri between
Distributed User models Designer’s Model,
Ubiquitous Transforming cognition System Image and
computing – everyday tasks Hassenzahl’s User’s Model
computers are part through AI model of
of everyday experience design Furniss &
objects Science fiction Blanford’s DiCoT
framework
Mobile & pervasive
computing
Big data and
Internet of Things
15
Summary
What is interaction?
Interaction types
The process of interaction design
Approaches to interaction design
Who is involved in interaction design
Conceptualizing interaction
Conceptual models
16
