Human Computer Interaction Lecture Notes

MODULE 1
FOUNDATION OF HUMAN COMPUTER
INTERACTION

WHAT IS HUMAN-COMPUTER
INTERACTION (HCI)?
Human-Computer Interaction (HCI) is the study of how
people interact with computers and how to make those
interactions easier and more effective. It combines ideas
from different fields like computer science, psychology, and
design to create user-friendly systems.
Introduction

HCI started in the 1980s when personal computers became
common in homes and offices. Over time, as technologies
like the internet, mobile devices, and voice-based systems
developed, HCI grew to focus on making these technologies
simple and enjoyable to use.
Today, HCI is all about designing interfaces that give users a
better experience. In this module, we’ll learn about the key
parts of an interactive system: the user, the computer, and
how they work together.

LEARNING OUTCOMES
At the end of this module, students should be able to:
1. define the what is foundation of HCI;
2. provide us with a basic overview of the capabilities and limitations
that affect our ability to use computer systems.
3. understand the user at this level that we can understand what
makes for successful designs and describe what human’s information
processing capabilities.
4. distinguish the key components of HCI and even the goals,
importance, principles and scope of HCI.

LESSON 1:
WHAT IS HUMAN-COMPUTER INTERACTION (HCI)?
• Human-Computer Interaction focuses on designing and improving
computer systems to make them user-friendly, efficient, and
enjoyable (www.simplilearn.com).
• HCI specialists work on developing computer systems that meet
users' needs, focusing on improving how people interact with and
understand interfaces.

LESSON 2:
THE RISE OF HCI (WWW.SIMPLILEARN.COM)
Human-Computer Interaction (HCI) started in the 1980s to make computers
easier to use. A big change happened in 1984 when Apple introduced the
Macintosh, which used a mouse, keyboard, and icons to help people
interact with computers more easily.
Example: The Macintosh introduced a mouse and graphical icons that
allowed users to click and navigate easily, instead of typing only commands,
making it more beginner-friendly.

LESSON 3:
IMPORTANCE OF HCI
HCI is important for creating easy-to-use interfaces for people with different
skills and abilities. It helps those who are not trained in using computers by
making systems simpler. Good HCI design ensures that interactions are
clear and easy to understand (www.spiceworks.com).

1. Enhancing User Experience
• HCI helps make technology easy to use and enjoyable. When users are
happy with the experience, they use it more often and effectively.
Example: A smartphone with simple touch gestures makes it easier for
everyone to use, even for beginners.
2. Increasing Productivity and Efficiency
• HCI makes tasks simpler and faster, helping people work more
efficiently, especially in businesses and healthcare.
Example: A well-designed app for managing tasks can help employees
finish their work faster by making it easy to organize their schedule.

3. Reducing Errors and Frustration
• Well-designed systems reduce mistakes and user frustration, which is
important in fields like healthcare and aviation.
Example: A GPS app with clear directions prevents drivers from getting
lost and reduces frustration.
4. Enhancing Accessibility and Inclusivity
• HCI ensures that even people with disabilities can use technology,
making it fair and inclusive for all.
Example: Speech-to-text software helps people with disabilities by
allowing them to type using their voice.

5. Improving Decision-Making
• HCI shows information in simple ways, helping users understand data
and make better decisions.
Example: A simple bar chart helps people quickly understand sales data
and make smart business decisions.
6. Enhancing Safety
• In systems like self-driving cars or medical devices, HCI makes sure the
interface is safe to use and prevents accidents.
Example: In a self-driving car, a clear display showing road conditions
helps the driver understand when to take control.

7. Driving Innovation
• HCI helps design new ways to interact with technology, like
touchscreens and voice assistants, making them easy to use.
Example: Voice assistants like Siri or Alexa make it easy to control your
phone or home devices just by talking.
8. Adapting to Changing Technologies
• HCI adapts to new tools and ensures users can understand and use
them easily.
Example: Virtual reality (VR) headsets have simple controls so users can
easily explore 3D environments.

9. Ethical Considerations
• HCI ensures technology is designed responsibly, protecting privacy
and treating everyone fairly.
Example: A website with clear privacy settings allows users to control
what information they share.
10. Competitive Advantage
• Products with user-friendly designs attract more customers, increasing
profits and success.
Example: Online shopping websites with easy checkout systems
encourage more people to buy products.

11. User Satisfaction and Loyalty
• A good experience makes users happy and loyal, encouraging them to
recommend the product to others.
Example: A video streaming app with personalized recommendations
makes users want to keep using it and recommend it to friends.
12. Cost Savings
• Simple, user-friendly designs reduce errors and customer support
needs, saving time and money.
Example: A simple online banking app reduces the need for customers to
call for help, saving time and support costs.

LESSON 4:
COMPONENTS OF HUMAN-COMPUTER
INTERACTION
HCI is primarily composed of four essential elements:
1. The User
• Focuses on the needs, goals, and interaction styles of individuals or groups.
• It’s important to understand how users perceive information through their
senses (sight, hearing, touch) and how they learn and remember things. Cultural
and national differences also affect how users interact with technology.
Example: If a student uses a tablet to learn, the user is the student. The student's
needs and how they use the tablet (e.g., reading or watching videos) are important
to consider when designing educational apps.

