HCIWeek 1: Introduction to HCI

Lecture 1: Introduction to HCI – Part 1

1.​ Course Overview & Objectives​

○​ Understand HCI, UX, design thinking

○​ Learn prototyping, usability testing, evaluation​

2.​ What is Human-Computer Interaction (HCI)?​

○​ Study of how humans interact with digital systems

○​ Focus on usability, effectiveness, user satisfaction​

3.​ Why Study Design?​

○​ Bad design examples (passport site, IRCTC, ECI, etc.)

○​ Importance of intuitive, accessible, usable design​

4.​ Indicators of Bad Design​

○​ Poor navigation, inconsistent UI, lack of feedback, accessibility issues​

5.​ Interactive Systems​

○​ Voice assistants, digital maps, payments, running apps​

6.​ Case Studies​

○​ Remote control, crash test dummy, visually impaired crossing road, gym
machines, book reading, travel bookings​

7.​ Sample Research (from MIDAS Lab)​

○​ Keystroke dynamics to detect GenAI-assisted cheating

Lecture 2: Introduction to HCI – Part 2

1.​ Digital Transformation​

○​ Changing how we live: education, healthcare, finance, retail​

○​ Challenges: data security, digital divide, accessibility​

2.​ What is HCI?​

 ○​ Multidisciplinary field
○​ Key contributors (Card, Norman, Dix, etc.)​

3.​ Components of HCI​

○​ User, Technology, Interaction​

4.​ Usability vs. User Experience​

○​ Usability: effectiveness, learnability, satisfaction

○​ UX: feelings, perceptions, delight, engagement​

5.​ Interaction Design​

○​ Affordance, Feedback, Consistency, Visibility, Error Prevention​

6.​ Human-Centered Design Approach​

○​ Empathy → Ideate → Prototype → Test → Iterate​

7.​ Types of Interaction Styles​

○​ CLI, GUI, Voice UI, Gesture, AR/VR​

8.​ Emerging Trends​

○​ AI/ML, AR/VR, Wearables, Natural Interfaces​

9.​ Designing for Accessibility​

○​ Visual, auditory, motor, cognitive needs

○​ Follow WCAG, ARIA, Section 508​

10.​Evaluation Techniques​

○​ User testing, A/B testing, surveys, cognitive walkthrough​

11.​Sample HCI Project: Project WAYV​

○​ For visually impaired students learning Braille

NPTEL_HCI_Tut1.pdf

Topic: Good Design vs Bad Design

Key Headings / Points:

 ●​ Bad Design​

○​ Examples: elevators, sockets, remotes, Clippy, Snapchat, Boeing 737 MAX​

●​ Good Design vs Bad Design​

○​ Door handles with/without push-pull signs

○​ Paper straw vs plastic straw​

●​ Innovative Good Designs​

○​ Lemon with mesh, calculator in shopping cart, Duolingo feedback, Spotify UI​

●​ What Makes a Design Good​

○​ Innovative, understandable, elegantly simple, accessible, inclusive, iterative,

future-ready​

●​ In-Class Assignments​

○​ Identify good/bad designs

○​ Analyze a digital interface (e.g., ATM)​

Week 2: Design Principles and Practice

Lecture 1: Design – Part 1

1.​ What is Design?​

○​ Definition by Henry Dreyfuss

○​ Human-centered and interaction-focused​

2.​ Interaction as Key to Success​

○​ Example: Google Glass failure​

3.​ Reducing Friction in Design​

○​ Avoid discomfort and confusion​

4.​ Positive Outcomes for People​

○​ Design that improves life = successful design​

 5.​ Success Criteria for Designers​

○​ Functional, emotional connection with users​

6.​ Case Study: Remote Control for Smart TV​

○​ Comparison of various input methods (voice, gestures, AR, apps)​

7.​ What to Design​

○​ Identify users, tasks, and context​

8.​ Interaction Design​

○​ Definition, goals, involvement of users​

9.​ User Experience (UX)​

