Module - 1

Introduction to Human-Computer
Interaction (HCI)
• Human-Computer Interaction (HCI) is the study, design, and

evaluation of the ways people interact with computers and digital

systems.

• It focuses on creating interfaces that are usable, efficient,

accessible, and enjoyable.

• Goals of HCI
Human Factors Engineering or Ergonomics
• Human Engineering Factors involve the study of how people
interact with machines, tools, environments, and systems, aiming
to make these interactions safe, efficient, comfortable, and
error-free.

• It is the science of designing tools, machines, workspaces, or

systems so that people can use them easily, safely, and
comfortably.
Cont…
Without HFE (Bad
Situation With HFE (Good Design)
Design)

Hard chair, no back Adjustable chair,

Computer Chair
support → back pain supports back and arms

Clear buttons, good

Confusing buttons →
Mobile App color contrast → easy to
wrong clicks
use

Keyboard for Long Ergonomic keyboard →

Flat design → wrist pain
Typing natural hand position
Aspect Focus

Physical Body posture, strength, reach, health

Cognitive Attention, perception, memory, decision-making

Emotional Comfort, satisfaction, frustration

Social Teamwork, communication, organizational culture

Disabilities, Human Engineering Factors & HCI Design

Human Engineering
Disability Type HCI Design Consideration
Factor

Reachability, motor Large buttons, voice input, keyboard

Mobility Impairment
control navigation, switch access

Visual perception, Screen reader support, semantic HTML, alt

Blindness
navigation text
Visual clarity, contrast,
Low Vision High-contrast themes, zoom, scalable text
readability

Deaf/Hard of Hearing Auditory feedback, alerts Captions, visual/haptic alerts, transcripts

Memory load, information Simple layouts, clear instructions, audio/text

Cognitive Impairment
processing pairing
Predictability, sensory Minimalist UI, avoid flashing, consistent
Autism Spectrum
sensitivity navigation
Emotional triggers, stress Calm color schemes, user control over
Anxiety
factors popups/sounds
Ergonomic ATM layout for seated users
Barrier-free ATM interface with tactile paving
Cognitive Science
• Cognitive Science is the interdisciplinary study of the mind and
intelligence, drawing on psychology, neuroscience, linguistics,
philosophy, computer science, and anthropology.
It explores how humans perceive, think, remember, learn, and
make decisions.
Cont…
• Key Cognitive Processes Relevant to HCI
Process Description Example in HCI

How users receive and interpret

Perception Recognizing icons, colors, sound cues.
sensory information.

Focusing mental resources on specific

Attention Highlighting active windows, notifications.
tasks or stimuli.

Remembering menu locations, login

Memory Storing and retrieving information.
credentials.

Learning Acquiring knowledge or skills over time. Onboarding tutorials, user guidance.

Making decisions based on logic or Navigating menus, choosing options in

Reasoning
experience. forms.

Fixing a form error or adjusting system

Problem Solving Finding solutions to obstacles.
settings.
Good and Poor Design in HCI
What is Design in HCI?

Design in HCI refers to how interfaces are structured, visually

presented, and how users interact with them. Good design ensures
that systems are efficient, effective, satisfying, and easy to use.
Poor design, on the other hand, leads to user frustration, errors, and
inefficiency.
A good design:

• Is intuitive and easy to use

• Matches users’ mental models

• Minimizes errors

• Promotes efficiency

• Is accessible to all users

• Enhances user satisfaction

Characteristics of Good Design
Good design aligns with usability principles and enhances user
experience:
• Intuitive: Users can understand the interface without
instructions.
• Consistent: Similar tasks look and behave the same.
• Feedback-rich: Provides immediate and meaningful feedback
(e.g., loading indicators).
• Error-tolerant: Prevents errors or helps users easily recover from
them.
• Accessible: Supports users with diverse abilities (e.g., screen
reader compatibility).
• Aesthetic: Clean and pleasing layout without clutter.
• Goal-oriented: Helps users achieve tasks efficiently.
Example of Good Design:

• Google Search Page: Minimalistic design, fast loading, clear call

to action.
• ATM Interface: Step-by-step, clear language, and back options.
• A poor design:
Is confusing

Causes frequent user errors

Lacks clear feedback

Forces users to remember too much

Is inaccessible to users with disabilities