INTERACTION
2. The Goal-Oriented Task
• Every user has a specific purpose when using a computer or device. The
computer helps achieve this goal by providing a digital representation of things.
This could apply to any technology, like desktop computers, websites, or mobile
phones.
Example: A person using a mobile phone to send a text message. Their goal is to
communicate with someone, and the phone helps them achieve this by providing an
easy way to type and send messages.

INTERACTION
3. The Interface
• The interface is key to improving user interaction and should consider factors like
type of interaction, screen size, and color contrast. HCI focuses on making sure
humans and machines interact well with each other. Balancing ideal user needs
with real-world limits like budget and time is important.
Example: A website with buttons, text, and images that users can click to find
information. The design (like button sizes, colors, and layout) makes it easier or
harder for users to interact with the site.

INTERACTION
4. The Context
• HCI also considers the environment in which the system is used, not just the
interaction itself. The context and setting play an important role in how users
interact with the technology.
Example: A person using a navigation app in their car. The context (driving) requires
the interface to be simple and easy to use without distracting them, making it safer
and more effective for the user.

LESSON 5:
EXAMPLES OF HCI
Prominent examples of HCI that have accelerated its evolution:
Technological advancements have significantly influenced human-computer
interaction (HCI). The Internet of Things (IoT) has revolutionized how users interact
with devices, collecting data that helps businesses improve their products. One
notable example is pre-touch phones, which can detect the user’s hand movements
and predict actions even before the user touches the screen.

EXAMPLES OF HCI
Prominent examples of HCI that have accelerated its evolution:
Eye-tracking technology is another advancement in HCI that uses cameras to
detect where a person is looking. This technology is used in various applications,
such as monitoring drivers' attention for road safety. In the future, it may allow users
to scroll through screens by simply moving their eyes.
Speech recognition technology has made it easier to interact with devices using
voice commands. Popular examples include Amazon’s Alexa, Apple’s Siri, and Google
Assistant, which understand spoken language and perform tasks accordingly.

EXAMPLES OF HCI
Augmented reality (AR) and virtual reality (VR) technologies have enhanced the
user experience by immersing users in digital environments. Smart glasses, for
example, allow users to interact with information hands-free, such as chefs following
recipes while cooking. Additionally, VR gloves like the Dexta Haptic Gloves replicate
touch sensations, allowing users to feel virtual objects.
Cloud computing has transformed workplaces by enabling remote work. Employees
can access data stored in the cloud from anywhere, streamlining workflows and
supporting collaboration. Services like Google Drive and other cloud-based tools
have made remote work more efficient and productive.

LESSON 6:
GOALS OF HCI
In Human-Computer Interaction (HCI), the main goal is to create systems that are
easy, safe, and efficient for users. Developers can achieve this by:
• Understanding how users interact with computing systems: This helps ensure the
system meets their needs.
• Designing tools and methods that cater to users' needs: This means designing
interfaces and features that are easy for users to access and understand.
• Testing and refining the system: Developers must test systems to make sure
users can interact with them effectively and smoothly.
• Prioritizing users: The needs of the users should always be the main focus during
the design and development process.

TO ACHIEVE THESE GOALS, DEVELOPERS FOCUS ON TWO KEY AREAS:
USABILITY AND USER
Usability is essential in HCI because it makes systems easier for
users to learn and use. A usable system should have these
characteristics:
• Easy to learn: A good system is simple to understand and
remember. For example, an operating system with a simple,
user-friendly interface is easier to use than one with a
command-line interface like DOS.
Usabilit
y

USABILITY AND USER
• Safe: A safe system prevents users from making harmful
mistakes that could lead to negative outcomes. For example,
a system could prevent users from pressing dangerous
buttons by accident. It could also have recovery options to
help users fix mistakes, encouraging them to explore the
system without fear.
• Efficient: An efficient system helps users complete tasks
quickly and accurately. It should support users in achieving
their goals without unnecessary steps.

USABILITY AND USER
• Effective: An effective system performs well and allows users to
achieve the desired results.
• Utility: Utility refers to the features and tools the system provides to
help users complete their tasks. For example, an integrated
development environment (IDE) that offers helpful suggestions for
programmers is useful.
• Enjoyable: A system is enjoyable to use if it is not complicated and is
fun to interact with. Users should feel comfortable and happy using
it.

USABILITY AND USER EXPERIENCE
User experience (UX) is how users feel when interacting with a system. It is subjective
and varies from person to person. Developers focus on creating positive experiences
for users by studying how they feel during interactions.
In HCI, user interactions are classified into two categories based on feelings:
• Desirable traits: These include feelings like satisfaction, enjoyment, motivation, or
surprise. These are the positive emotions developers aim to evoke in users.
• Undesirable traits: These include feelings like frustration, unpleasantness, or
annoyance. Developers try to avoid these negative feelings by improving system
design and interaction patterns.
User Experience

LESSON 7:
PRINCIPLES OF HCI
Researchers and designers in the field of human-computer
interaction have established numerous concepts. These
regulations range from general norms and design guidelines
to abstract design principles. Let's look at the most crucial
HCI guidelines.
• Design for familiarity and learnability
• Make the elements readable and approachable.
• Tolerance for errors
• Flexibility

