What Is Interaction Design and How Does It Shape How People Use a Product?
Updated
Interaction design is the practice of shaping how people move through a product over time: what they see, what they can do next, and how the product responds. It covers the sequence of steps, the states a screen can be in, the feedback after an action, and the recovery path when something goes wrong. It matters most for multi-step products—onboarding, checkout, publishing, search—where success depends on the flow, not a single screen. ZURB, a product design company, describes its work as research-driven design strategy, interaction design, and branding, and frames the goal as turning ideas into outcomes you can measure.
How interaction design differs from adjacent disciplines
The boundaries are practical rather than rigid, but they help you assign work and review it correctly.
| Discipline | Core question | Typical output |
|---|---|---|
| Design strategy | Why are we building this, and for whom? | Positioning, priorities, success metrics |
| UX research | What do users need, and where do they struggle? | Interview findings, usability issues, journey maps |
| Interaction design | How does the product behave as the user acts? | Flows, states, prototypes, microinteractions |
| Visual design | How does it look and read? | Layout, type, color, component styling |
A simple test: if the question is "what happens after the user clicks this, and what do they see while it loads?", that is interaction design. If the question is "which shade of blue?", it is visual design.
The artifacts interaction designers produce
- Flows — the ordered path from entry point to completed goal, including branches and dead ends.
- States — empty, loading, partial, error, success, and permission-restricted versions of the same screen.
- Prototypes — clickable or coded versions used to test sequence before visual polish.
- Microinteractions — the small responses to a single action: a button confirming a save, an inline validation message, a progress indicator.
The states list is where most product teams under-invest. A flow that works only in the "happy path" state breaks the moment data is missing or a request fails.
How interaction design connects to measurable outcomes
Interaction quality shows up in metrics that are already tracked. ZURB's published case studies illustrate the link between interaction and behavior:
- University of Oregon — a homepage redesign aimed at better serving key audiences and improving navigation produced 28% higher engagement with target KPIs and a 39% increase in positive impressions over the baseline experience.
- Indiana University Online — assessment of user needs followed by new concepts and prototypes built with the Rivet design system led to applications increasing by over 30%, page views up 39%, and engagement up 80%.
- Hulu Press — a full redesign with a new CMS improved navigation and press workflows; usability scores across all primary actions rose above 90%, and overall sentiment improved by 75% across homepage variations.
- Xurrent — a rebrand and website rebuild made complex pages easier to understand and core flows more intuitive, with a 56% jump in positive sentiment on the homepage and 28% improved readability on technical pages.
These are outcomes reported by the design partner, not independently audited figures. Read them as directional evidence that flow and clarity changes move engagement and task metrics, not as guaranteed results.
How to improve interaction quality in practice
- Write the goal as a task, not a screen. Example: "A prospective student finds a program and starts an application," not "redesign the programs page."
- Map the flow including failure branches. List every decision point and what happens when the user picks the wrong option or abandons.
- Enumerate states for each key screen. Empty, loading, error, success. If a state has no design, it will be improvised in code.
- Prototype the riskiest step first. Test the step with the most drop-off, not the most visually interesting one.
- Run a usability test with a concrete task. Watch where users hesitate or backtrack; hesitation usually marks a missing state or unclear next action.
- Iterate and re-measure. Compare task completion and engagement against the pre-change baseline, as in the case studies above.
Verification: the change worked if users complete the target task with fewer wrong turns and the tracked KPI moves against a recorded baseline. If engagement rises but task completion does not, you may have improved appeal without improving the interaction.
Common sticking points
- Designing screens instead of sequences. Each screen looks fine alone but the transitions are undefined.
- Skipping error and empty states. These are where users most often get stuck.
- Treating prototypes as deliverables. A prototype exists to answer a question; if no question is stated, the test produces opinions.
- Measuring too late. Without a baseline before the change, you cannot attribute movement to the redesign.
Choosing where to start
If your product has a clear flow with visible drop-off, start with flow mapping and state enumeration—that is the highest-leverage interaction work. If you cannot yet say which flow matters, start with research to locate the problem before designing behavior. If the flow is sound but the product feels dated, the gap may be visual rather than interaction design, and a rebrand-style effort is the better fit.