Republic of the Philippines

Sorsogon State University

COLLEGE OF INFORMATION COMMUNICATIONS AND TECHNOLOGY

Magsaysay Street, Salog (Pob.), Sorsogon City, Sorsogon

Tel. No.; 056 211-0103; Email Address: [email protected]

Human-Computer Interaction (HCI)

DOCUMENTATION

Leonel C. Bulawan
Romelyn A. Gozarin
Sandra O. De Guzman
Adelle T. De Los Santos

Reymel Gepulle
Instructor

17 May 2025
HUMANS IN HCI-AN INTRODUCTION

This slide outlines the main objective — to understand how human cognitive and
physical characteristics influence ergonomic design in Human-Computer Interaction
(HCI).

Ergonomics is defined as the design of workplaces, products, and systems that

match the capabilities and limitations of users. This is crucial in HCI for creating
intuitive and efficient interfaces.
This slide provides visual examples of ergonomic setups, showing how work
environments and devices are adapted to human needs — such as posture, screen
distance, and interface layout.

It lists essential human components that affect HCI — Perception, Cognition,

Emotions, and the Motor System — all of which must be considered in interface
and system design.
USER-ILLUSIONS

This slide sets the objectives — to understand how users perceive interfaces, the
idea of “user illusion,” and how it can be used to enhance usability in interface
design.
These slides illustrate the concept that users perceive interfaces based on
expectations and mental models. Examples include how users interpret windows,
background/foreground elements, and scrolling behavior not based on actual
mechanics but on visual cues.

Developers understand the inner workings of systems, but end-users don’t — and
shouldn’t need to. This disconnect is a major source of usability issues.
Alan Kay’s quote emphasizes that user interfaces should feel magical — not just
mimic the physical world. Metaphors like "screen as paper" help users interact
without needing technical understanding.

This practical design slide explains how to intentionally craft user illusions by
focusing on enhancing the illusion and minimizing elements that break it.
FOCUS ON THE HUMAN

This slide outlines the objectives of the presentation — understanding human-

centered design processes, identifying design objectives and products, and applying
usability principles.

Highlights common misconceptions about usability — such as assuming that if a

developer or staff member can use a system, everyone can. It emphasizes the need
for a systematic design process.
Illustrates the value of early-stage testing and iteration in design. Quoting architect
Frank Lloyd Wright, it stresses that finding and fixing mistakes early is cheaper and
more effective.
Introduces the three core usability principles:

1. Early focus on users and tasks

2. Empirical measurement through user testing
3.Iterative design to refine the interface continuously.

Outlines the main stages of human-centered design:

1.Identifying needs
2.Creating alternatives
3.Prototyping
4.Evaluation
VISUAL PERCEPTION

This slide introduces the main learning objectives:

1. Understanding the human eye and how it perceives light and color.
2. Exploring sensory and stereoscopic (3D) vision.

Shows the visible light spectrum and highlights that humans only perceive a narrow
range (between infrared and ultraviolet). This underlines the biological limits of
human vision.
A diagram of the human eye to explain its anatomy and how light enters, focusing
on the retina — the foundation of visual processing.

Demonstrates how color perception varies, noting that about 10% of males and 1%
of females have red-green color blindness. This is important for inclusive design.
Explains depth perception — how the brain merges two slightly different images
from each eye to create a sense of 3D space.

Summarizes key insights about human vision:

1. Central vision is sharp and colorful

2. Peripheral vision detects motion well, especially in low light
3. Red-green contrast is best.
4. Visual processing has a temporal limit (reaction time matters).
COGNITION

Outlines what students will learn — how the human brain processes visual
information, including perception, cognition, and depth perception.

Differentiates between perception (eye and neural signal processing) and

cognition (the brain’s interpretation). Emphasizes that we tend to see what we
expect or want to see.
Demonstrates the Mach Band effect, where our eyes exaggerate contrast at edges
to enhance clarity — a form of pre-processing done by the retina.

