Fundamentals of

Human Computer Interaction

1
Outline
• Introduction and Overview
• What is HCI?
• HCI is Not about
• HCI is about
• The goals of HCI
• Examples of good and bad design
• HCI Importance
• Principles of HCI

2
HCI Introduction and Overview

• https://www.coursera.org/lecture/ui-design/user-interface-hall-of-fame-shame-chGtR
• https://www.coursera.org/lecture/ui-design/case-study-1-ui-disasters-including-gps-
fails-Gq6tr
• https://www.coursera.org/lecture/ui-design/case-study-2-corporate-value-citibank-atm-
ZJvO6
• https://www.coursera.org/lecture/ui-design/case-study-3-microsoft-office-2007-ribbon-
MJTVW
• https://www.coursera.org/lecture/ui-design/case-study-4-international-childrens-digital-
library-chQuL
• https://www.coursera.org/lecture/ui-design/case-study-5-taxes-and-tickets-b32c6
• https://www.coursera.org/lecture/ui-design/case-study-6-airbnb-vs-couchsurfing-RtvdH
HCI Introduction and Overview
• Refer to Activity #2 (15 minutes)

4
 Introduction and Overview

Interacting with technology has become an essential part of

everyday life for the majority of people.

The average user of a computer system is now less likely to

understand the technology. Since, there are different types of
technology they have to use.

People are busy and may spend little or no time actually learning
a new system.

5
 Introduction and Overview

Incredible leaps and bounds in the world of computing:

 3D printers that can print other 3D printers
 virtual and augmented reality applications can whisk a user away to new worlds
 voice-controlled devices can give you details about the weather and traffic.

Interaction is not always as easy as we hope for.

Can you remember the last time you got frustrated with your phone for auto-
correcting the wrong word or that notoriously slow automatic door at the mall? If
you can, that device suffered from poor design.

6
• Refer to Activity #3
• Call 2 to 3 students to share their experiences

7
HCI Definition
• Activity 4
• Mentimeter Activity

8
HCI Definition
It is a multidisciplinary field of study focusing on the design of
computer technology and, in particular, the interaction between
humans (the users) and computers. While initially concerned with
computers, HCI has since expanded to cover almost all forms of
information technology design (www.interaction-design.org)

It is the study of how people interact with computers and to what

extent computers are or are not developed for successful
interaction with human beings.
(https://searchsoftwarequality.techtarget.com)

It is 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)
Simply put, HCI (human-computer interaction) is the study of
interaction between people (users) and computers
.
Where does interaction between users and
computers occur?
.
.

User interface
10
Golden principle of HCI

“people should come first”

11
Parts of HCI

Human: could be an individual user or a group of users.

Computer: could be any technology ranging from the general
desktop computer to a large- scale computer system.
Interaction: any direct or indirect communication between a
human and computer.

12
The HCI Challenge

13
HCI is Not about

Making the interface look pretty

Only about desktop computers (and that goes for

computing as well!)

Something that would be nice to do but usually there’s

no time for it
14
HCI is about

Understanding the users

Understanding users’ tasks
Understanding the surrounding environment
Requirements gathering and analysis
Design prototype
Evaluate the system

15
Goal of HCI
The goal of HCI “is to develop or improve the safety, utility, effectiveness,
efficiency and usability of system that include computers.” (Interacting with computers,
1989, p3)

Ensuring usability.
“A usable software system is one that supports the effective and efficient completion of tasks in a given work
context” (Karat and Dayton 1995).

The bottom-line benefits of more usable software system to business users include:
•Increased productivity
•Decreased user training time and cost
•Decreased user errors
•Increased accuracy of data input and data interpretation
•Decreased need for ongoing technical support

16
The bottom-line benefits of usability to development organizations include:
• Greater profits due to more competitive products/services
• Decreased overall development and maintenance costs
• Decreased customer support costs
• More follow-on business due to satisfied customers

‘user-friendly’ intended to mean a system with high usability is always misinterpreted to mean
tidying up the screen displays to make it more pleasing

17
To achieve usability, the design of the user interface to any interactive product, needs to take into
account and be tailored around a number of factors, including:
• Cognitive, perceptual, and motor capabilities and constraints of people in general
• Special and unique characteristics of the intended user population in particular
• Unique characteristics of the users’ physical and social work environment
• Unique characteristics and requirements of the users’ tasks, which are being supported by the
software
• Unique capabilities and constraints of the chosen software and/or hardware and platform for the
product

18
Why is usability important?
A Good user-interface can:

1. Earn a company billions.

2. Increase users’ loyalty.

3. Increase users’ trust.

4. Makes users happy : )

19
A Bad user-interface can:

1. be annoying, embarrassing, frustrating, and even deadly.

2. Increase mistakes in data entry and system operation.
3. Makes functions become completely inaccessible.
4. System failure because of user rejection.

20
It is not Simple to Make Good
User Interfaces

Basic misconceptions:
• If I (the developer) can use it, everyone can use it.

• If our non-technical staff can use it, everyone can.

• Good user interfaces are applied common sense.

• A system is usable if all style guidelines are met.

21
Examples of good and bad design

22
Examples ..(cont.)

23
Examples ..(cont.)

24
Examples ..(cont.)

25
Examples ..(cont.)

26
Examples ..(cont.)

27
• Activity #4
• Importance of HCI to you as IT students
• Group Assignment #1 (leader to give assessment to the participation
of members)
• History of HCI
• PowerPoint presentation (10 minutes recording)

