Colegio De Upi,Inc.

CDU Rizal Street, Nuro Upi, Maguindanao Del Norte

Subject: HCI
Description: Human Computer Science
Instructor: Asna K. Abdul

LEARNING OBJECTIVES:
By the end of this lesson, students should be able to:
 Define Human-Computer Interaction and explain its scope.
 Understand the historical development and key milestones in HCI.
 Recognize the interdisciplinary nature of HCI and its connections to other fields.
HUMAN-COMPUTER INTERACTION
It is a multidisciplinary field that focuses on the design, evaluation, and implementation of
interactive computing systems to facilitate effective and efficient interactions between humans
and computers. HCI combines knowledge from various fields such as computer science,
cognitive psychology, design, ergonomics, and social sciences to create user-friendly and
engaging digital experiences.
The primary goal of HCI is to improve the usability, accessibility, and overall user experience of
interactive systems, ranging from traditional desktop software to mobile apps, websites, wearable
devices, and even emerging technologies like virtual reality (VR) and augmented reality (AR)
systems.
KEY CONCEPTS IN HCI
1. USABILITY
Usability refers to the ease with which users can learn to use a system, perform tasks, and
achieve their goals. It encompasses factors such as efficiency, effectiveness, and user satisfaction.
Designing for usability involves creating interfaces that are intuitive, learnable, and efficient.
2. USER-CENTERED DESIGN (UCD)
User-Centered Design (UCD) is a design approach that places users at the center of the design
process. It involves understanding user needs, preferences, and behaviors through methods like
user research, personas, and user testing. UCD ensures that systems are designed based on user
requirements and feedback.
It is an approach in Human-Computer Interaction (HCI) and product design that places the
needs, preferences, and behaviors of users at the forefront of the design process. It involves
understanding users' contexts, involving them in design decisions, and iteratively refining
designs based on their feedback.
3. USER EXPERIENCE (UX)
User Experience (UX) refers to the overall emotional, psychological, and sensory experience that
users have when interacting with a product, system, or service. It encompasses every aspect of
the user's interaction, including visual design, usability, accessibility, emotional response, and
more.
4. INTERACTION DESIGN
Interaction design focuses on creating meaningful and engaging interactions between users and
digital products or systems. It involves designing interfaces, controls, and workflows that enable
users to perform tasks efficiently and effectively. Let's explore interaction design in more detail
with examples:
5. ACCESSIBILITY
Accessibility in design refers to creating products, services, and environments that can be used
by people with diverse abilities and disabilities. It ensures that everyone, regardless of their
physical, cognitive, or sensory abilities, can interact with and benefit from digital products and
content. Here are some examples of accessibility considerations and practices:
6. AFFORDANCES AND SIGNIFIERS
Affordances and Signifiers: Affordances are the perceived possibilities of action that an object or
interface provides. Signifiers are cues or indicators that guide users on how to interact with
elements. Designing with clear affordances and signifiers improves user understanding of system
functionality.
 Affordances
 Affordances refer to the perceived possibilities of action that an object or
interface provides. They give users a visual or sensory clue about how an object
can be used. For example:
 Buttons: A raised button on a touchscreen or a physical device affords pressing or
tapping.
 Handles: A door handle affords pulling or pushing.
 Icons: An icon of a trash can affords deleting.
 Signifiers
 Signifiers are cues or indicators that provide guidance on how to interact with an
object or interface. They bridge the gap between an object's physical properties
and users' understanding of those properties. For example:
 Color Changes: A change in color when hovering over a button indicates that it's
interactive.
 Arrows: An arrow pointing to the right signifies that users should move to the
next step or screen.
 Underlines: Underlined text in a hyperlink signifies that clicking it will take users
