Human Computer

Interaction
AI-355
Introduction
What is HCI?
Human-Computer Interaction (HCI) is the study of how people interact with
computers and how to design computer systems that are easy and User-friendly.

HCI focuses on designing computer systems that help people do their tasks
efficiently.
● It combines knowledge from computer science, psychology/cognitive
science, design, and social sciences (Group behavior, Communication
patterns).
● The goal is to make computers work better for people.
Why is HCI Important?
Good design helps users:
● Complete tasks quickly and accurately
● Avoid mistakes
● Feel comfortable and satisfied
Bad design can:
● Confuse users
● Cause frustration
● Lead to accidents or loss of data
As technology becomes a part of everyday life, from smartphones to smart
homes, HCI becomes more and more important.
Goals of HCI
❖ Make systems easy to use
❖ Support user tasks

❖ Make systems accessible to all

❖ Reduce user errors

❖ Improve user satisfaction

❖ Encourage learning and adaptation

Objectives of Studying HCI
❖ Understand how humans think, feel, and act when using technology.

❖ Learn how to design better user interfaces like websites, mobile apps, and software.

❖ Discover how to test and evaluate if a system is good or not.

❖ Learn to apply principles of good design such as feedback, consistency, and simplicity.

❖ Become aware of accessibility and legal standards for software usability.

❖ Be prepared to design for the future of technology (like smart devices, VR, and AI).
Who Uses HCI?

❖ Designers- To make apps and websites easy to use

❖ Software engineers- To build systems that work well for users

❖ Human behavior experts- Study how people behave with technology

❖ Teachers and educators- To create helpful learning tools

❖ Business people- To design products that people enjoy and want to buy
Understanding Human Abilities in HCI
❖ HCI should match how people think, see, and move.

❖ Designers need to understand how users make decisions and interact with
systems.

❖ Human abilities can change due to age, learning, or physical and mental
conditions.
State of the art in Computing Technology
❖ Embedded Smart Technology: Computers are built into everyday objects like
phones, cars, and appliances, helping us automatically in the background.

❖ Natural User Interfaces (NUI): Gesture, speech, and touch interfaces enabling
intuitive interactions. Wearable and Mobile Devices: Increasing reliance on
smartwatches, AR glasses, and smartphones for context-aware computing.

❖ Multimodal Interfaces: Simultaneous use of voice, touch, vision for improved

accessibility and user experience.

❖ Cloud and Edge Computing: Real-time interaction support with distributed

processing power.

❖ AI in HCI: Adaptive systems that personalize user experience using behavior

modeling and intelligent agents.
 Opportunities in Advanced HCI Systems
❖ Brain-Computer Interfaces (BCIs): Direct interaction between the brain and
machines opens new doors in assistive technologies and immersive control.

❖ Physical Interaction with Technology: Using hands, gestures, or real-world objects

to control digital devices in a more natural way.

❖ Privacy and Ethical Concerns: As HCI becomes more personal, data security and
ethical design become critical.

❖ Inclusive Design: Designing for all users, including those with disabilities, across
age, language, and cultural backgrounds.

❖ Sustainability in Design: Creating energy-efficient systems and interfaces that

minimize environmental impact.
Interaction Styles in HCI
Interaction styles define how users communicate with the system and how the system
responds.

Major Interaction Styles:

❖ Command Line Interface (CLI):
Efficient for experts, requires memorization.

❖ Menu Selection:
Simple choices via graphical or text menus.

❖ Form Fill-in:
Structured data entry using fields.
Interaction Styles in HCI

❖ Voice-Based Interaction
Hands-free communication using spoken commands; e.g., virtual assistants like
Alexa or Siri.

❖ Natural Language interfaces

Uses speech or text in human language.

❖ Gesture and Touch-Based

Common in mobile and touch devices.
Interaction Paradigms in HCI
Paradigms are conceptual models or metaphors that guide interaction design.
Notable Paradigms:
❖ WIMP (Windows, Icons, Menus, Pointing Devices):
Dominant in desktop systems.
❖ Ubiquitous Computing (Ubicomp):
Computing embedded seamlessly in environment.
❖ Tangible Interfaces:
Physical objects as controls (e.g., tabletop interfaces).
Interaction Paradigms in HCI