28
• Human–computer interaction (HCI) is a cross-
disciplinary area (e.g., engineering, Hence, the letter I in HCI refers to both interaction
and interface, encompassing the abstract model
psychology, ergonomics, design) that deals and the technological methodology.
with the design, implementation, and
evaluation of the ways that humans use and
interact with computing devices.
• Interaction is a concept to be distinguished
from another similar term, interface.
• Interaction refers to an abstract model by
which humans interact with the computing
device for a given task, and an interface is a
choice of technical realization (hardware or
software) of such a given interaction model.

The term high usability means that the resulting interfaces are easy to use,
efficient for the task, ensure safety, and lead to a correct completion of the task.

Usable and efficient interaction with the computing device in turn translates to
higher productivity.
29
Principles of HCI
“Know Thy User”
Understand the Task
Reduce Memory Load
Strive for Consistency
Remind Users and Refresh Their Memory
Prevent Errors/Reversal of Action
Naturalness
“Know thy User”
interaction and interface should cater to the needs and capabilities of
the target
comprehensive information (e.g., age, gender, education level, social
status, computing experience, cultural background) about the
representative target user should be collected and analyzed to determine
their probable preferences, tendencies, capabilities (physical and
mental), and skill levels.
if a direct field study is not feasible, an experienced HCI designer will at
least try to leverage the vast knowledge available from cognitive
psychology, ergonomics, and anthropomorphic data to assess the
capabilities and characteristics of the target user group.
 Understand the Task
 Task refers to the job to be accomplished by the
user through the use of the interactive system
 Task analysis is the process of learning about
ordinary users by observing them in action to
understand in detail how they perform their
tasks and achieve their intended goals.
 It involves identifying the sequence and structure
of subtasks at an abstraction level appropriate for
the typical user within the larger application
context.
 Understanding the task at hand is closely related
to the interaction modeling and user analysis.

32
 Reduce Memory Load
Humans are certainly more efficient in
carrying out tasks that require less
memory burden
Humans can remember 7 +/- 2 chunks of
info
Reduce the requirement to remember
past actions, inputs and results by
providing visual cues (recognize rather
than recall)
Establish meaningful defaults
Define shortcuts that are intuitive
The visual layout of the interface should
be based on a real world metaphor

33
Strive for Consistency
Consistency in UI design is
concerned with making sure
elements in a user interface are
uniform. They'll look and
behave the same way. This
helps constantly prove a user's
assumptions about the user
interface right, creating a sense
of control, familiarity, and
reliability

34
 Remind Users and Refresh Their Memory
• employ interfaces that give continuous
reminders of important information and thereby One particular type of informative feedback (aside from
the current status) is the reaffirmation of the user action
refresh the user’s memory. to signal the closure of a larger process . An example
• human memory dissipates information quite might be not only explicitly confirming the safe receipt of
quickly, and this is especially true when a credit card number, but also signaling that the order is
complete (and “closed”). Such a closure will bring
switching tasks in multitasking situations
satisfaction by matching the user’s mental picture of the
• For instance, in an online shopping application, ongoing interactive process.
one might cycle through the entry of different
types of information: item selection, delivery
options, address, credit card number, number of
items, etc. To maintain the user’s awareness of
the situation and further elicit correct responses,
informative, momentary, or continuous
feedback will refresh the user’s memory and
help the user complete the task easily.

35
Prevent Errors/Reversal of Action

error-free operation is important

present or solicit only the relevant
information/action as required at a given time. (e.g.
inactive menu items)
requiring the user to choose from possibilities (e.g.,
menu system) is a safer approach than to rely on
recall (e.g., direct text input)
allow an easy reversal of action as there is always a
chance that the user will make mistakes and slips;

36
 Naturalness
• Naturalness refers to a trait that is reflective of various An interface called the ARCBall for rotating an
operations in our everyday life. object in 3-D space using a mouse (2-D device). In
order to rotate, the selected object is overlaid with
• a perfect HCI may one day be realized when a natural language– and enclosed by a transparent sphere, and the user
based conversational interface is possible drags on the surface of the sphere to rotate the
object inside. One might consider this rotation
• one approach is to model interaction “metaphorically” to the technique to be metaphoric because it abstracts the
real-life counterpart, extracting the conceptual and abstract interaction object into the shape of a sphere, the
essence of the task. most rotational object we know.
• a natural or metaphoric interface will also have affordance, a
property (or additional cues) that appeals to our innate
perception and cognition, thus making it so intuitive that the
interface would require almost no learning.
• In the example of the ARCBall, the spherical shape of the rotator
GUI may be regarded to exhibit a high level of affordance,
requiring no explanation as to how to rotate the object.

37
Interface Metaphors
Metaphor, a term applied often to today's
• Metaphors are one way you can bring the real world
computer systems, is the process of
into your interface. RealCD is an example of an
representing the computer system with objects
interface that uses a strong metaphor in its interface.
and events from a noncomputer domain,
such as the popular desktop metaphor. • A well-chosen, well-executed metaphor can be quite
Analogy is a comparison between objects or effective and appealing, but be aware that metaphors
events that serve the same purpose but have can also mislead.
different representations. • The advantage of metaphor is that a conceptual model
that the user already has experience with is borrowed.
A metaphor can convey a lot of knowledge about the
interface model all at once. It’s a notebook. It’s a CD
case. It’s a desktop. It’s a trashcan.
• Each of these metaphors carries along with it a lot of
knowledge about the parts, their purposes, and their
interactions, which the user can draw on to make
guesses about how the interface will work.
Group Activity
• List down as many interface metaphors as you have encountered
• List down also interface metaphors that are misleading.

39
• End

40