Chapter 1: HCI Introduction

At the end of this module, students should be able to:

• Define Human-Computer Interaction (HCI)
• Explain the fundamental principles of human-computer interaction •
Discover the importance of HCI

What is Human-Computer Interaction (HCI)?

The history of Human-Computer Interaction (HCI) traces back to the 1980s when it was primarily
influenced by cognitive science and human factors engineering. Initially, it focused on improving personal
computing, addressing usability challenges. Over time, HCI expanded to incorporate disciplines like
design, psychology, and ergonomics. The field’s growth is marked by its shift from mere usability to
incorporating aspects like user creativity, well-being, and broader user experiences in the development of
interactive systems.

Human-Computer Interaction (HCI) is an interdisciplinary field that combines elements of

computer science, cognitive psychology, design, and ergonomics to improve the interaction between users
and technology. It emphasizes usability, user experience (UX), and accessibility to ensure that computer
systems are effective and efficient for human use. Figure 1.1 visually represents Human-Computer
Interaction (HCI), illustrating the relationship between the user, interface, and computer system.

Figure 1.1 The General Interaction Framework

Source: Human-Computer Interaction 3rd ed. 2004 p. 128

HCI and Interaction Design (ID)

According to Rogers et al. (2023), historically, HCI was primarily concerned with making
computer systems easy to use and efficient. Examples include improving the layout of a keyboard or
making software menus more intuitive. The focus was specifically on the interaction between humans and
computers. Interaction Design (ID) is a broader field. While it includes the concerns of HCI, it goes
beyond just computers. ID considers the design of all kinds of user experiences, regardless of the
technology involved. This could include designing a user-friendly mobile app, but also designing a better
public transportation system, a more engaging museum exhibit, or even a more intuitive physical product.
ID is concerned with the theory, research, and practical application of designing these experiences.

IT 321 – CHAPTER 1 | LENY B. VELARDE PAGE 1

Does this mean that HCI is now just a subset of Interaction Design? Not quite. It's more accurate
to say that Interaction Design (ID) encompasses HCI, or that HCI is a part of ID. Think of it like this:

• ID is the bigger circle. It's the broader field concerned with designing interactions for all sorts of
things, including but not limited to computers.

• HCI is a circle inside the ID circle. It's specifically focused on the interaction between humans and
computer systems. It's a specialized area within the larger field of interaction design.

Figure 1.2 Relationship among contributing academic disciplines, design practices, and interdisciplinary fields concerned with
interaction design. Source: Interaction Design: Beyond Human-Computer Interaction 6th ed. 2023 p. 11

While the primary focus of HCI was historically on the usability and efficiency of computer
systems, the field has evolved significantly. As technology has become increasingly integrated into our
lives, HCI has broadened its scope to encompass a wider range of concerns. These include User
Experience (UX), focusing on the overall quality of interaction; Accessibility, ensuring technology is
usable by everyone; and the Social Impact of Technology, considering the broader societal effects.
Although HCI now considers these additional dimensions, the core principle of making computer systems
easy and effective to use remains a central part of the field.

Components of HCI

The Human. In Human-Computer Interaction (HCI), humans play a central role in how interactive
systems are designed and evaluated. Understanding human cognitive, perceptual, and motor
capabilities is crucial for designing systems that enhance usability and efficiency. Dix et al. (2004)
categorize human factors in HCI into three key areas:

IT 321 – CHAPTER 1 | LENY B. VELARDE PAGE 2

• Cognitive Aspects
Cognitive abilities influence how humans process information, make decisions, and interact with
systems.
Attention – Users focus on relevant information, but distractions can affect performance.
Example: A well-designed UI highlights important elements to reduce cognitive load.

Memory – Humans rely on short-term (working memory) and long-term memory. Design
Tip: Use recognition over recall (e.g., dropdown menus instead of forcing users to type).

Problem-Solving & Decision-Making – Users interact with systems to achieve goals.

Example: Search engines assist users by suggesting auto-complete queries.

Mental Models – Users develop expectations based on past experiences with technology.
Example: Clicking a floppy disk icon to "Save" follows a learned mental model.

• Perceptual Aspects
Human perception affects how users interpret system feedback.
Visual Perception – Most interactions rely on visual elements. Design Considerations:
Contrast, color blindness, readability.

Auditory Perception – Sound cues can guide users in interaction. Example: Notification
sounds in messaging apps.

Haptic Perception – Touch-based feedback enhances user experience. Example: Vibrations

in mobile phones confirm user actions.