to another page.
7. FEEDBACK AND FEED FORWARD
Feedback and feedforward are important concepts in interaction design that enhance user
understanding and interaction with digital products. They provide information about the
consequences of user actions and guide users on how to proceed. Let's explore these concepts in
more detail with examples:
8. COGNITIVE LOAD
Cognitive load refers to the mental effort required to process and understand information. In
design and user experience, managing cognitive load is essential to ensure that users can easily
interact with products without feeling overwhelmed or confused. There are three types of
cognitive load:
o Intrinsic Cognitive Load: Intrinsic cognitive load is the mental effort required to
understand new information or concepts. It's related to the inherent complexity of the
content being presented. Designing with intrinsic cognitive load in mind involves
simplifying information to make it more digestible. Examples include:
o Learning a New System: When users encounter a new software interface, they need to
learn its layout, features, and navigation. Designers can reduce intrinsic load by providing
guided tutorials or onboarding processes that introduce one feature at a time.
o Complex Charts and Graphs: Presenting intricate data visualizations can create high
intrinsic load. Simplifying charts, using clear labels, and providing tooltips can help users
understand the information more easily.
Incorporating Cognitive Load Considerations:
Visual Hierarchy: Use clear hierarchies, typography, and layout to guide users' attention to the
most important information and actions, reducing the cognitive effort required to find what they
need.
Consistent Design Patterns: Utilize consistent design patterns across the product to create
familiarity, making it easier for users to predict how elements will behave.
Progressive Disclosure: Present information progressively rather than overwhelming users with
all details at once. This approach helps manage the cognitive load associated with complex
content.
Chunking: Organize information into smaller, meaningful chunks. For instance, breaking down
a long article into sections with clear headings can make it easier for users to process.
Feedback and Confirmation: Provide immediate feedback and confirmation for user actions.
This reduces cognitive load by ensuring users that their interactions are registered correctly.
9. PROTOTYPING AND ITERATION
Prototyping and Iteration: The iterative design process involves creating prototypes of a system
and refining them based on user feedback. This iterative approach helps identify and address
usability issues early in the design process.
10. ETHICS AND SOCIAL IMPLICATIONS
Ethics and Social Implications: HCI designers need to consider ethical implications related to
privacy, security, inclusivity, and the impact of technology on society as a whole.
Importance of HCI in Technology Design and Development:
HCI plays a crucial role in technology design and development by placing the user at the center
of the process. Here's why HCI is important:
 User-Centered Approach: HCI emphasizes designing technology solutions with a deep
understanding of user needs, behaviors, and preferences. By considering the human
aspect, designers create products that are relevant and useful to users.
 Enhanced Usability: Usability is a core principle of HCI. HCI methodologies ensure that
products are easy to learn, efficient to use, and error-tolerant. This results in interfaces
that allow users to accomplish tasks quickly and with minimal frustration.
 Improved User Experience (UX): HCI goes beyond usability to focus on the overall
experience users have while interacting with technology. By considering factors like
aesthetics, emotional response, and cognitive load, HCI helps create more satisfying and
enjoyable experiences.
 Effective Communication: HCI strives to make technology interfaces intuitive and easy
to understand. This is particularly important as technology becomes more complex. HCI
design principles ensure that users can effectively communicate their intentions to the
computer and interpret the system's responses.
 Reduced Cognitive Load: HCI aims to minimize cognitive effort required for interaction.
Well-designed interfaces provide clear pathways for users to achieve their goals, reducing
the mental strain of navigating complex systems.
 Informed Design Decisions: HCI employs research methods such as user testing, surveys,
and interviews to gather insights about user behavior and preferences. Designers can use
these insights to make informed decisions about interface design, leading to better
products.
 Accessibility and Inclusivity: HCI promotes the creation of interfaces that cater to diverse
user needs, including those with disabilities. Accessible design principles ensure that
technology is usable by everyone, regardless of their abilities.
 Reduced Development Costs: Incorporating HCI principles early in the design process
helps identify usability issues and design flaws before they become expensive to fix. This
leads to a more efficient development cycle.
 Competitive Advantage: Well-designed and user-friendly products are more likely to gain
user loyalty and positive word-of-mouth recommendations, leading to a competitive edge
in the market.
 Ethical Considerations: HCI considers the ethical implications of technology design,