LESSON 8:
FUTURE SCOPE OF HCI
The most recent prototypes being created by businesses
around the globe employing HCI theories include the
following:
• Dexta haptic gloves
• Pre-touch sensing
• PaperID

QUIZ #1
Next
Meeting
via iLearnU
Face to face

MODULE 2
WHAT IS INTERACTION DESIGN?

WHAT IS INTERACTION DESIGN?
Mistakes can still happen with "user-friendly" systems
because designers often fail to fully test them in real-world
scenarios or assume users won’t make errors. Examples like
the difficulty of programming VCRs or adjusting car radios
while driving show that many devices are not designed with
the user’s actual needs in mind. Designers must focus on how
users interact with systems, ensuring they are intuitive,
support tasks smoothly, and allow for recovery from errors.
Introduction

The study of Human-Computer Interaction (HCI) is essential
because creating consistent and user-friendly interfaces is not
as simple or natural as it seems. Interfaces should be
developed as part of the system design from the beginning,
not added later. They must be more than visually appealing—
they should help users accomplish tasks effectively and handle
mistakes.
Moreover, designing usable systems is a legal obligation in
many cases. National health and safety standards require
systems to be not only safe but also easy to use, emphasizing
the importance of HCI in creating systems that meet both user
needs and legal requirements.

LEARNING OUTCOMES
At the end of this lesson, the student should be able to:
1. Explain the difference between good and poor interaction design.
2. Describe what interaction design is and how it relates to human-computer interaction and
other fields.
3. Explain the relationship between the user experience and usability.
4. Introduce what is meant by accessibility and inclusiveness in relation to human- computer
interaction.
5. Describe what and who is involved in the process of interaction design.
6. Outline the different forms of guidance used in interaction design.
7. Enable you to evaluate an interactive product and explain what is good and bad about it in
terms of the goals and core principles of interaction design.

LESSON 1:
GOOD AND POOR DESIGN
Interaction design aims to create products that
are easy, effective, and enjoyable to use. Usability
is understood by comparing poorly and well-
designed products, such as hotel voice-mail
systems and remote controls.

IMPORTANCE OF INTERACTION DESIGN
Goal: Design usable interactive products.
Usable Product Characteristics:
• Easy to learn.
• Effective to use.
• Enjoyable user experience.
Approach: Compare poorly-designed and well-designed
products to identify what works.

EXAMPLE 1 – VOICE-MAIL SYSTEM (POOR
DESIGN)
(Hotel Voice-Mail):
• You see a blinking red light on the phone, indicating a
message.
Instructions:
a. Touch 41 – System says: “Enter the room number to
leave a message.”
b. *Touch , room number, and # – System says: “Enter
your password.”
• Confusing system: Users don’t know the password (e.g.,
phone extension).

Features:
• Marbles indicate the number of messages (visual cue).
• Easy one-step actions: Move a marble to play or respond
to a message.
• Aesthetic and enjoyable.
Example: Picking up a marble is intuitive, like everyday
actions.
Limitations:
• Not practical in hotels: Marbles could get lost or stolen.
• No user security (anyone can listen to messages).
EXAMPLE 1 – MARBLE ANSWERING
MACHINE (GOOD DESIGN)

EXAMPLE 2 – REMOTE CONTROL (POOR
DESIGN)
Generic Remote Issues:
• Overloaded with buttons (“buttonitis”).
• Buttons have small text and unclear labels.
• Arbitrary button placement adds confusion.
Example Problem: Struggling to find the "pause" button or
main menu.
• Users need reading glasses to navigate controls.

Features:
• Large, clearly labeled buttons logically arranged.
• Peanut-shaped design fits comfortably in the hand.
• Colorful, cartoon-like icons make buttons easy to identify.
• Menu options for secondary functions reduce button
clutter.
User-Centered Design Process:
⚬ Feedback from users guided the design.
⚬ Avoided unnecessary buttons and ensured usability.
Result: A highly usable, award-winning design.
EXAMPLE 2 – TIVO REMOTE CONTROL
(GOOD DESIGN)

KEY TAKEAWAYS FROM BOTH EXAMPLES
User-Centered Design Matters:
• Consider users’ needs and contexts (e.g., home vs. hotel use).
• Get user feedback early in the design process.
Simplicity and Clarity:
• Avoid overloading users with too many steps or buttons.
• Provide clear instructions and intuitive actions.
Example: TiVo limited buttons and simplified controls.
Context is Key:
Example: Marble answering machine works for homes, not hotels.

LESSON 2:
WHAT TO DESIGN?
Purpose of Interaction Design:
Design products that are usable, effective, and pleasurable, tailored to users’
needs and activities.
Key Considerations:
• Who will use it, how, and where.
• Interface Options: Multitouch, speech systems, wearables, etc.
Technological Trends:
• IoT: Smart home systems, parking apps, and more.
• Digital Interaction: Self-checkouts and consumer electronics

LESSON 2:
WHAT TO DESIGN?
Design Goals:
• Optimize systems for user needs and activities.
• Use user-centered techniques:
⚬ Understand user strengths and weaknesses.
⚬ Identify needs and involve users in design.
Question:
• How can we support users’ activities effectively and enjoyably?

