IT 205 - Human

Computer Interaction
Chapter I: Introduction to
Human Computer Interaction
 Lesson 1: Objectives
At the end of the lesson, the students will be able to:
❑ Explain the concepts and history of human-computer interaction.
❑ Gain theoretical knowledge and practical experience in the
fundamental aspects of human-computer interaction.
❑ Identify the different research trends and research fields of
human-computer interaction.
❑ Differentiate the various discipline of human-computer
interaction.
 Introduction to HCI
What is human-computer interaction (HCI)?
Human-computer interaction (HCI) is a
multidisciplinary field of study focusing on the design
of computer technology and the interaction between
humans (the users) and computers. HCI become
popular and cover almost all forms of information
technology design.
 Introduction to HCI
What is human-computer interaction (HCI)?
Humans interact with computers in many ways,
the interface between humans and computers is
essential to facilitate this interaction. Desktop
applications, internet browsers, handheld computers,
ERP, and computer kiosks make use of the widespread
graphical user interfaces (GUI) of today.
 Introduction to HCI
What is human-computer interaction (HCI)?
Generally, the goal of human-computer interaction
is to produce a user interface that makes it easy,
effective, efficient, and enjoyable (user-friendly) to
use.
 History of HCI
The 1970s - The rise of the Personal Computer.
 History of HCI
The 1980s - Graphical User Interface (GUI).
 History of HCI
The 1990s - The Internet and Collaborative works.
 History of HCI
The 2000s - Mobile Computing and Beyond.
 History of HCI
Today HCI is used in the area of Cognitive Science.
 Research Fields in HCI
1. Ubiquitous Communication.
Computers will communicate through high-speed local
networks, nationally over wide-area networks, and portably
via infrared, ultrasonic, cellular, and other technologies. Data
and computational services will be portably accessible from
many if not most locations to which a user travels.
 Research Fields in HCI
2. High Functionality Systems.
Systems will have large numbers of functions associated with
them. There will be so many systems that most users,
technical or non-technical, will not have time to learn them
traditionally (e.g., through thick manuals).
 Research Fields in HCI
3. Mass Availability of Computer Graphics.
Computer graphics capabilities such as image processing,
graphics transformations, rendering, and interactive
animation will become widespread as inexpensive chips
become available for inclusion in general workstations.
 Research Fields in HCI
4. Mixed Media.
Systems will handle images, voice, sounds, video, text,
and formatted data. These will be exchangeable over
communication links among users. The separate worlds of
consumer electronics (e.g., stereo sets, VCRs, televisions)
and computers will partially merge. Computer and print
worlds will continue to cross assimilate each other.
 Research Fields in HCI
5. High-bandwidth Interaction.
The rate at which humans and machines interact will
increase substantially due to the changes in speed,
computer graphics, new media, and new input/output
devices. This will lead to some qualitatively different
interfaces, such as virtual reality or computational video.
 Research Fields in HCI
6. Large and Thin Displays.
New display technologies will finally mature enabling
very large displays and also displays that are thin,
lightweight, and have low power consumption. This will
have large effects on portability and will enable the
development of paper-like, pen-based computer
interaction systems very different in feel from desktop
workstations of the present.
 Research Fields in HCI
7. Embedded Computation.
Computation will pass beyond desktop computers into
every object for which uses can be found. The
environment will be alive with little computations from
computerized cooking appliances to lighting and plumbing
fixtures to window blinds to automobile braking systems
to greeting cards. To some extent, this development is
already taking place.
 Research Fields in HCI
8. Group Interfaces.
Interfaces to allow groups of people to coordinate will be
common (e.g., for meetings, for engineering projects, for
authoring joint documents). These will have major
impacts on the nature of organizations and the division of
labor. Models of the group design process will be
embedded in systems and will cause increased
rationalization of design.
 Research Fields in HCI
9. User Tailorability.
Ordinary users will routinely tailor applications to their
use and will use this power to invent new applications
based on their understanding of their domains. Users, with
their deeper knowledge of their knowledge domains, will
increasingly be important sources of new applications at
the expense of generic systems programmers (with
systems expertise but low domain expertise).
 Research Fields in HCI
10. Information Utilities.
Public information utilities (such as CompuServe, home
banking and shopping, etc.) and specialized industry
services (e.g., weather for pilots) will continue to
proliferate. The rate of proliferation will accelerate with
the introduction of high-bandwidth interaction and the
improvement in the quality of interfaces.
 Disciplines Contributing to HCI

“HCI discipline concern

with the design, evolution,
and implementation of an
interactive computer
system for human use
with the study of major
phenomena surrounding
them.”
 Lesson 2: Objectives