Shows how the context of surrounding colors can alter our perception. For instance,
identical colors appear different depending on their background.
Lists key factors in depth perception, such as binocular disparity, vergence, and
accommodation, along with cues like occlusion, size, and sharpness.

Summarizes that perception is based on raw sensory input, while cognition is the
brain’s interpretation, influenced by prior knowledge and expectations.
PRINCIPLES TO SUPPORT USABILITY

This slide introduces the goal — to understand three core principles of usability:
Learnability, Flexibility, and Robustness, and to apply them in UI evaluation and
design.

Learnability is how easily users can begin interacting with a system effectively. It
includes:

1. Predictability
2. Synthesizability
3. Familiarity
4. Generalizability
5. Consistency

Flexibility refers to how many ways the user can interact with the system. It involves:

1. Dialogue initiative
2. Multithreading
3. Task migratability
4. Substitutivity
5. Customizability
Robustness is the support a system gives users in achieving goals and handling
errors. It covers:

1. Observability
2. Recoverability
3. Task conformance
4. Responsiveness

Summarizes all three principles with their subcategories. This is a good reference
slide for review and comparison.

KNOW THE USER AND TASK

This slide outlines key learning objectives — understanding users, performing task
frequency analysis, applying personas, and conducting stakeholder and task
analyses.

Different users have different needs based on experience, motivation, background,

and physical abilities. Categorizing users into novice, intermittent, and expert is
essential.

Demonstrates how different personas (sales agent, manager, family, business

traveler) have different task usage patterns. Helps prioritize what features are
emphasized in design.
Emphasizes that designing for an "average" user is ineffective. Instead, design for
specific, realistic personas to better meet diverse user needs.

An example using car design shows how targeting personas (e.g., Alessandro = fast,
Marge = safe) results in more tailored, successful products.
Shows how to categorize stakeholders by power and interest, and use that to
determine communication and involvement strategies in a project.

EIGHT GOLDEN RULES

The slide outlines key learning objectives — understanding Shneiderman’s rules

and applying them to evaluate and improve user interfaces.
Lists all rules:

1. Strive for consistency.

2. Seek universal usability.
3. Offer informative feedback.
4. Design dialogs to yield closure.
5. Prevent errors.
6. Permit easy reversal of actions.
7. Keep users in control.
8. Reduce short-term memory load (+ shortcut support for frequent users).
Emphasizes consistent actions, labels, layouts, and visuals across a system to
reduce the learning curve and user confusion.

Systems should support a wide range of users — from novice to expert, young to
old, and across different cultural and technological contexts.

Design workflows to have clear beginnings and endings, giving users a sense of
completion and accomplishment (e.g., “Order Confirmation” after online shopping).
Allow users to undo actions. This encourages exploration and reduces fear of
making irreversible mistakes (e.g., "Undo" and "Redo" features).

Users should feel in control of the system, not surprised by unexpected behavior
(especially important with smart systems or AI).
Avoid forcing users to memorize info across screens. Display required data
contextually and use recognition (menus/icons) over recall.

ATTENTION & MEMORY

This slide outlines the key topics: understanding the Human Information
Processing Model, attention, and memory, which are critical for interface design
and cognitive ergonomics.
Describes a 4-stage cognitive process — encoding a stimulus, comparing it with
memory, selecting a response, and executing it. Each step influences how users
interact with systems.

Illustrates how users filter incoming stimuli based on basic properties like color and
motion before consciously processing them — crucial for designing attention-
capturing UIs.
Breaks memory into three types:

1. Sensory memory (very brief, high capacity)

2. Short-Term Memory (limited to ~7 chunks, 15 sec)
3. Long-Term Memory (large, stable, slow access)

Emphasizes memory limits — humans can hold about 5–9 items in short-term
memory. This is important when designing menus, lists, or step-based processes.
Offers practical advice: avoid overloading memory, use familiar symbols, group
information, and provide visual aids to enhance usability.