○​ UX includes emotions, feelings, satisfaction​

10.​Usability & UX Goals​

○​ Desirable vs. Undesirable experience traits​

11.​Case Studies​

○​ Tesla, iPhone 16, HDFC Netbanking​

Lecture 2: Design – Part 2

1.​ UX in Interaction Design​

○​ Understanding user behavior and needs​

2.​ Types of Design Under Interaction Design​

○​ UX, UI, Product, Web, Experience Design​

3.​ Multidisciplinary Teams​

○​ Roles: UX designer, UI designer, AR designer, Accessibility expert, etc.​

4.​ Case Study: Human-Centered Running App​

 ○​ Team roles and contributions​

5.​ Activities: Designing for Real-World Apps​

○​ Elderly care, fitness, mental health, diet planning apps​

6.​ Inclusivity and Accessibility​

○​ Inclusive design: for all people

○​ Accessibility: for people with disabilities
○​ Standards: WCAG, ARIA, Section 508​

7.​ Design Principles​

○​ Visibility: make features easy to find

○​ Feedback: provide response to user actions
○​ Constraints: prevent errors
○​ Consistency: use uniform patterns
○​ Affordance: make functions obvious​

8.​ Disabilities and Cultural Sensitivity​

○​ Design for different impairments and cultures​

9.​ Future of Inclusive Design​

○​ AI, AR/VR, Natural UIs, voice interaction

NPTEL_HCI_Tut2.pdf

Topic: Inclusivity, Accessibility, and Design Principles

Key Headings / Points:

●​ Accessibility and Inclusiveness​

○​ Definitions and differences​

●​ Examples of Accessible Design​

○​ Captions, colorblind modes, screen readers, keyboard navigation​

●​ Examples of Inclusive Design​

○​ Uber visual alerts, adaptive clothing, Xbox Adaptive Controller​

 ●​ Design Principles​

○​ Visibility: clear, noticeable elements

○​ Feedback: system responses to user actions
○​ Consistency: uniformity across system
○​ Constraints: limit choices to reduce errors
○​ Affordance: visual cues that indicate usage​

●​ In-Class Exercises​

○​ Match scenarios to principles

○​ Airbnb design evaluation​

Canva Tool.pdf

Topic: Canva as a Design and Prototyping Tool in HCI

Key Headings / Points:

●​ What is Canva?​

○​ Online drag-and-drop design platform

○​ Used for presentations, posters, social media posts​

●​ Why It Matters​

○​ Easy-to-use
○​ Template-driven
○​ Collaborative
○​ Export in multiple formats​

●​ Interface Overview​

○​ Home Page tools

○​ Creating and editing designs​

●​ Tools:​

○​ Design Tool (templates, styles)

○​ Elements Tool (shapes, icons, charts)
○​ Text Tool (headings, body text)
○​ Upload Tool (images, videos, files)
○​ Draw Tool (sketches, markers)
○​ Color Tool (palette, hex codes, gradients)
○​ Other Tools (animation, cropping, flipping)​
 ●​ Share and Export​

○​ Share links, team collaboration, format export​

●​ Activities​

○​ Create posters or presentations as part of practical learning​

Week 3: Interaction Design Process

PDF 1: NPTEL_HCI_Tut3.pdf

Title: Interaction Design Process – HCI Tutorial

🔹 Key Sections:
1.​ What We Have Covered So Far​

○​ Good vs Bad Design

○​ Design Principles (Visibility, Feedback, Consistency, Affordance, etc.)
○​ Accessibility & Inclusivity​

2.​ What is Interaction Design?​

○​ Multidisciplinary field
○​ Goal: Make user-product interaction intuitive​

3.​ Important Principles of Interaction Design​

○​ Perceivability, Learnability, Error Handling, Affordability

○​ Engagement, User Control, Functionality, Cognition​

4.​ Understanding the Problem Space​

○​ Why change is needed?

○​ Define the problem collaboratively​

5.​ User-Centered Approach​