including privacy, security, and the potential impact on society. Designing with ethics in
mind fosters responsible technological development.
The role of Human-Computer Interaction (HCI) in creating user-friendly and efficient interactive
systems is pivotal. HCI focuses on understanding how humans interact with technology and aims
to design systems that are intuitive, usable, and aligned with users' needs and behaviors. Here's
how HCI contributes to the creation of such systems:
User-Centered Design: HCI places users at the forefront of the design process. It emphasizes
gathering insights about user behaviors, preferences, and needs through research methods like
user interviews, surveys, and observations. This user-centered approach ensures that interactive
systems are designed to cater to the target audience, resulting in products that are relevant and
useful.
Usability: It is a core principle of HCI. Usable systems are easy to learn, efficient to use, and free
from errors that cause frustration. HCI methodologies, such as usability testing and heuristic
evaluation, identify usability issues and provide insights for refining the system's interface and
functionality.
Task Efficiency: HCI focuses on streamlining user tasks and interactions. Well-designed systems
guide users through their tasks, reducing the number of steps required to achieve a goal. This
leads to increased task efficiency and productivity.
Effective Information Presentation: HCI considers how information is presented to users.
Design choices such as layout, typography, and visual hierarchy impact how easily users can
comprehend and process information. HCI principles ensure that information is presented in a
clear and organized manner.
Feedback and Affordances: HCI emphasizes providing timely and informative feedback to
users. This feedback informs users about the outcome of their actions and guides their
interactions. Affordances—visual cues that indicate how an element should be used—ensure that
users can intuitively understand how to interact with different parts of the system.
Cognitive Load Reduction: HCI aims to minimize cognitive load, which refers to the mental
effort required for using a system. Well-designed interfaces present information in a manner that
aligns with users' mental models and expectations, reducing the need for excessive mental
processing.
Accessibility and Inclusivity: HCI principles advocate for designing interactive systems that are
accessible to all users, including those with disabilities. This involves implementing features like
screen readers, voice recognition, and keyboard navigation to ensure that everyone can
effectively use the system.
Consistency: HCI promotes consistency in design and interaction patterns. Consistent interfaces
make it easier for users to understand and predict how the system behaves, enhancing the user
experience and reducing the learning curve.
Iterative Design: HCI encourages an iterative design process, where prototypes are tested and
refined based on user feedback. This iterative approach helps uncover usability issues early and
allows designers to make informed refinements.
Emotional and Aesthetic Considerations: HCI recognizes that user experience goes beyond
functionality. Emotional and aesthetic aspects of design influence how users perceive and
interact with systems. By considering aesthetics and emotional impact, HCI contributes to
creating enjoyable and engaging interactions.
User Interface (UI)
The User Interface (UI) refers to the visual and interactive elements through which users interact
with a digital product or system. It encompasses all the visual components, such as buttons,
menus, forms, icons, and layout, that users interact with to perform tasks. UI design focuses on
creating a visually appealing and functional interface that guides users through their interactions.
UI designers aim to make the interface intuitive, consistent, and easy to understand. A well-
designed UI should effectively communicate the system's functionalities and guide users towards
their goals.
Key aspects of UI design include:
  Layout and arrangement of elements on the screen.
 Typography, color scheme, and visual aesthetics.
 Interaction design, including buttons, forms, and navigation menus.
 Consistency in design elements and patterns.
 Affordances, or visual cues that indicate how elements can be interacted with.
 Feedback mechanisms that inform users about the outcomes of their actions.
User Experience (UX)
User Experience (UX) encompasses the overall experience and emotions that a user has while
interacting with a product, system, or service. It goes beyond the interface's visual aspects to
consider the user's entire journey, from the initial interaction to the final outcome. UX design
focuses on creating positive, meaningful, and enjoyable interactions for users. It takes into
account user needs, goals, behaviors, and pain points to design experiences that meet or exceed
user expectations.
Key aspects of UX design include:
 Understanding user needs, goals, and motivations.
 Creating user personas and scenarios to guide design decisions.
 Information architecture to ensure content is organized logically.
 Interaction flows that map out the user's journey through the system.
 Usability testing to identify issues and gather user feedback.
 Emotional design that aims to evoke specific feelings or reactions.
 Accessibility considerations to ensure inclusivity for all users.
 Continuous improvement based on user feedback and analytics.
