Vietnam National University of HCMC

University of Information Technology

Birmingham City University

User Experience Design

★ Introduction ★

Dr Vi Chi Thanh - [email protected]

https://vichithanh.github.io
 Course lecturers

• Dr Arthur Theil – module leader ([email protected])

• Dr Chi Thanh Vi – lecturer ([email protected])

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 2

 About me
• 2001-2006
• BSc in Electronics and
Telecommunications
• Hanoi University of Science and
Technology, Vietnam

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 3

 About me

• 2007-2008
• MSc in Computer Science
• University of Bristol, UK
• 2010- 2014:
• PhD in Computer Science
• Brain-Computer Interfaces
• University of Bristol, UK

WEDNESDAY, 08 NOVEMBER 2023 M U L T I S E NHS TOTRPYS :I /N/ T

V EI C
RHA ICTTHI A
ONNHD
. GE ISTI H
GUNB . I O 4
 About me

• 2014-2015:
• School of Computer Science &
Engineering, University of Bristol, UK
• Brain-Computer Interfaces
• 2015-2018:
• School of Engineering and
Informatics, University of Sussex,
Brighton, UK
• Multisensory Interaction

WEDNESDAY, 08 NOVEMBER 2023 M U L T I S E NHS TOTRPYS :I /N/ T

V EI C
RHA ICTTHI A
ONNHD
. GE ISTI H
GUNB . I O 5
 About me

• 2018-2022:
• Sussex Ingestive Behaviour
Group
• Multisensory Experiences
• School of Psychology,
University of Sussex, Brighton,
UK

WEDNESDAY, 08 NOVEMBER 2023 M U L T I S E NHS TOTRPYS :I /N/ T

V EI C
RHA ICTTHI A
ONNHD
. GE ISTI H
GUNB . I O 6
 About me

• Feb-2023 – now
• School of Computer Science and
Engineering, International
University, VNU-HCM, Vietnam.

WEDNESDAY, 08 NOVEMBER 2023 M UHL T T

I SPESN: /S/O
V IRCYH II N
THT EARNAHC. G
T II O
THN UDB E. ISOI G N 7
 Research Interest

• Human-Computer Interaction (HCI)

• User Experience (UX)
• Multisensory Experience & Interface
(touch, taste, and smell)
• Human-Food Interaction
• Brain-Computer Interfaces
• Physiological Signals
• Experimental Psychology
WEDNESDAY, 08 NOVEMBER 2023 M UHL T T
I SPESN: /S/O
V IRCYH II N
THT EARNAHC. G
T II O
THN UDB E. ISOI G N 8
 ERN. CHI 2012 & 2014. Vibrotactile MI. INTERACT 2013 D-FLIP. ACE 2013 TDCS. IUI 2016 Multisensory. CHI 2016

Scent-Delivery Devices.
fMRI and Usability. UIST 2017 Sense of Agency. CHI 2017 Smell mapping. AUI 2017 Tate Sensorium. IJHCS 2017
AUI 2016

?
TasteBud. MHFI 2018 TastyFloats. ISS 2017 Taste & Risk Taking. LeviSense.
Nature Scientific Reports 2018 IJHCS 2020
 Olfactory interfaces

WEDNESDAY, 08 NOVEMBER 2023 M UHL T T

I SPESN: /S/O
V IRCYH II N
THT EARNAHC. G
T II O
THN UDB E. ISOI G N 10
 Gustatory interfaces

WEDNESDAY, 08 NOVEMBER 2023 M UHL T T

I SPESN: /S/O
V IRCYH II N
THT EARNAHC. G
T II O
THN UDB E. ISOI G N 11
 Instructor introduction

Vi Chi Thanh

Email (best way to reach me):

[email protected] | [email protected]

Website: https://vichithanh.github.io

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 12

 Today’s agenda

• Introduction to User Experience Design

• Introduction to the module
• Introduction to prototyping
• Assessment details
• This week’s practical activity

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 13

 What’s in a Name?

