INTRO TO HUMAN-

COMPUTER
INTERACTION (HCI)
Human Computer Interface
Engr. Alberto C. Cruz Jr.
Nowadays, there are
more interactions
between humans and
devices / programs/
systems.
Every element you see and
interact with on your device
is the result of countless
hours of study, design, and
testing, all grounded in
principles of ergonomics,
psychology, computer
science, and more.
Imagine a world where
every click, every touch,
every swipe on a device is
not just an action, but a
meaningful conversation.
This is the beating heart
of Human-Computer
Interaction (HCI)
WHAT IS HCI?
Human-computer
interaction (HCI) is the
field of study that focuses
on optimizing how users
and computers interact
by designing interactive
computer interfaces that
satisfy users’ needs.
HCI is a multidisciplinary
subject covering computer
science, behavioral sciences,
cognitive science,
ergonomics, psychology, and
design principles.
Until the late 1970s, the
only humans who
interacted with
computers were
information technology
professionals and
dedicated hobbyists.
The emergence of HCI dates
back to the 1980s when
personal computing was on
the rise.
It was when desktop computers
started appearing in households
and corporate offices.
HCI began with video games,
word processors, and numerical
units.
However, with the advent of the
Internet and the explosion of
mobile and diversified
technologies such as voice-
based and Internet of Things
(IoT), computing became
ubiquitous and unstoppable.
Today, HCI focuses on
designing, implementing, and
evaluating interactive interfaces
that enhance user experience
using computing devices. This
includes user interface design,
user-centered design, and user
experience design.
KEY COMPONENT
OF HCI
Components of HCI
• The user component refers to an
individual or a group of individuals that
participate in a common task.
• HCI studies users’ needs, goals, and
interaction patterns.
• It analyzes various parameters such as
users’ cognitive capabilities, emotions,
and experiences to provide them with a
seamless experience while interacting
with computing systems.
Components of HCI
• Along with the needs of a human user, it is
also important to consider the tasks that a
typical user will perform using an interface.
• This is where techniques such as task
analysis come in handy, where the
designers create various tasks and
scenarios to understand the user journey.
• Once the user journey is appropriately
mapped, the design of user interfaces
becomes more specific and task-oriented.
Components of HCI
• No technology, artifact, or
interface can be created in the
absence of appropriate tools.
• The design of modern HCI
technology needs certain tools
for gathering data, conducting
analyses, creating prototypes,
and evaluating the designs.
Components of HCI
• The interface is a crucial HCI
component that can enhance the overall
user interaction experience.
• Various interface-related aspects must
be considered, such as interaction type
(touch, click, gesture, or voice), screen
resolution, display size, or even color
contrast.
• Users can adjust these depending on
the user’s needs and requirements.
Components of HCI
• User researchers put a lot of
emphasis on observing real users in
their own context as they interact
with technology.
• HCI is not only about providing
better communication between
users and computers but also about
factoring in the context and
environment in which the system is
accessed
GOAL OF HCI
Goals of Human-
computer interaction
1. Understand the different interactions
with technologies
- People interact with technologies in different ways, based
on social, cultural, linguistic, and regional differences.

- It is important to understand these differences in order to

create interfaces that have a wider audience range.

- A significant focus of this field is on understanding how a

user interacts with an interface, and what type of relationship
is created between the machine and the human. This is where
a good understanding of human factors and ergonomics
Goals of Human-
computer interaction
2. Develop useful and usable
technologies
- User-friendly interfaces, both in the case of physical and
digital devices, are the ones that improve customer
satisfaction.

- A critical and analytical approach to HCI research

understands that the user-friendliness of any interface
varies based on the goals of the users and the use
settings.
Goals of Human-
computer interaction
3. Improve the overall user experience
- When designers apply the principles of HCI, the philosophy of
design systems re-adjusts its focus in a way that the users
and their needs take precedence.
- The idea is to apply the principles of UX design to ensure that
when users experience HCI technology, the interface aids
them in performing their tasks.
- User experience and satisfaction have a lot to do with human
perception. It is, therefore, important for designers to
understand the needs and expectations of the target
audience.
Goals of Human-
computer interaction
4. Enhance the efficiency of
interactions
- HCI helps in improving the efficiency of tasks, when the
users interact with the interfaces.

- In order to make the most of the user interaction, it is