❖ Mixed Reality / Augmented Reality:

Blending real and virtual worlds.

❖ Conversational Interfaces:
Interaction through dialogue (e.g., chatbots, voice assistants).

❖ Multimodal Interaction:
Combining touch, voice, gesture, etc.
Emerging Trends in Interaction Paradigms
❖ AI-Driven Interaction
Systems that adapt and respond intelligently using AI; e.g., personalized
recommendations, adaptive UI, smart assistants.
❖ Brain-Computer Interfaces (BCI)
Direct communication between the brain and computers, enabling control without
physical movement; promising for assistive tech.
❖ Emotion-Aware Systems
Interfaces that detect and respond to users’ emotional states using sensors, facial
expressions, or tone of voice; enhances user engagement and experience.
Unit 2: Interactive system design
Concept of Usability

What is Usability?

Usability refers to the ease with which users can learn, understand, and effectively interact with a system or interface
to achieve their goals.

● Central to Human-Computer Interaction (HCI)

● Ensures systems are:

○ User-friendly

○ Efficient

○ Satisfying
Concept of Usability

According to the ISO 9241-11 standard:

"Usability is the extent to which a product can be

used by specified users to achieve specified goals
with effectiveness, efficiency, and satisfaction in a
specified context of use.”
Key Attributes of Usability

1. Effectiveness

○ How accurately and completely users can achieve their goals.

○ Example: Can a user successfully book a train ticket using the app?

2. Efficiency

○ The resources (e.g., time, clicks, mental effort) used to achieve those goals.

○ Example: How quickly and with how many steps is the booking done?

3. Satisfaction

○ User's comfort and positive attitude towards the system.

○ Example: Was the experience smooth and enjoyable?

Key Attributes of Usability

4. Learnability

○ How easy it is for new users to learn the system.

○ Example: Can a first-time user navigate the system without confusion?

5. Memorability

○ How easily returning user

○ re-use the system without re-learning everything.

6. Error Tolerance

○ How well the system prevents errors and helps users recover from them.

Example: Does the system allow undo actions or give helpful error messages?
Importance of Usability in Interactive System Design

❖ Ensures user satisfaction, loyalty, and trust in digital products.

❖ Reduces the cost of training, support, and maintenance.

❖ Minimizes user errors and improves task performance.

❖ Plays a crucial role in critical systems like healthcare, aviation, banking, etc.
Methods to Improve Usability

❖ User-Centered Design (UCD): Involving users throughout the design process.

❖ Prototyping and Testing: Creating mock-ups and testing with real users.

❖ Heuristic Evaluation: Experts evaluate system based on usability principles.

❖ Surveys and Feedback Forms: Collecting user opinions on usability.

User-Centered Design (UCD)

User-Centered Design (UCD): An approach where users are involved throughout the design and
development process to ensure the final product meets their needs.

Key Benefits:

❖ User Involvement: Users are part of every stage (planning to testing)

❖ Real Needs Addressed: Designs reflect actual user tasks and expectations
❖ Reduces Guesswork: Decisions are guided by user input, not assumptions
❖ Iterative Design: Feedback-driven improvements ensure usability
UCD Process Stages

1. Understand Users & Context

○ Field studies, interviews, userprofiles

2. Specify User Requirements

○ Functional and usability needs

3. Design Solutions

○ Wireframes, prototypes, mock-ups

4. Evaluate Designs

○ Usability testing, A/B testing

How UCD Enhances Usability

1. Improves Learnability
Aligns design with users' mental models, making interfaces intuitive
2. Increases Efficiency
Streamlines tasks, reduces effort and time
3. Promotes Accessibility
Inclusive design by considering diverse users and needs
4. Early Problem Detection
Usability issues found early via testing and prototyping
5. Higher User Satisfaction
Users feel heard and valued, boosting adoption
6. Better Business Alignment
Fewer errors, reduced support costs, increased productivity
Benefits of UCD

