Human-Computer Interaction (HCI)

Week 1: Introduction to HCI - Part 2

Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi
Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi
Recap: Outline: Week 1
● Course structure and objectives.
● Why do we need to study design?
● What is HCI?
● Building HCI project.
● Demonstration of sample HCI projects.
● Tutorial on good design design vs. bad design.
● Weekly assignment.
Digital transformation
● Digital transformation is reshaping how we live, work, and interact.
● Businesses must adapt to stay competitive in an increasingly digital world.
● Individuals/organizations must embrace innovation to thrive in the future.
● Impact on Industries
○ Healthcare: Telemedicine, AI for diagnostics, and digital health
records.
○ Retail: E-commerce, personalized shopping experiences, and smart
supply chains.
○ Finance: Fintech, digital payments, and blockchain.
○ Education: E-learning, digital classrooms, and virtual campuses.
○ Manufacturing: Industry 4.0, automation, and predictive
maintenance.
Digital transformation
● Transforming Everyday Life
○ Smart Homes: IoT-driven automation and control systems.
○ Transportation: Autonomous vehicles, electric mobility, and digital
ticketing.
○ Entertainment: Streaming services, virtual reality, and gaming.
○ Communication: Social media, instant messaging, and video
conferencing.
● Challenges of Digital Transformation
○ Data Security: Protecting personal and organizational data.
○ Digital Divide: Ensuring equitable access to technology.
○ Skill Gaps: Upskilling the workforce to keep pace with technology.
○ Privacy Concerns: Addressing ethical issues related to surveillance
and data collection.
Activity 1: applying for a driving license

Digital
transformation

Pros: convenience,
cost savings, global
reach, etc.

Cons: privacy,
accessibility, social
impacts, etc. Online form
Physical form
Activity 2: ordering food and groceries

Digital
transformation

Pros: convenience,
* Image generated by Adobe Firefly
cost savings, global
reach, etc.

Cons: privacy,
accessibility, social
impacts, etc.
Activity 3: education

Digital
transformation

Pros: convenience,
* Image generated by Adobe Firefly
cost savings, global
reach, etc.

Cons: privacy, Valuation drops from several

billions to a few millions USD
accessibility, social
impacts, etc.
 Activity 4: finance

Digital
transformation

Pros: convenience,
cost savings, global
reach, real-time, etc.

Cons: privacy,
fraud, social
https://www.reddit.com/r/india/comments/
1dv3gx4/found_this_in_my_late_grandfath impacts, etc.
ers_wardrobe_want/
Outline: Week 1
● Course structure and objectives.
● Why do we need to study design?
● What is HCI?
● Building HCI project.
● Demonstration of sample HCI projects.
● Tutorial on good design design vs. bad design.
● Weekly assignment.
Human Computer Interaction
Explores the Intersection of Technology and
Human Behavior.
● HCI is a crucial field in today's
technology-driven world
● With the rapid evolution of digital
technology, HCI plays a vital role in
creating user-friendly and efficient
systems, impacting industries from
education and healthcare to entertainment
and e-commerce.
* Image generated by Adobe Firefly

“Design is not just what it looks like and feels like.

Design is how it works.” – Steve Jobs
What is Human-Computer Interaction
Definition: “The study and design of how people interact with computers and
other technologies, focusing on making these interactions effective, efficient,
and enjoyable.”

Brief History: HCI emerged in the 1980s, influenced by disciplines like

computer science, psychology, and cognitive science. Initially focused on
improving workplace computing, it now covers all digital interactions.

Key Contributors: Prof. Stuart Card, Prof. Thomas Moran, Prof. Allen Newell,
Prof. Donald Norman, Prof. Alan Dix, Prof. Fei-Fei Li, etc.

Importance: Enhances usability, reduces errors, and creates satisfying user

experiences across industries.
Case study: credit card payments
The study and design of how people interact with computers/ other technologies,
focusing on making these interactions effective, efficient, and enjoyable.

Paytm Cred Cred Payment Confirmation Cred Reward

Key Components of HCI
User: Central to HCI, involving understanding user behavior, expectations,
and limitations.

