Human-Computer Interaction (HCI)

Interaction

Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi

Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi
Outline
● What is design
● What to design
● Interaction design
● What are inclusivity, accessibility, and design principles
● Tutorial on inclusivity, accessibility and design principles
● Panel discussion on design principles
● Hands on experience with Canva
● Weekly assignment
Outline
● Design thinking
● Design process
● Interaction design process
● Tutorial on interaction design process
● Hands on experience with Figma
● Weekly assignment
Human-Computer Interaction (HCI)
Interaction - Part 1
Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi
Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi
Outline
● Design thinking
● Design process
● Interaction design process
● Tutorial on interaction design process
● Hands on experience with Figma.
● Weekly assignment.
Introduction to Design Thinking
What is Design Thinking?
● A user-centered, iterative process for problem-solving.
● Focuses on empathy, creativity, and experimentation.

Why Design Thinking?

● Encourages innovation and creative solutions.

● Prioritizes understanding and solving the right problem.

“Design thinking is a human-centered approach to innovation that draws

from the designer’s toolkit to integrate the needs of people, the possibilities
of technology, and the requirements for business success.” – Tim Brown,
CEO of IDEO.
Introduction to Design Thinking
https://www.nngroup.com/articles/design-thinking/

Design Thinking Framework: Six Key Stages

● Empathize: Understand the users and their needs.

● Define: Clearly articulate the problem.
● Ideate: Brainstorm potential solutions.
● Prototype: Build tangible solutions.
● Test: Evaluate solutions with users.
● Implement: Put the vision into effect.

Iterative Nature: Stages often overlap and repeat.

“Good design is a lot like clear thinking made visual.”

– Edward Tufte, Statistician and Professor.
Case study: Airbnb

2010

2024
Case study: Airbnb
Example: The development of the Airbnb
platform—used Design Thinking to empathize with
users and redesign the website, leading to a huge
increase in customer engagement and bookings.

*When Y Combinator (YC) invested in Airbnb in

early 2009, the company's valuation (or market cap)
was relatively modest. Airbnb was valued at
approximately $2.4 million at the time of Y
Combinator's investment, where YC provided
$20,000 in seed funding for a 6% stake in the
company, i.e., more than $5 billion, i.e., 250000
times return in 15 years.
Stage 1 - Empathize
Purpose: Gain a deep understanding of the user's needs.
Methods:

● User Interviews, Observation, Empathy Maps, Surveys.

● Spend time with real users, shadow them, and observe their behaviors
in their natural environment.

Goal: Discover user motivations, behaviors, pain points, and desires.

Example: Procter & Gamble used empathy to

redesign their line of Swiffer products by
observing people cleaning their homes,
leading to innovative cleaning solutions.
Stage 2 - Define
Purpose: Synthesize findings from the Empathize stage.

Steps:

● Identify key insights and patterns from user research.

● Create a Problem Statement: A clear and concise definition of the problem.
● Use the "How Might We..." format to encourage creative solutions.

“Fall in love with the problem, not the solution.” – Uri Levine, co-founder of Waze.

Example: When Nike was designing the Nike+ app, they defined the problem
around the motivation to exercise, focusing on social and personal encouragement.
Stage 3 - Ideate
Purpose: Generate a wide range of ideas and potential solutions.
Methods:

● Brainstorming, Mind Mapping, SCAMPER, Sketching and

Storyboarding.
● Encourage a "no idea is a bad idea" mentality to foster creativity.

Use techniques like Crazy 8s, where participants sketch 8 different ideas in 8
minutes to encourage quick thinking.
Example: IDEO's Shopping Cart Project: A team
brainstormed hundreds of ideas, leading to
innovative concepts like a safer, more convenient,
and more user-friendly shopping cart.
IDEO's Shopping Cart
Stage 4 - Prototype
Purpose: Create tangible, testable versions of ideas.
Types of Prototypes:

● Low-Fidelity: Simple sketches, wireframes, mock-ups.

● Mid-Fidelity: Structured, grayscale, interactive.
● High-Fidelity: Detailed, interactive prototypes.

Prototyping Tools: Figma, Adobe Express and XD, Sketch, Cardboard, Paper.

Goal: Quickly build prototypes to explore solutions and get feedback.

Example: Apple creates multiple prototypes of their devices, such as the

iPhone, to test everything from screen sizes to button placement.
Stage 5 - Test
Purpose: Validate and refine prototypes with real users.

Methods:

● Usability Testing, A/B Testing, User Feedback Sessions.

● Collect quantitative and qualitative data.
Flickr

Use tools like heatmaps and user recordings to see where users struggle.

“The prototype is the conversation.” – Tom Wujec, Author & Design Expert.