LESSON 3:
WHAT IS INTERACTION DESIGN? (SHARP,
2019)
• Designing interactive products to support how people
communicate and interact.
Focus: Enhancing everyday and working lives.

DEFINITIONS OF INTERACTION DESIGN
1.What is Interaction Design?
• "Designing spaces for human communication and interaction" - Terry
Winograd, 1997
• "Why and how of daily interactions using computers" - John Thackara,
2001
• "Art of facilitating human interactions through products/services" -
Dan Saffer, 2010
2. Synonyms or Related Terms
• User Interface (UI), User Experience (UX), Software Design, Product
Design, etc.
• UX often used in industry for interaction design roles.

COMPONENTS OF INTERACTION DESIGN
Core Areas of Interaction Design:
1.Cognitive Ergonomics
2.Human-Computer Interaction (HCI)
3.Information Systems (e.g., business, health, education applications)
4.Ubiquitous Computing (IoT and pervasive technologies)
Example:
5.IoT enables smart homes (e.g., control heating or lighting from your
phone).
6.HCI improves usability in self-checkouts at stores.

Human Computer Interaction Lecture Notes

WHO IS INVOLVED IN INTERACTION
DESIGN?
Multidisciplinary Teams:
• Designers, engineers, programmers, sociologists, artists, marketing
experts, etc.
• Collaboration leads to creative and original designs.
Challenges:
• Misunderstanding due to different professional terms or
perspectives.
• Example: "Representation" means different things to a graphic
designer vs. a computer scientist.

CONSIDERATIONS FOR DESIGNERS
Understand:
1.How people act/react to events.
2.Emotional aspects (aesthetics, desirability, narrative).
3.Business, technical, manufacturing, and marketing aspects.
Questions:
• Why is teamwork crucial in interaction design?
• How can different perspectives improve designs?

INTERACTION DESIGN IN PRACTICE
1.Benefits of Teamwork:
⚬ More ideas, new methods, and creative designs.
2.Downside:
⚬ Communication challenges in diverse teams.
Example:
⚬ A toy designer, a marketer, and a programmer may all view "interaction"
differently, causing potential miscommunication.
Discussion Point:
⚬ What strategies can improve communication in multidisciplinary teams?

LESSON 4:
THE USER EXPERIENCE (SHARP, 2019)
User experience (UX) refers to how a product behaves and is used by people
in the real world.
• Quote: "Every product that is used by someone has a user experience."
— Jesse Garrett (2010)
• Focus: Emotional appeal, satisfaction, and the sensual effect of
interacting with a product.

ASPECTS OF USER EXPERIENCE
• Sensual Experience: Touch, sound, and visual appeal (e.g., how
a smartphone feels in hand).
• Types of Experiences: Quick (e.g., taking a photo), leisurely
(e.g., interactive toys), and integrated (e.g., visiting a museum).
• Quality of Experience: Joy, excitement, and overall satisfaction.

DESIGNING FOR USER EXPERIENCE
1. Designing for UX, not designing UX itself: UX is shaped by design
features (e.g., smooth edges on a smartphone) that evoke feelings.
2. UXD (User Experience Design): Emphasizes quality of experience
over methods.
3. Designing for Joy: Creating products that are not only usable but
also delightful and elegant.

USER EXPERIENCE VS. USABILITY
• UX vs UI: The overall user experience goes beyond just the user
interface.
• Usability Definition: A quality of the UI that focuses on efficiency,
learnability, and safety.
Example: A perfect UI doesn’t ensure a good UX if the underlying
content doesn't meet the user's needs.

FACTORS AFFECTING USER EXPERIENCE
Key Aspects:
• Usability
• Functionality
• Aesthetics
• Emotional appeal
Additional Considerations (Jack Carroll, 2004): Fun, health, social
capital, cultural identity.

UNDERSTANDING USERS
• Context Matters: Different users have different needs (e.g.,
scientists vs. furniture store sales agents).
• Individual Differences: Age, gender, occupation, and abilities
shape user expectations.
Example: Children vs. adults in learning or playing contexts.

CULTURAL AND AGE CONSIDERATIONS
• Cultural Sensitivities: Different countries may have varying
expectations and needs.
• Age Sensitivities: Not all older adults prefer larger fonts or
simplified designs. Some may enjoy smaller, more compact
interfaces.
• Design Challenges: Consider global use and local preferences.

ACCESSIBILITY AND INCLUSIVENESS
• Accessibility: Ensures products can be used by people with
disabilities.
• Inclusiveness: Ensures products are open to all, regardless of
age, income, or ability.
Example: Google and Apple’s tools for accessibility (e.g., VoiceOver,
screen readers).

TYPES OF IMPAIRMENTS
Categories of Impairments:
• Sensory: Hearing or vision loss.
• Physical: Mobility impairments.
• Cognitive: Learning disabilities, aging-related conditions.
Assistive Technologies: Examples include screen readers for the
visually impaired and hearing aid compatibility.

DESIGNING FOR DIFFERENT ABILITIES
Impairments: Permanent, temporary, and situational.
Design Approach: Use inclusive design for a broad range of users; assistive
technology for specific needs.
Usability and User Experience Goals
• Usability Goals: Effectiveness, efficiency, safety, utility, learnability, and
memorability.
• User Experience Goals: Aesthetic and emotional appeal.
• Goal: Design products that meet usability standards while also offering a
pleasant and meaningful experience.

