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