449b81f0 4

What is Human-Computer
Interaction
(or: Interaction Design)?
basics, terms, definitions

concrete examples & real-
life insights
Week 1
Lecture Notes
1
Practical Course Information
2
Knowledge you will gain in this course
• knows a definition of interaction design and human-computer interaction
• knows the concepts of usability, user experience and user-centred design
• knows the lifecycle model of interaction design
• has knowledge about different kinds of requirements
• knows the key concepts and terms used in evaluation
• has knowledge of different types of evaluation methods
See https://www.uib.no/emne/INFO162
3
Answers from students H22 (47 answers)
4
Skills you will gain in this course
• can outline and discuss usability goals and user experience goals for
designing an interactive product
• can identify suitable methods for evaluating interactive technologies
• can identify suitable methods for establishing requirements
• can discuss the conceptual, practical, and ethical issues involved in evaluation
• can discuss the advantages/disadvantages of low-fidelity/hi-fidelity prototypes
• can produce simple prototypes of interactive products
5
6
7
8
Required Recommended Previous Knowledge
• INFO100 or equivalent
• some knowledge basis in coding/programming (starting: 2023)
• critical and independent thinking
9
Course Schedule: Highlights (1/3)
• Introduction: What is Human-Computer Interaction?
• User Experience (UX) Design
• Interaction & Interfaces Tangible and
Tabletop Interfaces
• Data Gathering & Analysis
• Empirical Methods
• Cognitive Aspects, Design & Prototyping
• Accessibility
• Life Logging
• Evaluation (Fitts’ Law, Hick’s Law)
• Machine Learning (ML) and Recommender Systems (RecSys)
• Virtual and Augmented Reality (AR/VR) Touch and
Multitouch Interfaces
10
• Introduction: What is Human-Computer Interaction? Low-fidelity prototyping
• Interaction & Interfaces
• Accessibility
Information Visualization Design High-fidelity prototyping
• Life Logging
• Virtual and Augmented Reality (AR/VR)
11
Remote Drone Control
• Introduction: What is Human-Computer Interaction?
• Interaction & Interfaces
Graphical (GUI) and Tangible (TUI)
Frameworks
• Accessibility
• Life Logging VR, handhelds, science exploration
• Virtual and Augmented Reality (AR/VR)
12
Course Specifics
• Course web: https://mitt.uib.no/courses/41598

• Lectures every week, Tuesdays 12:15 – 14:00
• 4 assignments, done in small groups (3 persons)
• Group assignment, done in small groups (3 persons) (40%, grade)
• Written exam (60%, grade)
• Compulsory participation in 11 of the 14 seminars

(starting next week; this number might be adjusted)
13
People (1/2)
Teachers:
• Morten Fjeld morten.fjeld@uib.no (Bergen), main teacher and course responsible