The concept of User Experience (UX) goals, contrasting them with
usability goals, which are more objective. UX goals deal with how users
feel when interacting with a system, while usability goals focus on how
useful or productive a system is. The terms used to describe UX goals
reflect a broad range of emotions and experiences that vary based on
the activity, technology, and place. For instance, the experience of
listening to music changes depending on where it's happening (e.g., in
the shower vs. in the car) and how it’s being experienced (e.g., through
a high-end sound system vs. a smartphone with shuffle mode).

Concepts in UX Goals:
1.Desirable vs. Undesirable Experiences: These qualities reflect subjective feelings
and vary widely, depending on personal perspectives and the context of use.
2.Flow: A central concept in UX, flow refers to a state of deep emotional
engagement where users lose track of time because they are so absorbed in an
activity. Designers aim to design experiences that lead users into this flow state,
such as guiding visitors through unexpected yet captivating experiences on
websites.
3.Micro-Interactions: These are small, often repetitive actions that bring
enjoyment, such as turning a perfectly resistant knob or swiping on a
smartphone screen to reveal a new menu. Though minor, these actions can
significantly impact how users feel about the product.

LESSON 5:
DESIGN PRINCIPLES (SHARP, 2019)
Design principles guide interaction designers in creating effective user
experiences. They help designers think about aspects like feedback
(informing users of actions taken), findability (ease of locating objects), and
navigability (clarity in interface navigation). These principles, based on
theory, experience, and common sense, suggest what should and shouldn't
be included in designs but don't specify how to create specific interface
elements. Key principles include:

1. VISIBILITY
• The principle of visibility suggests that the more visible functions are, the
more likely users will know what actions to take.
• Example: In cars, the clear visibility of controls like the horn, headlights,
and hazard warning lights makes them easy to operate.
• In contrast, invisible or poorly designed controls (like automated faucets)
can cause confusion and frustration.

2. FEEDBACK
• Feedback is crucial to informing users about the effects of their actions.
• Without feedback, users would struggle to know whether their actions are
successful (e.g., trying to play a guitar without hearing the sound).
• It can take various forms: audio, tactile, verbal, or visual, depending on
the context.

3. CONSTRAINTS
• Constraints restrict the possible actions a user can take at any given time.
• Example: Grayed-out menu options in graphical user interfaces prevent
users from selecting unavailable actions.
• Physical design constraints, like specific slots for cables in a computer, also
guide correct use.

4. CONSISTENCY
• A consistent interface uses similar operations and elements for similar
tasks, making it easier for users to learn and use.
• For example, always using the same mouse button to select objects
creates a predictable environment for users.
• However, as interfaces become more complex, consistency can be
challenging to maintain.

5. AFFORDANCE
• Affordance refers to an object's design that intuitively suggests how to
interact with it.
• Example: A door handle invites pulling, a cup handle suggests grasping,
and a mouse button encourages clicking.
• For screen-based interfaces, affordances are more about perceived cues
that indicate how a user should interact with buttons, icons, and links.

LESSON 6:
APPLYING DESIGN PRINCIPLES IN
PRACTICE
1. Trade-offs in Design Principles:
• Visibility vs. Constraints: Striving to constrain an interface can sometimes result in
less visible information, making it harder for users to find what they need.
• Affordance vs. Clutter: Trying to design an interface to closely resemble physical
objects for intuitive affordances can lead to a cluttered and confusing layout.
• Aesthetic vs. Usability: Focusing too much on aesthetic appeal can compromise
the usability of an interface.
• Consistency vs. Flexibility: Consistency is a desirable design principle, but
attempting to enforce it too strictly can sometimes lead to inconsistencies
elsewhere, reducing overall functionality.

LESSON 6:
APPLYING DESIGN PRINCIPLES IN
PRACTICE
2. The Knife Analogy:
• Jonathan Grudin’s example of knife storage is used to explain the balance between consistency
and flexibility in design. While storing knives consistently in one place might seem intuitive,
certain knives (e.g., carving knives or special occasion knives) need to be placed in different
locations for practical reasons. This introduces inconsistency but makes the system more
functional and user-friendly in the context of their use.
3. Design Inconsistency in Practice:
• Sometimes, introducing inconsistency in design makes it easier for users to locate and use
elements, similar to how knives are stored in different locations depending on their usage
context. Though the inconsistency might make learning the system harder initially, it could
enhance usability in the long term.

QUIZ #2
Next
Meeting
via iLearnU
Face to face

MODULE 3
THE PROCESS OF INTERACTION DESIGN

THE PROCESS OF INTERACTION
DESIGN
This chapter discusses how to design an interactive product, focusing on the process
of interaction design. If you were asked to design a cloud-based service for sharing
photos, movies, music, and more, how would you start? Would you begin by
sketching the interface, structuring the system, or understanding users' current
experiences with tools like Dropbox?
The interaction design process follows four main phases:
1.Discover: Gather insights about the problem.
2.Define: Develop a clear design brief.
3.Develop: Create, test, and improve solutions.
4.Deliver: Finalize, produce, and launch the product.
Introduction

