Interaction Design

Principles, Practice & Examples

Contributors: Okipi & Matilda

What is
Interaction
Design (IxD)?
Interaction Design is the discipline concerned with
designing interactive products and systems so that
users can communicate and interact with them
effectively.
It sits at the intersection of design, usability, human-
computer interaction, psychology and ergonomics.
The goal: to create products that are easy, efficient,
effective and pleasurable to use — from the user’s
perspective.
 Usability (ease, effectiveness)
Core Goals Enables users to accomplish tasks without
confusion or frustration.

of Learnability

Interaction Users should quickly grasp how to use the system

on first encounter.

Design Pleasure / Enjoyment /

Engagement
Enhancing User Experience Beyond function — interaction experiences should
feel good and satisfying.

Accessibility and Inclusiveness

Design should accommodate diverse users
(different abilities, contexts).
Key Principles of Good
Interaction Design
Principles are fundamental to the design and implementation of effective interfaces -

Discoverability Affordances & Signifiers

Users should quickly see what actions are possible. Hidden Interface elements should visually suggest how they’re
controls or “invisible” features hamper usability. used (e.g. clickable buttons look clickable).

Consistency Feedback / Status Visibility:

Keep behavior and visual design consistent across the Always give the user clear feedback about what’s
product and with users’ expectations. happening (success, failure, loading, etc.).
Key Principles of Good
Interaction Design
Principles are fundamental to the design and implementation of effective interfaces

Simplicity & Minimalism Affordances & Signifiers

Don’t overwhelm users with unnecessary information or Interface elements should visually suggest how they’re
complexity; present only what’s needed. used (e.g. clickable buttons look clickable).

Accessibility / Inclusiveness (e.g.

color-blindness)
Design should consider diverse user needs and not rely
solely on e.g. color cues.
 Understand your user
The ...their goals, context, and constraints (physical,
social, psychological) — sometimes referred to as

Interaction the PACT framework (People, Activities, Contexts,

Technologies).

Design Iterative design

Process Pototyping, testing with real users, evaluating

usability, refining design.

(Who is System Model vs User Model

Involved & Focus on both functionality (what the system does)
and usability/experience (how users do it, and how
it feels) — balancing system requirements with

What human needs.

Happens)
Why
Interaction Without good interaction design, even a fully

Design functional system becomes frustrating,

inefficient, or unusable.
Matters Good design reduces cognitive load — users
don’t need to “think about how to use the
(Especially interface,” freeing them to focus on tasks.
Improves adoption and satisfaction, reduces
for Complex error rates, increases productivity.
Increases accessibility — ensures a broader,
Systems) more inclusive user base.
 Good Example 1: Clear Navigation & Affordances
Examples: Users can immediately see what actions are available — links and buttons are
clearly labeled and look interactive.

Good vs Affordances and signifiers make the UI intuitive: clickable elements look
clickable, scrollable areas look scrollable.

Poor
Minimizes users’ need to guess — supports immediate learnability and
efficiency.

Interaction
Design
 Poor Example 1: “Mystery-Meat” Navigation /
Examples: Hidden Controls
Navigation or options hidden behind ambiguous icons (or no labels) — users
Good vs don’t know where they can go or what actions are possible.
Violates discoverability and consistency: new users have to guess, leading to

Poor confusion or frustration. This is a documented example of poor interaction

design.

Interaction
Design
Examples:
Good vs
Poor
Interaction
Design
 Good Example 2: Feedback & State Visibility (Clear
Examples: Response to Actions)
When a user performs an action (e.g. submitting a form, saving data), the
Good vs interface gives immediate, clear feedback (success, error, loading) — preventing
uncertainty.

Poor Status visibility helps users understand where they are, what is happening,
whether they succeeded or must retry — reducing anxiety and cognitive
friction.

Interaction
Design
 Good Example 2: Feedback & State Visibility (Clear
Examples: Response to Actions)
When a user performs an action (e.g. submitting a form, saving data), the
Good vs interface gives immediate, clear feedback (success, error, loading) — preventing
uncertainty.

Poor Status visibility helps users understand where they are, what is happening,
whether they succeeded or must retry — reducing anxiety and cognitive
friction.

Interaction
Design
 Good Example 2: Feedback & State Visibility (Clear
Examples: Response to Actions)
When a user performs an action (e.g. submitting a form, saving data), the
Good vs interface gives immediate, clear feedback (success, error, loading) — preventing
uncertainty.

Poor Status visibility helps users understand where they are, what is happening,
whether they succeeded or must retry — reducing anxiety and cognitive
friction.

Interaction
Design
 Poor Example 2: No Feedback / Hidden State
Examples: Changes
User clicks a button or submits a form and nothing seems to happen — no
Good vs spinner, no confirmation, no error message.
This leaves users uncertain whether their action succeeded; it can lead to

Poor repeated attempts or abandonment.

Violates fundamental interaction-design principle of feedback — and
undermines trust and usability.

Interaction
Design
 Good Example 3: Simplicity & Minimal Cognitive
Examples: Load
UI presents only what’s needed, avoiding clutter — reduces cognitive load,
Good vs helps users focus on tasks.
Easy to learn, easy to use, especially for first-time users.

Poor Enhances efficiency and satisfaction — aligning with the core goals of
interaction design (usability + pleasure).

Interaction
Design
 Poor Example 3: Overloaded UI / Information
Examples: Overload
Interface overloads user with too many options, text, controls — hard to parse,
Good vs overwhelming.
Makes it difficult for users to identify what’s important, increases likelihood of

Poor errors or abandonment.

Violates principles of simplicity, minimalism and clear affordances. Indeed,
“information overload” is a classic anti-pattern in poor interaction design.

Interaction
Design
 Always design with the user’s mental model and

Practical context in mind — consider who users are, what tasks

they do, and where and how they do them. (e.g. using

Implications PACT)
Prioritise usability and clarity over “cool” visuals —

(for aesthetics should not come at the expense of function.

(Aesthetic design must be tested to ensure usability is

Designers / maintained)
Use iterative design & user testing — mockups,

Product wireframes, prototypes, and real-user feedback help

validate assumptions (A/B testing).

Teams) Always provide feedback and clear status — users

should always know what’s happening.
Keep UI simple and minimal, but communicative —
avoid overload, but provide enough cues (affordances,
signifiers).
Ensure accessibility and inclusivity — design should
work for a wide range of users, contexts, physical/
psychological abilities.
Conclusion
Interaction Design is critical — it bridges the gap between
system capabilities and human needs.
Good interaction design improves usability, efficiency,
satisfaction; poor design frustrates users and undermines
product success.
By adhering to core principles (affordances, feedback,
consistency, simplicity, accessibility, user control), and
validating through user testing, teams can build products
that are not just functional — but delightful to use.
In complex systems (like healthcare platforms, enterprise
apps, multi-module ecosystems), good interaction design
is even more important — it can mean the difference
between adoption and drop-off.
Thank You!