Memory – Humans rely on short-term (working memory) and long-term memory. Design
Tip: Use recognition over recall (e.g., dropdown menus instead of forcing users to type).

• Motor Abilities & Physical Interaction

Human motor skills determine how users interact with input devices.
Fitts’ Law – Predicts the time required to move to a target area (e.g., buttons). Design Tip:
Place frequently used buttons within easy reach (e.g., floating action buttons on mobile).

Hand-Eye Coordination – Affects how accurately users can click/tap targets. Example:
Larger touch targets on mobile interfaces improve usability.

Ergonomics & Accessibility – Interfaces must accommodate users with different physical
abilities. Example: Voice commands for users with motor impairments.
 IT 321 – CHAPTER 1 | LENY B. VELARDE PAGE 3
The Computer. In Human-Computer Interaction (HCI), the computer plays a critical role in
facilitating communication between humans and digital systems. It processes user input, generates
output, and manages the interaction through hardware and software components. Understanding how
computers function in an interactive system helps designers build efficient, responsive, and user-
friendly interfaces.

• COMPUTER COMPONENTS OF HCI

Input Devices. Computers receive input from users through different devices. The
effectiveness of an interface depends on how intuitive, efficient, and error-free these input methods
are. Traditional Input Devices:
Keyboard – Used for text input, command execution.
Mouse/Trackpad – Enables pointing, clicking, and drag-and-drop actions.
Touch-Based Input:
Touchscreens – Found in smartphones, tablets, and kiosks.
Stylus Pens – Used for precision tasks like digital art and note-taking.
Advanced & Alternative Inputs:
Speech Recognition – Used in virtual assistants (e.g., Siri, Alexa).
Gestures & Motion Tracking – Found in VR systems, gaming consoles (e.g., Kinect).
Brain-Computer Interfaces (BCI) – Emerging technology that translates brain signals into
commands.

Output Devices. Computers generate output to provide feedback to users, ensuring they
understand the system’s response.
Visual Output:
Monitors & Displays – Standard output for GUIs.
Augmented Reality (AR) & Virtual Reality (VR) – Immersive displays for enhanced
interactivity.
Audio Output:
Speakers & Headphones – Used for system alerts, music, voice output.
Text-to-Speech (TTS) – Assists visually impaired users.
Haptic Feedback:
Vibrations & Force Feedback – Used in gaming controllers, smartphones.

Processing And Storage. Computers interpret, process, and store user input before generating
responses. The speed and efficiency of these processes impact system usability. Processing:
CPU (Central Processing Unit) – Executes instructions.
GPU (Graphics Processing Unit) – Handles graphical computations.

IT 321 – CHAPTER 1 | LENY B. VELARDE PAGE 4

 Storage:
RAM (Random Access Memory) – Temporary memory for quick data
access. Hard Drives (HDD/SSD) – Permanent storage for files, applications.
Cloud Storage – Remote storage for accessibility across devices.

Network and Communication. Modern interactive systems rely on connectivity for real-time
interactions, data sharing, and cloud-based services.
Internet & Cloud Computing:
Web applications (e.g., Google Docs) rely on internet connectivity.
Cloud services enable seamless data access across devices.
Wireless & IoT Devices:
Smart home systems (e.g., Alexa, Google Home).
Wearable technology (e.g., smartwatches, fitness trackers).

• ROLE OF SOFTWARE IN INTERACTION

Computers run software applications that determine how users interact with a system.

Operating Systems (OS):

Windows, macOS, Linux – Desktop OS with different UI/UX approaches.
Android, iOS – Mobile OS optimized for touch-based interactions.
User Interfaces (UI):
Graphical User Interface (GUI) – Uses icons, windows, buttons (e.g., Microsoft Windows,
macOS).
Command-Line Interface (CLI) – Requires text-based commands (e.g., Linux terminal).
Natural Language Interfaces (NLI) – Voice-based interaction (e.g., Siri, Google
Assistant).

Figure 1.3 Translation between components of the Interaction Framework

Source: Human-Computer Interaction 3rd ed. 2004 p. 128
 IT 321 – CHAPTER 1 | LENY B. VELARDE PAGE 5
The Interaction. In Human-Computer Interaction (HCI), interaction is the process through which a
user communicates with a computer system to accomplish a task. It involves input (user actions),
system processing, and output (system feedback). The effectiveness of this interaction determines the
usability and user experience of a system.