Interaction design is based on user-centered design, meaning
users are involved throughout the process. Designers often begin
with user research and sketching ideas, but questions arise:
Who are the users?
How can they help in development?
Will they know what they need?
This module explores these questions, user-centered design, and
introduces a lifecycle model for the interaction design process.

LEARNING OUTCOMES
The main goals of this chapter are to accomplish the following:
1. Reflect on what interaction design involves.
2. Explain some of the advantages of involving users in development.
3. Explain the main principles of a user-centered approach.
4. Introduce the four basic activities of interaction design and how they are related in a
simple lifecycle model.
5. Ask some important questions about the interaction design process and provide the
answers.
6. Consider how interaction design activities can be integrated into other development
lifecycles.

LESSON 1:
WHAT IS INVOLVED IN INTERACTION DESIGN?
Interaction design
involves discovering
product requirements,
designing solutions, and
creating prototypes for
evaluation, with a strong
focus on users and their
goals.

THE IMPORTANCE OF GENERATING
ALTERNATIVES
• Generating alternatives is a key principle in interaction design.
• Linus Pauling’s quote: “The best way to get a good idea is to get lots of
ideas.”
• Brainstorming helps explore multiple solutions before choosing the best
one.
Example: Tom Kelley’s “seven secrets for successful brainstorms.”
• Sharpening focus
• Having playful rules
• Getting physical (using visual props)

COMMUNICATING DESIGNS WITH USERS
• Designs need to be captured and expressed in ways that users
understand.
• Common methods include:
-Sketches
-Descriptions in natural language
-Diagrams
-Prototypes (limited versions of the final product)
• Prototypes are especially effective for capturing user feedback, as they
are interactive.

1.UNDERSTANDING THE PROBLEM SPACE
• The first phase in the design process is understanding the problem
space.
• Avoid jumping straight to design without exploring the context and user
needs.
Example: Augmented reality navigation systems and their impact on driving
experience.
• Articulating the problem space helps clarify what needs to be improved
or changed.

Why Involve Users?
• Involving users ensures the product meets their
goals and expectations.
• Helps reduce the chances of misunderstandings or
errors.
• User involvement can lead to better products and
user satisfaction.
• Managing expectations is crucial to avoid
disappointment after product release.
2. THE IMPORTANCE OF USER INVOLVEMENT

• User involvement can range from full-time
participation to specific activities.
• Full-time involvement means continuous feedback,
but could lead to disconnect from the user
community.
• Targeted activities allow limited but valuable input.
• Online feedback systems and crowdsourcing can
engage a large number of users.
3. DEGREES OF USER INVOLVEMENT

• Participatory design involves users as active
participants in the design process.
• This approach leads to better products and a
greater sense of ownership.
• Users are not passive receivers but central
actors in the design process.
PARTICIPATORY DESIGN AND CO-DESIGN

LESSON 2:
WHAT IS A USER-CENTERED APPROACH?
• “A user-centered approach emphasizes that real users
and their goals, not technology, drive product
development. It focuses on supporting and enhancing
human skills and judgment while being relevant to user
tasks.”
• This approach is more of a philosophy rather than a
single technique.

FOUNDATIONAL PRINCIPLES
Content: Introduce the three principles proposed by Gould and
Lewis (1985):
• Early focus on users and tasks.
• Empirical measurement.
• Iterative design.

PRINCIPLE 1: EARLY FOCUS ON USERS AND
TASKS
• Understand the users’ cognitive, behavioral, and
attitudinal characteristics.
• Observe users performing their tasks to inform design.
• Involve users in the design process from the start.

PRINCIPLE 2: EMPIRICAL MEASUREMENT
• Observe and measure user performance and reactions
at different stages.
• Test scenarios, prototypes, and simulations with users.
• Analyze data to improve designs.

PRINCIPLE 3: ITERATIVE DESIGN
• Address problems found during testing and improve the
design.
• Repeat the cycle of design-test-measure-redesign until
the solution works.
• Emphasize the importance of feedback for innovation.

EARLY FOCUS: EXPANDED PRINCIPLES
1. Users’ tasks and goals drive development.
2. Study user behavior and context to inform design.
3. Capture user characteristics to prevent mistakes.
4. Consult users throughout all development stages.
5. Design decisions are made considering users and their
environment.

THE ROLE OF EMPIRICAL MEASUREMENT
1. Identify usability goals early in the project.
2. Use empirical methods to evaluate progress at each stage.
3. Ensure design decisions meet user needs.

IMPORTANCE OF ITERATIVE DESIGN
• Iteration refines designs through user feedback.
• Engage users to discuss requirements and test solutions.
• Iteration is vital for innovation and improving designs.

FOUR BASIC ACTIVITIES OF INTERACTION
DESIGN
1. Discovering requirements.
2. Designing alternatives.
3. Prototyping.
4. Evaluating.

1.DISCOVERING REQUIREMENTS
• Understand target users and their needs.
• Gather data and analyze it to define what will be
developed.
• Focus on learning about the users’ world.

2. DESIGNING ALTERNATIVES
• Propose ideas that meet user requirements.
• Conceptual design: Abstract ideas (e.g., user tasks and
goals).
• Concrete design: Detailed elements (e.g., colors,
menus, icons).