Evolution of HCI: From Past to Present
Historical overview of HCI: early command-line interfaces to modern graphical user interfaces.
From Early Command-Line Interfaces to Modern Graphical User Interfaces
The history of Human-Computer Interaction (HCI) spans several decades, marked by significant
advancements in technology and design philosophies. HCI has evolved from the early command-
line interfaces to the modern graphical user interfaces (GUIs) that we interact with today.
1. Early Command-Line Interfaces:
1950s - 1960s: The earliest computers were operated using punch cards and text-based
interfaces. Users needed to understand complex commands and programming languages to
interact with computers.
1960s - 1970s: The introduction of time-sharing systems allowed multiple users to interact with a
single computer simultaneously. The command-line interface (CLI) became more prevalent,
requiring users to input text-based commands to perform tasks.
1963: Ivan Sutherland's "Sketchpad" introduced the concept of interactive graphics. It allowed
users to create drawings using a light pen, laying the foundation for graphical interaction.
2. Rise of Graphical User Interfaces (GUIs):
1970s - 1980s: The Xerox Palo Alto Research Center (PARC) played a pivotal role in HCI
evolution. They developed the Alto computer, which featured the first GUI. This marked the
beginning of the WIMP (Windows, Icons, Menus, Pointer) interface paradigm.
1973: Xerox PARC introduced the Alto's GUI elements: overlapping windows, icons, and
mouse-driven interaction.
1981: Xerox Star 8010, the first commercial computer with a GUI, was released. It featured the
desktop metaphor and the concept of folders and files.
1984: Apple Macintosh introduced the Macintosh System Software, with a user-friendly GUI
and mouse-driven interactions. The Macintosh popularized GUIs in the consumer market.
1985: Microsoft introduced Windows 1.0, its first attempt at a GUI-based operating system.
3. Advancements in GUIs and Beyond:
Late 1980s - 1990s: GUIs continued to evolve, incorporating features like color displays,
improved graphics, and multimedia elements.
1990s: Web browsers brought GUI elements to the internet, enabling users to navigate websites
through clickable links and buttons.
2000s: Touchscreens and mobile devices brought new interaction paradigms. Apple's iPhone,
introduced in 2007, popularized touchscreen interfaces.
2010s: The advent of responsive design led to interfaces optimized for various screen sizes and
devices, enhancing cross-platform user experiences.
4. Current Trends and Future Directions:
Gesture and Voice Interaction: Interfaces are moving beyond clicks and taps, with gestures and
voice commands becoming more prominent.
Augmented Reality (AR) and Virtual Reality (VR): AR and VR technologies are redefining HCI
by immersing users in digital environments.
Natural Language Processing (NLP): Conversational interfaces driven by NLP are becoming
integral parts of HCI, as seen in virtual assistants and chatbots.
Milestones and Key Contributors in HCI Development
The field of Human-Computer Interaction (HCI) has been shaped by numerous milestones and
visionary contributors. Here are some notable events and individuals that have played pivotal
roles in the development of HCI:
1. Douglas Engelbart and the "Mother of All Demos" (1968)
Douglas Engelbart's famous 1968 demonstration showcased groundbreaking concepts like the
computer mouse, interactive text editing, and collaborative online communication.
The demonstration, often referred to as the "Mother of All Demos," took place at the Fall Joint
Computer Conference and introduced the world to interactive computing concepts that are now
central to HCI.
2. Xerox PARC (Palo Alto Research Center) Innovations
Xerox PARC, in the 1970s and 1980s, was a hub of innovation in HCI.
Alto Computer: Developed at Xerox PARC, the Alto computer introduced the graphical user
interface (GUI) with features like windows, icons, and a mouse.
WYSIWYG Editing: Xerox PARC also developed the concept of "What You See Is What You
Get" (WYSIWYG) editing, allowing users to see on screen how documents would appear in
print.
3. Apple Macintosh (1984)
Apple's Macintosh, released in 1984, brought GUI elements to the mainstream audience.
The Macintosh System Software introduced a user-friendly interface with icons, menus, and
windows, revolutionizing personal computing.
4. Alan Kay and Dynabook (1970s)
Alan Kay's vision of the Dynabook, conceived in the 1970s, envisioned a portable device with a
graphical interface that could be used by children for learning.
Although the Dynabook itself wasn't realized, its concepts heavily influenced the development of
laptops and tablet devices.
5. Ben Shneiderman's Eight Golden Rules of Interface Design (1980s)
Ben Shneiderman, a pioneer in HCI, formulated "The Eight Golden Rules of Interface Design,"
providing guidelines for creating user-friendly interfaces.
These rules emphasized principles like consistency, feedback, and user control, which are still
relevant in modern UI/UX design.
6. Jakob Nielsen's Usability Heuristics (1990s)
Jakob Nielsen developed a set of usability heuristics, or guidelines, for evaluating and designing
interfaces.
These heuristics, such as visibility of system status and match between system and real-world
concepts, have become fundamental to evaluating UI designs for usability.
7. Responsive Design (2010s)
The rise of smartphones and tablets led to the need for designs that adapt to different screen sizes
and orientations.
Responsive design, which gained prominence in the 2010s, ensures that interfaces function well
across various devices.
8. Voice Interfaces and AI Assistants (2010s - Present)
The proliferation of voice-activated technologies like Amazon's Alexa, Apple's Siri, and Google
Assistant has brought voice interaction to the forefront of HCI.
Natural language processing and AI enable more intuitive interactions between humans and
computers.
9. AR and VR Experiences (2010s - Present)
Augmented Reality (AR) and Virtual Reality (VR) are transforming how users interact with
digital content.
AR overlays digital information onto the real world, while VR immerses users in entirely digital
environments, redefining the possibilities of HCI.
Top of Form
The Interdisciplinary Nature of HCI
Human-Computer Interaction (HCI) is a multidisciplinary field that draws insights and
methodologies from various disciplines to create effective and user-centered interactive systems.
Here are some of the key fields that contribute to HCI:
1. Psychology
 Cognitive Psychology: Provides insights into human cognitive processes like perception,