○​ Early focus on users/tasks

○​ Empirical measurement
○​ Iterative design​
 6.​ Four Basic Activities​

○​ Discovering requirements
○​ Designing alternatives
○​ Building interactive designs
○​ Evaluating user experience​

7.​ Design Models​

○​ Double Diamond Model: Discover → Define → Develop → Deliver

○​ 5 Stages Model: Comprehend → Identify → Ideate → Prototype → Evaluate​

8.​ Five Dimensions of Interaction Design​

○​ 1D (Words), 2D (Visuals), 3D (Physical Space), 4D (Time), 5D (Behavior)​

9.​ Practical Design Example:​

○​ Designing apps for travel and personal productivity (feature ideation, screen
flow, design preview)​

10.​In-Class Activity​

○​ Design task: Ordering coffee via an app (User research → Prototyping →

Evaluation)​

( What It Covers:

●​ What is Interaction Design?​

A multidisciplinary design field focused on making digital systems user-friendly, intuitive, and efficient.
●​ Key Principles:
1.​ Visibility, Feedback, Consistency, Constraints, Affordance
2.​ Learnability, Perceivability, Error Handling
●​ User-Centered Design:
1.​ Focuses on understanding users early, measuring usability, and iterative improvements.
●​ Four Core Activities:
1.​ Identify requirements
2.​ Develop alternatives
3.​ Build prototypes
4.​ Evaluate designs
●​ Design Models:
1.​ Double Diamond: Discover → Define → Develop → Deliver
2.​ 5-Stage Model: Comprehend → Identify → Ideate → Prototype → Evaluate
●​ Dimensions of Interaction Design:
1.​ Words (text)
2.​ Visuals (images/icons)
3.​ Physical space (devices)
4.​ Time (animations)
5.​ Behavior (user-system interaction)
●​ Examples Included: Travel & productivity apps, coffee ordering task design.)
PDF 2: Week 3 Part 1 - Interaction.pdf

Focus: Design Thinking and Interaction Design Framework

🔹 Key Topics:
1.​ Introduction to Design Thinking​

○​ Empathy, Creativity, Iteration

○​ 6 Stages: Empathize, Define, Ideate, Prototype, Test, Implement​

2.​ Case Studies​

○​ Airbnb: Used design thinking to boost bookings

○​ Swiffer, Nike+, Apple: Real-world design evolution examples​

3.​ Double Diamond Design Process​

○​ Phase 1: Discover & Define

○​ Phase 2: Develop & Deliver​

4.​ Frameworks in Interaction Design​

○​ 5 Dimensions (1D to 5D) explained

○​ Nielsen’s Usability Heuristics​

5.​ Real-World Application

○​ Spotify & Airbnb applied these frameworks for UX innovation
6.​ Design Thinking vs Design Process
○​ DT: Creative, user-first, problem-solving mindset
○​ DP: Step-by-step execution of the design vision

(What It Covers:
●​ Design Thinking:
○​ A user-focused, creative, and iterative problem-solving approach.
●​ 6 Stages:
○​ Empathize – Understand user needs through research.
○​ Define – Clearly articulate the problem.
○​ Ideate – Brainstorm creative solutions.
○​ Prototype – Build and test models.
○​ Test – Validate solutions with users.
○​ Implement – Launch the final solution.
●​ Case Studies:
○​ Airbnb: Used empathy and feedback to improve bookings.
○​ Swiffer, Apple, Nike: Real-world innovations via design thinking.
●​ Double Diamond Design Process:
○​ Phase 1: Discover & Define
○​ Phase 2: Develop & Deliver
●​ Key Takeaways:
○​ Focus on empathy and testing.
○​ Design is about how it works, not just how it looks )
PDF 3: Week 3 Part 2 - Interaction.pdf

Focus: Design Approaches and Lifecycle Models

🔹 Key Concepts:
1.​ Interaction Design Process​

○​ Focus on usability, alternatives, and evaluation

○​ Trade-offs and user involvement​