• Interaction Design can have different perspectives

• User-centered design
• Human-centered design
• People-centered design
• Customer experience design
• Which do you think is preferable and why?

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 14

 Why do you take this course?

• Because many people take it?

• No other option?
• Just a random choice?
• HCI sounds fun?
• The best answer would be
• I take it because I am interested

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 15

 BRIEF OVERVIEW OF HCI
RESEARCH

WEDNESDAY, 08 NOVEMBER 2023 16

 What we need?

• Technology, definitely.
• What else?

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 17

Insights – Minority Report
HTTPS://VICHITHANH.GITHUB.IO
 Insights –
Avatar

HTTPS://VICHITHANH.GITHUB.IO
Insights – Iron Man

HTTPS://VICHITHANH.GITHUB.IO
 Insights – Iron Man
HTTPS://VICHITHANH.GITHUB.IO
 Insights – The Matrix
HTTPS://VICHITHANH.GITHUB.IO
 Insights – Ready Player One
HTTPS://VICHITHANH.GITHUB.IO
 Trend in HCI

Slides from Dr. M. Billinghurst’s lecture note

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO
HTTPS://VICHITHANH.GITHUB.IO
HTTPS://VICHITHANH.GITHUB.IO
WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 28
 Why we need HCI?

Moore’s Law transistors

Computer speed
abilities discs
cost

1950 1990 2030

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 29
 Why we need HCI?
Psychology
Human
abilities

2000BC 1950 1990 2030

Slide idea by Bill Buxton

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 30

 Where is the bottleneck?

system
performance

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 31

 Beyond Performance?

• Use computers for what?

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 32

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 33
 What is User Experience Design?

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 34

 What is User Experience Design?
• User Experience (UX) Design is the process of supporting user
behaviour through usability, usefulness, and desirability provided
in the interaction with a product or system.

HTTPS://VICHITHANH.GITHUB.IO 35
 What is User Experience Design?

• UX Design draws from knowledge in different areas such as Human- Computer

Interaction (HCI), User-Centred Design, Psychology and Cognitive Science.
• UX Design shares elements from similar disciplines such as Visual Design,
Information Architecture, User Research, and many others.

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 36

 Experience design

“The product is no longer the basis of value. The experience is.”

Venkat Ramaswamy
The Future of Competition

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 37

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 38
 Defining the user experience

• How users perceive a product, such as whether a smartwatch is seen as

sleek or chunky, and their emotional reaction to it, such as whether people
have a positive experience when using it.
(Hornbæk and Hertzum, 2017)
• Hassenzahl’s (2010) model of the user experience
• Pragmatic: how simple, practical, and obvious it is for the user to achieve their goals
• Hedonic: how evocative and stimulating the interaction is to users
• Hassenzahl et al (2021) reflection on the way the user experience has
evolved over the last 20 years
• growing interest in designing for hedonic aspects in relation to wellbeing

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 39

 Why was the iPod user experience such a
success?
• Quality user experience from the start
• Simple, elegant, distinct brand,
pleasurable, must have fashion item,
catchy names, cool...

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 40

 Core characteristics of interaction design

• Users should be involved throughout the development of the project

• Specific usability and user experience goals need to be identified,
clearly documented, and agreed to at the beginning of the project
• Iteration is needed through the core activities

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 41

 What do UX designers do?

• UX designers consider the Who, Why, What and How of product use:
• Who: The Who refers to the individuals or groups of people (target users)
who will most likely use the product.
• Why: The Why involves the users’ motivations for adopting a product,
whether they relate to a task they wish to perform with it or to values that
users associate with the ownership and use of the product.
• What: The What addresses the things people can do with a product - its
functionality and features.
• How: The How relates to the design of functionality in an easy, accessible
and pleasant way. That is, how the product will look like and behave.

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 42

 Is this a
good UX
design
example?

WEDNESDAY, NOVEMBER 8, 2023 HTTPS://VICHITHANH.GITHUB.IO 43