• Floris van den Oever floris.oever@uib.no (Bergen), teacher
• Kazuyuki Fujita k-fujita@riec.tohoku.ac.jp (Bergen and Tohoku Univ., Japan), teacher
Guest teachers and tentative themes:
• Duc Tien Dang Nguyen ductien.dangnguyen@uib.no (Bergen, 2 hours (life logging)

• Mehdi Elahi mehdi.elahi@uib.no (Bergen, 2 hour) (ML, rec.sys.)
• A few more people are listed in the course plan; names will be updated according to situation
14
About teachers: Floris van den Oever
• Born in The Netherlands
• Bachelors: Applied Psychology,
Fontys University of Applied
Science, Eindhoven, The
Netherlands(2015)
• Master’s: Human Factors and
Engineering Psychology with an
Honours Track in Design, University
of Twente, Enschede, The
Netherlands (2019)
• Human Factors researcher at the
Royal Dutch Aerospace Centre
(2019-2021)
• PhD on Using Augmented Reality to
Facilitate Maritime Collaboration
(2021 – 2025)
22.08.23 15
About teachers: Morten Fjeld
• Born in Bergen, Swiss and Norwegian citizen, live in Bergen/Gothenburg
• Ecole Polytechnique Grenoble, ENSIMAG (1989)
• NTNU, Norway, Applied Mathematics (1990)
• ETH Z, PhD in Human-Computer Interaction (2001)
• ETH Medal (2002)
• Since 2004 at CSE, Chalmers
• Visiting teacher & researcher at Univ. of Zurich (2008),
NUS Singapore (2011), University of Bergen (2016),
Tohoku University (2016 and 2017), ETH Zurich (2019-2020)
• Full professor at University of Bergen (2020 - )
22.08.23 16
About teachers: Kazuyuki Fujita
https://kazuyukifujita.github.io
22.08.23 17
People (3/3)
Teaching assistants (TAs):

• Robin Johansen Bøe
• Thomas Nguyen
• Stephanie Zubicueta Portales
• Ida Wergeland Sævareid
• Please use mittUIB to contact TAs.

• E-mails to TAs might be published here (depends on communication style).
18
People (3/3)
Course representatives:
– Course participant 1 (UiB student, compulsory course)
– Course participant 2 (UiB student, elective course)
– Course participant 3 (UiB student, from Informatikk)
– Course participant 4 (exchange student)
3 short feedback meetings
You will get experience and a small gift

(e.g., quality chocolate)
19
Reading list
Main book:
– Interaction Design: Beyond Human Computer
Interaction, 6th Edition. Authors: Helen Sharp,
Jennifer Preece, Yvonne Rogers (2023).
Other resources:
– Research Methods on Human Computer
Interaction, 3rd Edition. Authors: Lazar, Feng,
Hochheiser (2017).
– Web links and research paper, including video

material, will be made available the course web
20
Course outline (textbook chapters: 5th edition)
21
Course outline (textbook chapters: 6th edition)
6th Edition
22
Seminars
– Registration has opened on Mitt.UiB
– Groups are led by the teaching assistants; instructions for changing group will follow
– 14 seminars
– Semester assignment groups are formed within lab groups
– Chance to receive some guidance on your projects
– Presentation of compulsory assignments
– 80% attendance mandatory, that is, at least 11 seminars
– If you are unable to attend you may be excused
if you have a valid doctor’s note;
please contact t.b.d., subject:
– If you have any question about labs in general,
please contact t.b.d., subject:
23
Compulsory assignments
– 4 compulsory assignments
– Completed by groups of 3 (same group as the semester assignment)
– Register your group on Mitt.UiB under «People»
– Must be submitted at course web and must be accepted to qualify for exam
– Must be orally presented by your group at your lab group
– May contribute to your semester assignment
– Graded with pass/fail. Don’t count to final grade but must be done to do exam
24
Semester assignment, grading
– Interaction design project:
– Issued on at course web <date to be defined>

– Solved in groups of 3 students
– Final submission due 25th November
– Weighs 40% on your final grade
– You may present your preliminary work in class or seminar end-Oct. or Nov.
25
Answering questions from students to teachers:
We will typically answer questions with interest
for more than one student at the course web;
using the announcements.
26
Introduction to Interaction Design
27
History of interactive (enterprise) technology
https://infostory.com/2013/09/15/timeline-of-enterprise-technology/
29
Colossus (1943-1945) ENIAC (1943)
30
SketchPad (1962)
by Ivan Sutherland
31
Xerox Star (1981)
32
Microsoft 1.0 (1985)
33
We live in a world with different interactive products
34
How do you optimize the users’ interactions with
a system, an environment or a product?
– Taking into account what people are good and bad at
– Considering what might help people with the way they currently do things
– Thinking through what might provide quality user experience
– Listening to what people want and getting them involved in the design
– Evaluating interaction patterns and gathering system requirements

35
Interaction design is (1/3)
“ Designing interactive products to support the way

people communicate and interact in their
everyday and working lives.
” Preece et al. (2015)
36
Interaction design is (3/3)
38
Human Computer Interaction (HCI) is (1/3)
“a discipline concerned with the design, evaluation and

implementation of interactive systems for human use and
with study of major phenomena surrounding them.”
(ACM SIGCHI, 1992, p. 6)
39
HCI is about... (2/3)
– Understanding users
– Understanding user’s tasks
– Understanding the surrounding environment
– GUI requirements gathering and analysis
– Design prototype
– Evaluate system
40
HCI is... (3/3)
41
User experience (UX) (1/6)
The user experience is the
level of satisfaction that your
system provides to every user.
It’s a “person’s perceptions and responses

resulting from the use and/or anticipated use
of a product, system or service.” (ISO 9241-210)
42
UX (2/6)
How people feel about a product and their pleasure and satisfaction when using
it, looking at it (…) [including] their overall impression of how good it is to use (…)
Preece et al. (2015)
43
UX (3/6)
Evaluate how users feel about a system, looking at;
– ease of use,
– perception of the value of the system,
– utility,
– efficiency in performing tasks and so forth,
The system could be a website, a web application or desktop software.

– How do users feel?
– Is it pleasant to use?
– Does this product give them value?
– Is it easy to use?
by Dr. Donald Norman
44
User experience honeycomb (6/6)
fill a need
For more on this, see:

simple attractive
https://medium.com/@dane
se
ae s
wesolko/peter-morvilles-user-
ou
the
yt
experience-honeycomb-
tics
eas
904c383b6886
and
on
http://semanticstudios.com/u
dis
ati
ab
ser_experience_design/.
vig
ilit
na
y
and
https://www.usability.gov/wh
inclusive at-and-why/user-
experience.html
trustworthy 46
Accessibility
– refers to the degree to which an interactive product is accessible by as many
people as possible.
– a focus is on people with disabilities, but also on low-age (children) and high-age
A user is considered to be disabled if;

– they have a mental or physical impairment
– the impairment has an adverse effect on their ability to carry out normal day-to-day activities
– the adverse effect is substantial and long term (meaning it has lasted for 12 months, or is likely
to last for more than 12 months or for the rest of their life)
47
From Usability goals to User experience goals
”Usability is necessary, but not sufficient”
48
Usability (1/8)
“the extent to which a product can be used by specified users to achieve specified
goals with effectiveness, efficiency and satisfaction in a specified context of use.”
(ISO 9241-151)
49
Usability (2/8)
According to Jakob Nielsen, usability is defined by 5 quality components:
1. Learnability
2. Efficiency
3. Memorability
4. Errors
5. Satisfaction
Jakob Nielsen
50
Usability (3/8) - why users leave?
If;
– they are forced to register,
– they face with bad navigation,
– they face long check-out process,
– they face long form filling,
– there is lack of information in the interface,
– there is long loading times,
– they face suddenly appearing pop-up messages or pop-up videos,
51
Usability – keep in mind (4/8)
– Use usability guidelines but do not rely only them – always test with users.
– Ensure that the sequences of actions to achieve a task are as simple as possible.
52
– Ensure that the user can always get out, go back or undo an action.
– Ensure that response time is adequate.
53
– Ensure that the UI’s appearance is uncluttered.
– Consider the needs of different groups of users.

– Provide all necessary help
54
Usability goals (7/8)
Usability is broken down into the following goals;
1. Effective to use (effectiveness)

2. Efficient to use (efficiency)
3. Safe to use (safety)
4. Having good utility (utility)
5. Easy to learn (learnability)
6. Easy to remember how to use (memorability)
55
User experience goals (8/8)
Desirable and undesirable aspects of the user experience:
Desirable aspects;
Satisfying, helpful, fun, enjoyable, motivating, provocative, engaging, challenging,
surprising, pleasurable, enhancing sociability, rewarding, exciting, supporting
creativity, emotionally fulfilling, entertaining, cognitively stimulating
Undesirable aspects;
Boring, unpleasant, frustrating, patronizing, making one feel guilty, making one feel
stupid, annoying, cutesy, childish, gimmicky
56
User experience of public transportation (1/2)
How do users count tracks?

How does Flytoget count track?
Reason for this problem?
Ansvarspulverisering (1999-02-25): når ansvaret er likelig fordelt på et
høyt antall personer, slik at ansvaret i praksis ikke ligger hos noen.
57
http://arj.nvg.org/dagens-ord/forklaring.html, Word of the day, sometimes 1999.
User experience of public transportation (2/2)
How do users get help?

How can help be given in a smart way?
https://www.youtube.com/shorts/rmfpAg74ceY https://www.youtube.com/watch?v=SWf2xGqaH8U
58
How do we create usable designs?
59
Norman’s design principles (5 of 7)
– Visibility
– Feedback
– Constraints
– Consistency
– Affordance
60
– Visibility
– Feedback
Visibility – Constraints
– Consistency
– Affordance
– Displaying possible actions

the user can make within the interface
– Visible functions are more likely to be used
– Actions that are less visible or hidden
are less likely to be used
61
– Visibility
– Feedback
Feedback – Constraints
– Consistency
– Affordance
– Communicates the results of an interaction
– Communicated to the user by the system through

– Auditory cues
– Visual cues
– Tactile cues (e.g. vibration)
– Verbal cues
62
– Visibility
– Feedback
Constraints – Constraints
– Consistency
– Affordance
– The design concept of constraining refers to determining ways of restricting the

kinds of user interaction that can take place at a given moment.
63
– Visibility
– Feedback
Consistency – Constraints
– Consistency
– Affordance
– Following a design “language” increases consistency

between different systems
– Benefits the user:

– Increases learnability
– Eliminates confusion
64
– Visibility
– Feedback
Affordances – Constraints
– Consistency
– Affordance
– To afford means ’to give a clue’
– Affordances are all the possible actions

we can do with some object
I’m a Button, believe you me
Don Norman on affordances, 1994

65
– Visibility
– Feedback
Affordances – Constraints
– Consistency
– Affordance
– Have suggestions or clues about to how to use these properties.
– Can be dependent on the

– Experience
– Knowledge
– Culture of the actor
– Can make an action easy or difficult
66
– Visibility
– Feedback
Types of affordances – Constraints

– Consistency
– Affordance
– Explicit (perceived)
– False
– Hidden
67
– Visibility
– Feedback
False affordances – Constraints

– Consistency
– Affordance
– happens when there is in fact affordance but there is no function to it.
68
Norman’s design principles (5 of 7)
– Visibility
– Feedback
– Constraints
– Consistency
– Affordance
69
The importance of such principles are seen in many examples
https://www.youtube.com/watch?v=pQHX-SjgQvQ – Visibility
– Feedback
– Constraints
– Consistency
– Affordance
Which
principles play
a role in this
example?
70
User centered design
71
User-centered design
– an approach to design that focuses on users in each

phase of the design process
– a lifecycle process that puts an early emphasis on

user and task analysis and user involvement in the
design and testing of a product
– also called as usability engineering

72
User-centered design: It is iterative
73
User-centered design activities
74
User-centered design: It is iterative
75
Experience a user study; as participant, get paid (200 NOK)
https://mitt.uib.no/courses/41598/discussion_topics/378242 76
Examples of Specific User Interfaces
“Persistent Challenges”
in HCI or UI Design
77
Mathematics also has
persistent problems;
they are called
Hilbert Problems
https://en.wikipedia.org/wiki/Hilbert%27s_problems
78
Problem: How to present complex,
dynamic (3D) data on 2D surfaces?
79
Issues of reach within collaboration around large
displays
Problem: How to reach and interact
with data far away?
Ortholumen, t2i Lab, Chalmers, 2007, Tommaso Piazza
Potential solution to problem:

How to present complex,
dynamic (3D) data on 2D surfaces?
In 2007, this was/is a future real-life motivaiton:
http://www.futureinteractions.net/hardware/
Video demo: https://www.dropbox.com/s/xiogv5fckm25h7l/ortholumen-short.mov?dl=0

81
The role of user interfaces in our lives (2016); Alex Dancu
Problem: How to display and interact with

contextual (map) data while driving
82
The role of user interfaces in our lives (2021)
Tendency to a solution to the problem:

How to display and interact with
contextual (map) data while driving
83
The role of user interfaces in our lives
How Nissan shifted focus from innovation to other goals, read the
story about Carlos Ghosn:
Person: https://en.wikipedia.org/wiki/Carlos_Ghosn
Case study: https://oneplm.com/case-studies/nissan/
Today: https://usa.nissannews.com/en-US/releases/release-0f1f4ed24f506b7f80391279121050db- 84
nissan-unveils-ambition-2030-vision-to-empower-mobility-and-beyond#. Rowan Atkinson (2020): film not yet produced
– text How to make two or more
Problem:
devices become smart together?
85
DynamicDuo, 2008:
Making tablets and phones interact
Potential solution to problem:

How to make two or more devices
become smart together?
Full system demo: https://www.dropbox.com/s/bbfo1sj1sleq2g2/DynamicDuo.mp4?dl=0

– text problem: How to make two or
Persistent
more devices become smart together?
Microsoft abdiserer: Google kan overta tronen (4th Oct. 2019);

https://www.aftenposten.no/kultur/nyhetsanalyse/i/dOzmBz/microsoft-abdiserer-google-kan-overta-tronen 87
Apple, TagesAnzeiger (a newspaper, 2018)
– te How to make two or more
Problem:
Tagesanzeiger, Freitag 18. Januar 2019 10:42

Was kommt nach dem Smartphone-Boom?
Die Nachfrage nach Handys hat ihren Zenit überschritten. Die Hersteller
stellt das vor grosse Probleme – ein Blick auf Samsung, Apple und Huawei.
https://m.tagesanzeiger.ch/articles/11016672 88
DynamicDuo, t2i Lab, Chalmers, 2011, Tommaso Piazza (2.40)
Full system demo: https://www.dropbox.com/s/bbfo1sj1sleq2g2/DynamicDuo.mp4?dl=0
Paper: https://nus-hci.org/wp-content/uploads/publications/2013/Piazza%20et%20al.%20-%202013%20- 89
%20Holy%20smartphones%20and%20tablets,%20Batman!%20mobile%20inte.pdf
Application sharing, e.g. DeepShot (2011):
Problem: How to make two or more
https://www.youtube.com/watch?v=odjSlKO0YsY
Chang, T.-H. and Li, Y. (2011) Deep shot: a framework for migrating tasks across devices using mobile phone cameras. In
Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, ACM, New York, NY, USA, pp. 2163–2172.
90
Application sharing, e.g. CapCam (2016):
Problem: How to make two or more
Video demo: https://www.youtube.com/watch?v=9ERZaT0X-6M
Xiao, R., Hudson, S. and Harrison, C. (2016) Capcam: enabling rapid, ad-hoc, position-tracked interactions between
91
devices.
In Proceedings of the International Conference on Interactive Surfaces and Spaces, ACM, New York, NY, USA, pp. 169–178.
CamCutter: Impromptu Vision-Based
Cross-Device Application Sharing
Takuma Hagiwara, Kazuki Takashima, Morten Fjeld, Yoshifumi Kitamura, CamCutter: Impromptu Vision-Based Cross-Device
Application Sharing, Interacting with Computers, , iwz035, https://doi.org/10.1093/iwcomp/iwz035 92
PDF: https://www.dropbox.com/s/xfq99q84xp6ao9s/CamCutter_IWC_2019.pdf?dl=0.
CamCutter: Impromptu Vision-Based
Cross-Device Application Sharing
Application Sharing, Interacting with Computers, , iwz035, https://doi.org/10.1093/iwcomp/iwz035 93
Application Sharing, Interacting with Computers, , iwz035, https://doi.org/10.1093/iwcomp/iwz035
94
Textbook: Activity 1.2, p. 14
Handoff by Apple works
between spatially close iOS
devices and OSX devices
signed into the same iCloud
account. Each device must
have Bluetooth turned on
and be connected to the
same Wi-Fi network. A user
opens and starts a task with
a compatible app, like Mail or
Pages, and can then switch
to a nearby device. On the
nearby device, which must
be locked, the user logs in Apple Handoff:
and picks up where s/he https://support.apple.com/guide/mac-help/hand-off-between-devices-mchl732d3c0a/mac
hadleft off. …. ease-of-use?
95
Bonus Activity this fall
96
Bonus Activity this fall
97
Different kind of knowledge and skills
William Blake (1757-1827)

https://poets.org/poem/proverbs-hell 98

449b81f0 4

Uploaded by

Copyright:

Available Formats

You might also like

449b81f0 4

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

449b81f0 4

Uploaded by

Copyright:

Available Formats

What is Human-Computer

basics, terms, definitions

• Course web: https://mitt.uib.no/courses/41598

• Compulsory participation in 11 of the 14 seminars

• Morten Fjeld morten.fjeld@uib.no (Bergen), main teacher and course responsible

Guest teachers and tentative themes:

• Duc Tien Dang Nguyen ductien.dangnguyen@uib.no (Bergen, 2 hours (life logging)

Teaching assistants (TAs):

• Please use mittUIB to contact TAs.

3 short feedback meetings

You will get experience and a small gift

– Web links and research paper, including video

– Issued on at course web <date to be defined>

– Taking into account what people are good and bad at

– Thinking through what might provide quality user experience

– Evaluating interaction patterns and gathering system requirements

“ Designing interactive products to support the way

“a discipline concerned with the design, evaluation and

(ACM SIGCHI, 1992, p. 6)

It’s a “person’s perceptions and responses

Preece et al. (2015)

The system could be a website, a web application or desktop software.

For more on this, see:

A user is considered to be disabled if;

”Usability is necessary, but not sufficient”

– Ensure that response time is adequate.

– Consider the needs of different groups of users.

Usability is broken down into the following goals;

1. Effective to use (effectiveness)

How do users count tracks?

How do users get help?

– Displaying possible actions

– Communicates the results of an interaction

– Communicated to the user by the system through

– The design concept of constraining refers to determining ways of restricting the

– Following a design “language” increases consistency

– Benefits the user:

– To afford means ’to give a clue’

– Affordances are all the possible actions

I’m a Button, believe you me

Don Norman on affordances, 1994

– Have suggestions or clues about to how to use these properties.

– Can be dependent on the

Types of affordances – Constraints

False affordances – Constraints

– happens when there is in fact affordance but there is no function to it.

– an approach to design that focuses on users in each

– a lifecycle process that puts an early emphasis on

– also called as usability engineering

Potential solution to problem:

Video demo: https://www.dropbox.com/s/xiogv5fckm25h7l/ortholumen-short.mov?dl=0

Problem: How to display and interact with

Tendency to a solution to the problem:

Potential solution to problem:

Full system demo: https://www.dropbox.com/s/bbfo1sj1sleq2g2/DynamicDuo.mp4?dl=0

Microsoft abdiserer: Google kan overta tronen (4th Oct. 2019);

Tagesanzeiger, Freitag 18. Januar 2019 10:42