2.​ Four Design Approaches​

○​ User-Centered Design (UCD): Focused on user needs and empathy

○​ Activity-Centered Design (ACD): Focused on tasks (e.g., Google Docs)
○​ System Design: Focused on structure, modules, data (e.g., Uber system)
○​ Genius Design: Designer intuition-based (e.g., Steve Jobs/iPhone)​

3.​ Examples for Each Approach​

○​ Apple, Dropbox, Slack, Google Search, Microsoft Teams, Trello, Uber Driver
App​

4.​ Interaction Design Lifecycle​

○​ Understanding problem space

○​ Involving users (various levels)
○​ Four basic activities (Requirements, Alternatives, Prototyping, Evaluation)​

5.​ Integration with Agile/SDLC​

○​ Design sprint compatibility

○​ Research in the Wild approach​

6.​ Final Summary​

○​ Recap of Design Thinking, Design Process, and Interaction Design Process.

( 🔹 What It Covers:
●​ Interaction Design Process:
○​ A systematic process involving research, ideation, prototyping, and evaluation.
●​ Four Design Approaches:
○​ User-Centered Design (UCD) – Focuses on user needs and feedback.
○​ Activity-Centered Design (ACD) – Focuses on user tasks (e.g., Google Docs, Word).
○​ System Design – Focuses on structure, modules, data (e.g., Uber).
○​ Genius Design – Relies on expert intuition (e.g., Steve Jobs/iPhone).
●​ Lifecycle Models:
○​ Google Design Sprint, Research in the Wild
●​ Key Questions:
○​ Who are the users?
 ○​ What are their needs?
○​ How to evaluate and iterate designs?
●​ Final Summary:
○​ Combine creativity (Design Thinking) + structure (Design Process) to create user-friendly, real-world
solutions.)

Figma.pdf

🔹 What is Prototyping?
●​ Prototypes are interactive models of products/systems.
●​ Used to test functionality, get feedback, and validate ideas early.

🔹 Why Use Prototyping in Design?

●​ Validates and refines concepts before full development.
●​ Helps detect usability issues early.
●​ Enables better collaboration and cost-effective design processes.

🔹 Using Figma for Prototyping

Figma is a cloud-based, collaborative design tool ideal for prototyping. Key steps in Figma:

1.​ Flows and Starting Points​

○​ Create multiple flows (user journeys).

○​ Set a starting frame to begin the prototype.​

2.​ Create Connections​

○​ Link elements (like buttons) to other screens to define navigation.​

3.​ Add Interactions & Animations​

○​ Use the "Prototype" tab to define behavior, animations, and transitions.​

4.​ Adjust Settings​

○​ Choose device preview, background color, and starting frame.​

5.​ Share Prototypes​

○​ Shareable via link; team members can view or comment.​

6.​ Commenting​

○​ Enables feedback directly on the design for smoother collaboration.

🔹 AI in Figma Prototyping
 ●​ Figma AI can auto-generate interactions between frames.
●​ Helpful for speeding up the creation of clickable prototypes.

🔹 Prototyping for All Screens

●​ New viewer adapts to various screen sizes for responsive design testing.

🔹 Alternative No-Code Prototyping Tools

1.​ Proto.io
○​ Drag-and-drop UI builder, real-time feedback, cross-device testing.​

2.​ Framer
○​ Advanced animations, responsive layouts, real-time collaboration.
3.​ Webflow
○​ Integrates with Figma, offers visual design tools, CMS, hosting.

Week 4: Understanding User in HCI

🌟 Main Theme: Understanding the User in HCI

This lecture focuses on designing technology from the user’s point of view to create
systems that are easy, effective, and enjoyable to use.

🔹 User Perspective in HCI

●​ It’s about understanding how different types of users interact with technology.
●​ Good design starts with putting yourself in the user's shoes.

🔹 Key Elements of User Perspective