❖ Higher user satisfaction

❖ Better usability and accessibility

❖ Reduced development and maintenance costs

❖ Fewer design errors and reworks

❖ Increased product adoption and success

Challenges in UCD

❖ Involving users at every stage can be time-consuming and expensive.

❖ Users may not always articulate their needs clearly.

❖ Managing conflicting user feedback requires careful prioritization.

Prototyping and Testing to Improve Usability
Introduction to Prototyping in HCI:

Prototyping is the process of creating early models of a system to explore

ideas, gather feedback, and identify usability issues before full-scale
development.
Why Prototype?
❖ Identify design flaws early
❖ Gather user feedback
❖ Explore multiple interface ideas quickly
❖ Reduce cost of changes later in development
Types of Prototypes
Low-fidelity (paper sketches, wireframes)

High-fidelity (interactive digital mock-ups)

Role of Prototyping in Usability Improvement

1. Early Detection of Usability IssuesTesting prototypes helps uncover

pain points in navigation, layout, or user flow.
2. User-Centered Feedback LoopUsers can interact with the prototype
and give real-time suggestions.
3. Iterative RefinementDesigns are updated based on testing, leading
to progressively better usability.
4. Risk ReductionSaves time and cost by preventing major usability
failures in the final system.
Testing Methods in Prototyping

1. Usability Testing Observe users as they perform tasks; note errors,

hesitations, and confusion.
2. A/B Testing Compare two versions of a prototype to see which one
performs better with users.
3. Think-Aloud Protocol Ask users to speak their thoughts while interacting
with the prototype to uncover design issues.
4. Remote Testing Tools Use platforms like Maze, UserTesting, or Figma with
analytics to gather insights.
A/B Testing:

A/B Testing is a comparative evaluation method where two versions of a

prototype (Version A and Version B ) are presented to different users or user
groups to evaluate which performs better.

Purpose in HCI:

❖ To measure the impact of design changes on usability

❖ To support data-driven decision making in interface design
A/B Testing: How it Works:
Create two different versions of a design (A and B) with a single variation
(e.g., button position, layout, color).
Divide users into two groups — one interacts with version A and the other
with version B.
Collect metrics like task success rate, time on task, error count, and
satisfaction ratings.
Analyze which version performs better based on the collected data.
Applications in Usability:
Comparing navigation structures
Testing call-to-action placements
Evaluating visual elements like fonts, icons, or layout
Heuristic Evaluation – Concept and Process
Heuristic Evaluation is a usability inspection method where experts review the
interface against a set of established usability principles (heuristics).

Purpose:

To identify usability issues early without needing user testing

To ensure adherence to best practices in interaction design

 Heuristic Evaluation- How it Works:

❖ A small group of usability experts independently inspect the

interface
❖ They evaluate it using Jakob’s 10 heuristics or similar guidelines
❖ Each expert identifies potential usability problems
❖ Findings are compiled and used to refine the design
Benefits of Heuristic Evaluation

❖ Quick and low-cost

❖ Can be performed early in design phase
❖ Does not require user recruitment
❖ Based on expert knowledge and experience
Limitations of Heuristic Evaluation

❖ May miss issues real users would face

❖ Depends on evaluator expertise
❖ Not a replacement for user testing

Best Used When:

❖
Early design validation is needed
❖ Resources or access to users are limited
❖ Complementing other usability testing methods
Surveys and Feedback Forms

Surveys and feedback forms are tools used to collect direct

input from users about their experience with a system’s
usability.
Purpose:
❖ To gather opinions and satisfaction levels
❖ To understand users’ expectations and difficulties
❖ To identify usability pain points based on real usage
Designing Effective Usability Surveys

Key Components:

❖ Clear and concise questions

❖ Mix of closed (Likert scale) and open-ended questions
❖ Focus on ease of use, task difficulty, visual appeal, and
satisfaction
Common Tools:

❖ Google Forms, Microsoft Forms

