Course Info

Course Title: Human Computer Interaction (HCI)

Course Code: CPCS381, CPIT280, CPIS354

Pre-requisite:CPCS351, CPIT250, CPIS250

Instructor Name: Dr. Rabie Ahmed

Instructor Email: [email protected]

1
 Course Objective & Description
1. Course Objective
The Main Objective of this course is to familiarize the student with
the concepts, skills, and methods of Human-Computer Interaction
(HCI)

2. Course Description
This course is designed to familiarize students with the skills and
concepts of Human-Computer Interaction (HCI), including the
understanding of user needs in interface design and interface
evaluation. Topics include an introduction to HCI, Human and
computer peculiarities, User Experience goals, Usability goals, HCI
and Interaction Design, Design principles interaction types and
interface types, Data gathering & analysis, User interface &
interaction cognitive framework.
2
 Course Learning Outcomes (CLOs)
CLOs PLOs
1 Knowledge:
1.1 Juxtapose the capabilities of both humans and computers from
the viewpoint of human information processing. K1
2 Skills:
2.1 Evaluate interactive devices or interfaces based on the key
design principles. S2
2.2 Apply theories and methods to conceptualize the interaction
design process. S1
2.3 . Analyze interactive devices or interfaces by referencing
cognitive frameworks S2
2.4 Demonstrate an appropriate and suitable interactive system for
a problem, in terms of technologies and devices according to S4
the users’ needs.
3 Values:
3.1 Appreciate the importance of HCI and its impact on society, the
economy and culture. V1, V2
3
Course Assessment Tools

4
 Course Learning Resources
Shneiderman, B., Plaisant, C., Cohen, M.,
Jacobs, S., Elmqvist, N., & Diakopoulos, N.
Required
(2019). Designing the User Interface: Strategies
Textbooks
for Effective Human-Computer Interaction
(Global ed.). Pearson.
1. Alan D, Janet E. Gregory D. Russell B. (2003).
Essential Human-Computer Interaction. Prentice Hall.
References 2. Preece, Sharp, & Rogers, Y. (2019). Interaction
Materials Design: Beyond Human-Computer Interaction
(5th ed.). Wiley.
1. Blackboard System: https://lms.nbu.edu.sa/
2. Northern Border University Electronic Library:
https://www.nbu.edu.sa/AR/Deanships/Library
Electronic
_Issues
Materials
1. Saudi Digital Library (SDL):
https://portal.sdl.edu.sa/english/ 5
http://media.wiley.com/product_data/coverImage300/51/11190207/1119020751.jpg

6
 Warm up (Exercise 1)
• Why is this stove so bad?

7
 Warm up (Exercise 2)
• Why is this vending machine so bad?

8
 Warm up (Exercise 3)
• Why is this elevator so bad?

9
 Warm up (Exercise 4)
• Why are these devices so bad?

10
 Good and bad design (Example 1)
• Why is the TiVo remote so much better
designed than standard remote controls?

• Peanut shaped to fit in hand

• Logical layout and color-coded, distinctive buttons
• Easy to locate buttons

11
 Good and bad design (Example 2)
Which is the best way to interact with a smart TV?

12
Good and bad design (Example 3)
Logical or ambiguous design?
• Where do you plug the mouse?

• Where do you plug the keyboard?

• top or bottom connector?

• Do the color coded icons help?

(A) provides direct adjacent

mapping between icon
and connector

(B) provides color coding to

associate the connectors
with the labels
13
 Good design
https://vimeo.com/19930744

https://vimeo.com/19930744

• How does the marble answering machine differ from the voice-
mail system?
• Marble answering machine (Bishop, 1995)
• Based on how everyday objects behave
• Easy, intuitive and a pleasure to use
• Only requires one-step actions to perform core tasks
• It is a simple but elegant design.
• It offers less functionality and allows anyone to listen to any of
the messages.
• It uses familiar physical objects that indicate visually at a glance
how many messages have been left. 14
Fundamental Truths about Computers
• Computers are everywhere
Everything we use is equipped with computer technology
• Computers are internally focus
Computers are unconcerned only cared about its internal
working
• Computers are telling but not informing
They may guide us with precision, but they do not guide
us where we want to go
• Computers are poor in communication
Computers are invading every aspect of modern life, but
their communication is poor
• Computers’ Cost of Features
Every digital device has more features than its manual
counterpart 15
 Humans vs. Computers
