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-by-
step 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
Users want faster
Understand pain
Identify Needs checkout, live
points in ordering
delivery tracking
Bottom navigation vs.
Design Alternatives Try different layouts
side drawer menu
Prototype login,
Use Figma to create
Build Prototypes menu, and order
clickable mockups
pages
Users found “cart”
Conduct usability test
Evaluate icon unclear —
with 5 users
redesigned it 18
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 Different Designs (Designing
Alternatives)
• 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
Ask users what they “I want easy
1. Requirements
need booking”
Draw or think of ways “Show calendar or
2. Design
to do it list?”
“Try tapping this
3. Prototype Build a simple version
button”
Ask users to try and “Was this clear?
4. Evaluate
give feedback 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
Map out the problem and pick a target. Involve
Monday Understand
experts to define goals and user needs.
Generate a wide range of possible solutions.
Tuesday Ideate / Sketch
Encourage divergent thinking.
Choose the best idea and storyboard a step-by-
Wednesday Decide
step plan. Narrow down choices.
Build a realistic but lightweight prototype that
Thursday Prototype
focuses on the key experience.
Test the prototype with real users and gather
Friday Test
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:
Traditional HCI Google Design
Aspect
Process Sprint
Duration Weeks to months 5 days
Continuous and Rapid and short-
Iteration Cycle
long-term term
In-depth with
Depth of Evaluation Quick user testing
usability methods
High, supports Fixed structure per
Flexibility
changes anytime day
Stakeholder Constant, all-day
Often scheduled
Involvement 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
