Human Computer

Interaction
 Introduction
• Dr. Mazhar Sadiq
Ph.D from University of Jyvaskyla, Finland.
• E-mail
masadiq@cuisahiwal.edu.pk

2
 Outline
• Class Rules
• Course Learning / Writing outcome
• Assignments
• What is HCI?
• What is User Interface?
• Difference between good and bad Design
• The Problems of Bad Design
• What is Usability?
• What is User Experience?
• Design Principles

3
 Class Rules
• Be quiet and be attentive.
• Take class assignments / quiz seriously.
• Zero tolerance for cheating. Zero marks for the copied
quizzes/assignments (very easy to spot copied assignments
when I have only two to evaluate at a time )
• If you are late for 10 minutes, then consider yourself
abscent.

4
 Course Learning Outcomes
Upon completion of the course, students will be able to:
• Understand the basics of human-computer interactions.
• Understand the concept of Usability and how to measure
it?
• Understand the design principles for the interactive
systems.
• Understand the concept of User Experience.
• Understand the concept of Evaluation.
• Understand the good or bad user interface design.

5
 Text Books
• Yvonne Rogers, Helen Sharp, Jenny Preece
Interaction Design: Beyond Human Computer I
nteraction
, 4rd Edition, Wiley, 2015.

• Debbie Stone. et al.,

User Interface Design and Evaluation. Morgan
Kaufmann Publisher, 2005.

6
 Subject Assessments
• Assignments : 10%
• Quizzes : 15%
• Sessional 1, 2 : 25%
• Final Exam : 50%

. 7
 Goal of HCI

How to make this world a better place?

Reducing negative aspects: confusion, frustration,
annoyance etc..
Increasing positive aspects: efficient to use, effective
to use, enjoyable to use etc..

8
 What is HCI?
• “Human-Computer Interaction is a discipline
concerned with the design, evaluation and
implementation of interactive systems for
human use and with the study of major
phenomena surrounding them”.
(ACM/IEEE)

• HCI involves the design, implementation and

evaluation of interactive systems in the
context of the user’s task and work.

9
 What is HCI?
• Three major components of HCI
– Human
– Computer
– Interaction

10
 What is HCI?
• HCI is the study of how humans interact
with computer systems.

Interaction

Computer Human

11
 What is HCI? - Human
• Human?? Or User
• The user is whoever is trying to get the job
done using the technology
– An individual User
– Group of Users working together
– Sequence of users in an organization, each
dealing with some part of the task or process.

12
 What is HCI? - Computer
• Computer??
• any technology ranging from the
general desktop computer to a large-scale
computer system, a process control system
or an embedded system

• Any other???

13
 What is Interaction?

• Any communication between a user and

computer
• Can be direct or indirect
• Direct interaction involves a dialog with feedback
and control throughout performance of the task
• Indirect interaction may involve batch processing
or intelligent sensors controlling the environment

14
 What is User Interface?
The User Interface is the part of the system that is
exposed to a User. It hides the internals of the
computer from the user.

15
 Why the User Interface Matters?
• In August 2000, 51% of households in
the United States had access to one or more home
computers, and 42% of households had access to the
Internet (U.S. Census Bureau, 2001). In 2002, 54% of
households in the United Kingdom had access to some form
of home computer, and 44%
had access to the Internet (National Statistics, 2004).
Therefore, the need for the
design and development of user interfaces that support the
tasks people want to do
and that can be used easily by a variety of people with
varying abilities has become an important issue.

16
Bad Design: ATM Machine

17
Bad Design: The corridor

18
Bad Design: Elevator

19
 Bad Design: Elevator
Elevator controls and labels on the bottom row all look
the same, so it is easy Elevator controls to push a label by
mistake instead of a control button

People do not make same mistake for the labels and buttons on 20
the top row. Why not?
 Bad Design: Voice Mail System
1. Touch 41.’
2. Touch*, your room number, and #.’
3. You do and the system replies: ‘You have reached the mailbox for
the room 106. To leave a message, type in your password.’
4. It takes six steps to access a message and five steps to leave a
message. You go out and buy a new cell phone.

