HUMAN COMPUTER

INTERACTION
Lecture 1
• The best way to reach me is through e-mail:

kanwal.batool@students.au.edu.pk

• Google Classroom code and link

BSSE III (A): erltphu

https://classroom.google.com/c/NTI3NzA4MjU4MzU3?cjc=erltphu

BSSE III (B): hwdgxuh

https://classroom.google.com/c/NTI3NzA4MzQ2MDQ1?cjc=hwdgxuh
 3

Text Book
“Human-Computer Interaction”, Alan Dix, Computing
Department, Lancaster University Janet E. Finlay, Leeds
Metropolitan University, Gregory D. Abowd, Georgia Institute of
Technology, Russell Beale, University of Birmingham ISBN-10:
0130461091 ISBN-13: 9780130461094 Publisher: Prentice Hall
3rd Ed or Latest Edition
 4

Reference
“Designing the User Interface: Strategies for Effective Human-
Computer Interaction”, Ben Shneiderman, University of
Maryland Catherine Plaisant, University of Maryland ISBN-10:
0321197860 ISBN-13: 9780321197863 Publisher: Addison-
Wesley 4th Ed or Latest Edition
 5

Course Objective
This course introduces the human issues of
usability and its importance. It considers the
implications of human understanding on the
usability of computer systems and the
importance of understanding the context of use.
It describes guidelines for use of different
media and interface styles.
 6

Grading Policy
Percentages are subject to change.
The breakdown is as follows:
• Quizzes : 10%
• Assignments: 10%
• Mid Term: 25%
• Presentation/ Project: 10%
• Final: 45%
 7

General Course Policies

• Cheating and copying will NOT be tolerated. Zero

credit for the person providing help and getting help.

• Students will submit all assignments timely.

• No makeup quiz/exam/assignment will be taken.

• Quizzes will be Announced + Surprised.

 8

General Course Policies contd..

• Student coming after first 10-15 minutes will be

marked -absent.

• You are responsible for timely and functional delivery

of your project/assignment at the beginning of class on
submission date. Late assignments/projects will result
in zero marks.
 9

what is HCI?
• HCI (human-computer interaction) is the study of how
people interact with computers.
• HCI consists of three parts:
• Human: Could be individual user or a group of users.
• Computer: Could be any technology ranging from the
general desktop computer to large scale computer
system.
• Interaction: Any direct or indirect communication
between a human and computer.
 10

Class Activity: how many …

Computers in your house?

Computers in your pockets?

 11

How many computers …

in your house? in your pockets?

• PC • PDA
• TV, VCR, DVD, WiFi, • Cell phone, camera
cable/satellite TV • smart card
• microwave, cooker, • card with magnetic strip
washing machine • electronic car key
• central heating • USB memory
• security system

try your pockets and bags

can you think of more?
Why HCI?
• HCI stands for Human Computer Interaction….
• So what are we trying to achieve by studying this
course.

“If we design and develop digital products in such a way

that the people who use them can easily achieve their
goals, they will be satisfied, effective, and happy.”

That seems simple enough … yet many products are

frustrating to use.
Why HCI?
• Can you think of any products that you have used and
you had a problem using them?

• It doesn’t only have to be software.

• What about the vending machine downstairs? Was it
easy to use when you used it for the first time?

• Also think about a product that is pleasant to use or

that does not require a thought.

• A sign of good design is that you don’t notice them.

• Its when design fails it is very obvious.
Why HCI?
• What about other every day products?
• Have you ever pulled a door when it was supposed to
be pulled?
 Why do so many products fail?
• The main reason is the absence of design.
• What is design?
Understanding the desires, needs, motivations, and
contexts of people using products.
Understanding business, technical, and domain
opportunities, requirements, and constraints.
Using this knowledge as a foundation for plans to
create products whose form, content, and behavior are
useful, usable, and desirable, as well as economically
viable and technically feasible
Why digital products fail?
• Four main reasons
• Misplaces Priorities– on the part of both
management and developers
• Ignorance about real users
• Conflicts of interest
• Lack of design process
Misplaces Priorities

• Developers
• Have a lot of say regarding what actually gets built.
• Have tight deadlines and confusing input about what
needs to be built
Ignorance about real users
• Who will use the product?
• Why would they want to use it?
• How will they use it?
• What are there goals?
What is Design?
“It’s not just what it looks like and feels like. Design is
how it works.”
-Steve Jobs (Co-founder, Chairman, and CEO of Apple Inc.)
What is Interaction Design?
•• Develop interactive products that are usable
• easy to learn
• effective to use
• enjoyable user experience
Conflict of Interest
• Developers should not be designers.
• Why?
• Because they are NOT the users.