Characteristics of Poor Design
Poor design often leads to confusion, errors, and abandonment of
the interface:
• Complex navigation: Users get lost or unsure where to click.
• No feedback: System appears unresponsive (e.g., click with no
response).
• Unclear labels or icons: Users don't know what buttons do.
• Inconsistency: Different actions require different patterns of
behavior.
• Error-prone: Easy to make irreversible mistakes.
• Accessibility issues: Difficult for people with disabilities to use.
Example of Poor Design:
• Cluttered websites with pop-ups, ads, unclear buttons (e.g.,
early 2000s news websites).

• Unlabeled icons in apps that confuse first-time users.

Cont…
So,
• Good design respects user mental models and ensures clarity.

• Poor design leads to frustration, inefficiency, and task failure.

• Designers must focus on usability, accessibility, and feedback

to create effective interfaces.
Cont…
Real-World Application

• Elevator design: Buttons should light up (feedback), be clearly

labeled (signifiers), and be placed near doors (mapping).

• Mobile apps: Swipe gestures need to be signified (e.g., arrows),

with animation feedback, and should match mental models (e.g.,
swiping left = delete).
Affordances and Signifiers
• These are two fundamental design concepts introduced by Don
Norman, crucial for creating intuitive user interfaces. They help
users understand what actions are possible and how to perform
them.

• Affordances define what actions are possible.

• Signifiers communicate where the action should take place.

Cont…
1. What is an Affordance?
Affordance refers to the perceived or actual properties of an
object that suggest how it can be used.

Definition: "The relationship between a physical object and a

person that determines how the object could possibly be used." –
Don Norman
Cont…
• Example of Good Affordance:
Scrollbars afford scrolling.

Play icon (►) on a video player affords clicking to play.

Cont…
1. Visual Affordance:
The look of an element tells you how to interact with it.

Users don’t need instructions.

The design communicates action just by appearance.

Other real-world examples:
• Buttons with shadows look clickable.

• Scroll bars suggest you can drag or move.

Cont…
2. Language Affordance
• Text labels guide users to understand what action will happen.

• "Sign Up" button.

• The label clearly tells the user what the button does.

• Real-world examples:

“Submit”, “Download”, “Retry”, “Start Quiz”.

Cont…
3. Pattern Affordance
• Familiar design patterns users have learned over time.
• A search bar with a magnifying glass icon and placeholder text.
• Why it matters:
Even if a user is new to the app, they recognize the pattern
from other apps/sites.

Ex:
Three vertical dots (⋮)
Open more options/settings menu Android app settings, browser
extensions
Cont…
4. Symbolic Affordance
• Icons or symbols that stand for real-world functions or objects.
• Trash can icon → Delete.
• Shopping cart icon → Add to cart.
• Bell icon → Notifications.

• Why it matters:
• Symbols are compact and work across languages.
• When well-designed, they’re quick to understand.
Cont…
5. Negative Affordance
• Deliberately making something look inactive or not usable.
• “NEXT” button is greyed out → You can’t go forward yet.
• “PREV” is active → You can go backward.
• Why it matters:
• Prevents users from making errors.
• Shows system status (e.g., "This option is not available now").
• Real-world examples:
• A disabled "Submit" button until form is complete.
Cont…
2. What is a Signifier?
Signifiers indicate where and how an action should take
place. They are visual, auditory, or tactile indicators that signal what
affordances are available.

Definition: "Signifiers are signals that communicate where

the action should take place." – Don Norman
Cont…
• Examples of Signifiers:

Signifier Type Example

Visual A raised button or underlined text link
Auditory Click sound when pressing a button
Tactile (haptic) Vibration when you type or receive a message
Label like “Click here” or tooltip “Submit the
Textual
form”
Cont…
• Affordance vs Signifier:

Affordance Signifier

What an object can do What tells the user what can be

(possibility). done.

Hidden or perceived possibilities. Makes affordances perceivable.

Example: A door can be pushed. A push plate is the signifier.

Perceivable affordances are
signifiers
Affordance & Signifiers Overlapping
Example 1: Raised Button on a Website

• Affordance: It can be clicked.

• Signifier: The visual style (shadow, border) indicates it is clickable.

• In this case, the affordance is clearly signified — they’re combined.

Example 2: Door with a Handle

• If the handle looks like it can be pulled, it's an affordance.

• If a “PULL” label is added, that’s a signifier.

• Sometimes, the shape alone acts as both.

Ex Signifiers in Instagram
What It
# UI Element Signifier
Communicates

Indicates whether you

1️⃣ Like Button Heart icon (outline/filled)
can like or have liked

Signifies there is a new

2️⃣ Stories Ring Colored ring around profile picture
story to view

Suggests navigation to
3️⃣ Navigation Bar Icons (Home, Search, Reels, Shop)
different app sections