3. PROTOTYPING IN DESIGN
• Use prototypes to help users evaluate the design.
Techniques:
-Paper-based prototypes: Quick and cheap for early
feedback.
-Role-playing: Simulate user interaction.
• Prototypes do not always require working software.

4. EVALUATING DESIGNS
• Measure usability and user experience against goals.
• Evaluate designs throughout the process.
• Complements quality assurance by enhancing user
satisfaction.

LESSON 3:
A SIMPLE LIFECYCLE MODEL FOR
INTERACTION DESIGN
Understanding the activities involved in interaction
design and their relationships is key to building
effective systems. This is captured through lifecycle
models, which represent the process and activities of
interaction design, showing how they are
interconnected.

CLASSIC LIFECYCLE MODEL
The classic lifecycle model in interaction design incorporates the four main activities:
1.Discovering Requirements: Identifying user needs and constraints.
2. Generating Alternative Designs: Exploring creative solutions.
3. Prototyping: Building models of the proposed designs.
4. Evaluation: Testing the designs against usability and user experience goals.
• These activities are iterative, meaning they repeat multiple times, allowing for
refinement and evolution of the product. Projects often start with requirements
gathering and cycle through design, prototyping, and evaluation until a final product
emerges.
• This cycle integrates user-centered design principles, ensuring the product aligns with
users’ needs and expectations.

PRACTICAL ISSUES IN INTERACTION
DESIGN
To successfully apply the lifecycle model, it’s crucial to address the
following practical challenges:
1.Who Are the Users?
⚬ Identifying the users can be complex due to the diverse group of
stakeholders (e.g., users, developers, customers, and legislators).
⚬ Using tools like onion diagrams can help visualize stakeholder
involvement.

DESIGN
2. What Are the Users' Needs?
• Designers should avoid assuming their preferences match those of the
target users.
• Observing real users and focusing on usability goals and user experience
goals provide better insights.
3. How to Generate Alternative Designs?
• Creativity is key but can be enhanced by exploring different perspectives,
competitor products, and similar systems.
• Balancing constraints and requirements helps generate viable
alternatives.

DESIGN
4. How to Choose Among Alternatives?
• Decisions are based on user needs, tasks, and technical feasibility.
• Focus is on externally visible features (e.g., ease of use, speed) while considering internal
system constraints.
5. How to Integrate Interaction Design into Other Lifecycle Models?
• Interaction design often overlaps with other disciplines, particularly software development.
• Agile methodologies (e.g., Scrum, Kanban, eXtreme Programming) are popular for integrating
interaction design due to their focus on:
⚬ Iteration
⚬ User feedback
⚬ Flexibility
⚬ Collaboration and communication