1.​ User Needs – What users want to achieve.
2.​ UX (User Experience) – The overall feel, usability, and appeal.
3.​ Usability – How efficiently users can perform tasks.
4.​ Accessibility – Ensuring people with disabilities can use the product.

🔹 Types of Users
●​ Novice Users – Need step-by-step help.
●​ Expert Users – Want shortcuts and flexibility
●​ Casual Users – Prefer simplicity with some options.
●​ Frequent Users – Focus on speed and routine efficiency.

🔹 Challenges in Understanding Users

●​ Different users have conflicting needs.
●​ It’s tough to balance usability vs aesthetics.
 ●​ Must constantly update based on trends and feedback.

🔹 User-Centered Design (UCD) Principles

●​ Conduct user research.
●​ Create and test prototypes.
●​ Get feedback and improve iteratively.

🔹 Real-World Examples
●​ Spotify – Redesigned based on user listening habits.
●​ Apple iOS, Airbnb, Google – All use user-centric design to improve experience.

🔹 Personas
●​ Fictional profiles based on real user data.
●​ Help designers keep user goals and pain points in mind during development.

🔹 How to Create a Persona

1.​ Research (surveys, interviews)
2.​ Find patterns in data
3.​ Build detailed user profiles
4.​ Use these profiles in design decisions

🔹 Empathy Mapping
A tool to understand what users:

●​ Say (their words)

●​ Think (their unspoken thoughts)
●​ Do (their actions)
●​ Feel (their emotions)

Helps designers emotionally connect with users.

🔹 Case Study – Braille Learning App

●​ Designed for visually impaired students.
●​ Ideas generated: haptic feedback, gamification, dashboards for teachers, offline
access.
●​ Emphasizes inclusive and accessible design.

🔹 Benefits & Challenges of Personas

✅ Benefits: Build empathy, improve focus, keep designs consistent.​
❌ Challenges: Can become outdated, overgeneralized, or misinterpreted.
🔚 Conclusion
●​ Understanding users is central to HCI.
●​ Using tools like personas and empathy maps improves design decisions.
●​ Design should evolve with user needs and feedback

Miro_tool.pdf

This document introduces and explains Miro, an online collaborative whiteboarding tool
widely used in HCI (Human-Computer Interaction), UX design, and team-based projects.
Key topics covered:

✅ Overview of Miro:
●​ Used for brainstorming, planning, mapping workflows, agile collaboration, and visual
storytelling.
●​ Enables creating mind maps, customer journeys, and visual roadmaps.

✅ Core Miro Tools & Features:

●​ AI-assisted creation, sticky notes, templates, shapes, flowcharts, voting tools,
Kanban boards.
●​ Enables commenting, integration with media, smart drawing, and content library
access.

✅ Key Use Cases:

●​ Mind Mapping: Central ideas branching into subtopics.
●​ Mental Models: Helps visualize decision-making processes step-by-step using
flowcharts, sticky notes, voting, etc.
●​ Conceptual Modeling: High-level representations using entities, attributes,
relationships, processes, and boundaries.
●​ Information Architecture (IA): Organizing and categorizing content for better user
navigation (e.g., for blogs or e-commerce).

✅ Extra Tips:
●​ Using emojis, grouping tools, Miroverse templates, and more to improve
collaboration and usability.

NPTEL_HCI_Tut4.pdf

This is a Human-Computer Interaction tutorial focusing on User Perspective, emphasizing

User-Centered Design (UCD) and design empathy.

✅ Topics Covered:
●​ Good vs Bad Design
●​ Design principles: Visibility, Feedback, Affordance, Consistency, Constraints
 ●​ Double Diamond Model of design (Discover, Define, Develop, Deliver)​

✅ Key Concepts:
●​ User-Centered Design (UCD): Involving users throughout the design process for
better usability.
●​ Personas: Fictional yet realistic user representations, with name, demographics,
goals, and frustrations.​

●​ Empathy Mapping: Capturing what a user says, thinks, feels, and does — vital for
designing with empathy.