Shows the user's

4️⃣ Follow Button “Follow” / “Following” text button
current following state

Signifies more content

5️⃣ Carousel Dots Dots (•••) under multi-image posts
to swipe left/right
Facebook App: Affordances & Signifiers
Type UI Element Functionality Explanation

The text area

Lets users tap and
visually looks like
type a status
1️⃣ Affordance "Write something here..." box an input field →
update or
user knows it can
comment.
be typed in.

The icons afford

Lets users tap to interaction —
2️⃣ Affordance Like / React buttons like or react to a pressing them
post. produces instant
visual feedback.

Icon shape and

Tapping opens the
placement suggest
3️⃣ Affordance Camera icon on Story camera for story
tapping to access
creation.
camera directly.
 Cont…
Type UI Element Functionality Explanation

Visually signals
attention is
Red dot on Indicates new unread
1️⃣ Signifier needed → acts
Notifications icon notifications.
as a visual
signifier.

Signals a video
is streaming live
“Live” label with red Appears next to real-time
2️⃣ Signifier — prompts user
border videos.
to click in real-
time.
Case Study:

1. Identify 5 examples of affordances and 5 signifiers in apps you

use daily (e.g., WhatsApp, Gmail, Instagram).

( Part of Assessment-1)
Interaction Design in HCI
What is Interaction Design?
• Interaction Design (IxD) is the process of designing interactive digital
products, environments, systems, and services that enable effective
communication between users and technology. It focuses on how
users interact with systems—physically, cognitively, and emotionally.

• It’s not just about buttons and screens, but about creating meaningful
experiences through interaction.
Cont…
• Interaction Design is about designing the behavior of digital
products.

• It combines user needs, system capabilities, and interface

structures to ensure usable, enjoyable, and efficient
interaction.

• Successful interaction design improves task completion,

reduces user frustration, and enhances overall experience.
Goals of Interaction Design
• Help users achieve their goals easily and efficiently

• Make systems intuitive and enjoyable to use

• Enhance usability and user experience

• Reduce errors and learning curves

• Support accessibility and inclusivity

Key Components of Interaction Design
Component Description

Users Who is using the system? What are their needs, expectations, and capabilities?

Goals What do users want to achieve using the product/system?

Where and how is the interaction happening? (e.g., mobile, desktop, noisy
Context
environment)

Tasks What actions or steps are users expected to perform?

Feedback How does the system respond to user input (e.g., messages, animations, alerts)?
Key Concepts in Interaction Design:

Concept Description
Visual clues that suggest how something works (e.g., a
Affordances
button suggests clicking)
Indicators that communicate where action should take
Signifiers
place (e.g., labels)
Response from system after user action (e.g., sound,
Feedback
animation, message)
Limits that guide or restrict user actions (e.g., disabled
Constraints
buttons)
Mapping Relationship between controls and their effects
Similar operations and elements behave the same
Consistency
across interface
Interaction Design vs Interface Design
Aspect Interaction Design Interface Design

Visual elements like

Focus User behavior and flow
buttons/layout

Covers entire user-system

Scope Only the visual presentation
interaction cycle

Concerned Efficiency, feedback, task Typography, colors,

with completion aesthetics
Activities in the Interaction Design Process
• Identifying Needs and Establishing Requirements
• What are the user needs? What problems are we solving?
• Developing Alternative Designs
• Brainstorm and prototype multiple interaction models (low- to
high-fidelity)
• Building Interactive Prototypes
• Use tools like Figma, Adobe XD, or HTML/CSS/JS for simulation
• Evaluating Designs
• Conduct usability testing, heuristic evaluations, or A/B testing
Examples of Interaction Design
Application Interaction Design Example Why It's Effective
Provides immediate
Instant search suggestions as you
Google Search feedback and predicts
type (auto-complete)
intent
Calendar pop-up for choosing
Visual feedback and ease
IRCTC Train Booking travel dates, seat availability
of selection
color-coded
Step-by-step screens, sound and Sequential and guided
ATM Machine visual confirmation after every user interaction with clear
action feedback and constraints
Map-based interaction to select Real-time feedback, live
Uber App pickup, estimated time & fare interaction with dynamic
shown before booking elements
Example: Interaction Design in a Mobile
Banking App
Feature Design Interaction

Biometric fingerprint or 2-factor OTP

Login
login (secure, fast)

Auto-suggest recipient names, real-time

Transfer Money
balance update, feedback after success

Pre-loaded providers, confirm/cancel

Bill Payments
options, receipt generated

Chatbot interface, FAQ links, voice