At the end of the lesson, the students will be able to:
❑ Distinguish the three parts of human-computer interaction.
❑ Have a clear understanding of the different interaction
metaphors.
❑ Identify the different goals of human-computer interaction.
❑ Recognize the importance of usability.
What is Human-Computer Interaction (HCI)?

HCI consists of three parts:

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.
 Human
▪ Humans are limited in their capacity to process
information. This has important implications for design.
▪ Information is received and responses are given via
several input and output channels:
▪ visual channel
▪ auditory channel
▪ haptic channel
▪ movement
 Human
▪ Information is stored in memory:
▪ sensory memory
▪ short-term (working) memory
▪ long-term memory
▪ Information is processed and applied:
▪ reasoning
▪ problem-solving
▪ skill acquisition
▪ error
 Human
▪ Emotion influences human capabilities.
▪ Users share common capabilities but are
individuals with differences, which should not
be ignored.
 Computer
▪ Input devices for interactive use, allowing text entry, drawing, and
selection from the screen:
▪ text entry: traditional keyboard, phone text entry, speech and
handwriting
▪ pointing: principally the mouse, but also touchpad, stylus, and others
▪ 3D interaction devices
▪ Output display devices for interactive use:
▪ different types of screen mostly using some form of a bitmap display
▪ large displays and situated displays for shared and public use
▪ the digital paper may be usable shortly
 Computer
▪ Virtual reality systems and 3D visualization have
special interaction and display devices.
▪ Various devices in the physical world:
▪ physical controls and dedicated displays
▪ sound, smell, and haptic feedback
▪ sensors for nearly everything including movement,
temperature, bio-signs
 Computer
▪ Paper output and input: the paperless office and the less-paper
office:
▪ different types of printers and their characteristics, character
styles, and fonts
▪ scanners and optical character recognition
▪ Memory:
▪ short-term memory: RAM
▪ long-term memory: magnetic and optical disks
▪ capacity limitations related to document and video storage
▪ access methods as they limit or help the user
 Computer
▪ Processing:
▪ the effects when systems run too slow or too fast,
the myth of the infinitely fast machine.
▪ limitations on processing speed.
▪ networks and their impact on system performance.
 Interaction
The interaction between the user and the system has
four parts:
▪ User O
Output
▪ Input
▪ System S U
▪ Output System User
I
Input
 Popular Metaphors for Computers
▪ computer as a vast library (Memex, 1945)
▪ computer as a giant calculator (ENIAC, 40s-50s)
▪ computer as an intelligent assistant (Licklider, 1957)
▪ computer as sketchpad (Sutherland, 1962)
▪ computer as tool or typewriter (Engelbart, 1963)
▪ computer as a human pretender (Weizenbaum, ‘60s)
▪ computer as a network (Taylor, 1968)
▪ computer as a book (portable) (Kay, Xerox PARC)
▪ computer as desktop/windows (Xerox PARC, ‘70s)
computers for the rest of us (Apple, 1984)
 Successful Metaphors
▪ text editing as using a typewriter
▪ voice mail as answering machine or mailbox
▪ data as files (in folders or directories)
▪ deleting a file as throwing it in the trash
▪ applications as tools (sometimes with icons)
▪ programming as building objects
▪ programming as directing actors on a stage
▪ applications as agents
 Interaction Styles
Interaction can be seen as a dialog between the
computer and the user. The choice of interface style
can have a profound effect on the nature of this
dialog. The most common interface styles and the
different effects these have on the interaction. There
are several common interface styles including.
 Interaction Styles
Command Line Interface
It provides a means of
expressing instructions to be
computer directly, using
function keys, single
characters, abbreviations, or
whole word commands.
 Interaction Styles
Menus
A menu is a list of options
or commands presented to
the user of a computer or
communications system.
A menu may either be a
system's entire user
interface, or only part of a
more complex one.
 Interaction Styles
Natural Language
Language is by nature
vague and imprecise: this
gives it is flexibility and
allows creativity in
expression. Computers, on
the other hand, require
precise instructions.
 Interaction Styles
Question/Answer and
Query Dialog
The user is asked a series
of questions (mainly with
yes/no responses, multiple
-choice, or codes) and so
is led through the
interaction step by step.
 Interaction Styles
Form-Fills and
Spreadsheets
Form-filling interfaces are
used primarily for data entry
but can also be useful in
data retrieval applications.
The user is presented with a
display resembling a paper
form, with slots to fill in.
 Interaction Styles
WIMP Interface
WIMP stands for Windows,
Icons, Menus, and Pointers
(or maybe Windows, Icons,
Mouse, Pull-down menus).
WIMP is the style of
graphical user interface that
uses the above-mentioned
common widgets.
 Interaction Styles