REFERENCES
a. Biele, Cezary, “Human movements in human-computer interaction (HCI”, Springer, 2022
b. Li, Yang and Hilliges, Otmar, ed.by Artificial intelligence for human computer
interaction: a modern approach, Springer, 2021 60
c. Thakur, Nirmalya, and B.D., Parameshachari, ed.by” Human-computer interaction and
beyond : advances towards smart and interconnected environments (part I)”, 2021
d. Jennifer Preece, Helen Sharp, Yvonne Rogers, “Interaction Design: Beyond Human
Computer Interaction”, 5th Edition, Wiley 2019
e. HCI (human-computer interaction) from https://www.cs.bham.ac.uk/~rxb/Teaching/HCI
%20II/intro.html

QUIZ #3
Next
Meeting
via iLearnU
Face to face

MODULE 4
CONCEPTUALIZING INTERACTION

CONCEPTUALIZING INTERACTION
When coming up with ideas for a design project, it’s important to think
about what the product will actually do. This is called creating a "proof of
concept." It helps check if the idea is realistic, useful, and worth
developing. It also helps designers figure out the basic parts needed to
build the product. From a user’s point of view, this process makes things
clearer, helping designers explain how users will learn about and use the
product.
Introductio
n

LEARNING OUTCOMES
At the end of this lesson, the student should be able to:
▪ Explain how to conceptualize interaction.
▪ Describe what a conceptual model is and how to begin to
formulate one.
▪ Discuss the use of interface metaphors as part of a conceptual
model
▪ Outline the core interaction types for informing the
development of a conceptual model.
▪ Introduce paradigms, visions, theories, models, and frameworks
informing interaction design.

LESSON 1:
CONCEPTUALIZING INTERACTION (SHARP,
2019)
What is Conceptualizing Interaction?
It’s the process of identifying assumptions and claims to design better user experiences.
Definitions
Assumption:
• Taking something for granted that requires investigation.
• Example: “People want entertainment systems in their cars.”
Claim:
• Stating something to be true, even if it’s open to question.
• Example: “Gesturing while driving is safe for controlling systems.”

Why Identify Assumptions and Claims?
• To spot unclear or problematic design ideas early.
• To reformulate vague ideas into better solutions.
Example:
If current designs are unsafe, explore how speech-only
systems could improve safety.

FRAMEWORK FOR DESIGN
TEAMS
Key Questions to Ask:
1.Are there problems with the current product or experience?
⚬ Example: Is the car navigation system too distracting?
2.Why do you think these problems exist?
⚬ Example: Drivers take their eyes off the road.
3.What evidence supports these problems?
⚬ Example: High accident rates during system use.
4.How will your design solve these problems?
⚬ Example: A hands-free system allows focus on driving.

BENEFITS OF
CONCEPTUALIZING DESIGN
Orientation:
• Helps ask specific questions about how users understand the design.
Open-Mindedness:
• Encourages exploring various ideas.
Common Ground:
• Establishes shared terms to avoid confusion.
Example: Agreeing that safety is the primary goal aligns all team
members.

CONCEPTUAL MODEL
What is a Conceptual Model?
• A shared blueprint for designing and testing ideas.
⚬ Represented as text or diagrams.
⚬ Communicates ideas to business, engineering, finance, and
marketing teams.
Example:
A diagram showing how a voice command system interacts with the
car’s navigation and entertainment functions.

ADVANTAGES OF A
CONCEPTUAL MODEL
1.Simplifies designs for user tasks.
2.Reduces development time.
3.Improves customer adoption.
4.Minimizes training and support needs.
Example: A simple, intuitive interface for a car system leads to
quicker user adaptation and fewer support requests.

CONCEPTUAL MODELS
A conceptual model simplifies how a system operates, helping users
understand how to interact with a product. It includes metaphors,
concepts, relationships, and mappings to user experiences. The
purpose is to assist designers in organizing ideas for intuitive user
interfaces. Complex models can confuse users, especially if features
are added without clear explanations. An example is the online
shopping cart, where familiar concepts like adding items to a basket
and checking out are used.

INTERFACE METAPHORS
Metaphors in conceptual models help users understand interactions
by relating them to real-world concepts. For example, the "desktop"
metaphor in computing represents a virtual workspace as a physical
desk. While useful, metaphors can sometimes conflict with user
expectations, such as placing the recycle bin on the desktop instead
of under it. However, users typically adapt once they understand the
reasoning.

INTERACTION TYPES
Interaction types are ways in which users engage with a system, and
they play a crucial role in designing user experiences. There are five
interaction types:
1.Instructing: Users give instructions to the system, like pressing
buttons or typing commands.
2.Conversing: Users interact with the system through dialogue,
similar to having a conversation with a human.

INTERACTION TYPES
3. Manipulating: Users engage with objects in a virtual or physical
space by manipulating them.
4. Exploring: Users navigate through virtual environments (e.g., 3D
worlds or augmented reality) or physical spaces with sensor-based
technologies.
5. Responding: The system initiates interaction, and the user chooses
whether to respond, such as receiving location-based alerts or
notifications.

LESSON 2:
PARADIGMS, VISIONS, THEORIES, MODELS, AND
FRAMEWORKS (SHARP, 2019)
What are they?
• Concepts used to inform design and guide research.
• Help in understanding and solving problems in
human-computer interaction (HCI).

PARADIGMS
A paradigm is a general approach adopted by a community.
Features:
• Shared assumptions, concepts, values, and practices.
• Helps in deciding what questions to ask and how to analyze
findings.
Example: In the 1980s, HCI focused on user-centered designs for
desktop computers (WIMP interface). Later, touchscreens became
the new standard.

VISIONS
A vision is a future scenario that inspires research and
development.
Features:
• Imagines how technology could evolve in the future.
• Often portrayed in films or stories.
Example: Mark Weiser's vision of ubiquitous computing:
technology embedded in everyday objects and devices.

THEORIES
A theory explains a phenomenon using evidence.
Features:
• Helps in understanding how something works.
• Provides a base for predictions and evaluations.
Example: The theory of information processing explains how the
mind processes information.

MODELS
A model is a simplified version of a process or behavior.
Features:
• Makes it easier to understand and evaluate designs.
• Based on theories, such as cognitive science.
Example: Don Norman's Seven Stages of Action Model: a user’s
process from planning to evaluating actions.

FRAMEWORKS
A framework is a guide that helps in designing or analyzing a
system.
Features:
• Provides interrelated concepts or specific questions.
• Helps designers create a better user experience.
Example: Don Norman's framework of how the designer's model,
system image, and user's model interact.

REFERENCES
a. Biele, Cezary, “Human movements in human-computer interaction (HCI”, Springer, 2022
b. Li, Yang and Hilliges, Otmar, ed.by Artificial intelligence for human computer interaction:
a modern approach, Springer, 2021
c. Thakur, Nirmalya, and B.D., Parameshachari, ed.by” Human-computer interaction and
beyond : advances towards smart and interconnected environments (part I)”, 2021
d. Jennifer Preece, Helen Sharp, Yvonne Rogers, “Interaction Design: Beyond Human
Computer Interaction”, 5th Edition, Wiley 2019
e. HCI (human-computer interaction) from https://www.cs.bham.ac.uk/~rxb/Teaching/HCI
%20II/intro.html

QUIZ #4
Next
Meeting
via iLearnU
Face to face

Human Computer Interaction Lecture Notes

More Related Content

Similar to Human Computer Interaction Lecture Notes (20)

More from jamesaaronguevarra1 (7)

Recently uploaded (20)

Human Computer Interaction Lecture Notes