Technology: Includes hardware, software, and the technical infrastructure that

facilitates interaction.

Interaction: How communication occurs between the user and technology,

from clicking a button to using voice commands.

“Know your users, and you are halfway to success.” – Jakob Nielsen
Usability & User Experience in HCI
Usability: Focuses on how effectively a user can achieve their goals using a
product.

● Efficiency: How quickly tasks can be performed.

● Effectiveness: Accuracy of task completion.
● Learnability: How easy it is for new users to begin using the system.
● Memorability: How easily users can return to a system after a break.
● Satisfaction: User’s comfort and positivity towards the system.

User Experience (UX): The overall experience, emotions, and perceptions a user
has when interacting with a product.

“People ignore design that ignores people.” – Frank Chimero, Designer

Usability & User Experience & Customer Experience

Customer
Experience

User
Experience

Usability
What is Interaction Design
"Interaction Design (IxD) is the practice of designing interactive digital
products, environments, systems, and services. It focuses on creating
meaningful relationships between users and technology through engaging
interfaces and seamless experiences."

Key Goal: To make interactions intuitive, efficient, and enjoyable.

Examples:

● Apple iPhone's Swipe to Unlock: A simple interaction that became iconic

for its intuitive user flow.
● Netflix Auto-Play Feature: An interaction that anticipates user needs by
auto-playing the next episode, enhancing user engagement.
● Google Search Suggestions: Predictive suggestions that speed up the
search process, improving the user's experience.
Principles of Interaction Design
Affordance: Users should understand what actions are possible just by looking
at the interface.
Feedback: Clear feedback should be provided after user actions, e.g., a button
changing color when clicked.
Consistency: Design elements should be predictable and uniform throughout
the interface.
Visibility: Important functions should be visible and not hidden in complex
menus.
Error Prevention: Good design minimizes user errors and offers easy recovery
if mistakes are made.

“The details are not the details. They make the design.” – Charles Eames,
Designer
Human Centeredness in HCI
● The strength and tradition of HCI has been in its human-centredness
and usability concerns.
● HCI has evolved methods, guidelines, principles and standards to ensure
that systems are easy to use and easy to learn.
● It is very important to have the understanding of the users
○ Considering what people are good and bad at
○ Considering what might help people with the way they currently do
things
○ Thinking through what might provide quality user experiences
○ Listening to what people want and getting them involved in the
design
User Centered Design
● User Research: Conducting surveys, interviews, and observations to
understand user needs.
● Ideation: Brainstorming and sketching ideas based on user research.
● Prototyping: Developing mock-ups and wireframes to visualize the
solution.
● Testing: Conducting usability testing with real users to gather feedback.
● Iteration: Refining designs based on user feedback and observations.

“Design is really an act of communication, which means having a deep

understanding of the person with whom the designer is communicating.” –
Donald Norman, HCI Pioneer
Types of Interaction Styles in HCI
● Command Line Interface (CLI): Efficient for technical users; relies on
text commands.
● Graphical User Interface (GUI): Uses visual elements like icons and
buttons for interaction.
● Voice User Interface (VUI): Uses speech recognition for interaction, e.g.,
Siri or Alexa.
● Gesture-Based Interaction: Employs physical movements for control,
like swiping on a smartphone.
● AR & VR: Immersive interfaces that blend real and virtual environments
for unique user experiences.

“If you think good design is expensive, you should look at the cost of bad
design.” – Ralf Speth, Former CEO of Jaguar Land Rover
Emerging Trends & Technologies in HCI
● AI and Machine Learning: Interfaces that learn from user behavior for
personalization.
● Augmented Reality (AR) & Virtual Reality (VR): Creating immersive
experiences.
● Wearable Technology: Integrating technology into everyday accessories
like watches or glasses.
● Natural User Interfaces (NUI): Interfaces relying on intuitive actions like
gestures or voice.

“The best interface is no interface.” – Golden Krishna, Design