Point-and-Click Interfaces
Point and click are the
actions of a computer user
moving a pointer to a certain
location on a screen
(pointing) and then pressing
a button on a mouse, usually
the left button (click), or
another pointing device.
 Interaction Styles
Three Dimensional
Interfaces
Virtual reality is one of the
best examples of three-
dimensional interfaces, but
VR is only a part of a range
of 3D techniques available
to the interface designer.
 Lesson 3: Objectives
At the end of the lesson, the students will be able to:
❑ Explain the main goals of human-computer interaction.
❑ Identify the different benefits of human-computer interaction.
❑ Recognize the importance of usability.
❑ Describe the usability attributes of HCI.
 The Goals of HCI
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
 The Goals of HCI
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
▪ Not to use the term ‘user-friendly’ which intended to mean a
system with high usability but always misinterpreted to mean
cleaning up the screen displays to make it more pleasing
 The Goals of HCI
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.
 The Goals of HCI
The goals of HCI are to produce usable and safe systems, as well as
functional systems. In order to fulfill that, developers must attempt to:
▪ Understand how people use technology.
▪ Building suitable systems.
▪ Achieve efficient, effective, and safe interaction.
▪ Put people first.
People needs, capabilities and preferences should come first.
People should not have to change the way that they use a system.
Instead, the system should be designed to match their
requirements.
 What is Usability?
A usable system is:
• easy to use
• easy to learn
• easy to remember how to use
• effective to use
• efficient to use
• safe to use
• enjoyable to use
 Usability Attributes of HCI
Effectiveness. It refers to how good a system, at doing what it
is supposed to do.
Learnability. It is about how much a system is easy to learn
for a new user, people wish to become familiar with the
system easily rather than spending more time on learning the
system.
Efficiency. It refers to the way a product supports users in
carrying out their tasks.
 Usability Attributes of HCI
Safety. Protecting users from dangerous conditions and
undesirable situations. There are two types of dangerous
conditions.
External Conditions. Conditions that can cause danger to users
physically, or simply can be told as ergonomic factors.
Internal Conditions. Conditions that are triggered by unwanted
accidental actions of a user. Users always fear about making
mistakes and errors and how they will affect the System and lead
to severe consequences.
 Usability Attributes of HCI
Memorability. This refers to how easy a system to be
remembered. It is important for the Interactive systems that
are used infrequently.
Utility. It refers to the right functionalities, a system providing
to the user to accomplish the intended task.
 Lesson 4: Objectives
At the end of the lesson, the students will be able to:
❑ Analyze the importance of designing for optimum usability.
❑ Identify the variety of user interface design and interactive
solutions.
❑ Differentiate the various user interface design issues in HCI.
❑ Recognize the ten user interface design fundamentals.
 How to Design for Optimum Usability?
“Designing an object to be simple and clear takes at least
twice as long as the usual way. It requires concentration at
the outset on how a clear and simple system would work,
followed by the steps required to make it come out that
way-steps which are often much harder and more complex
than the ordinary ones. It also requires a relentless pursuit
of that simplicity even when obstacles appear which would
seem to stand in the way of that simplicity.”
T. H. Nelson
The Home Computer Revolution, 1977
 How to Design for Optimum Usability?
1. Work with a clear understanding of users' goals and show them
in the design.
2. Mimic the real world regarding concepts, icons, and language.
3. Present instantly understandable, jargon-free messages and
actions users can take one chief action per screen.
4. Limit options to give a strong information scent on an
uncluttered display and show essential information for
completing tasks.
5. Keep content consistent.
 How to Design for Optimum Usability?
6. Follow established norms regarding function and layout (logo
positioning, tappable buttons).
7. Use proper font size, color, contrast, whitespace, etc. to:
▪ combine aesthetic appeal with scanning readability,
▪ present a clear, logical information hierarchy,
▪ design for accessibility.
8.Use chunking and emphasize key information at the beginning and
end of interactive sequences.
9. Offer informative feedback about the system status.
10. Include helpful navigation systems and search functionality.
 How to Design for Optimum Usability?
11.Allow for customizable controls, including
shortcuts.
12. Avoid disruptions (forced logins/pop-ups).
13. Make forms easy to complete.
14.Include warnings and autocorrect features to
minimize errors.
15. Make errors easy to diagnose.
 How to Design for Optimum Usability?
16. Offer easy-to-understand help documentation.
17. Show clear contact options.
18. Provide a back button to undo actions.
19.Include ALT tags to show more information about
images.
20.Consider server abilities regarding page-loading
time and downtime.
 How to Design for Optimum Usability?