❖ Typeform, SurveyMonkey
❖ Zoho Survey or JotForm
Best Practices:

❖ Keep it short and relevant

❖ Avoid leading or biased questions
❖ Test the survey before deploying
Interpreting Feedback for Usability Improvement

❖ Analysis Techniques:

❖ Quantitative analysis: ratings and scales

❖ Qualitative analysis: user comments and themes

❖ Sentiment analysis and prioritization of issues

Applications:
❖ Improving navigation structure
❖ Enhancing content clarity
❖ Modifying layout or visuals based on user pain points
Benefits:

❖ Inexpensive and scalable

❖ Can reach a broad user base
❖ Captures real user insights
HCI and Software Engineering
Software Engineering (SE):

❖ Focuses on the technical side: performance, reliability, scalability

❖ Builds systems that are correct and maintainable

Human-Computer Interaction (HCI):

❖ Focuses on human needs: usability, accessibility, satisfaction

❖ Designs interfaces that are intuitive and engaging
❖ Key Point: SE makes systems functional; HCI makes them usable.
Why Integration is Essential

❖ A system can be technically perfect but still fail if it’s hard to use
❖ Users judge a system by how it feels, not just how it works
❖ HCI + SE Integration Helps:
❖ Balance system performance with user satisfaction
❖ Bridge the gap between functionality and usability
❖ Deliver successful, user-centered software
Stages Where HCI Supports SE

❖ Requirements Gathering: Understand user needs and context.

❖ Design: Create prototypes, interaction flows, and UI concepts.

❖ Implementation: Collaborate on user interface development.

❖ Testing: Conduct usability tests alongside functional tests.

❖ Maintenance: Use feedback and logs to improve usability.

Adding HCI at every stage of software development makes the system easier and
more comfortable for users to use.
Challenges

❖ Different priorities (user vs. technical focus)

❖ Lack of communication between designers and developers

❖ Time and budget constraints

MCQ:
Which of the following is the primary goal of interactive system design?

a) Maximize system performance

b) Minimize cost of software

c) Enhance user experience and usability

d) Improve memory usage

Efficiency in usability refers to:

a) Cost of building the system

b) System's startup time

c) Time and resources needed to complete tasks

d) Number of users using the system

Which of these is NOT a benefit of good usability?

a) Reduced training cost

b) Higher user satisfaction

c) Increased system size

d) Improved task performance

User-Centered Design (UCD) involves users:

a) Only after product release

b) During testing only

c) Throughout the design and development process

d) In software maintenance only

A key advantage of UCD is:

a) Increases development time

b) Decreases user satisfaction

c) Aligns product with real user needs

d) Avoids user feedback

Which of the following helps identify user preferences in visual layout?

a) Error logs

b) A/B testing

c) Server logs

d) Algorithm tuning
What is the goal of prototyping in HCI?
a) Finalize all code
b) Increase hardware usage
c) Explore ideas and test usability early
d) Remove users from development

Which type of prototype typically uses sketches or simple wireframes?

a) Mid-fidelity
b) Interactive mock-up
c) High-fidelity
d) Low-fidelity
A/B testing is mainly used to:
a) Compare two user groups
b) Compare two versions of a design
c) Check hardware specifications
d) Train new users

Which of the following is collected during A/B testing?

a) Source code
b) Development time
c) Task success rate and user satisfaction
d) System cost
What is the primary purpose of Heuristic Evaluation?
a) To create user profiles
b) To write system code
c) To evaluate a system against usability principles
d) To measure performance metrics

Heuristic Evaluation is best used when:

a) No designers are available
b) A system is fully developed
c) Early validation is needed with limited user access
d) Financial performance is being reviewed
One limitation of heuristic evaluation is:
a) It delays testing
b) It eliminates user testing
c) It depends on the evaluator’s expertise
d) It always gives incorrect feedback

Which of the following is NOT a key component of effective usability surveys?

a) Clear and concise questions
b) Using only open-ended questions
c) A mix of closed and open-ended questions
d) Focus on satisfaction and usability
Which tool is used for survey creation and distribution?
a) Adobe Illustrator
b) Typeform
c) Visual Studio
d) SQL Server