Help & Support
command enabled
The User Experience (UX)
What is User Experience?
• User Experience (UX) refers to a person's overall emotions, attitudes,
and perceptions when interacting with a system, product, or service.
UX goes beyond usability—it includes how the user feels about using
the product, from first impression to final interaction.

• "User experience is a person's perceptions and responses resulting

from the use and/or anticipated use of a product, system or service."
Cont…
• User Experience is central to HCI, emphasizing the quality of the
entire interaction.

• A good UX results in happy, loyal users; poor UX drives users

away.

• UX includes usability but also goes further to address emotions,

trust, and delight.
• Cognitive Load:

Cognitive load refers to the amount of mental effort required to

process information while performing a task. In interface design, minimizing
unnecessary cognitive load is essential to help users focus and perform tasks
efficiently.

High cognitive load can lead to:

• Confusion

• User errors

• Abandonment of tasks or applications

Cont…
• User Experience Goals describe the emotional and qualitative
outcomes of user interaction with a product, system, or interface.

• Unlike usability goals (which are task-focused), UX goals are about

how users feel during and after using a system.

• UX = Emotions + Perceptions + Satisfaction

• UX goals address how users feel, not just what they do.
• They help design systems that are delightful, inclusive, and
memorable.
• Integrating UX goals early leads to better engagement, retention,
and positive brand perception.
Interaction Design vs User Experience
Interaction Design User Experience

Focuses on behavior of system and Focuses on overall experience—

user emotion, trust, satisfaction

Broader scope including branding,

More concerned with functionality
design, and emotional impact

Involves layout, flow, and Involves total product experience

response across channels and touchpoints
Key Elements of UX
Element Description

Usability How easy and efficient it is to use the product

Accessibility Whether people with disabilities can use the product

Desirability Visual appeal and emotional connection

Findability How easily users can locate what they need

Credibility The user’s trust in the product or brand

Usefulness Does it solve the user's problem?

Value Is the product worth the user's time and effort?

UX vs Usability
Aspect Usability User Experience

Task performance and Emotions, perceptions, and

Focus
efficiency satisfaction

Specific interactions (e.g.,

Scope Entire user journey
button click)

Time on task, errors, success

Measure Emotions, retention, feedback
rate
Goals of User Experience

• Ensure that the product is useful and relevant

• Make the product usable, accessible, and satisfying

• Create positive emotions and engagement

• Build trust and loyalty through consistent, enjoyable interactions

Examples of Good UX
• A ride-sharing app (e.g., Uber) showing driver location and ETA.

• A food ordering app offering suggestions based on previous

orders.

• A website that adapts to mobile devices with minimal loading

time.
Examples of Poor UX

• An e-commerce site requiring multiple logins during checkout.

• Buttons placed too close together causing accidental clicks.

• Missing confirmation message after payment.

UX Design Best Practices
• Design with empathy: Understand user needs and emotions.

• Simplify navigation: Minimize cognitive load.

• Consistent design: Fonts, colors, icons should be uniform.

• Minimize steps: Fewer clicks = better experience.

• Provide help & feedback: Tooltips, progress bars, error

messages.
Understanding Users
Why Understand Users?

• In Human-Computer Interaction, users are the central focus of

any system design. Understanding their needs, behaviors,
abilities, limitations, goals, and contexts ensures that systems
are intuitive, accessible, and effective.

• A system that doesn't align with its users' mental models is likely
to fail—even if it's functionally sound.
Cont…
• User research is the process of studying users’ needs,
behaviors, motivations, and environments through various
qualitative and quantitative methods. It informs design decisions
to ensure the product is usable, useful, and user-centered.
Types of Users
User Type Description

Novice No prior experience, needs guidance

Intermediate Some experience, knows common actions

Expert High proficiency, prefers shortcuts

Occasional Infrequent user, likely to forget procedures

Frequent Uses the system regularly and expects efficiency

User Characteristics to Consider
Characteristic Description

Cognitive Ability Memory, attention span, problem-solving skills

Physical Ability Motor skills, vision, hearing

Cultural Background Language, symbols, social norms

Technological Skill Experience with computers and digital interfaces

Age and Education Influences learning styles and expectations

Motivation and Goals What drives the user to use the system?
User Needs vs. Business Goals
Focus Example

User Need “I want to complete a bank transaction easily.”

Business Goal “We want to reduce call center support.”

Methods to Understand Users
Method Purpose

Interviews Deep insights into user behavior and motivation

Surveys/Questionnaires Gather quantitative user data

Observation Watch how users perform tasks in real settings