21.Beware of in-app browsers and restrictions
(scrolling) in mobile design.
22. Make links active.
23. Describe links accurately.
24. Use user personas.
25. Do thorough usability testing.
 Designing User Interfaces for Users
User interfaces are the access points where users interact with
designs. They come in three formats:
1. Graphical user interfaces (GUIs). Users interact with visual
representations on digital control panels. A computer’s desktop is a
GUI.
2. Voice-controlled interfaces (VUIs). Users interact with these
through their voices. Most smart assistants (e.g., Siri on iPhone and
Alexa on Amazon devices) are VUIs.
3. Gesture-based interfaces. Users engage with 3D design spaces
through bodily motions (e.g., in virtual reality (VR) games).
 Issues in Design
▪ User characteristics issue ▪ Language barrier issue
▪ User interface type and design ▪ User experience issue
issues ▪ Complexity in UI design
▪ Message construction issues ▪ Guideline issues
▪ Display graphics design issues ▪ Navigating the interface
▪ Look and feel issues ▪ Organizing the display
▪ Performance issue ▪ Interaction design issues
Ten User Interface Design Fundamentals
1. Know your user
Your user’s goals are your goals, so learn them. Restate them,
repeat them. Then, learn about your user’s skills and
experience, and what they need. Find out what interfaces they
like and sit down and watch how they use them. Do not get
carried away trying to keep up with the competition by
mimicking trendy design styles or adding new features. By
focusing on your user first, you will be able to create an
interface that lets them achieve their goals.
Ten User Interface Design Fundamentals
2. Pay attention to patterns
Users spend the majority of their time on interfaces other than
your own (Facebook, MySpace, Blogger, Bank of America,
school/university, news websites, etc). There is no need to
reinvent the wheel. Those interfaces may solve some of the
same problems that users perceive within the one you are
creating. By using familiar UI patterns, you will help your users
feel at home.
Ten User Interface Design Fundamentals
3. Stay consistent
Your users need consistency. They need to know that once they
learn to do something, they will be able to do it again.
Language, layout, and design are just a few interface elements
that need consistency. A consistent interface enables your users
to have a better understanding of how things will work,
increasing their efficiency.
Ten User Interface Design Fundamentals
4. Use visual hierarchy
Design your interface in a way that allows the user to focus on
what is most important. The size, color, and placement of each
element work together, creating a clear path to understanding
your interface. A clear hierarchy will go great lengths in
reducing the appearance of complexity (even when the actions
themselves are complex).
Ten User Interface Design Fundamentals
5. Provide feedback
Your interface should at all times speak to your user when
his/her actions are both right and wrong or misunderstood.
Always inform your users of actions, changes in state and
errors, or exceptions that occur. Visual cues or simple
messaging can show the user whether his or her actions have
led to the expected result.
Ten User Interface Design Fundamentals
6. Be forgiving
No matter how clear your design is, people will make mistakes.
Your UI should allow for and tolerate user error. Design ways for
users to undo actions, and be forgiving with varied inputs (no one
likes to start over because he/she put in the wrong birth date
format). Also, if the user does cause an error, use your messaging
as a teachable situation by showing what action was wrong, and
ensure that she/he knows how to prevent the error from occurring
again. A great example can be seen in How to increase signups
with easier captchas.
Ten User Interface Design Fundamentals
7. Empower your user
Once a user has become experienced with your interface,
reward him/her and take off the training wheels. The breakdown
of complex tasks into simple steps will become cumbersome
and distracting. Providing more abstract ways, like keyboard
shortcuts, to accomplish tasks will allow your design to get out
of the way.
Ten User Interface Design Fundamentals
8. Speak their language
If you think every pixel, every icon, every typeface matters, and
then you also need to believe that every letter matters. All
interfaces require some level of copywriting. Keep things
conversational, not sensational. Provide clear and concise labels
for actions and keep your messaging simple. Your users will
appreciate it because they won’t hear you, they will hear
themselves and/or their peers.
Ten User Interface Design Fundamentals
9. Keep it simple
The best interface designs are invisible. They do not contain UI-
bling or unnecessary elements. Instead, the necessary elements
are concise and make sense. Whenever you are thinking about
adding a new feature or element to your interface, ask the
question, “Does the user really need this?” or “Why does the
user want this very clever animated gif?” Are you adding things
because you like or want them? Never let your UI ego steal the
appearance.
Ten User Interface Design Fundamentals
10. Keep moving forward
It is often said when developing interfaces that you need to fail
fast, and iterate often. When creating a UI, you will make
mistakes. Just keep moving forward, and remember to keep
your UI out of the way.