TME3423/TMI3053/TMS3843/TMT3683Human Computer

Interaction
Semester 1, 2020/21
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

• User-centered approach

• 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)
 What is interaction?

• Interaction is the dialogue between a user and a product (system/app)

• It is both physical and emotional in nature

• It is manifested in the interplay between form, function, and technology as

experienced over time

3 HCI-Sem1-2020/21
Source: [Link]
 Interaction types

• “An interaction is a transaction between 2 entities, typically in exchange of

information. It takes place between people, machines, and systems, in a
variety of combination.” – (Dan Saffer, 2017)

4 HCI-Sem1-2020/21
 Interaction types

• The ways a user interacts with a product/application

instructing conversing
• 5 types:

manipulating exploring

responding

5 HCI-Sem1-2020/21
 Interaction types – instructing

• User issue instructions to the system

• Examples: Type in commands, select option from menu, press buttons

• Benefit: the interaction is quick and efficient

• Suitable for when there is a need to frequently repeat actions (e.g. save,
delete)

6 HCI-Sem1-2020/21
 Interaction types – instructing

Save document

Vending machine Touchscreen gestures

7 HCI-Sem1-2020/21
 Interaction types – conversing

• User has a conversation with the system via an interface or type in the
questions

• System will reply via text or speech output

• Examples:
• User talks/types to system in single word/phrase/number
• AI powered systems – user can talk to the system as if it were another person

• The difference between conversing vs. instructing is

• conversing is a 2-way communication process (the system replies)
• instructing is 1 way only (the system obeys)

8 HCI-Sem1-2020/21
 Interaction types – conversing

Apple’s Siri

AirAsia’s Virtual Allstar (AVA) Automated phone help system

9 HCI-Sem1-2020/21
 Interaction types – manipulating

• User manipulates virtual objects by manipulating them (e.g. move, select,

open, hold, close, place, drag, zoom, stretch, shrink, etc.)

• Effects are immediately visible on screen

• Can involve using physical controllers (e.g. mouse, touchscreen, game

controllers) or air gestures to control movements of the objects

• Examples:
• Zoom in, zoom out

• Move a file by dragging file icon from one part of the screen to another

10 HCI-Sem1-2020/21
 Interaction types – manipulating

Move/drag file

11 HCI-Sem1-2020/21 Zoom in, zoom out

 Interaction types – exploring

CAVE is a multiperson, room-sized, high- A scientist uses the NCSA CAVE to move
resolution, 3D audio & video environment. User through 3D visualizations of datasets.
wears a position sensor and as he/she moves Source:
within the display boundaries, the user will see [Link]
different perspectives (e.g. stand near a huge _Cave.pdf
insect, be swallowed, be inside the abdomen
etc.)
Source: [Link] Further reading on NCSA CAVE: NCSA
[Link]
12 HCI-Sem1-2020/21
 Interaction types – exploring

• User moves through digital or physical environments

• Examples:
• User navigates and explores a virtual 3D environment (e.g. virtual campus)

• Physical environments embedded with sensors that detect presence of a

user/certain body movements, and then trigger digital/physical events to happen

• Enable users to explore and interact with an environment by exploiting their

knowledge of how they move and navigate through existing spaces

13 HCI-Sem1-2020/21
 Interaction types – responding

• The system initiates the interaction and the user chooses to respond

• Example:
• Fitness tracker notifies user has walked 10,000 steps in a day

• App/system showing the user something that it “thinks” is of interest/relevance to

the user

• Notifications/alerts

• Recommendations

• For some users, this may be tiresome/frustrating (especially when the system
gets it wrong)

14 HCI-Sem1-2020/21
 Interaction types – responding

Apple’s fall detection

Google Lens automatic pop-up information to

identify name/type/breed of the photo object (e.g.
tulip)

15 HCI-Sem1-2020/21 Fitness tracker

 The process of ID

• The process of interaction design follows these phases:

• Discover – gather insights about the problem

• Define – develop a clear brief that frames the design challenge

• Develop – create, prototype, test and iterate solutions/concepts