The Interaction Framework developed by Abowd and Beale (1991) provides a conceptual
model that describes how users interact with computer systems. This framework is foundational in
understanding the components of interaction and how they work together to facilitate a smooth,
effective user experience.
The user is the starting point in the interaction framework. Users bring their unique skills,
expectations, experiences, and limitations to the interaction. Understanding the cognitive and physical
abilities of the user is critical for designing interfaces that are accessible and easy to use. The design
must also account for user goals, tasks, and contexts of use.
The input component refers to the way users articulate their commands and data to the
system. This can be done through various input devices such as a keyboard, mouse, touchscreen,
voice, or gesture-based methods. The input method should be intuitive, efficient, and accurate,
allowing users to interact with the system in a natural way.
The system is responsible for processing the user’s input. It involves hardware (e.g., CPU,
RAM) and software (e.g., operating systems, applications) components that work together to interpret
the user's actions and produce appropriate output.
The performance of the system determines how fast and accurately it processes input. If the
system is slow or error-prone, it can hinder the user's experience and lead to frustration. For example,
if a user clicks a button but the system doesn’t respond promptly, it creates a gap in the interaction,
leading to uncertainty about whether the action was successful.
The output component is the system’s response to the user's input. This feedback can take
several forms, including visual displays, auditory signals, or haptic feedback (e.g., vibrations).
Feedback must be clear, timely, and relevant to guide the user in their next action and ensure they
understand the results of their previous action. There are two main types of output:
System feedback: Immediate responses to user input, like a progress bar or confirmation
message.
System status feedback: Ongoing information about the system’s current state, such as
whether a task is completed or if there is an error.

Importance of HCI

Dix et al. (2004) highlight several reasons why HCI is essential:

Improves Usability – Ensures that systems are easy to use, learn, and navigate, reducing
frustration and errors.
Enhances Productivity – Well-designed interfaces help users complete tasks faster and
more accurately.

IT 321 – CHAPTER 1 | LENY B. VELARDE PAGE 6

 Reduces Cognitive Load – Aligning system design with human cognitive processes
minimizes mental effort.
Ensures Accessibility – Adapting systems for users with disabilities promotes inclusivity.
Supports User Satisfaction – A positive user experience increases adoption and
engagement with technology.
Drives Innovation – Understanding human needs leads to innovative designs in areas
like AI, virtual reality, and mobile computing.

Guidelines in HCI

HCI guidelines, such as the Seven Stages of Action and Shneiderman's Eight Golden Rules,
provide principles and recommendations for designing and developing user interfaces that are more user-
friendly and effective.

In Norman's "The Design of Everyday Things" (2013), the Seven Stages of Action outline the
process users follow when interacting with a system:
• Goal formation – What do I want to accomplish?

• Intent to act – What are the alternative action sequences?

• Action specification – What action can I do now?

• Execution – How do I do it?

• Perception – What happened?

• Interpretation – What does it mean?

• Evaluation – Is this okay? Have I accomplished my goal?

Shneiderman's Eight Golden Rules are design principles for creating user interfaces that
enhance usability. These rules are:
• Strive for consistency – Keep design elements and actions uniform.

• Enable frequent users to use shortcuts – Provide options like keyboard shortcuts for
advanced users.

• Offer informative feedback – Give clear responses for user actions.

• Design dialog to yield closure – Ensure actions feel complete and conclusive. •
Prevent errors – Design to minimize errors before they happen.

• Permit easy reversal of actions – Allow users to undo actions.

• Support internal locus of control – Make users feel in charge.

 • Reduce short-term memory load – Keep interfaces simple and easy to navigate.

IT 321 – CHAPTER 1 | LENY B. VELARDE PAGE 7

References:

• Dix, A., Finlay, J., Abowd, G., & Beale, R. (2004). Human-Computer Interaction (3rd ed.). Pearson. •
Rogers, Y., Sharp, H., & Preece, J. (2023). Interaction Design: Beyond Human-Computer Interaction
(6th ed.). Wiley.
• Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic
Books.
• Shneiderman, B. (2016). Designing the User Interface: Strategies for Effective Human-Computer
Interaction (6th ed.). Pearson Education.
• Interaction Design Foundation. (n.d.). Human-computer interaction: Brief intro. Retrieved
January 10, 2025, from https://www.interaction-design.org/literature/book/the-encyclopedia
of-human-computer-interaction-2nd-ed/human-computer-interaction-brief-intro
• Coursera. (2024). Human-computer interaction. Retrieved January 10, 2025, from
https://www.coursera.org/articles/human-computer-interaction
IT 321 – CHAPTER 1 | LENY B. VELARDE PAGE 8