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
People want entertainment and navigation
system in their car (i.e. they want to
watch TV while driving)
Claim
A multimodal style of interaction for
controlling the entertainment and
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