Focus Groups Discussion among multiple users for feedback
Personas Fictional characters representing typical users

Task Analysis Breakdown of steps users take to complete tasks

Contextual Inquiry Interview + observation in the user’s environment

Tools for User Understanding

• Personas: Represent typical users with goals, frustrations, and

needs

• Empathy Maps: Visualize what users say, think, do, and feel

• User Journey Maps: Outline a user’s experience across multiple

steps
Empathy Maps
User Journey Maps
Risks of Not Understanding Users
• Confusing interfaces

• High error rates

• Abandonment of the system

• Increased support cost

• Negative brand perception

User Controls
Cont…
1. Haptic User Controls (Touch-Based)

• Definition:
Haptic controls involve tactile feedback through touch, pressure, or vibration. They
help users interact through physical sensations.

Control Type Description Example Use Case

Device vibrates when an action Smartphone haptic feedback on
Vibration feedback
is performed typing
Input varies based on pressure Apple’s 3D Touch for menu
Force touch/pressure
applied options

Tactile buttons Physical buttons with resistance ATM keypads, elevator buttons

Swipes, pinches, taps with Zooming in on a map via pinch

Touchscreen gestures
physical confirmation gesture
Cont…
2. Visual User Controls (Sight-Based)

Definition:
Visual controls provide information and affordances through graphical and color-
based elements.
Control Type Description Example Use Case
Symbols representing Play/pause icon on media
Icons & buttons
actions players
Indicate loading or
Progress bars File download progress
completion status
Differentiates status or Red for error, green for
Color coding
priority success
Visually notify users of Warning box when
Pop-ups/modals
required actions deleting files
Cont…
3. Auditory User Controls (Sound-Based)
Definition:
Auditory controls use sound cues or spoken feedback to inform or guide the user.

Control Type Description Example Use Case

Sounds for error, notification, or Ding when message received on

System alerts
confirmation phone

GPS navigation saying “Turn

Voice feedback System speaks to confirm or instruct
left”

Users speak commands to control a

Voice commands “Hey Siri, open camera”
system

Beeping microwave when timer

Auditory progress Sound indicating status or loading
ends
 Cont…
•Haptic: Enhances physical feedback, good for touchscreens,

wearable tech.

•Visual: Core for GUI design, essential for most user interfaces.

•Auditory: Useful in hands-free environments, or for visually

impaired users.
Cont…
Multimodal Interfaces

Modern systems often combine these modalities for enhanced usability:

Combination Example

Visual + Auditory Error pop-up + beep sound

Vibration + flashing screen on incoming
Haptic + Visual
call
Vibration + tone when user receives a
Haptic + Auditory
message on mute
Mental Models
Cont…
• In HCI, a mental model is what a user believes about how a
system works — it’s their internal idea or understanding formed
from experience.
Why Are Mental Models Important?
• Users make decisions based on what they think the system will
do.
• If the system behaves differently from what they expect →
confusion or errors happen.
Cont…
Designer’s Role in Mental Models
Designers create what’s called the Conceptual Model — the way they
intend users to think.
But sometimes:
User’s Mental Model ≠ Designer’s Conceptual Model
So, the system must help match them by using:
•Clear icons
•Helpful messages
•Logical layouts
•Immediate feedback
Cont…
• Ex: Technical Examples of Mental Model Mismatches
Actual System
User’s Mental Behavior Mismatch
# Scenario
Model (Conceptual Impact
Model)
Enter moves to
Form Submission on Pressing Enter User thinks
next field; only
1 Web (e.g., hitting will submit the data is sent but
"Submit"
"Enter") form it's not
button works
Assumes new Browser loads
2 Clicking “Refresh” in Outdated
data will load from local
a browser content shown
from server cache
Accessibility and Inclusiveness in HCI
Cont…
• Human Capabilities and Limitations are fundamental to
designing effective, usable, and satisfying human-computer
interfaces. Understanding these factors helps ensure that the
system supports the user, rather than expecting the user to
adapt to the system.

• These refer to the physical, cognitive, and perceptual strengths

and constraints of users that designers must consider to make
interfaces accessible, intuitive, and efficient.
What is Accessibility?

• Accessibility means designing digital systems, interfaces, and

products in a way that people with disabilities or limitations can
use them effectively and independently.

• It ensures that everyone — regardless of ability — can access,

navigate, and interact with technology.
What is Inclusiveness?
Inclusiveness goes beyond accessibility. It focuses on designing
for diverse user groups considering differences in:
• Age
• Gender
• Language
• Culture
• Education level
• Technological literacy
• Socioeconomic status
Inclusive design creates equal opportunities for all users,
not just the average user.
Cont…