✅ Important Models:
●​ Mental Model: A user’s expectation based on prior experience.
●​ Conceptual Model: Designer’s abstraction of how a system should work.
●​ Differences and alignment between mental and conceptual models are emphasized.

✅ Hands-On Activities:
●​ Tasks like creating a user persona and empathy map for a hypothetical app user.
●​ Focused on understanding user needs, pain points, and behaviors.

✅ References for Deeper Learning:

●​ Nielsen Norman Group, Interaction Design Foundation, UX Planet, and books by
Don Norman and Alan Cooper.

Week 4 part 2 - User Perspective.pdf

Objective of the PDF

To help learners understand how to use user-centered methods—like personas, data
synthesis, and design thinking—to create better, more accessible digital products. It
combines theory, case studies, hands-on exercises, and tools like Miro.

1️⃣ Data Synthesis

The process of turning raw user research data into meaningful insights to guide design.

🔸 Why it’s important:

●​ Highlights user pain points
●​ Spots patterns (e.g., what multiple users struggle with)
●​ Helps you decide what features matter most​

🔸 Techniques:
 ●​ Affinity Mapping: Grouping similar feedback into themes
●​ Clustering: Dividing users into behavioral or demographic groups (e.g., "bargain
hunters" vs. "loyal buyers")

2️⃣ Case Study: Braille Learning App

To show data synthesis in action, the PDF uses this app example for visually impaired users.

🔸 User Segments:
●​ Beginner Learners (students)
●​ Teachers/Instructors
●​ Disability Institutions/Organizations

🔸 Identified Themes:
1.​ User Engagement – Needs game-like features, tactile learning
2.​ Personalization – Adapts to the user’s pace and tracks progress
3.​ Accessibility – Must support screen readers, voice, tactile feedback
4.​ Scalability – Affordable, works on many devices, supports institutions

This data informs what to design and prioritize in the app.

3️⃣ Design Thinking Process (6 Stages)

Stage What Happens

Empathize Learn about users (use interviews, create personas)

Define Create a POV (Point of View) statement (what’s their need?)

Ideate Ask HMW (How Might We) questions to brainstorm ideas

Prototype Build a MVP (Minimum Viable Product) or mockup

Test Get feedback, improve based on real use

Implement Launch product and monitor its performance

 It's an iterative process: repeat, refine, improve.

4️⃣ Personas

Fictional users based on real data. Example from Airbnb:

●​ Emma: Solo traveler, budget-conscious

●​ Carlos: Digital nomad, needs good Wi-Fi
●​ John & Lisa: Hosts who want to rent safely

Why important?

●​ Helps you "think like the user"

●​ Ensures design is for real needs, not assumptions

5️⃣ POV (Point of View) Statement

Helps define the problem clearly using this format:

[User] needs a way to [User’s Need] because [Insight]

🧩 Example:​
A visually impaired person needs a way to use their phone independently because most UIs
aren't accessible.

6️⃣ HMW (How Might We) Questions

Used in the Ideation stage to spark creative solutions.

Examples:

●​ HMW help blind users use phones easily?

●​ HMW reduce distraction for students learning online?​

7️⃣ Prototype + Testing

Create simple, working models of your idea (MVPs), then test them with real users. Gather
feedback, refine the idea, then test again.

8️⃣ Case Study: Airbnb Design Process

It applies all these methods:

●​ Research → Personas
●​ POVs & HMWs → Prototype → Test → Launch

Their key insight:

Users want authentic, affordable stays and trustworthy connections with hosts.
9️⃣ Hands-on Activities & Tools

●​ Use Miro for affinity mapping, journey mapping, and brainstorming.

●​ Practice exercises: create POVs for common scenarios like urban mobility or
financial stress.

Summary

●​ User Perspective is central to design.​

●​ Using tools like Personas, POVs, Affinity Mapping, and Design Thinking helps
create inclusive, accessible, and effective designs.​

●​ Practical application (like the Braille App or Airbnb) helps understand how to move
from research → idea → prototype → real product.