What is the main role of HCI in software engineering?

a) Manage servers
b) Improve performance only
c) Make systems user-friendly and accessible
d) Replace developers
Which of the following is a common challenge in integrating HCI with software engineering?

a) Lack of design tools

b) Easy access to users

c) Time and budget constraints

d) Excessive user feedback

GUI Design and Aesthetics

❖ Graphical User Interface (GUI) = the visual layer between the user and the system.

❖ Aesthetics influence user perception, comfort, and engagement.

❖ Balances functionality and visual appeal.

❖ Good GUI design enhances usability, brand image, and trust.

Core Principles of GUI Design

❖ Clarity: Clear navigation, readable fonts, consistent symbols.

❖ Consistency: Colors, typography, and layout patterns.

❖ Feedback: Visual cues for actions (e.g., button hover effects).

❖ Simplicity: Avoid clutter; focus on primary user goals.

Aesthetic Elements in GUIs

❖ Color Theory: Contrasts, complementary colors, accessibility.

❖ Typography: Readable fonts, size hierarchy.

❖ Layout & Spacing: Grid systems, white space usage.

❖ Imagery & Icons: Brand-aligned visuals.

Balancing Aesthetics with Usability

❖ Aesthetic appeal should never compromise functionality.

❖ Avoid form over function traps.

❖ Test designs with real users for accessibility & efficiency.

❖ Maintain responsiveness across devices.

Common Mistakes in GUI Aesthetics

❖ Poor Color Contrast: Text blends into the background, reducing readability.

❖ Too Many Fonts & Styles: Creates a chaotic, unprofessional look.

❖ Messy Interface: Overloading the interface with elements distracts users.

❖ Inconsistent Design: Different colors, icons, or layouts on different screens confuse users.

❖ Overuse of Effects: Excessive animations, shadows, or gradients slow down the interface and
distract from tasks.

❖ Visual Suggestion: Side-by-side comparison of a clean, well-designed UI vs. a cluttered, poorly

designed one.
Current Trends and Design Guidelines

❖ Minimalist, flat, and neumorphic designs.

❖ Dark mode and adaptive themes.

❖ Micro-interactions to guide the user subtly.

❖ Accessibility compliance (WCAG standards).

❖ Visual Suggestion: Screenshot collage of trending GUI styles.

Prototyping Techniques
Prototyping is about turning ideas into something real you can try out before building
the final product. It’s like making a “practice version” so you can test it, spot problems,
and make improvements without wasting a lot of time or money.
Key Ideas:
❖ Turns rough ideas into something you can actually see and use.

❖ Helps find mistakes early and discover better ways to do things.

❖ Think of it like a test run that saves you from expensive fixes later.
Types of Prototypes

Two main categories: Low-Fidelity and High-Fidelity.

❖ Low-Fidelity: Quick, rough, and easy to change — focuses on ideas.

❖ High-Fidelity: Polished, realistic, and interactive — focuses on details.

Horizontal Prototyping
Horizontal prototyping provides a broad overview of the system’s interface by covering many
features, but with limited functionality and depth.

Focus:
❖ Emphasizes the user interface (UI) flow and navigation between features.

❖ Shows how users interact with different parts of the system.

Purpose:

❖ To validate the overall layout and structure.

❖ To get early feedback on UI design and navigation.

Advantages:

❖ Quick to build and easy to change.

❖ Helps identify missing features or navigation issues early.

Use Case:

Ideal for early-stage design when you want to explore many features
superficially.
Vertical prototyping
Vertical prototyping focuses on building one or a few features in depth with full functionality, but covers
fewer features overall.

Focus:

● Detailed implementation of specific features or modules.

● Emphasizes functionality, backend integration, and performance of selected parts.

Purpose:

● To test and validate the functionality of critical features.

● To uncover technical challenges and user interaction issues in depth.

Advantages:

❖ Provides realistic experience for specific features.

❖ Helps identify technical risks and detailed design problems.

Use Case:

❖ Ideal for later-stage development or when critical features need thorough testing.
Incremental Prototype
An incremental prototype is developed by building separate parts or modules of a system
independently. These modules are prototyped, tested, and refined before being combined
into the final product.
Focus:

❖ Developing system components in manageable increments.

❖ Testing each module thoroughly before integration.

Purpose:

❖ To handle complex or large systems by breaking development into smaller, testable parts.

❖ To allow early detection and fixing of issues within individual modules.

Advantages:

❖ Easier to manage and control development.

❖ Facilitates parallel development by multiple teams.

❖ Reduces risk by isolating problems to specific modules.

Use Case:

❖ Ideal for large-scale projects where the system is too complex to prototype all at once.
 Extreme prototyping
Extreme prototyping is mainly used in web development. It emphasizes quickly building very detailed
front-end interfaces to validate UI design before back-end development.

Focus:

❖ Rapid creation of fully functional front-end components.

❖ Back-end services and logic are developed later.

Purpose:

❖ To gather early user feedback on interface usability and design.

❖ To speed up the UI development process.

Advantages:

❖ Allows early validation of the user interface.

❖ Helps identify UI/UX issues before investing in back-end coding.

❖ Accelerates overall development cycle.

Use Case:

❖ Best suited for web applications where UI is critical and back-end can be delayed.
1. What is the primary purpose of a Graphical User Interface (GUI)?

a) To optimize server performance

.
b) To act as a visual layer between users and the system

c) To replace software engineers

d) To reduce system costs

2. Which principle ensures buttons and icons behave similarly across screens?

a) Clarity

b) Consistency

c) Simplicity

d) Feedback

3. Poor color contrast in GUIs primarily affects:

a) System speed

b) Readability and accessibility

c) Backend functionality
4. What is a common mistake in GUI aesthetics?
a) Using consistent typography
b) Overloading the interface with elements
c) Prioritizing functionality over visuals
d) Following WCAG standards

5. Current GUI trends include:

a) Cluttered layouts
b) Dark mode and minimalist designs
c) Inconsistent icons
d) Avoiding user feedback
6. The main goal of prototyping is to:
a) Finalize all code before testing
.
b) Explore ideas and test usability early
c) Eliminate user involvement
d) Increase hardware costs

7. Which prototype type uses sketches or paper wireframes?

a) High-fidelity
b) Low-fidelity
c) Vertical
d) Incremental

8. Horizontal prototyping focuses on:

a) Detailed backend functionality
b) Broad UI flow and navigation
c) A single feature’s performance
d) Server optimization
9. Vertical prototyping is ideal for:
a) Testing critical features in depth
. b) Superficial UI feedback
c) Early-stage brainstorming
d) Reducing user testing

10. Incremental prototyping is best for:

a) Small apps with few features
b) Large, complex systems with modular components
c) Avoiding all user feedback
d) Replacing heuristic evaluation

11. Extreme prototyping is commonly used in:

a) Database management
b) Web development (front-end validation)
c) Hardware design
d) Network security
12. A key advantage of low-fidelity prototypes is:

a) High interactivity
.
b) Quick creation and easy changes

c) Realistic user experience

d) Full backend integration

13. Which prototyping method helps identify technical risks early?

a) Horizontal

b) Vertical

c) Extreme

d) Incremental
14. .Extreme prototyping delays development of:
a) Front-end interfaces
b) Back-end services
c) User testing
d) Survey tools

15. Incremental prototyping reduces risk by:

a) Isolating issues to specific modules
b) Avoiding all user feedback
c) Using only high-fidelity designs
d) Focusing solely on aesthetics
21. T/F: High-fidelity prototypes are interactive and close to the final product.

a) True

b) False

22. T/F: Vertical prototyping covers many features superficially.

a) True

b) False
23. T/F: Extreme prototyping prioritizes back-end development first.

a) True

b) False

24. T/F: Consistency in GUI design reduces user confusion.

a) True

b) False

25. T/F: Incremental prototyping is unsuitable for large systems.

a) True

b) False