What is Interaction Design and how AI is changing your role

In 1982, Bill Moggridge was finishing one of the first laptops with a folding screen.

The Industrial Design problems were obvious: Hinge, weight, keyboard layout, how the screen met the base.

The harder problems showed up when someone used the machine.

Where does focus land when the system boots?

What happens when a command fails?

How does the user know the machine received input before the screen updates?

Moggridge was not only shaping an object people looked at. He was shaping a conversation between person and system over time.

He later helped name that work Interaction Design.

What Interaction Design is

It is the work of defining how people and a digital product exchange action and response over time.

Not what the product looks like at one moment.

What it does when someone taps, types, drags, waits, makes a mistake, or changes their mind.

You are deciding:

• What the user can do on a screen
• What the system does in return
• What feedback they get while it happens
• Which state the interface moves into next
• How the experience recovers when something breaks

That includes small moments people call Micro Interaction Design: A button press, a toggle, a toast, a field validation cue.

It also includes larger patterns: Multi-step flows, permissions that hide or disable actions, bulk edits, undo, and how the product handles slow or partial results.

Animations should have a purpose. When something moves on screen, it helps you understand what just happened, like when a button spins to show it's loading or a message slides in to confirm something worked.

Good design works the same way.

It takes what someone wants to do and turns it into something they can actually do, without any confusion.

How Interaction Design differs from UX Design, UI Design, and Product Design

UX Design focuses on whether the overall experience helps users reach their goals. Research, flows, usability, and testing live here. Interaction Design often sits inside UX work, but UX is wider than any single screen's behavior.

If you are sorting research from solution ownership, UX Research vs UX Design: different roles, same goal lays out that split clearly.

UI Design focuses on how the interface looks and reads: Type, color, layout, components, and visual states on screen. Strong UI includes state design, but UI doesn't by itself answer every behavioral question.

When AI floods you with polished layouts, designing with taste: what is UI Design in an AI world? explains why visual direction still needs a human author.

Product Design owns the wider product bet: Scope, trade-offs, and what the product refuses to do. Interaction Design makes many of those bets feel coherent when users touch the product.

For the product-level frame, read what is Product Design and how AI is redefining the designer's role.

What you actually design day to day

Your role covers a lot.

You figure out how someone starts an action, for example with a tap, a click, a key press, dragging something or speaking.

You think through every state a screen can be in, normal, loading, broken, or blocked.

You decide how the app responds, through words, icons, vibration, sound, or movement, in a way that confirms something happened without being distracting.

Then you set rules for how things change, what animates, what switches instantly, and what stays put so things don't get confusing.

You also plan for when things go wrong, letting people retry, undo, save their progress, or get an honest message when the app isn't sure what happened.

Finally, you write clear notes that developers can actually use to build what you designed.

You don't need to be an animation expert to do this.

You just need to think in steps and sequences, what happens first, what comes next, and what comes after that.

How AI is changing your role

AI is very good at generating credible interfaces quickly.

It is much weaker at understanding the full behavior unless you instruct AI properly.

Recent team patterns show the same shift:

1. Screens got cheaper. Behavior became the issue.

When layout variants take minutes, reviews drift toward taste. The expensive mistakes are silent: No loading state, no error path, no rule for disabled actions, no plan for stale data.

Your role moves from drawing every state to defining interaction logic the team can implement and test.

2. You brief AI the way you brief developers.

Short behavior notes, state lists, and edge cases are now inputs for AI drafts and for engineering. Vague intent produces vague products at speed.

If you want a delivery rhythm that keeps decisions ahead of generation, how AI-first design workflows actually work, step by step shows where behavior fits in the loop.

3. AI features need their own interaction patterns.

When a model suggests text, code, or layout, users need clear patterns:

• Preview before apply
• Edit or regenerate without losing context
• Visible uncertainty when confidence is low
• Confirm on high-risk actions
• Undo when the suggestion was wrong

That is Interaction Design for AI-assisted products.

4. Prototypes matter again, but for behavior.

Static mocks hide timing problems.

A quick prototype that shows loading, failure, and success beats ten beautiful artboards with one happy path.

AI doesn't remove Interaction Design, but it punishes teams that treat behavior as someone else's problem.

The ACTS brief

Use this four-part framework when working with AI and a developer.

A: Action

List every way the interaction can start. Split them into four buckets so nothing hides in a happy-path mockup.

User-initiated: Tap, click, type, drag, submit, cancel, navigate away.

System-initiated: Load, timeout, background sync, push notification, session expiry.

Permission-initiated: Action appears, stays disabled, or hides based on role or state.

AI-initiated (when relevant): Suggest, apply, regenerate, dismiss.

Rules for Action:

• If the user can do it, it belongs on the list, even if it is rare.
• If the system can do it without the user asking, it belongs too.
• If two actions compete on the same control, name the priority (for example, cancel vs submit while loading).
• One primary action per surface unless the task truly requires parity.

C: Change

For each action, name the states the interface passes through. Use the same vocabulary every time so your team and your tools stop inventing new labels per screen.

Core states to check on every action:

• Default (ready)
• Active / in progress (work running, prevent double input)
• Success (done, with a clear next step or return to default)
• Failed (what broke and what the user can do now)
• Empty (nothing to act on yet)
• Disabled or read-only (why, and whether that can change)
• Permission-blocked (missing access, pending approval, wrong role)

Rules for Change:

• AI drafts often ship default plus success. Your job is the full path between them.
• If an action can leave data half-finished, name that state explicitly.
• If state depends on data from elsewhere, note the source and what stale looks like.
• Draw or list states as a sequence, not a single poster frame.

T: Tell

Define how the user knows something happened. Feedback can be copy, icon, sound, haptic, or motion. Pick the lightest option that answers the user's question.

This is where Motion Design earns its place, but only when movement teaches something.

Rules for Tell:

• Ask what the user needs to understand: Did my input register? What changed? Is work still running? What should I do next?
• Prefer instant feedback for frequent actions and keyboard paths.
• Use Motion Design when cause and effect would be unclear without movement.
• Skip motion when it adds delay without adding meaning.
• Reuse team motion tokens or named rules instead of one-off effects.
• If feedback is easy to miss, say where the eye should go next.

S: Safeguard

Design for when the happy path breaks. Safeguards are the difference between a product that feels reliable and one that feels like it lied.

Check every brief against:

• Slow or lost network
• Partial success (some items saved, some failed)
• Duplicate submit or rage tap
• Navigate away with unsaved work
• Stale or conflicting data after refresh
• Missing permission mid-flow
• Undo or recovery after a mistake
• Wrong or unsafe AI output before it ships to the user

Rules for Safeguard:

• Recovery should happen in context, not only on a generic error page.
• High-risk actions need confirm or preview, especially when AI applies changes.
• If the system is unsure, say so. False certainty erodes trust faster than a spinner.
• Every safeguard should answer: What can the user do right now?

A complete ACTS brief is short, repeatable, and boring in a good way. Same structure, any product.

When behavior is ready to build, design handoff done right: what developers actually need from you shows how to package states and rules so nothing gets lost in translation.

Action checklist

• Pick one live screen. Write every Action a user can take.
• List Change states for the riskiest action on that screen.
• For each state, note how you Tell the user what is happening.
• Add Safeguard rules for failure, permissions, and undo.
• Run the flow in a prototype with slow and failed responses, not only the happy path.
• Add one behavior section to a portfolio case study: Trigger, states, and what you refused to animate.

Final takeaway

Interaction Design is the behavior layer: What users do, what the system does back, and how people know it worked.

AI made the visual layer faster.

It did not make consequences optional.

Your role is shifting toward clearer behavior briefs, fuller state maps, and interaction patterns that stay honest when models guess.

The designers who feel ahead are not winning on more mockups.

They are winning on fewer surprises after handoff.

Build that habit on real projects through Zero to Pro.

When you are ready to ship a full loop with AI in the workflow, AI Design Sprint is built for that pace.

FAQs

What is Interaction Design?

It is the discipline of defining how users and a digital product exchange action and response over time. It covers triggers, states, feedback, transitions, recovery paths, and the rules that make behavior feel consistent and trustworthy.

What is Micro Interaction Design?

It focuses on small, single-purpose moments: A button press, a toggle, inline validation, or a brief confirmation. These moments are part of Interaction Design. They matter because users feel product quality in the details, not only in hero screens.

How is Interaction Design different from UX Design?

UX Design addresses whether the overall experience helps users reach their goals, including research and testing across flows. Interaction Design goes deep on what happens at each step when users act. UX is broader. Interaction Design is where many UX decisions become concrete behavior.

How is Interaction Design different from UI Design?

UI Design shapes how the interface looks and reads: Layout, type, color, components, and visual states. Interaction Design defines what those components do across time: Loading, success, failure, permissions, and recovery. Strong UI supports Interaction Design. It doesn't replace it.

Is Motion Design part of Interaction Design?

Yes, when motion clarifies state change, cause and effect, or progress. Motion Design skills help you direct feedback and transitions with purpose. Decorative motion without a behavioral job often adds noise instead of clarity.

Will AI replace Interaction Designers?

AI replaces parts of layout production, not the work of defining correct behavior under real constraints. Teams still need humans to map states, edge cases, permissions, and trust patterns, especially for AI-assisted features. The role shifts toward behavior leadership, not fewer decisions.

How can AI help Interaction Designers?

AI can draft state lists, suggest edge cases, produce prototype flows, and generate first-pass UI from a behavior brief. You still validate timing, accessibility, consistency, and recovery paths. AI speeds exploration. You own the rules.

How do I show Interaction Design in my portfolio?

Show one flow with triggers, key states, and a short note on trade-offs. Include a recording or prototype segment for loading, error, or permission behavior. Explain what you refused to animate and why. Reviewers hire judgment, not only polish.

What should I learn first if I am new to Interaction Design?

Start with states and feedback on one real screen. Map actions, list default through error states, and test a clickable prototype. Add Motion Design only where it teaches. Pair that practice with best UX Design practices that still matter in an AI world for the wider quality bar.