Humans Computers
• Complex • Dumb

• Intelligent • Unintelligent

• Animate • Inanimate

• Free will • Only do what they are

told to do
• Range of
emotions • Without emotions

• Make mistakes • Don’t make mistakes 16

 Humans vs. Computers

• Humans were responsible • Computers are expecting

for performing complex to mimic human behavior
tasks
• Perform complex tasks,
• Including interacting with that humans used to
other human beings perform, with same level
of EFFICIENCY, and
ACCURACY as a human

• Example: • Example:
salesperson e-commerce systems
17
 Before You Design Anything
• Need to take into account:
• Who the users are
• What activities are being carried out
• Where the interaction is taking place
•Need to optimize the interactions users have
with a product:
•So that they match the users’ activities and
needs

18
 What is HCI
•It has to do with quality of design from the
user’s perspective

•The study of interaction between people and

digital systems

•Designing interactive products to support

people in their everyday and working lives.

19
 HCI – A Formal Definition
“Human-Computer Interaction is a discipline
concerned with
the design, evaluation and implementation
of interactive computing systems for human use
and with the study of major phenomena
surrounding them”

-ACM/IEEE

20
 Why HCI ?
• In the past, computers were expensive and used by
technical people only.

• Now, computers are cheap and used by non-technical

people.
different backgrounds , needs, knowledge, skills.

• Computer and software manufacturers have noticed

the importance of making ‘user friendly’, easy to use,
save people time products.

21
 The User Experience
•How a product behaves and is used by people in
the real world.
➢ The way people feel about it and their pleasure
and satisfaction when using it, looking at it,
holding it, and opening or closing it.
➢ every product that is used by someone has a
user experience: newspapers, ketchup bottles,
reclining armchairs, cardigan sweaters.”
(Garrett, 2010)
➢ All aspects of the end-user's interaction with
the company, its services, and its products.
(Nielsen and Norman, 2014) 22
 User experience goals
• Desirable aspects • Undesirable aspects
• satisfying • boring
• helpful • unpleasant
• fun • frustrating
• enjoyable • making one feel guilty
• motivating • making one feel stupid
• challenging • annoying
• surprising • Etc…
• pleasurable
• exciting
• supporting creativity
• emotionally fulfilling
• entertaining
• Etc… 23
 Success User Experience
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, etc.

24
 Usability
•Usability is a measure of how well a specific user
in a specific context can use a product/design to
achieve a defined goal effectively, efficiently and
satisfactorily.

25
 Usability goals
There are 6 main usability goals that establish the
standard:
•Effective to use
•Efficient to use
•Safe to use
•Have good utility
•Easy to learn
•Easy to remember how to use
26
 Usability and user experience goals
• Selecting terms to convey a person’s feelings,
emotions, etc., can help designers understand the
multifaceted nature of the user experience

• How do usability goals differ from user experience

goals?

• Are there trade-offs between the two kinds of goals?

– e.g. can a product be both fun and safe?

• How easy is it to measure usability versus user

experience goals?
27
 HCI and Software Engineers

•Software engineers focus on internal

workings of software.

•In HCI we are concerned with external

workings of software

28
 HCI’s impact on society
• Modern electronic devices do not require the user to have
as much training or specialized information as they used
to.
• User interfaces on consumer products such as computers,
mobile phones, tablets or televisions are designed with
ease of use in mind.
• UI designers try to ensure that the input and output
processes are as simple and easy for the user as possible.
• The developments of all the products are designed to make
products more user friendly especially to those people
who have no experience of using devices.
29
 HCI’s impact on culture
• Smartphones have changed how we spend our "empty
times": should we read the news? answer emails? chat
with friends? play “Pubg"? should we just be bored?

• Social Media have influenced how we stay in touch with

each other and how find new friends and lovers.

• Games, more than entertainment, can be used as

social and even productive tools.

30
 Understanding users’ needs
• Need to take into account what people are good
and bad at.

• Consider what might help people in the way they

currently do things.

• Think through what might provide quality user

experiences.

• Listen to what people want and get them involved.

• Use tried and tested user-centered methods