• Deliver – finalize, produce and launch the project

• These phases are commonalities in many fields of design e.g. graphic,

architecture, software, industrial etc.

16 HCI-Sem1-2020/21
 Approaches to ID
• There are 4 main approaches to ID (Saffer, 2010):

User- Activity-
centered centered
design* design

Systems Genius
design design
* this is the approach that will be emphasized in this course

• The selected approach must be chosen with the design problem taken into consideration (must fit the design problem)
17 HCI-Sem1-2020/21
 Approaches to ID – user-centered design

• User-centered design
• User is the guide to the designer
• The designer’s role is to translate the users’ needs and goals into a design
solution
• “User knows best”
• Users and their goals are the driving force behind product development
• 3 principles that form the basis of user-centered approach, by Gould & Lewis
(1985) for “useful and easy to use computer systems”:
• Early focus on users and tasks
• Empirical measurement
• Iterative design

18 HCI-Sem1-2020/21
 Approaches to ID – user-centered design

• User-centered design – Early focus on users and tasks

• First, understand who the users will be

• 5 principles:
• Users’ task and goals are the driving force behind the development
• Users’ behaviours and context of use are studied, and the system is designed to support them
• Users’ characteristics are captured and designed for
• Users are consulted throughout development from earliest phases to the latest
• All design decisions are taken within the context of the users, their activities, and their environment

19 HCI-Sem1-2020/21
 Approaches to ID – user-centered design

• Empirical measurement
• Specific usability and UX goals should be identified, clearly documented, and
agreed upon at the beginning of the project
• Help designers to choose between alternative designs and check on the progress
as the product is developed
• The goals will allow the product to be empirically evaluated at regular stages
throughout development

20 HCI-Sem1-2020/21
 Approaches to ID – user-centered design

• Iterative design
• Allows designs to be refined based on feedback

• As users and designers discuss, what is needed, what will help, and what is
feasible will emerge

• Activities to inform each other and to be repeated

• Ideas will need to be revised in light of feedback, likely several times

• The solution is rarely gotten right the first time

21 HCI-Sem1-2020/21
 Approaches to ID – others

• Activity-centered design
• Focuses on user behaviour surrounding particular tasks
• User behaviour is more important than their needs and goals

• Systems design
• Structured, rigorous and holistic design approach that focuses on context
• The system (people, computers, objects, devices etc.) is the center of
attention
• Users’ role: set the goals of the system

• Genius design
• Relies largely on the experience and creative flair of the designer
• Users’ role: validate the ideas generated by the designer

22
• Users are not involved during the process itself
HCI-Sem1-2020/21
 Basic activities of ID

• There are 4 basic activities of ID:

• Discovering requirements

• Designing alternatives

• Prototyping

• Evaluating the prototype

• All these activities are underpinned by the philosophy of user-centered

design

23 HCI-Sem1-2020/21
 Basic activities of ID

• Discovering requirements
• To understand the target users and the support that the product could provide
• Forms the basis of the product’s requirements
• Supports the design and development
• Get from data gathering and analysis (to be discussed in Unit 3)

• Designing alternatives
• To propose ideas (called alternatives) to meet the requirements
• Involves conceptual design and concrete design

24 HCI-Sem1-2020/21
 Basic activities of ID

• Prototyping
• To communicate the designs and potential solutions to users and others involved
• The designs are captured and expressed in forms that can be reviewed, revised
and improved
• An example of these forms is the prototype (a limited version of the final product)

• Evaluating
• To determine the usability and acceptability in terms of a variety of criteria
• Evaluation complements and enhances quality assurance and testing to make
sure the final product is fit for its intended purpose

25 HCI-Sem1-2020/21
 Basic activities of ID

• The classic simple lifecycle model of ID shows how the four basic activities of ID are related

• It incorporates the three principles of user-centered design

26 HCI-Sem1-2020/21
 Summary

• Definition of interaction

• The types of interaction

• The phases of process of interaction design

• The approaches to interaction design

• Describing user-centered approach

27 HCI-Sem1-2020/21
Thank You