necessary to get their feedback and make them an active
part of the design process.
Goals of Human-
computer interaction
5. Focus on inclusivity and accessibility
in design
- One important goal of HCI is to make digital platforms
more accessible so that the user interface is not only for
the privileged few.

- People from different regions and with varying physical or

cognitive abilities must not be sidelined when designing
technologies.
PRINCIPLE OF HCI
Principles of Human-
Computer Interaction
Consistency: Maintaining a consistent
design across an interface ensures
users can easily understand and use
the system.
Principles of Human-
Computer Interaction
Feedback: Providing timely and
informative feedback helps users
understand the consequences of their
actions and reinforces learning.
Principles of Human-
Computer Interaction
Flexibility: Designing interfaces
adapted to user needs, preferences,
and abilities increases usability.
Principles of Human-
Computer Interaction
Error Prevention and Recovery:
Minimizing the chances of user errors
and providing straightforward ways to
recover from them are essential for a
positive user experience.
TECHNIQUES AND
EXAMPLE OF HCI
 Techniques in HCI
Graphical User Interfaces
(GUIs)

GUIs enable users to interact

with computers through visual
elements like windows, icons, and
menus. They are the most
common interface type and have
greatly improved usability and
accessibility.
Techniques in HCI
Voice User Interfaces (VUIs)

VUIs allow users to interact with computers through

speech, enabling hands-free and eyes-free
interactions. Voice assistants like Amazon Alexa and
Apple's Siri are famous examples of VUIs.
 Techniques in HCI
Gesture-Based Interfaces

Gesture-based interfaces detect

and interpret user gestures, such
as swipes, pinches, and taps, as
input. These interfaces are
standard in touchscreens and
motion-sensing devices like the
Microsoft Kinect.
 Techniques in HCI
Haptic Interfaces

Haptic interfaces provide

tactile feedback to users,
simulating the sense of touch.
They are used in virtual reality
systems, gaming controllers,
and assistive technologies.
 Techniques in HCI
Brain-Computer Interfaces
(BCIs)

BCIs enable direct

communication between the
brain and a computer, typically
using electroencephalography
(EEG) to measure brain activity.
BCIs are used in research and
assistive technologies, such as
controlling prosthetic limbs.
 Example of HCI
Wearable technologies
- Wearable technologies, such as
smartwatches, are unique examples of the
application of HCI. Given that these
computing technologies are really small,
small enough to fit on the wrist, but include
sophisticated features such as typing a text,
placing orders, etc., is a remarkable example
of smart user interaction.
 Example of HCI
Voice assistants
- Voice assistants, like Siri and Alexa, are
another remarkable example of HCI. These
devices do not have a graphical user interface
or a physical computer interface with buttons
and icons that the users can directly
manipulate. However, the functionality of these
devices is quite impressive. Voice assistants
have revolutionized personal computing, and
their role in accessibility cannot be overstated.
 Example of HCI
Virtual reality
- Another interesting example of HCI, with a
futuristic touch, is the use of virtual reality
and augmented reality devices and
applications. These technologies take our
imagination to a whole new level. When the
users interact with these technologies, they
are, quite literally, transported into a
different world, thus opening new avenues
for human-computer interaction.
 Example of HCI
Internet of Things (IoT)
- As users interact with such devices, they
tend to collect their data, which helps
understand different user interaction
patterns. IoT companies can make critical
business decisions that can eventually drive
their future revenues and profits.
 Recent Development in Human-
Computer Interaction
Dexta Haptic Gloves
- When utilising virtual reality, Dexta haptic
gloves were created to simulate touch
feelings of hardness, softness, springiness,
and more. As the user interacts with things
in their VR experience, the gloves replicate
these feelings by locking and unlocking the
user's finger joints to various degrees. As
indicating VR applications here, learn the
applications of VR in the military.
 Recent Development in Human-
Computer Interaction
Pre-touch sensing
- It enables your smartphone to read your
thoughts (almost). When they first come out,
pre-touch phones should be able to detect
how the user holds the phone or which
fingers approach the screen in order to
forecast what the user intends to do. This
gives the impression that your phone can
read your mind since it executes things
before you give it a clear instruction.
 Recent Development in Human-
