THE PROCESS OF INTERACTION DESIGN
What is involved in Interaction
Design?
• the process of designing interactive products to
support the way people communicate and interact in their
everyday and working lives. It’s a structured, iterative, and
user-focused approach.
• Interaction design is about creating engaging interfaces
with well-thought-out behaviors — how users interact with
technology.
2
Cont…
• The Interaction Design Process is a step-bystep method used to create digital systems (like
apps, websites, kiosks, etc.) that are:
• Easy to use
• Useful
• Enjoyable for the user
• It helps designers understand users, imagine
solutions, build them, and test them.
3
Cont…
• Each phase is important — skipping user
research or evaluation leads to poor designs.
• Tools like personas, scenarios, and usability
tests bridge the gap between user needs and
technical feasibility.
4
The double diamond of design
Source: Adapted from The Design Process: What is the Double Diamond?
5
Understanding the problem space
Explore
• What is the current user experience?
• Why is a change needed?
• How will this change improve the situation?
Articulating the problem space
• Team effort
• Explore different perspectives
• Avoid incorrect assumptions and unsupported claims
6
Four basic activities of Interaction Design
1. Discovering requirements
2. Designing alternatives
3. Prototyping alternative designs
4. Evaluating product and its user experience
throughout
7
A simple interaction design lifecycle model
Exemplifies a user-centered design approach
8
Cont…
Iterative Nature of the Process:
These four activities are not linear — they are
iterative:
•After evaluation, you may redefine requirements.
•Prototypes are revised based on feedback.
•New alternatives may be generated at any stage.
User feedback is the core driver throughout the
design cycle.
9
Cont… 1. Discovering requirements
Objective:
To understand what the users need, what
tasks they perform, and under what context they
will use the system.
Key Aspects:
• User Requirements – What are the users’ goals?
• Functional Requirements – What should the
system do?
• Context of Use – Where, when, how, and with
what constraints?
• Stakeholder Input – Involving end users, clients,
and developers.
10
Cont…
Techniques:
• Interviews and questionnaires
• Observations (field studies)
• Task analysis
• Personas and scenarios
Goal:
• Clearly define what to design — without this, all
future steps may fail.
11
Cont… 2. Designing Alternatives
• To brainstorm and develop multiple design
solutions rather than settling on a single idea
too early.
Key Aspects:
• Conceptual Design – How the system will
behave (e.g., metaphors, interaction types)
• Physical Design – Look and feel: screens,
buttons, menus
• Design Thinking – Encourages creativity and
innovation
• Exploration of Ideas – Sketches, wireframes,
storyboards
12
Cont…
Techniques:
• Brainstorming sessions
• Sketching
• Paper prototypes
• Low-fidelity mockups
Goal:
• Generate and compare various ideas to
find the most suitable one.
13
Cont… 3. Prototyping
Objective:
• To create interactive representations of the
system that can be tested and refined.
Key Aspects:
• Low-Fidelity Prototypes – Quick sketches,
paper-based simulations
• High-Fidelity Prototypes – Working interfaces
with real data
• Horizontal Prototypes – Focus on breadth
(many features, limited depth)
• Vertical Prototypes – Deep functionality in
selected features
14
Cont…
Tools:
• Figma, Adobe XD, Sketch (for UI)
• HTML/CSS/JavaScript (for interactive demos)
• Physical mockups (in product design)
Goal:
• Enable early feedback, reduce risk, and help
designers learn what works before full
implementation.
15
Cont… 4. Evaluating
Objective:
• To assess the usability and user experience of
the design solutions, ensuring the product meets
user needs.
Key Aspects:
• Formative Evaluation – During development,
helps refine designs
• Summative Evaluation – Final evaluation after
development
• Usability Testing – Real users, real tasks,
structured observation
• Heuristic Evaluation – Experts check design
against usability principles
16
Cont…
Methods:
• Observation
• Surveys
• Log analysis
Goal:
• Identify usability issues early, validate design
decisions, and refine the product to align with
user expectations.
17
Real-World Example: Food Delivery App
Step
Activity
Example
Understand pain
points in ordering
Users want faster
checkout, live
delivery tracking
Try different layouts
Bottom navigation vs.
side drawer menu
Build Prototypes
Use Figma to create
clickable mockups
Prototype login,
menu, and order
pages
Evaluate
Users found “cart”
Conduct usability test
icon unclear —
with 5 users
redesigned it
18
Identify Needs
Design Alternatives
Ex: To design a mobile app for booking doctor
appointments.
1. Understand What Users Need (Establishing
Requirements)
Ask these:
Who will use the app? (Old people, young users, doctors?)
What features do they need? (Book appointment, see
timings, cancel booking?)
Example:
You find that users want to book quickly, choose doctors,
and get reminders.
19
Cont…
2. Think of
Alternatives)
Different
Designs
(Designing
• Now imagine different ways the app might look or
work:
• Should it have buttons or voice control?
• Should it show a calendar or a list of dates?
You draw a few screen layouts (called wireframes).
One layout has big buttons, another uses tabs.
20
Cont…
3. Build a Sample Version (Prototyping)
Make a quick version of the app to show people:
Low-fidelity prototype: Sketch on paper or PowerPoint
High-fidelity prototype: Use Figma or a real app interface
Example:
You build a simple clickable demo — users can tap and
simulate booking.
21
Cont…
4. Show to Real Users and Improve (Evaluating)
• Test your design with users:
• Can they book an appointment easily?
• Are they confused anywhere?
•
Then you improve the design based on what they say.
22
Cont…
Step
What You Do
Example
1. Requirements
Ask users what they
need
“I want easy
booking”
2. Design
Draw or think of ways
to do it
“Show calendar or
list?”
3. Prototype
Build a simple version
“Try tapping this
button”
4. Evaluate
Ask users to try and
give feedback
“Was this clear?
Easy?”
23
Another lifecycle model:
Google Design Sprints (Knapp et al., 2016)
Source: Google Design Sprints (used courtesy of Agile Marketing)
24
Cont…
• A rapid, structured, five-day process for
solving problems and testing ideas.
Originally developed by Google Ventures
to help startups design, prototype, and test
ideas in just 5 days.
25
Cont…
The 5-Day Process Overview:
Day
Activity
Description
Monday
Understand
Map out the problem and pick a target. Involve
experts to define goals and user needs.
Tuesday
Ideate / Sketch
Generate a wide range of possible solutions.
Encourage divergent thinking.
Wednesday Decide
Choose the best idea and storyboard a step-bystep plan. Narrow down choices.
Thursday
Prototype
Build a realistic but lightweight prototype that
focuses on the key experience.
Friday
Test
Test the prototype with real users and gather
feedback. Validate before investing further.
26
Cont…
When to Use a Design Sprint?
• Launching a new product or feature
• Solving a critical design challenge
• Aligning teams around a shared vision
• Rapid innovation in startups or R&D
settings
27
Cont…
• Comparison with Traditional HCI Process:
Aspect
Traditional HCI
Process
Google Design
Sprint
Duration
Weeks to months
5 days
Iteration Cycle
Continuous and
long-term
Rapid and shortterm
Depth of Evaluation
In-depth with
usability methods
Quick user testing
Flexibility
High, supports
changes anytime
Fixed structure per
day
Stakeholder
Involvement
Often scheduled
Constant, all-day
involvement
28
Some practical issues
• Who are the users?
• What are the users’ needs?
• How to generate alternative designs?
• How to choose among alternatives?
• How
to
integrate
interaction
design
activities with other lifecycle models?
29