memory, attention, and learning, which are essential for designing interfaces that align
with how users think and process information.
 Human Factors Psychology: Focuses on optimizing the interaction between humans and
technology by considering human capabilities, limitations, and ergonomic factors.
2. Design
 Graphic Design: Contributes to the visual aesthetics and layout of interfaces, enhancing
usability and creating visually appealing user experiences.
 Interaction Design: Focuses on designing interactions between users and systems,
considering factors like user goals, tasks, and feedback mechanisms.
3. Computer Science
 Software Engineering: Provides technical skills to implement user interfaces, ensuring
that designs can be effectively translated into functional systems.
 Human-Centered Software Development: Integrates user feedback and iterative design
processes into software development cycles.
4. Anthropology
 Cultural Anthropology: Offers insights into how cultural norms, values, and practices
influence user behaviors and expectations, helping design culturally sensitive interfaces.
 Ethnography: Involves observing and understanding users in their natural contexts,
offering valuable insights into user needs and behaviors.
5. Cognitive Science
 Neuroscience: Studies brain processes that underlie human cognition, informing design
choices that align with how the brain processes information.
 Cognitive Modeling: Develops models of human cognition to simulate user behavior and
predict how users will interact with interfaces.
6. Human Factors Engineering
Focuses on optimizing the design of products and systems to match human capabilities and
limitations, improving usability, safety, and overall user experience.
7. Ergonomics
Concerned with designing products and environments that fit the physical and cognitive abilities
of users, ensuring comfort and efficiency in interaction.
8. Information Science
Studies the organization, retrieval, and manipulation of information, informing the design of
interfaces that facilitate efficient information access and management.
9. Sociology
Offers insights into how individuals and groups interact with technology in social contexts,
helping design interfaces that align with social dynamics and expectations.
10. Ethical and Legal Studies
Explores the ethical and legal implications of technology use, ensuring that HCI design considers
privacy, security, and responsible technology development.
11. Linguistics
Provides insights into language and communication patterns, which are crucial for designing
interfaces with clear and effective communication.
12. User Experience Research
Combines various research methodologies to gather user insights, inform design decisions, and
evaluate the effectiveness of interfaces.
13. Accessibility and Inclusive Design
Draws from disability studies and inclusive design principles to ensure that interfaces are usable
and accessible to users of all abilities.
14. Economics and Business
Considers the economic aspects of HCI, such as cost-benefit analysis of design choices, business
models, and the impact of user experience on product success.
Understanding the importance of collaboration among different disciplines
1. Holistic Understanding of Users: Different disciplines bring unique perspectives to
understanding users. Psychology contributes insights into cognitive processes, design brings
visual and interactive aesthetics, and anthropology provides cultural context. Collaborating
allows for a more comprehensive view of users' behaviors, needs, and preferences.
2. Improved Problem Solving: Complex challenges in HCI often require multifaceted solutions.
Collaboration enables experts from various fields to pool their knowledge and skills, leading to
innovative and effective problem-solving strategies.
3. Enriched Creativity and Innovation: Interdisciplinary teams foster creativity by combining
diverse viewpoints. This can lead to innovative approaches that might not arise within a single
discipline.
4. Comprehensive Research and Data Analysis: Collaboration enhances the ability to collect,
analyze, and interpret data. Researchers from different disciplines can offer varied methodologies
and tools, leading to more comprehensive and accurate insights.
5. User-Centered Design: Designing for users requires a deep understanding of their needs and
behaviors. Collaboration ensures that design choices are informed by psychological, cognitive,
cultural, and technical factors, resulting in more user-centered products.
6. Effective Communication: Different disciplines often have their own jargon and
terminologies. Collaboration encourages experts to communicate their ideas in ways that are
easily understandable to colleagues from other fields, fostering clear and effective
communication.
7. Ethical Considerations: Ethical implications of HCI design often cross disciplinary
boundaries. Collaborating with experts in ethics and legal studies ensures that designs consider a
wide range of ethical and legal factors.
8. Faster Problem Resolution: By leveraging the expertise of multiple disciplines, issues can be
identified and resolved more quickly, reducing project delays and ensuring timely delivery of
solutions.
9. Inclusive Design: Inclusive design principles, crucial in HCI, benefit from input from diverse
disciplines. Collaboration helps ensure that interfaces are accessible to users with varying
abilities and backgrounds.
10. Adapting to Technological Changes: Technology evolves rapidly. Collaboration allows HCI
professionals to adapt to new technologies by integrating insights from fields at the forefront of
technological advancements.
How interdisciplinary approaches enrich the understanding of user behaviors and needs.
Interdisciplinary approaches play a pivotal role in enriching the understanding of user behaviors
and needs in the context of Human-Computer Interaction (HCI). By integrating insights and
methodologies from various disciplines, HCI professionals gain a more comprehensive and
nuanced understanding of users, leading to more effective and user-centered designs. Here's how
interdisciplinary approaches enrich this understanding:
1. Comprehensive Perspectives
Different disciplines bring unique perspectives to the study of human behavior.
Psychology offers insights into cognitive processes, anthropology explores cultural contexts, and
sociology examines social interactions. Combining these perspectives provides a well-rounded
understanding of user behaviors.
2. Holistic User Profiling
Interdisciplinary collaboration allows for a more holistic profiling of users. By
considering psychological, cultural, and demographic factors, HCI professionals can create
detailed user personas that capture the diverse aspects of user needs and behaviors.
3. Contextual Understanding
Anthropological and sociological insights help designers understand how users interact
with technology within their social and cultural contexts. This context is essential for designing
interfaces that are relevant and meaningful to users' lives.
4. Informed Interaction Design
Understanding how users think and behave informs the design of effective interactions.
Cognitive psychology helps design interfaces that match users' mental models, while interaction
design principles ensure usability and intuitive interactions.
5. Identifying Unmet Needs
Interdisciplinary collaboration helps uncover needs that may not be obvious from a single
perspective. Anthropological research, for example, can reveal unmet cultural or contextual
needs that may not be apparent from a psychological or technical standpoint.
6. Designing for Diversity
User populations are diverse in terms of abilities, cultures, ages, and backgrounds.
Interdisciplinary collaboration ensures that designs are inclusive and consider the needs of a
wide range of users.
7. Ethical Considerations
Collaboration with experts in ethics, law, and sociology ensures that designs respect
users' rights and adhere to ethical guidelines. This is crucial for responsible technology
development.
8. Usability and Accessibility
Incorporating insights from human factors engineering and accessibility experts ensures
that designs are usable and accessible to users with varying physical and cognitive abilities.
9. Multimodal Interaction
Understanding how users interact across various modalities (visual, auditory, tactile)
requires input from multiple disciplines, such as cognitive science and sensory studies.
10. Data Interpretation
Data collected from user studies can be complex. Collaboration with data analysis experts
ensures that findings are interpreted accurately and insights are properly extracted.
11. Predictive Modeling
Using insights from disciplines like cognitive modeling and machine learning, HCI
professionals can develop models that predict user behaviors, aiding in the design process.
12. Innovation and Creativity