Computer Interaction
Paper ID
- It is the next effort to digitise paper by
converting it to a touchscreen. Paper will be
able to "detect its surroundings and respond
to gesture instructions, as well as link to the
Internet of Things," according to this new
technology. The goal is to connect the
physical and digital worlds.
HCI DESIGN
Designing Effective Human-
Computer Interaction
Understanding Users
User research, including
interviews, surveys, and
observations, helps designers
understand user needs,
preferences, and abilities.
Designing Effective Human-
Computer Interaction
Prototyping and Testing
Creating prototypes and testing
them with users allows designers
to identify usability issues and
gather feedback for
improvements.
Designing Effective Human-
Computer Interaction
Iterative Design Process
HCI design follows an iterative
process, incorporating user
feedback into multiple design
cycles to refine and improve the
interface.
Designing Effective Human-
Computer Interaction
Usability Evaluation
Usability evaluation methods, such
as heuristic evaluations and user
testing, help identify areas for
improvement and ensure a positive
user experience.
Designing Effective Human-
Computer Interaction
Usability Evaluation
How to use it: This should be easy
to learn and remember for new
and infrequent users to learn and
remember.
Designing Effective Human-
Computer Interaction
Usability Evaluation
Safe: A safe system safeguards
users from undesirable and
dangerous situations. This may refer
to users making mistakes and errors
while using the system that may lead
to severe consequences.
Designing Effective Human-
Computer Interaction
Usability Evaluation
Efficient: An efficient system defines
how good the system is and whether
it accomplishes the tasks that it is
supposed to. Moreover, it illustrates
how the system provides the
necessary support to users to
complete their tasks.
Designing Effective Human-
Computer Interaction
Usability Evaluation
Effective: A practical system
provides high-quality performance.
It describes whether the system
can achieve the desired goals.
Designing Effective Human-
Computer Interaction
Usability Evaluation
Utility: Utility refers to the various
functionalities and tools provided
by the system to complete the
intended task.
Designing Effective Human-
Computer Interaction
Usability Evaluation
Enjoyable: Users find the
computing system enjoyable to
use when the interface is less
complex to interpret and
understand.
USER-CENTERED
DESIGN
 4 Phases in User-centered Design

Specify the context of use: Identify the people who will use the
product, what they will use it for, and under what conditions they
will use it.
 4 Phases in User-centered Design

Specify requirements: Identify any business requirements or user

goals that must be met for the product to be successful.
 4 Phases in User-centered Design

Create design solutions: This part of the process may be done in

stages, building from a rough concept to a complete design.
 4 Phases in User-centered Design

Evaluate designs: Evaluation - ideally through usability testing with

actual users - is as integral as quality testing is to good software
development.
 User-Centered Design
The user-centered design process answers crucial questions about
users, about their tasks, goals and beliefs. The following questions are
typically asked during the UCD process:
- Who uses your product?
- What are their goals?
- What are users searching for?
- What are they interested in?
- How do your users see the process of completing a task?
- What do they say and how they do it?
- How easy is it for your users to understand what they should do using
your product?
- How much time do users spend on figuring our how to actually do
what they want to do? And many others.
The Essential Elements of User-
Centered Design
Visibility: Users should be able to see from the beginning what they
can do with the product, what is it about, how they can use it.
Accessibility: Users should be able to find information easily and
quickly. They should be offered various ways to find information for
example call to action buttons, search option, menu, etc.
Legibility: Text should be easy to read. As simple as that.
Language: Short sentences are preferred here. The easier the
phrase and the words, the better.
ACTIVITY NO. 1
E-commerce mobile/web app
Interface design
 go to
https://rand
omprojectge
nerator.com/
project/ux-ui
 go to
https://rand
omprojectge
nerator.com/
project/ux-ui
Task 1: User’s Requirement
Requirement:
Task 2: Creating a Logo for your
product
• https://www.fiverr.com/logo-maker
• https://www.fiverr.com/logo-maker
• https://www.fiverr.com/logo-maker
https://www.namecheap.com/logo-maker/
https://www.shopify.com/tools/logo-maker
USER FLOW
Task 3: Creating a draft scketches
SUBMISSION
1. Your Project (from random project generator)
2. User 'Requirement
3. Your Logo (for sample website)
4. Your Sample Sketch
Activity No. 1 for HCI
Name
Year and Section
My Project
Requirement:
Color: white, green, gray, black
Font:
My Project Logo
Draft Sketches