What
about this
website
design?

WEDNESDAY, NOVEMBER 8, 2023 HTTPS://VICHITHANH.GITHUB.IO 44

 Good UX design is

• Useful
• Enjoyable
• Usable (easy to use)
• To achieve these goals, you need
to know your users and their
needs!

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 45

 The Elements of User Experience

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 46

 The UX Design Process

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 47

 People-centered design

• Involves understanding how people feel about a product and their

pleasure and satisfaction when using it, looking at it, holding it, and
opening or closing it.
• Their overall impression of how good it is to use
• The quality of the experience
• “It is not enough that we build products that function, that are
understandable and usable, we also need to build joy and excitement,
pleasure and fun, and yes, beauty to people's lives.”
Don Norman (2004)

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 48

 Experience and fun

• World’s Deepest Rubbish Bin:

https://www.youtube.com/watch?v=tcrhp-IWK2w

• Musical Stairs: https://www.youtube.com/watch?v=2lXh2n0aPyw

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 49

 User experience goals
Desirable aspects Undesirable aspects
• Satisfying • Pleasurable • Boring • Makes one feel
• Helpful • Enhancing sociability • Unpleasant stupid
• Fun • Rewarding • Deceptive
• Creepy
• Enjoyable • Exciting • Annoying
• Frustrating
• Motivating • Supporting creativity
• Patronizing • Cutesy
• Provocative • Emotionally fulfilling
• Engaging • Entertaining • Intrusive
• Childish
• Challenging • Cognitively • Making one feel
stimulating • Gimmicky
• Surprising guilty
• Experiencing flow

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 50

 Affordances: to give a clue

• Refers to an attribute of an object that allows people to know how to

use it. (For example, a mouse button invites pushing, a door handle
affords pulling)
• Norman (1988) used the term to discuss the design of everyday
objects
• Has since been popularized in interaction design to discuss how to
design interface objects (for example, scrollbars to enable moving
up and down; icons to click on)

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 51

 What does “affordance” have to offer
interaction design?
• Interfaces are virtual and do not have affordances like physical
objects
• Norman argues that it does not make sense to talk about interfaces
in terms of ‘real’ affordances
• Instead, interfaces are better conceptualized as ‘perceived’
affordances:
• Learned conventions of arbitrary mappings between action and effect at the
interface
• Some mappings are better than others

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 52

 Activity

• Virtual affordances
• How do these screen objects afford?
• What if you were a novice user?
• Would you know what to do with them?

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 53

 Prototyping

• A prototype is an early working model of a

design.
• Prototyping is used to gain feedback and
rapidly experiment with ideas and solutions.

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 54

 Benefits of prototyping

1. Prototyping helps us get rid of

bad ideas quickly and move
on to good solutions.
2. Reduces process costs.
3. It gives insights into the
usability of your product.

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 55

 Benefits of prototyping

1. It gives an overview into the

project phases to different
teams.
2. It helps evaluating the structure
of individual pages/screens in
your project.
3. It helps understanding and
visualising how related
pages/screens work together.
WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 56
 Prototyping

Prototypes are created through a The fidelity of the prototype

combination of: depends on the design stage:

1. Sketches Low fidelity

2. Wireframes Medium fidelity

3. Mockups High fidelity

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 57

 Tools for prototyping

Figma.com
WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 58
 Tools for prototyping

Adobe XD
WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 59
 Module Structure

• LECTURES • PRACTICAL LAB SESSIONS

• Wednesdays • Wednesday
• 8:15 – 11:30 • 13:00 – 17:00
• Here I will provide the UX • Every 2 weeks (starting 15/11)
principles and fundamentals • Here you are expected to work
that you should apply in your on your project independently
work and receive weekly feedback on
your work

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 60

 Module Schedule

• Week 1 – Introduction to User Experience • Week 7 – Visual Design Principles II and