31
 What is interaction design?

• “Designing interactive products to support the way

people communicate and interact in their everyday
and working lives.”
–Preece, Sharp and Rogers (2015)

• “The design of spaces for human communication and

interaction.”
–Winograd (1997)

32
 Goals of interaction design

• Develop usable products

– Usability means easy to learn, effective to use and
provide an enjoyable experience

• Involve users in the design process

33
 Which kind of design?
• Number of other terms used emphasizing what
is being designed, e.g.
– user interface design (UI), software design,
user-centered design, product design, web
design, user experience design (UX)

• Interaction design is the umbrella term

covering all of these aspects
– fundamental to all disciplines, fields, and
approaches concerned with researching and
designing computer-based systems for people

34
Key Differences Between UX and UI Design

35
HCI and interaction design

36
 Relationship between ID, HCI
and other fields
Academic disciplines contributing to ID:
– Psychology ‫– علم النفس‬
– Social Sciences ‫– علوم اجتماعية‬
– Computing Sciences ‫– علوم الحاسبات‬
– Engineering ‫– الهندسة‬
– Ergonomics ‫– بيئة العمل‬
– Informatics ‫– المعلوماتية‬

37
 Relationship between ID, HCI
and other fields

Design practices contributing to ID:

– Graphic design ‫– التصميم الجرافيكي‬

– Product design ‫– التصميم االنتاجي‬
– Artist-design ‫– التصميم الفني‬
– Industrial design ‫– التصميم الصناعي‬
– Film industry ‫– صناعة االفالم‬

38
 Relationship between ID, HCI
and other fields
Interdisciplinary fields that ‘do’ interaction design:

– Ubiquitous Computing ‫– الحوسبة في كل مكان‬

– Human Factors ‫– العوامل البشرية‬
– Cognitive Engineering ‫– الهندسة المعرفية‬
– Cognitive Ergonomics ‫– بيئة العمل المعرفي‬
– Computer Supported Co-operative Work
‫المدعوم بالحاسوب‬ ‫– العمل التعاوني‬
– Information Systems ‫– نظم المعلومات‬

39
 Working in multidisciplinary teams
• Many people from different backgrounds involved

• Different perspectives and ways of seeing

and talking about things

• Benefits
– more ideas and designs generated

• Disadvantages
– difficult to communicate and
progress forward the designs being create

40
 Interaction design in business
• Increasing number of ID consultancies, examples of
well known ones include:
– Nielsen Norman Group: “help companies enter the age
of the consumer, designing human-centered products and
services”
– Cooper: “From research and product to goal-related
design”
– Swim: “provides a wide range of design services, in each
case targeted to address the product development needs
at hand”
– IDEO: “creates products, services and environments for
companies pioneering new ways to provide value to their
customers”
41
 What do professionals do
in the ID business?
‫مصممي التفاعل‬
• interaction designers - people involved in the design of all the
interactive aspects of a product
‫مهندسي االستخدام‬
• usability engineers - people who focus on evaluating
products, using usability methods and principles
‫مصممي الويب‬
• web designers - people who develop and create the visual
design of websites, such as layouts
‫مهندسي المعلومات المعماريين‬
• information architects - people who come up with ideas of
how to plan and structure interactive products
‫مصممي تجربة المستخدم‬
• user experience designers (UX) - people who do all the above
but who may also carry out field studies to inform the design
of products 42
 What is involved in the process of
interaction design
• Establishing requirements ‫تحديد المتطلبات‬
• Developing alternatives ‫تطوير البدائل‬
• Prototyping
‫النماذج‬
• Evaluating
‫التقييم‬

43
Core characteristics of interaction design

• Users should be involved through the

development of the project

• Specific usability and user experience goals

need to be identified, clearly documented
and agreed at the beginning of the project

• Iteration is needed through the core

activities
44
 Why go to this length?
• Help designers:
– understand how to design interactive products that
fit with what people want, need and may desire

– appreciate that one size does not fit all

e.g., teenagers are very different to grown-ups

– identify any incorrect assumptions they may have

about particular user groups
e.g., not all old people want or need big fonts

– be aware of both people’s sensitivities and their

capabilities 45
 Are cultural differences important?