• Accessibility ensures no one is excluded due to disabilities.

• Inclusiveness broadens the scope to consider diverse user

backgrounds.

• Designing with accessibility in mind improves usability for

everyone.
Common Disabilities to Consider
Disability
Example Challenges Design Considerations
Type

Blindness, low vision, color Screen reader support, text

Visual
blindness alternatives, color contrast

Auditory Deafness, hearing loss Captions, transcripts, visual alerts

Limited hand movement, Keyboard navigation, large clickable

Motor
tremors areas, voice control

Dyslexia, memory issues, Simple language, consistent layout,

Cognitive
ADHD reduced distractions
Techniques for Accessible Design
Feature Implementation

Keyboard navigation All actions possible without a mouse

Alt text for images Text descriptions for screen readers

High contrast mode Better readability for low vision users

Resizable text Allow font scaling without layout break

Error messages Clear, descriptive, and actionable

Skip to content Helps screen reader users avoid repetitive elements

Forms with labels Screen reader-friendly form elements

Principles of Inclusive Design
Principle Application

Recognize diversity Support different user contexts and preferences

Offer flexibility Allow users to customize font sizes, colors, layouts

Multiple ways to accomplish a task (voice, keyboard,

Provide choice
touch)

Equity Ensure equal access to content and functions

Inclusive language Avoid biased terms; support multiple languages

Consequences of Ignoring Accessibility

• Legal penalties

• Loss of users and reputation

• Ethical concerns

• Increased development cost due to retrofitting

Benefits of Accessible and Inclusive Design

• Reaches a broader audience

• Boosts brand image and user satisfaction

• Supports aging populations and temporary impairments

Usability Goals in HCI
What are Usability Goals?
• Usability goals define how effective, efficient, and satisfying an
interface or product should be for its intended users. They are key
quality attributes of a system’s design and a central part of user-
centered design (UCD).

• The extent to which a system can be used by specified users to

achieve specified goals with effectiveness, efficiency, and
satisfaction in a specified context of use.
How to Measure Usability Goals
Metric Measured By

Task Success Rate % of tasks completed correctly

Time on Task Time taken to finish each task

User Error Rate Number of mistakes made by users

System Usability Scale (SUS) Standardized questionnaire

User Satisfaction Score Feedback surveys and ratings

Importance of Usability Goals

• Guides the design and evaluation process

• Helps create user-friendly and intuitive systems

• Reduces training time and support costs

• Increases user retention and satisfaction

Usability in the Real World
Product Usability Success Factors
Google Search Simple, fast, relevant results

Online Banking App Secure, clear steps, error prevention

Easy product search, quick checkout,

E-commerce Site
mobile-friendly
Accessibility vs Usability – Explained
 Feature  Accessibility  Usability
 The design of systems so people with  The ease with which all users can use
 Definition
disabilities can use them. the system effectively and efficiently.
 Inclusive design for users with
 Efficiency, effectiveness, and
 Focus impairments (visual, auditory, cognitive,
satisfaction of the general user base.
motor, etc.)
 Goal  Ensure equal access to digital systems.  Ensure optimal experience for all users.
 Assistive technologies, screen readers,  Task completion, user satisfaction,
 Concerned With
keyboard navigation, color contrast, etc. intuitive interface, error reduction, etc.
 Governed by laws like WCAG, ADA,  Guided by best practices in UX and UI
 Standards
Section 508. design.
 - Voice commands for visually impaired
 - Clear navigation
users
 Examples - Feedback after actions
- High contrast modes
- Logical structure of content
- Subtitles in videos
Analogy:

• Accessibility is like building a ramp next to the stairs — so

everyone can enter the building.

• Usability is making sure the door opens easily and the room is
well organized once inside.
Nielsen’s 10 Usability Heuristics
Cont…
• Nielsen’s 10 Usability Heuristics
Widely used in HCI to evaluate user interface design quickly
and effectively — without needing a full user test.

# Heuristic Meaning Example

“Saving…”
Show users what's
1️⃣ Visibility of system status message when
going on
saving a file
Use familiar
Match between system and the Trash bin icon to
2️⃣ language and
real world delete files
concepts
“Undo” button in
Let users undo or
3️⃣ User control and freedom Word or “Back” in
go back
browser
 Cont…
# Heuristic Meaning Example
Same icons across
Follow platform
4️⃣ Consistency and standards apps mean same
conventions
actions