Design Responsive Design
• Week 2 – User-Centred Design Methods • Week 8 – User Testing and Evaluation
Methods I
• Week 3 – Accessibility and Inclusive Design
• Week 9 – User Testing and Evaluation
• Week 4 – Interaction Design and Usability Methods II Data Collection Techniques
• Week 5 – Information Architecture and • Week 10 – Reporting Usability Testing
Navigation Design Results
• Week 6 – Visual Design Principles I • Week 11 – UX Beyond Mobile: Immersive
and Advanced Technologies
• Week 12 – Starting a Career in the UX
Industry
WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 61
 Rules

• Punctuality and attendance

• Independent learning
• Professional behaviour
• Academic integrity

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 62

 Learning outcomes

• Design and create an interactive prototype through applying user-

centred design principles.
• Critically appraise techniques utilised within a user-centred design
methodology.
• Evaluate a digital prototype to assess the usability of an interactive
application.
• Propose and implement updates to interface designs based on
analysis of usability data collected.
WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 63
 Transferable skills

• Critical thinking and communication skills.

• Design and prototyping skills.
• Evaluation and data analysis skills.
• Project management skills.

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 64

 Module assessment

• You will need to design and evaluate a mobile application focused

around the “AI for Good” theme (with both free and premium
options) through following a user-centred design process.
• You will need to write a 4000-word report [80% of your final mark]
about your project, design process, and evaluation.
• Your mobile application should use or incorporate AI features for
good causes!

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 65

 Module assessment

• IMPORTANT:
• No coding/development is
required in this module.
• Your coursework will be focused on
the design and testing of your
mobile application prototype!
• Last year’s average mark was 53%.
➔ Can you do better than this?

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 66

 Module assessment

• IMPORTANT:
• Progress Review Meetings (Weeks 4 and 9) [20% of your final mark]
• During your timetabled practical sessions in weeks 4 and 9, you will be
expected to demonstrate to your lab tutor that you made sufficient
progress into your coursework.
• By attending the meetings and showing the progress you’ve made so far
on both weeks 4 and 9, you will be able to receive up to 20% of your final
mark in the module (with the other 80% being the final 4000-word report).

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 67

 Module assessment

• Report structure (4000 words): Assessment deadline (TBC):

3pm - Friday 15th December 2023
1. Concept/Application Introduction
2. Market Research/Competitor Analysis
3. User-Centred Design
4. Personas, Scenarios, Requirements, Task Analysis
5. Paper prototypes, Digital Wireframes, High-fidelity prototypes
6. Usability testing
7. Analysis/Discussion

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 68

 Use of ChatGPT and other AI tools
• AI tools must only be used when you are able to demonstrate that the final submission
is the product of your own independent work and thinking. Examples of AI misuse
include:
• Copying or paraphrasing sections of AI-generated content, so that the work is no longer your
own.
• Copying or paraphrasing whole responses of AI-generated content.
• Using AI to complete parts of the assessment, so that the work does not reflect your own work,
analysis, evaluation or calculations.
• Failing to acknowledge the use of AI tools when they have been used as a source of information
• Incomplete or poor acknowledgement of AI tools.
• Read the full regulation about the use of AI: https://icity.bcu.ac.uk/News/Academic-
Misconduct-Procedure-revised-with-rise-of-AI-use

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 69

 This week’s practical activity
Do some market research, choose the theme of your mobile
application and write about your idea.
• AI for environmental issues and • AI for gender and racial
green practices equality
• AI for inclusive education and • AI for good health and
workspaces wellbeing
• AI for sustainable futures • AI for games and sports
• AI for underserved • AI for social communities
communities
• AI for the creative industries
• AI for independent and local
• Any other uses of AI for good
businesses
causes
• AI for social justice and human
rights

WEDNESDAY, 08 NOVEMBER 2023 HTTPS://VICHITHANH.GITHUB.IO 70

 Vietnam National University of HCMC
University of Information Technology
Birmingham City University

THANK YOU

Dr Vi Chi Thanh - [email protected]

https://vichithanh.github.io