• 5/21/2015 versus 21/5/2015?
– Which should be used for international
services and online forms?

• Why is it that certain products, like the iPod,

are universally accepted by people from all
parts of the world whereas websites are
reacted to differently by people from different
cultures?
46
 Accessibility
• Degree to which a product is usable and
accessible by as many people as possible

• Focus on disability:
– Have a mental or physical impairment

– This has an adverse affect on their everyday lives

– It is long term

47
 Anna, IKEA online sales agent
• Designed to be
different for UK and US
customers

• What are the differences

and which is which?

• What should Anna’s

appearance be like
for other countries,
like India, South Africa,
or China?
48
 Design principles
• Generalizable abstractions for thinking about
different aspects of design

• What to do and don't of interaction design

• What to provide and what not to provide at

the interface

• Derived from a mix of theory-based

knowledge, experience and common-sense
49
 1. Visibility
• This is a control panel for an elevator

• How does it work?

• Push a button for the floor you want?

• Nothing happens. Push any other

button? Still nothing. What do you
need to do?

• It is not visible as to what to do!

50
1. Visibility
…you need to insert your room card in the
slot by the buttons to get the elevator to
work!

How would you make this action more visible?

• make the card reader more obvious

• provide an auditory message, that says what
to do (which language?)
• provide a big label next to the card reader
that flashes when someone enters
• make relevant parts visible
• make what has to be done obvious
51
 1. Visibility

Invisible automatic
controls can make it
more difficult
to use

What do I do if I am
wearing black?

52
 2. Feedback
• Sending information back to the user about
what has been done
• Includes sound, highlighting, animation and
combinations of these

– e.g. when screen button clicked on

provides sound or red highlight feedback:
“ccclichhk”

53
 3. Constraints
• Restricting the possible actions that can be
performed
• Helps prevent user from selecting incorrect
options
• Physical objects can be designed to constrain
things
– e.g. only one way you can insert a key into a lock

54
 3. Constraints
Logical or ambiguous design?
• Where do you plug the mouse?

• Where do you plug the keyboard?

• top or bottom connector?

• Do the color coded icons help?

(i) A provides direct adjacent

mapping between icon
and connector

(ii) B provides color coding to

associate the connectors
with the labels
55
 4. Consistency
• Design interfaces to have similar operations and
use similar elements for similar tasks

• For example:
– always use ctrl key plus first initial of the
command for an operation
ctrl+C, ctrl+S, ctrl+O

• Main benefit is consistent interfaces are easier

to learn and use
56
 When consistency breaks down
• What happens if there is more than one
command starting with the same letter?
– e.g. save, spelling, select, style

• Have to find other initials or combinations of

keys, thereby breaking the consistency rule
– e.g. ctrl+S, ctrl+SP, ctrl+SL, ctrl+shift+ST

• Increases learning burden on user, making them

more prone to errors

57
 Internal and external consistency
• Internal consistency refers to designing
operations to behave the same within an
application
– Difficult to achieve with complex interfaces

• External consistency refers to designing

operations, interfaces, etc., to be the same
across applications and devices
– Very rarely the case, based on different
designer’s preference

58
 A case of external inconsistency

Keypad numbers layout

(a) phones, remote controls (b) calculators, computer keypads

1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 0

59
 5. Clue Affordances
• Refers to an attribute of an object that allows people to
know how to use it
– e.g. a mouse button invites pushing, a door handle
affords pulling
• Norman (1988) used the term to discuss the design of
everyday objects
– Since has been much popularised in interaction
design to discuss how to design interface objects
• Virtual affordances
– How do the following screen objects afford?
– e.g. scrollbars to afford moving up and down
• Interfaces are virtual and do not have affordances like
physical objects
– Instead, interfaces are better conceptualized as
perceived affordances 60
 Key points
• Interaction design is concerned with designing
interactive products to support the way people
communicate and interact in their everyday and
working lives.
• The notion of the user experience is central to
interaction design.
• It requires taking into account a number of
interdependent factors, including context of use, type of
activities, cultural differences, and user groups.
• It is multidisciplinary, involving many inputs from wide-
reaching disciplines and fields.
• Design principles, such as feedback and simplicity, are
useful heuristics for informing, analyzing, and evaluating
aspects of an interactive product. 61