Module 1

Introduction to HCI
jjelenzano
Objectives
At the end of the chapter, the learner should be able to:
• Identify what is HCI
• Know the history of HCI
• HCI related disciplines
History of HCI
What is HCI?
Human-Computer Interaction (HCI) is a field of study focusing on the
design of computer technology and the interaction between humans
(the users) and computers.
What is HCI?
• Emerged in the early 1980s, initially as a specialty area of Computer
Science

• Intersected with cognitive science and human factors engineering

Human Factor (Ergonomics)
• Roots of HCI

• Study of human capabilities, limitations, and performance

• Concerned with the design of systems that are efficient, safe,

comfortable, and even enjoyable
 HCI
Is a name for a community of communities.
Contributing Disciplines
• Computer science
• Cognitive psychology
• Social and organizational psychology
• Ergonomics or human factors
• Linguistics
• Artificial intelligence
• Philosophy, sociology, anthropology
• Engineering and design
Composed of Multitude of fields
• User experience design
• Interaction design
• Applications design
• Usability engineering
• Technical communication
• Information design
• Mobile computing
• Distributed systems
• Wearable computing
• Ambient intelligence
• …
Principles of HCI
Goals of HCI
• understand the factors that determine how people use technology

• develop tools and techniques to enable building suitable systems

• achieve efficient, effective, and safe interaction

• put people first

Four Principles in HCI
1. Human capabilities and limitations
2. Machine capabilities and limitations
3. Interactions
4. Tasks
Why HCI
• We study HCI to determine how we can make this computer
technology more usable by people
Why usability is important?
• Many of our everyday things are not designed to be usable
Usefulness & Usability
Usefulness and Usability
• What is the difference between useful and usable?
Usefulness and Usability
• Useful – The system supports the objective of
the user.

• Usable – It supports these objectives in easy-

to-use ways.
Usefulness and Usability
• Useful + Usable = Not Used

• Accessible – It can be used by the full range of intended users.

Usefulness and Usability but not used
Design Rules
Design Rules
• It is a principle, guidelines or standards that a designer can follow
ISO 9241
• Originally titled Ergonomic
requirements for office work
with visual display terminals
(VDTs)

• Retitled to Ergonomics of Human

System Interaction in 2006

• Effectiveness, Efficiency, and

Satisfaction
Design Rules for HCI

• ISO 9241, Ergonomics of Human System Interaction, adopts

traditional usability categories with specific measures, e. g. :

Usability Effectiveness Efficiency satisfaction

objective measures measures measures

Suitability for the Percentage of Time to Rating scale for

task goals achieved complete a task satisfaction
Appropriate for Number ofpower Efficiency Rating scale for
trained users features used relative toexpert ease oflearning
user
Learnability Percentage of Time to learn Rating scale for
functions learned criterion ease oflearning
Error tolerance Percentage of Time spent on Rating scale for
errors corrected correcting errors error handling
successfully
• American computer scientist, a
University Professor in the
Department of Computer Science
and he founding director (1983-
2000) of the University of
Maryland Human- Computer
Interaction Lab.

Ben Shneiderman
Design Rules for HCI
Shneiderman’s Eight Golden Rules of Interface Design
These guidelines are beneficial for normal designers as well as
interface designers. Using these eight guidelines, it is possible to
differentiate a good interface design from a bad one. These are
beneficial in experimental assessment of identifying better GUIs.
Design Rules for HCI
8 Golden Rules of Interface Design
-Strive for consistency
by utilizing familiar icons, colors, menu hierarchy, call-to-actions,
and user flows when designing similar situations and sequence of
actions. Standardizing the way information is conveyed ensures users
are able to apply knowledge from one click to another; without the
need to learn new representations for the same actions. Consistency
plays an important role by helping users become familiar with the
digital landscape of your product so they can achieve their goals more
easily.
Design Rules for HCI
8 Golden Rules of Interface Design
-Enable frequent users to use shortcuts
with increased use comes the demand for quicker methods of
completing tasks. For example, both Windows and Mac provide users
with keyboard shortcuts for copying and pasting, so as the user
becomes more experienced, they can navigate and operate the user
interface more quickly and effortlessly.
Design Rules for HCI
8 Golden Rules of Interface Design
-Offer informative feedback
The user should know where they
are at and what is going on at all times.
For every action there should be
appropriate, human-readable feedback
within a reasonable amount of time. A
good example of applying this would be
to indicate to the user where they are at The Windows Media Player designers should
in the process when working through a have remembered Ben Shneiderman’s 3rd golden
multi-page questionnaire. A bad example rule: Offer informative feedback. Poorly designed
we often see is when an error message error messages often show an error-code that
shows an error-code instead of a human- does not mean anything to the user. As a good
designer you should always seek to give human-
readable and meaningful message. readable and meaningful feedback.
Design Rules for HCI
8 Golden Rules of Interface Design
-Design dialogue to yield closure.
Don’t keep your users guessing. Tell them what their action has
led them to. For example, users would appreciate a “Thank You”
message and a proof of purchase receipt when they’ve completed an
online purchase.
Design Rules for HCI
8 Golden Rules of Interface Design
-Offer simple error handling
No one likes to be told they’re wrong, especially your users.
Systems should be designed to be as fool-proof as possible, but when
unavoidable errors occur, ensure users are provided with simple,
intuitive step-by-step instructions to solve the problem as quickly and
painlessly as possible. For example, flag the text fields where the users
forgot to provide input in an online form.
Design Rules for HCI
8 Golden Rules of Interface Design
-Permit easy reversal of actions
Designers should aim to offer users obvious ways to reverse their
actions. These reversals should be permitted at various points whether
it occurs after a single action, a data entry or a whole sequence of
actions. As Shneiderman states in his book: “This feature relieves
anxiety, since the user knows that errors can be undone; it thus
encourages exploration of unfamiliar options”.
Design Rules for HCI
8 Golden Rules of Interface Design
-Support Internal Locus of Control
Allow your users to be the initiators of actions. Give users the
sense that they are in full control of events occurring in the digital
space. Earn their trust as you design the system to behave as they
expect.
Design Rules for HCI
8 Golden Rules of Interface Design
-Reduce short-term memory load
Human attention is limited and we are only capable of
maintaining around five items in our short-term memory at one time.
Therefore, interfaces should be as simple as possible with proper
information hierarchy, and choosing recognition over recall.
Recognizing something is always easier than recall because recognition
involves perceiving cues that help us reach into our vast memory and
allowing relevant information to surface.
 The director of The Design