Strategist
Designing for Accessibility
● Visual Accessibility: High contrast, scalable text, alternative text for
images.
● Motor Accessibility: Simplified navigation, keyboard shortcuts, voice
commands.
● Cognitive Accessibility: Use of simple language, consistent navigation,
clear instructions.
● Auditory Accessibility: Captions for videos, transcripts for audio, sound
alternatives.
● Guidelines: Reference to standards like WCAG (Web Content
Accessibility Guidelines) and ARIA.

“Accessibility is not a feature, it’s a social trend.” – Antonio Santos,

Accessibility Advocate
Evaluating Usability in HCI
● User Testing: Observing real users interacting with the product.
● Heuristic Evaluation: Experts assess the interface against usability
principles.
● Surveys and Questionnaires: Collect quantitative data on user
satisfaction.
● Cognitive Walkthrough: Simulating a user’s experience to identify
usability issues.
● A/B Testing: Comparing two versions of a product to determine which
performs better.

“What gets measured gets managed.” – Peter Drucker, Management

Consultant
Real-World HCI Case Studies
● Successful Case Study: A well-known product that excelled in usability
(e.g., Apple’s iPhone, Google Search).
● Failed Case Study: An example of poor design leading to failure (e.g.,
early versions of Windows Vista or Google Glass).
● Analysis: What was learned, how it impacted users, and changes made
for improvement.

“The ultimate inspiration is the deadline.” – Nolan Bushnell, Entrepreneur

Outline: Week 1
● Course structure and objectives.
● Why do we need to study design?
● What is HCI?
● Building HCI project.
● Demonstration of sample HCI projects.
● Tutorial on good design design vs. bad design.
● Weekly assignment.
Building HCI Project (Project WAYV)
● Students:
○ Aditya Bhandari, Manya Chaturvedi
● Supervisor:
○ Dr. Rajiv Ratn Shah
● The visually impaired students often struggle to learn Braille due to lack
of interactive tools and guidance. Traditional methods are outdated and
fail to engage them.
● Limited and insufficient teaching assets lead to decreased instructor
motivation, while existing tools make tracking progress difficult and
have steep learning curve.
● Despite government funding the PwD sector and regional language
support, their implementation struggles due to a lack of user-centric
tools and adequate support systems.
Building HCI Project (Project WAYV)
Braille alphabet
● developed by Louis Braille in
the 19th century
● Braille Characters: Each
Braille character consists of 6
dots arranged in a 2x3 grid (2
columns and 3 rows).
● Dot Representation: Dots are
numbered 1 to 6, starting
from the top left, proceeding
across each row and column.

https://fontmeme.com/braille/
Building HCI Project (Project WAYV)
Week 1: Summary
● Good design is intuitive, user-friendly, and solves problems effectively,
while bad design is confusing, inefficient, and fails to meet user needs or
expectations.
● The goal of an interactive system is to create a seamless and efficient user
experience that aligns with the user’s needs and objectives.
● Digital transformation is the integration of digital technologies into all areas
of business, fundamentally changing how organizations operate and deliver
value to customers.
● User-centered design is an approach that prioritizes the needs, preferences,
and behaviors of users to create intuitive and effective products or solutions.
● Choosing project ideas from real-world problems around us ensures that
solutions are relevant, impactful, and address tangible needs, creating value
for society.
Outline: Week 1
● Course structure and objectives.
● Why do we need to study design?
● What is HCI?
● Building HCI project.
● Demonstration of sample HCI projects.
● Tutorial on good design design vs. bad design.
● Weekly assignment.
Additional Materials
● Tutorial
○ Topic: Good Design vs Bad Design
○ Presenter: Ritwik Bamba
● Sample HCI Project Demos
○ Presenters: Hardi Mihirbhai Parikh, and Sanjana
● Assignment 1
Further readings
● Good Design vs. Bad Design (HCI):
○ https://www.youtube.com/watch?v=II8TOCsoMK0
● HCI Guidelines for Gender Equity and Inclusivity
○ https://www.morgan-klaus.com/gender-guidelines.html#Surveys
● Invisible women
○ https://99percentinvisible.org/episode/invisible-women/
● HCI by Interaction Design Foundation
○ https://www.interaction-design.org/literature/topics/human-computer
-interaction
Thank you.