Prevent problems Confirmation dialog

5️⃣ Error prevention
before they occur before deleting a file

Dropdown list
Make options visible
6️⃣ Recognition rather than recall instead of typing all
and easy to choose
options

Allow shortcuts for Keyboard shortcuts

7️⃣ Flexibility and efficiency of use
expert users (Ctrl + S to save)
Cont…
# Heuristic Meaning Example

Show only relevant Simple, clean forms

8️⃣ Aesthetic and minimalist design
information without clutter

Help users recognize, diagnose, and Use helpful error “Password too short.
9️⃣
recover from errors messages Use 8+ characters.”

Provide support if Help center, FAQs, or

Help and documentation
needed tooltips in software
Ex:
• Real-World Examples of Good Interfaces
App/System What Makes It Good? Related Heuristics

Simple interface, fast response, search 1 (Visibility), 6 (Recognition), 8

Google Search
suggestions, minimal clutter (Minimalist Design)

Easy navigation, visible feedback, reviews 2 (Match with real world), 5 (Error
Amazon App
help decision-making prevention), 9 (Error messages)

Consistent icons, grouped logically, good 4 (Consistency), 2 (Real world

Apple iOS Settings
mapping match), 8

Minimal design, intuitive playlist actions,

Spotify 6, 4, 7
cross-platform consistency

Real-time feedback, route visualization, step-

Google Maps 1, 2, 6, 7
by-step instructions
Cont…
• Real-World Examples of Bad Interfaces
Violated Nielsen’s
# Interface Example What Went Wrong Impact on User
Heuristics
#1 Visibility of Users abandon
Cluttered layout, hard-to-
system status#4 process or get
1 IRCTC (Old Website) follow booking steps, too
Consistency#8 confused during
many ads and links
Minimalist design ticket booking
Users make
Poor feedback, confusing #1 Visibility#2 Real-
mistakes, feel
2 Public Bank ATMs (India) button labels, slow world match#3 User
unsure, longer
response control
transaction time
#6 Recognition vs. Frustration,
Overloaded with text,
Old Government Portals recall#10 Help and increased errors,
3 broken links, no mobile
(e.g., tax filing) documentation#5 often require
responsiveness
Error prevention external help
#5 Error Loss of trust,
Hidden charges,
Airline Booking Sites prevention#8 unexpected final
4 overwhelming upsells
(Budget carriers) Minimalist design#2 prices, task
(meals, seats, insurance)
Real-world match abandonment
Emotional Design
Cont…
Emotional design refers to designing products and interfaces
that evoke positive emotions in users, such as joy, trust,
excitement, or satisfaction — beyond just functionality and
usability.

Goals of Emotional Design

Cont…
Three Levels of Emotional Design (Norman)

Level Focus User Reaction Example

Appearance, feel, and Sleek iPhone

“Wow, this looks
1. Visceral immediate emotional design, loading
beautiful!”
response animations

Google Docs auto-

Function, usability, “It works so
2. Behavioral save, Duolingo
and performance smoothly!”
gamification
Instagram photo
Meaning, personal “This represents
memories, Apple’s
3. Reflective connection, me / This changed
packaging
satisfaction my life.”
experience
Cont…
Why It Matters in HCI

Traditional Usability Emotional Design

Focus on efficiency and error

Focus on joy, connection, and user delight
reduction

Functional design Emotionally engaging design

Minimum frustration Maximum affection and loyalty

Cont…
Real-World Examples
Product/Interface Emotional Hook Level Targeted
Elegant packaging, animations,
Apple Devices Visceral & Reflective
tactile buttons

Emotional music, filters,

Instagram Stories Reflective
memories
Core HCI Design Principles
• Design Principles in HCI are guidelines or best practices used
to create user-friendly, efficient, and enjoyable interfaces. They
help designers make informed decisions to improve the usability
and user experience of digital systems.

• They are not rigid rules, but well-established strategies to guide

interface design.

• These principles are influenced by psychology, cognitive

science, and ergonomics, and they help bridge the gap between
users and systems.
1. Visibility
Users should easily see available actions and system state.
Example: Highlight clickable buttons, show progress
indicators.
2. Feedback
• Provide clear, timely feedback for user actions.
• Example: Display confirmation after saving a file.

3. Consistency
• Use similar elements and operations across the system.
• Example: Same icons, colors, and terminology.
4. Constraints

• Limit actions to prevent errors.

• Example: Disable the 'Submit' button if a form is incomplete.