• The reality of every developer is that they’re

completely immersed in the back end, but they’re
never face-to-face with the end user. The user doesn’t
interact directly with their work—the user interacts
with what the designer creates.
Lack of Design Process
• Processes exist but may not be followed
• Many companies integrate user input directly into the
development…
• but users can only identify problems but often can
not specify the solution.
Context of HCI
• Where can we apply HCI?

• Anything with an interface

Good and Bad Design
A few Examples

28
Before we start, let’s check this video and
comeback!!

https://www.youtube.com/watch?v=II8TOCsoMK0

29
Good and Bad Design
A few Examples
• WhatsApp’s delete message feature

30
Good and Bad Design
A few Examples
• Netflix hover auto-play

31
Good and Bad Design
A few Examples
• Super long dropdowns

32
Good and Bad Design
A few Examples
• This classic password kerfuffle

33
 34

HCI How?
• How do we improve interfaces?

• Educate software professionals

• Draw upon fast accumulating body of knowledge
regarding H-C interface design
• Integrate UI design methods & techniques into
standard software development methodologies now in
place
 35

UI Design/Develop Process
User-Centered Design

• Analyze user’s goals & tasks

• Create design alternatives
• Evaluate options IMPLEMENT
• Implement prototype
• Test DESIGN
• Refine

USE &
EVALUATE
 36

Good Or Bad Interface??

© Interface Hall of Shame

Good or Bad Design
 38

Good design example

 39

Bad design-Examples
 40

Bad design-Examples (cont..)

 41

Bad design-Examples (cont..)

Context of HCI
• That includes
• Websites
• Desk top applications
• Mobile apps
• Coffee machines
• Vending machines
• Software in an airplane
• …
• …
• ..
• .
 43

Why is Good Interaction Design Important?

• Users time isn’t getting any cheaper

• A company may save lots of money by reducing the
time it takes it workers to do a task.
• Few attempts to use any product.
• If not successful
• Loses hope
• Gives up
• Disasters can occur if interface is designed poorly
Therac-25 Design Disaster
Therac-25 Design Disaster
• Key design lessons
• Avoiding errors System
• Visibility Writing good error messages
• Good documentation matters
• Involve users in design and testing!
 46

Why are User Interfaces Hard to Design

• You are not the user
• It is very hard for designers to put themselves in
place of the user to understand how they will
perceive things.
• Users are right
• If people keep making the same mistakes with your
design it’s the fault of the design not the users.
• But users are not designers
• They don’t always know what they want
 47

So What is Usability
• Dimensions of Usability
• Learnability
• Efficiency
• Visibility
• Errors
• Satisfaction
• All of these are measurable, just as we can say that Algorithm
X is more efficient then Algorithm Y we can say Interface X
is more Learnable than interface Y
• What about when all the requirements haven’t been meet?
• Or if a system crashes?
 48

Which Dimension of Usability is more Important?

• …. Depends on the user

• New users would need learnability more
• Experts need efficiency
• Infrequent users need memorability
• But no user is completely novice or expert
 49

Why Study HCI?

• To develop products / interaction techniques

• Easy to use
• Easy to learn
• Easy to remember
• To design user friendly systems
• Efficient
• Avoid unnecessary complexity
 50

What is HCI?
 51

Software Eng. VS HCI

• System- • User-

Human Computer
Interaction
Software Engineering

centered centered
• Software • Users
architecture • Tasks
• procedural • Context of
aspects use
 52

Some HCI Subjects

• HCI (in general)

• Usability eng./testing
• User interface design
• Human factors/Ergonomics
• Web design/usability
• Graphic design
• Information visualization
• Many more…
 53

The importance of HCI

• e.g. pilot shuts down the wrong engine and the plane
crashes (happened in England on M1 motorway in
1989. this is obviously more serious. 47 died.
• So Good interface design can prevent Accidents.
• Can reduce the cost of customer training and support.
 54

Course Learning Outcomes

Upon completion of the course, students will be able to:

• Explain context of HCI and different measures for evaluation.

• Apply the principles of good design for people from the
perspective of age and disabilities.
• Implement techniques for user centered design for a medium
sized software.
• Evaluate the usability of a medium size software user interface.
• Discuss various interaction technologies.
• Tools for prototyping.