Example: Google’s Design Sprint process includes rapid testing and iteration of new
product ideas in just 5 days, allowing them to test and refine concepts quickly.
Stage 6 - Implement
Purpose: Ensure that your solution is materialized and touches the lives of
your end users.

● The final, critical step in Design Thinking that often gets overlooked.
● As Don Norman emphasizes, “We need more design doing.” Design
thinking is not just about ideation—it requires action.
● Implementation is where creativity is tested and ideas become reality.
● True innovation is only achieved when the solution is successfully
executed, transforming the end user’s experience.

"There’s no such thing as a creative type. Creativity is a verb, a very

time-consuming verb... it’s about taking an idea in your head, and
transforming that idea into something real." — Milton Glaser
Iterative Process in Design Thinking
Iteration in Design Thinking

● It’s not a linear process—stages

can be revisited as needed.
● Testing may reveal a need to
redefine the problem.
● Continuous improvement
through user feedback.

Keep refining the design until the https://www.nngroup.com/articles/design-thinking/

user’s needs are fully met.

Example: Netflix regularly iterates its recommendation algorithms and

interface based on user feedback and testing to improve user engagement.
Key Principles of Design Thinking
● Human-Centered: Focus on user needs and experiences.
● Collaboration: Encourage diverse perspectives.
● Ideation: Foster creative thinking and open-mindedness.
● Prototyping: Make ideas tangible early.
● Iteration: Continuous refinement based on feedback.

“Good design is a lot like clear thinking made visual.” – Edward Tufte,
Statistician and Professor.
Benefits of Design Thinking
● Encourages Innovation: Promotes creative solutions.
● Reduces Risks: Test ideas before full-scale development.
● User-Centered: Results are more relevant to the audience.
● Fosters Collaboration: Diverse perspectives lead to holistic solutions.

“If you think good design is expensive, you should look at the cost of bad
design.” – Ralf Speth, CEO of Jaguar Land Rover.
Case Study: Design Thinking at Work
Case Study: The Stanford d.school’s approach to reimagining a patient experience

● Problem: Improving the experience for pediatric patients in hospitals.

● Empathize: Interviews with patients, parents, and hospital staff.
● Define: The problem was framed as reducing anxiety for children during
hospital visits.
● Ideate: Brainstormed ideas, from interactive walls to story-based navigation.
● Prototype: Created prototypes for kid-friendly waiting rooms.
● Test: Gathered feedback from patients, parents, and healthcare professionals.
● Outcome: A more engaging and less stressful environment for young patients.
Case Study: Design Thinking at Work
Case Study: Our approach to reimagining a visually impaired person experience

● Problem: Improving braille learning experience for visually impaired person.

● Empathize: Explore challenges with traditional Braille learning for visually
impaired students and instructors.
● Define: Identify need for a more engaging and accessible Braille learning tool.
● Ideate: Create interactive solutions with tactile feedback, progress tracking, and
language support.
● Prototype: Build a mid-fidelity tool to assess functionality and usability.
● Test: Collect feedback from users to refine the prototype.
● Outcome: A user-friendly Braille learning tool that boosts engagement and
simplifies teaching.
Activity: Design Thinking at Work
Case Study: Our approach to Reimagining a passenger’s experience for cab booking

● Problem:
● Empathize:
● Define:
● Ideate:
● Prototype:
● Test:
● Outcome:
Challenges in Design Thinking
● Getting stakeholder buy-in and aligning on goals.
● Balancing creativity with practical constraints.
● Managing iterative cycles with tight deadlines.
● Ensuring diverse representation for inclusive solutions.

Example: Heineken used Design Thinking to revamp their bottle design,

involving not only designers but also stakeholders from marketing,
production, and even consumers—a challenging but rewarding collaboration.
Conclusion: Design Thinking
Summary of Key Points

● Design Thinking is a flexible, user-centered approach.

● Empathy, creativity, and iteration are central to the process.
● Effective for addressing complex and ambiguous problems.

Takeaways

● Start with the user in mind.

● Embrace failure as a learning opportunity.
● Iterate until the solution fully meets user needs.

“The only way to win is to learn faster than anyone else.” – Eric Ries,
Author of The Lean Startup.
Outline
● Design thinking
● Design process
● Interaction design process
● Tutorial on interaction design process
● Hands on experience with Figma.
● Weekly assignment.
What is the Design Process?
Definition: The Design Process is a series of structured steps followed by
designers to identify problems, generate ideas, create solutions, and evaluate
results.
Importance:

● Guides designers from understanding a problem to implementing a

solution.
● Encourages creativity, structure, and iteration.

Key Stages:

● Research → Ideation → Prototyping → Testing → Implementation

Double Diamond Design Process
Developed by the UK Design Council,
it’s a visual representation of the
design process, divided into two key
phases:
● Discover & Define (Problem
Space)
● Develop & Deliver (Solution
Space)

