TME3423/TMI3053/TMS3843/TMT3683Human Computer

Interaction
Semester 1, 2020/21
Unit 2: Interaction Design – Basic Introduction
Part 1:Conceptualizing Interaction
 Topics

• Conceptualizing interaction

• Conceptual models

• Who is involved in interaction design

2 HCI-Sem1-2020/21
Adapted from Interaction Design Beyond Human Computer Interaction 5th 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 HCI-Sem1-2020/21
 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

4
• HCI-Sem1-2020/21
List down the assumptions and claims, then try to
support/defend/explain why is it a good/bad idea
 Conceptualizing interaction

Assumption Claim
People want entertainment and navigation A multimodal style of interaction for
system in their car (i.e. they want to watch controlling the entertainment and
TV while driving) navigation system (involves speaking and
gesturing while driving) is perfectly safe

5 HCI-Sem1-2020/21
 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 HCI-Sem1-2020/21
 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 HCI-Sem1-2020/21
 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 HCI-Sem1-2020/21
 Conceptual models

• The core components of conceptual models are:

Metaphors
& Concepts
Analogies

Relationship
Mappings
s

9 HCI-Sem1-2020/21
 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 HCI-Sem1-2020/21
 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 HCI-Sem1-2020/21
 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 HCI-Sem1-2020/21
 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 HCI-Sem1-2020/21
 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 HCI-Sem1-2020/21
 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 objects experience design DiCoT
Science fiction
Mobile & pervasive
computing

Big data and

Internet of Things

15 HCI-Sem1-2020/21
 Who is involved in interaction design?

• Ideally carried out by multidisciplinary teams

• Engineers, designers, programmers, psychologists, marketing people, artists, product
managers etc.

• It is rarely the case a design team would have all these professionals

• Who to include in a team depends on factors:

• Company’s design philosophy, size, purpose, product line

• Benefits: more ideas generated, more methods developed, more creative and original
designs produced, more perspectives

• Downside: costs, different perspectives, communication, confusion,

misunderstanding, integration

16 HCI-Sem1-2020/21
 Summary

• How to conceptualize interaction and why

• Available conceptual models

• Who are the people involve in interaction design

17 HCI-Sem1-2020/21