5. Affordance
• Design should suggest how an object is used.
• Example: Raised buttons suggest they can be pressed.
6. Mapping
• Ensure controls match expected outcomes.
• Example: Clockwise knob increases volume.
7. Error Prevention and Recovery
• Minimize errors and offer recovery options.
• Example: Confirmation messages, undo buttons.

8. Flexibility and Efficiency

• Accommodate novice and expert users.
• Example: Tooltips for beginners, shortcuts for advanced users.

9. Simplicity / Minimalist Design

• Avoid unnecessary information and clutter.
• Example: Clean homepage like Google.
10. User Control and Freedom
• Allow users to undo/redo and feel in control.
• Example: Cancel options, back navigation.
Principle Goal Example
Visibility Reduce confusion Highlight clickable items
Feedback Show system response Display loading indicators
Consistency Ease of learning Same menu layout
Constraints Prevent errors Disable invalid buttons
Affordance Suggest usage Use sliders for audio
Mapping Natural relation Turn knob right to increase
Error Prevention Reduce mistakes Confirmation popups
Flexibility For all user types Keyboard shortcuts
Simplicity Avoid overload Minimalist design
User Control User empowerment Undo feature
Example: Mobile App – Wi-Fi Toggle
Element Principle
Wi-Fi icon shaped like signal waves Affordance
Icon turns green when Wi-Fi is on Feedback

Swipe-down gesture always shows Wi-Fi

Consistency
control

Toggle is disabled in airplane mode Constraint

Toggle right = on, left = off Mapping
Don Norman's Design Principles (Applied to Good vs Poor Design)
Principle Description Example
Users should easily discover what Buttons should look clickable; menus
1. Discoverability
actions are possible. should be visible.
The system should provide immediate Pressing "Save" shows a confirmation
2. Feedback
and clear feedback after an action. message.

3. Conceptual Users should understand how the A shopping cart icon implies where to
Model system works through intuitive design. find added items.

Design elements should suggest their

4. Affordances A handle on a door suggests pulling.
usage (what actions are possible).

Signals (visual/audio) should indicate

5. Signifiers Underlined blue text signals a hyperlink.
where and how to interact.
The relationship between controls and
6. Mapping their effects should be logical and Stove knobs aligned with burners.
intuitive.
Limit possible actions to prevent errors Greyed-out buttons until required fields
7. Constraints
and guide users. are filled.
What is HCI in Everyday Life?
Cont…
1. Mobile Devices
• Touchscreens: Tap, swipe, pinch (gesture-based interaction)

• Voice Assistants: Siri, Google Assistant, Alexa respond to natural

language

• Face Recognition: Unlocking phones with facial authentication

• HCI Concepts Used:

Touch interfaces, speech recognition, biometric input, feedback,
accessibility
Cont…
2. Healthcare Technologies

• Wearables: Smartwatches track health data (e.g., Apple Watch, Fitbit)

• Telemedicine Apps: Enable remote consultations

• Medical Kiosks: Touchscreen systems in hospitals for self-check-in

• HCI Concepts Used:

Human factors, data visualization, accessibility, real-time feedback
Cont…
Domain Example HCI Feature

Mobile Face unlock Biometric interface

Smart Home Alexa controls lights Voice interface

Healthcare Apple Watch health monitoring Real-time feedback

Banking QR code scanning payments Touch & camera interface

Education Smart classes and AR learning Mixed reality

Transport Google Maps navigation Location-based interaction

Workplace Zoom meetings Multi-user synchronous interaction

Entertainment Netflix recommendations AI-powered user modeling

 Assignment
Case Study-I
(Deadline August 16th 2025)
S.
Case Study Title Objective Key Focus Areas Student Tasks
No.

Analyze both
Compare Good vs Poor homepages;
Google Search vs Yahoo minimalist vs Design, Design map to design
1
Homepage cluttered Principles principles;
interfaces (Norman’s) suggest
improvements

Identify
Assess usability flaws;
Usability Goals,
Usability Evaluation of effectiveness and suggest
2 Poor Design,
IRCTC Website satisfaction in redesign ideas;
Feedback
ticket booking align with HCI
principles
S.
Case Study Title Objective Key Focus Areas Student Tasks
No.
Evaluate
interaction flow,
Compare emotional and User Experience
visuals, feedback;
3. Swiggy vs Zomato UX Study functional aspects of Goals (fun, helpful,
recommend UX
food ordering apps satisfying)
enhancements

Map booking steps;

Compare interaction Interaction Design, evaluate button
4. Uber vs Ola Interaction Flow types and user journey Feedback, placement and
during cab booking Consistency feedback; suggest
UI fixes