Source: Adapted from The Design Process: What is

Goal: Balance divergent (exploring) the Double Diamond?
and convergent (focusing) thinking.
Phase 1 - Discover & Define
Discover:

● Purpose: Research and understand the problem.

● Activities: User interviews, market analysis, competitor
research, surveys.
● Outcome: Gather user insights and identify key challenges.

Define:

● Purpose: Narrow down the focus to a clear, concise problem statement.

● Activities: Affinity mapping, problem framing, creating user personas.
● Outcome: Well-defined problem or design brief.
Phase 1 - Discover & Define
User Research Synthesis of Research

Market Research User Personas

Brainstorming Problem Definition

Statement

Contextual Inquiry
Point of View (POV)

Problem Framing
Phase 2 - Develop & Deliver
Develop:

● Purpose: Generate ideas and explore solutions.

● Activities: Brainstorming, sketching, prototyping,
usability testing.
● Outcome: A range of possible solutions.

Deliver:

● Purpose: Refine, test, and finalize the solution.

● Activities: High-fidelity prototyping, user testing, final
adjustments.
● Outcome: A polished, user-approved product ready for launch.
 Phase 2 - Develop & Deliver
Rapid Refine
Sketching Sketching

Low-Fidelity High-Fidelity
Wireframes Wireframes

Paper Interactive
Prototypes Prototypes
Frameworks in Interaction Design
Five Dimensions of Interaction Design (1D to 5D):

● 1D: Words (text)

● 2D: Visual representations (images, icons)
● 3D: Physical objects or space
● 4D: Time (animations, transitions)
● 5D: Behavior (how users interact)

Usability Heuristics by Jakob Nielsen:

● Visibility of system status

● Match between system and real world
● User control and freedom
Double Diamond vs. Interaction Design Frameworks
Similarities:

● Both involve iterative processes that encourage feedback and refinement.

● Emphasis on user-centered design.
● Aim to solve real-world problems by understanding user needs.

Differences:

● Double Diamond is a high-level design process.

● Interaction Design Frameworks focus more on specific details of user
interaction and usability.
Real-World Examples of Design Process
Spotify’s Design:

● Applied Double Diamond for user research, defining the music streaming
problem, and developing unique discovery features.
● Used Interaction Design principles for seamless playlist creation and
intuitive navigation.

Airbnb:

● Followed the Double Diamond to understand hosts' and travelers' needs.

● Employed Interaction Design Frameworks for booking interactions and
clear communication between hosts and guests.
Conclusion: Design Process
"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs

Takeaway: A successful design process, whether through Double Diamond or

Interaction Design frameworks, is about creating solutions that are not only
visually appealing but also functional and user-centric.
Design Thinking vs. Design Process
● Design Process is a structured sequence of steps followed to create a
product or solution, often including stages like research, ideation,
prototyping, testing, and implementation. It is a linear or iterative
methodology aimed at achieving a specific design outcome.
● Design Thinking is a mindset and problem-solving approach that
emphasizes empathy, creativity, and iteration. It is a user-centered strategy
that involves understanding user needs, defining problems, ideating
solutions, prototyping, and testing, often encouraging a non-linear and
flexible path to innovation.
Case Study: Design Thinking vs. Design Process
● Focus: Design Thinking involves a user-centered mindset that begins with
understanding the problems people face.
● Airbnb Case: In its early days, Airbnb struggled to gain traction. The
founders applied design thinking by staying in their own listings to
empathize with users and understand their pain points. They discovered
that poor-quality photos of rental spaces were a major issue.
● Outcome: They redefined the problem by focusing on how better visuals
could increase bookings. This led to an idea: they went door-to-door in
New York City, photographing hosts' homes themselves. This empathetic,
iterative, and creative approach was a pivotal moment that helped Airbnb
take off.
Case Study: Design Thinking vs. Design Process
Focus: The Design Process is a structured, step-by-step method to create a
solution once the problem and user needs are defined.
Airbnb Case: After understanding user needs and validating the initial idea
(high-quality photos), Airbnb moved to a more structured design process.
They researched their target market, designed a scalable system to support
hosts, built prototypes of the platform, gathered feedback, and iteratively
improved features like booking, payments, and host management in a
systematic manner.
Outcome: This structured approach allowed Airbnb to develop a reliable
platform, scaling it into a successful, global marketplace.
Case Study: Design Thinking vs. Design Process
Key Difference with Example:

● Design Thinking drove Airbnb's initial problem discovery and

innovative idea by emphasizing empathy and understanding the user’s
experience.
● Design Process enabled Airbnb to execute and systematically build the
platform, step-by-step, from the validated concept to a robust product.

In summary, Design Thinking is about discovering and defining the

problem creatively, while the Design Process is about systematically
developing and executing the solution.
Thank you.