Lab at University of
California, San Diego. He is
best known for his books on
design, especially The
Design of Everyday Things

Donald Arthur "Don" Norman

ACTIVITY TIME

Good or Bad Design?

Norman’s Seven Principles
To assess the interaction between human
and computers, Donald Norman in 1988
proposed six concept on designing. He proposed
the seven stages that can be used to transform
difficult tasks. Following are the seven principles
of Norman.
Visibility
• Visibility is the basic principle that the more visible an element is,
the more likely users will know about them and how to use them.
Equally important is the opposite: when something is out of sight,
it’s difficult to know about and use.

• As simple as this principle is, designers still struggle with adopting

it.

• Users should know, just by looking at an interface, what their

options are and how to access them. This is particularly important
in mobile applications because it is a challenge to make everything
visible within the limited screen space; hence, it is essential to
include only the options that are needed. For example, a log-in
screen only needs information about logging in or signing up, so
cluttering it with other information would go against the visibility
principle.
Feedback
• Feedback is the principle of making it clear to the user
what action has been taken and what has been
accomplished. Many forms of feedback exist in
interaction design, including visual, tactile, audio, and
more. The key is to design the experience to never
leave the user guessing about what action they have
taken and the consequence of doing so.
• The user must receive feedback after every action they
perform to let them know whether or not their action
was successful. For example, changing the icon on the
tab to a spinner to indicate that a webpage is loading
Constraints
• Constraints is about limiting the range of interaction
possibilities for the user to simplify the interface and
guide the user to the appropriate next action. This is a
case where constraints are clarifying, since they make it
clear what can be done. Limitless possibilities often
leave the user confused.
• For example, An example of a constraint is an online
form that does not allow users to enter letters into a
phone number field.
Constraints-Physical
• Constrain possible operations

Example:
• different keys fit different locks
• design of manhole covers - they are round so that they
don’t fall into the hole
Constraints-Semantic
• Rely on the meaning of a situation to control actions
Constraints-Cultural
• Accepted cultural conventions that control actions
Constraints-Logical
• Relationship between spatial or functional layout of
components and the things they affect
Has to do
something
with doors
Mapping
• Mapping is about having a clear relationship between controls
and the effect they have on the world. You want this mapping to
feel as natural as possible.
• This is best understood with the vertical scroll bar; it tells you
where you currently are, and the page moves down at the same
pace and sensitivity as the vertical bar. A non-digital example is
of a modern stovetop whose control knobs are arranged in the
same order as the burners. This way, you will know exactly which
knob operates which burner.
Consistency
• Consistency refers to having similar operations and similar
elements for achieving similar tasks. By leveraging consistent
elements throughout your entire experience, you make your
experience far easier to use. This consistency is important not
only within your interface, but across the many interfaces users
are using across their devices.
• People learn new things and manage better when they
recognize patterns. Consistency is key for these patterns to be
recognized and learned by users. If similar-looking things do not
produce a similar output, the user is bound to become
frustrated. For example, if a website’s buttons are protruding
boxes with labels on them, then all of the website’s buttons
should look like that. Similarly, if a backward arrow denotes the
back button, then it​ should not be changed to something else
because that would be inconsistent with what the user has
learned.
Affordance
• Affordance refers to an attribute of an object that allows
people to know how to use it. Essentially to afford means
to give a clue. The physical button on a mouse gives a clue
that it can be clicked to perform an action. When an object
has strong affordances, it’s very clear how to use it.
• For example, a coffee mug has high affordance because
you instantly know how to hold it just by looking at it. The
same is true for digital applications; the design should be
intuitive enough that the users know how to access their
desired information just by looking at the interface.
• End