Interaction Design

Interaction Design (IxD) defines how users interact with a product — the behaviours, responses, and feedback that occur when a user takes an action. While visual design determines how a product looks, interaction design determines how it behaves.

---

What is Interaction Design?

Interaction design focuses on creating engaging, intuitive interactions between users and products. It covers:

• How users trigger actions — clicks, taps, swipes, gestures, voice commands
• How the system responds — animations, transitions, state changes, feedback
• How errors are handled — validation, error messages, recovery paths
• How users navigate — flows, routes, and pathways through the product

Key Insight: Good interaction design is invisible. Users notice when interactions are broken, not when they work perfectly.

---

The Five Dimensions of Interaction Design

Gillian Crampton Smith and Kevin Silver define five dimensions of IxD:

Dimension	Description	Example
1D: Words	Labels, buttons, instructions, and microcopy	"Save" vs "Save Changes" vs "Save Draft"
2D: Visual representations	Images, icons, typography, and interface elements	A trash can icon for delete
3D: Physical objects/space	The hardware and environment	Touch screen, mouse, keyboard, voice device
4D: Time	Animations, transitions, and time-based changes	A progress bar, a loading spinner, a notification
5D: Behaviour	How the product responds to user actions	Undo functionality, form validation, auto-save

---

Core Interaction Patterns

Navigation Patterns

Pattern	Description	Best For
Tab bar	Fixed bottom navigation with 3-5 icons	Mobile apps with primary sections
Hamburger menu	Hidden navigation behind a menu icon	Secondary navigation, space-constrained layouts
Sidebar	Persistent left navigation panel	Desktop apps, dashboards, admin panels
Breadcrumbs	Hierarchical path showing current location	Deep content hierarchies
Pagination	Breaking content into numbered pages	Search results, long lists
Infinite scroll	Loading more content as the user scrolls	Social feeds, image galleries

Input Patterns

Pattern	Description	Best For
Text input	Single-line or multi-line text field	Names, emails, messages
Dropdown select	Expandable list of options	5-15 predefined choices
Radio buttons	Mutually exclusive options, all visible	2-5 choices where comparison matters
Checkboxes	Multiple selectable options	Multiple-choice settings, filters
Toggle switch	Binary on/off control	Settings that take immediate effect
Stepper	Plus/minus buttons for numeric values	Quantity selectors, small number ranges
Date picker	Calendar-based date selection	Booking systems, scheduling

Feedback Patterns

Pattern	Description	When to Use
Toast notification	Brief, auto-dismissing message	Confirming a non-critical action
Inline validation	Error or success message next to the input field	Form validation in real-time
Modal dialog	Overlay requiring user attention	Confirming destructive actions, important decisions
Progress indicator	Bar or spinner showing task progress	File uploads, multi-step processes
Skeleton screen	Placeholder shapes indicating loading content	Page load states
Empty state	Helpful message when no content exists	New accounts, empty search results

---

Microinteractions

Microinteractions are small, contained interactions that accomplish a single task. They are the details that make a product feel polished and responsive.

Four Parts of a Microinteraction

Part	Description	Example
Trigger	What initiates the interaction	Clicking a "Like" button
Rules	What happens when triggered	Increment the like count, change icon colour
Feedback	How the user knows something happened	Heart icon animates, count updates
Loops and modes	What happens over time or in different states	Already liked state shows filled heart