What is problematic with this voice mail system?

 It is infuriating
 It is confusing
 It is inefficient
 It has no means of letting you know if any message has been left or
how many there are.
 It is not oblivious what to do?

21
 Good design

• 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

www.id-book.com 22
Tivo and Apex Remote control

23
 Good and bad design
• 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

See:
http://gizmodo.com/5017972/story-of-a-peanut-the-tivo-remotes-unt
old-past-present-and-future

24
 The problems of Bad Design
• User Frustration and Dissatisfaction

25
 The problems of Bad Design
• User Frustration and Dissatisfaction Continue…

26
 The problems of Bad Design
• Loss of productivity, Efficiency and Money

27
The problems of Bad Design
Computer systems with poor user interfaces can have a
financial cost. Take the crisis at the Passport Agency. It was
reported that the cost of this failure was $20 million (£12.6
million), which included nine million dollars (six million
pounds) on staff overtime and at least $242,000 (£161,000) in
compensation to the hundreds of people who missed their
vacations as a result of not receiving their passports on time.
The Passport Agency also spent $24,000 (£16,000) on
umbrellas for people who had to wait outside of passport
offices in the rain to get their passports over the counter.
Subsequently the price of a passport was increased. The
supplier of the computer system had agreed to pay $3.7
million (£2.45 million) of the costs, leaving the remainder to
be paid by the taxpayer.
28
 The problems of Bad Design
• Safety and the User Interface

29
 The problems of Bad Design
• Safety and the User Interface continue..

30
 The problems of Bad Design
• Election and the User Interface:
In November 2000, the topic of user interface design
suddenly became international news when the
outcome of the U.S. presidential election hung on the
results of one county in Florida. In this election, an
apparently minor aspect of equipment design turned
out to have major consequences. Many voters in Palm
Beach County felt that their vote went to the wrong
person.

31
 The problems of Bad Design
• Election and the User Interface (Difficult to understand)

32
 What is Usability?

Dr 33
 Characteristics of Usable product
1) Effectiveness: Effectiveness is about whether users
can complete their goals with a high degree of
accuracy. Much of the effectiveness of a product
comes from the support provided to users when they
work with the product.
For example, fixing a credit card field so that it only
accepts a valid credit card number entry can reduce
data entry errors and help users perform their task
correctly.

34
Characteristics of Usable product

35
 Characteristics of Usable product
2) Efficiency: Effectiveness and efficiency have come to be
blurred in the mind. They are, however, quite different from a
usability perspective. Efficiency is all about speed. How fast
can the user get the job done? Efficiency is about the time to
complete the task.
You need to examine the number of steps (or indeed
clicks/keystrokes) to achieving the objective or you need to
record the time. A highly successful mechanism patented by
Amazon.com is the one-click option, which requires users only
to click a single button when they want to make another
purchase.

36
 Characteristics of Usable product
3) Satisfaction: freedom from discomfort and
positive attitudes towards the use of the
product.

37
 Other Characteristics of Usable product
4) Learnability: Learnability refers to how easy a system
is to learn to use. It is well known that people don't like
spending a long time learning how to use a system. They
want to get started straight away and become competent
at carrying out tasks without too much effort. To a
certain extent, people are prepared to spend longer
learning more complex systems that provide a wider
range of functionality, like web authoring tools or ERP
System. In these situations, pop-up tutorials can help by
providing contextualized step-by-step material with
hands- on exercises.

38
 Other Characteristics of Usable product
5) Memorability: Memorability refers to how easy a product is to
remember, once learned. This is especially important for
interactive products that are used infrequently. If users haven't
used an operation for a few months or longer, they should be
able to remember or at least rapidly be reminded how to use it.
Memorability can be achieved at different stages of a task
through meaningful icons, command names, and menu options.
Also, structuring options and icons so they are placed in relevant
categories of options, e.g. placing all the drawing tools in the
same place on the screen, can help the user remember where to
look to find a particular tool at a given stage of a task.

39
 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)

www.id-book.com 40
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.

www.id-book.com 41
 User experience goals
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

www.id-book.com 42