Just a few years ago, most ATMs would give you your cash before returning your card. Thousands of people every year would take the cash and forget their card in the machine.
Today, most ATMS have switched that order: they return your card first and then give you your cash. As a result, the rate at which people forget their cards has fallen drastically.
This simple shift is a classic example of effective interaction design—where reordering just two steps creates a dramatically better experience. The same principle applies to digital products: great interactions anticipate user behavior and reduce friction.
The field of IdX is sometimes confused with the related fields of UX and UI design. Indeed, especially when designing a website, there can be a lot of overlap. But interaction design is its own subject, worthy of attention.
As a dedicated Webflow design agency, interaction design is an important part of what we do. We carefully craft the interaction patterns built into a new website to make the user experience smooth and seamless.
Here's what we'll cover:
- What is UX design?
- What is interaction design?
- Core differences
- Areas of overlap
What is UX design?
UX design, or user experience design, is the practice of creating end-to-end experiences that leave users feeling satisfied with the product they are using. Designing seamless interactions is an important part of this, but there's a lot more involved.
Visual design is an important part of UX design, because users respond strongly to the visual aspects of their experience. UX designers need to carefully ensure that the visual appearance of an application or website matches the brand's overall style and fits the user's intuitions.
Usability testing is another important part of UX design. It's important to determine empirically whether or not users actually have a smooth experience, because it can be difficult to predict accurately through reason alone. To this end, a UX agency may use A/B tests, heatmaps, task completion time, and other tools to assess their work.
Interaction design is really a part of UX design, the part that is concerned with the actual feedback loop of actions between human and computer. UX designers need to ensure that interactions are experienced positively.
Information architecture is also a concern of UX design. It is the practice of structuring and organizing information to support usability and findability. Your website might have a slick user interface, but if all the pages are disorganized and have a confusing structure, it won't help much.
What is interaction design?
Interaction design focuses on how users engage with digital systems—every tap, click, swipe, and scroll. It defines the structure and behavior of those interactions to make them intuitive and effective.
It helps to look at some good examples of interactions:
- Scrolling through your Instagram feed and hitting the "Like" button.
- Typing your pin number into an ATM.
- Clicking "Check out" on an e-commerce store.
- Leaving a review on Google Maps.
These touchpoints happen within a user interface, but interaction design zeroes in on how the user moves through them—not just how they look or feel.
Interaction design is thus more specific than UX design, but as a result it can apply more broadly. Every social media company uses a similar set of interaction patterns for liking and scrolling, but each of them takes a slightly different approach to their own user interface and user experience.
The term interaction design was coined in the 1980s, and became widely used the following decade. It has since become a core part of the development process for all kinds of digital products. Today, the field is an established profession, and the Interaction Design Association has over 150,000 members around the globe.
Real Tools and Deliverables
The goal of an interaction designer is to deliver good interactions. But what does that actually look like?
In many cases, the work of an interaction designer will be continuous with that of a UX designer, so there may not be clearly demarcated deliverables. But when there are, they may include:
- Flow diagrams
- Wireframes
- Interaction notes
- Prototypes with animations
More often than not, there is a back-and-forth process between IdX and UX design. Feedback from user experience designers helps interaction designers do their job, and vice-versa.
Common misconceptions about IdX
There are many misconceptions about IdX, in large part because it is a somewhat overlooked field.
You don't need good interaction design if your UI looks good. Actually, it is entirely possible to create an amazing looking website that is completely unusable. On the other hand, an interface may be bland and boring looking, but a breeze to use- think of a basic microwave, perhaps.
Interaction design is just microinteractions, like clicking buttons. In reality, interaction design covers interactions at all levels, from big to small, and these levels are completely interwoven. Pressing a button is an example of a small interaction, but it could lead to a checkout portal that involves typing in financial information. That in turn would require drawing in more and more interaction patterns to ensure security, trust, and ease of use.
You don't need creativity for interaction design, because everything has already been done before. While it's true that there are tons of existing interaction patterns to draw from, and that you shouldn't reinvent the wheel if you don't have to, the digital world is constantly changing. New practices arise all the time, and you need to be able to use them properly. Unless you want a basic, stripped-down website with no unique features whatsoever, some amount of ingenuity will always be necessary to engineer your ideal website.
The Five Tools of IdX
Researchers in interaction design have come up with five categories of things that designers can use to create better interactions:
- Words. Words provide literal instructions or commentary for users. This could be copy on a website, a button text, or something else.
- Visual representations. Icons, images, color choices, and even font stylings can make a difference in interaction design.
- Physical objects or space. With regards to the interaction design of websites, this primarily applies to questions regarding which device is being used, and how: seated using a desktop computer? Lying down with a mobile device? Or on the couch with a tablet? And of course, your wifi-connected toaster or refrigerator will have their own set of unique possibilities to consider.
- Time. Time is an important part of feedback, and ongoing feedback drives the continuous loop of interaction between user and machine. When they click a button, how long should the animations be? When there is a loading screen, how should time be represented?
- Behavior. This is really the "action" part of interaction. How should a user behave with the system? How should they feel about it? What should they think as they interact with it?
When it comes to designing websites, all of the above are important. Interaction design should help guide the movements and choices that users make while they are on your website. Good interaction patterns will make those movements and choices obvious and easy. Poor interaction design will leave users stuck and confused.
Examples of good and bad interaction design
Good interaction designs make the user’s experience easy, continuous, and adjustable to their needs.
- Pull-to-refresh on mobile apps. This simple gesture is ubiquitous, and replaces the need for a standalone button.
- Password reveal eye icon. This gives user control and reduces login errors.
- Auto-save in Google docs. Sometimes the best kind of interaction is not needing to interact at all. Auto-save makes it so that users don't need to stop what they are working on to hit a floppy disk icon.
Bad interaction designs are often just a result of poor planning, but they could also be instances of UX "dark patterns", techniques used to manipulate users.
- Tiny 'X' buttons on mobile ads. These frustrating buttons make it difficult to dismiss the ad.
- Content blocking pop-ups. Many websites hit you with a request to sign up for a newsletter as soon as you visit. This impedes the user's ability to interact with your content. There are better places for requests like these, such as after making a purchase.
- Hidden navigation menus. When important functionality is at the bottom of a list of options, hidden behind a hamburger button, users will have to hunt to find it first.
Core differences between UX and IdX
While interaction design is a key part of the UX process, its scope is narrower.
UX design considers the full journey—from content structure to emotional impact—while interaction design is concerned with the mechanics of user behavior: how people input, receive, and respond to digital cues.
In other words, UX is the full experience.
Interaction design defines the moment-to-moment logic that supports it.
Areas of Overlap
Interaction design and UX are deeply connected—collaborating to ensure experiences are smooth, intuitive, and goal-oriented. While UX looks at user satisfaction holistically, interaction design ensures that each step along the way is frictionless and functional.
You can think of the two fields as overlapping on the following:
Facilitating smooth digital experiences. IdX and UX are both concerned with ensuring that the user does not get stuck when using your product.
Enhancing usability. Both fields focus on making applications intuitive for any class of user.
Empirical testing. IdX and UX design aim for real, provable results. Some form of actual user testing is important for each to determine that the systems that are built actually work.
UI, UX, and IdX: How the three work together
While UX and IdX are frequently confused, the adjacent field of UI design is also often misunderstood. One of the best ways to understand each of them is to understand how the three work together.
To sum up: if you drew a Venn diagram with UI Design on one side, and UX design on the other, then IdX would fall in the space in the middle. IdX connects the interface to the user experience.
The user interface, created through UI design, is what happens on screen. It contains all the visual workings of websites, like buttons, forms, menus, and more.
The user experience, created through UX design, is the overall set of experiences that happen to a user as they use your website and application. This is impacted by visual factors, like colors and fonts, as well as interactive patterns, like the sequence of clicks needed to submit a form.
The interactions on your website, created through interaction design, bridge the gap between the interface and the user. Put together, they create the user experience.
.jpg)
Conclusion: Interaction design as part of UX strategy
At Composite, we treat interaction design as a strategic layer within our UX process—one that drives clarity, efficiency, and user trust. We've seen firsthand how refining microinteractions and flow logic can boost engagement and simplify complex experiences.
To this end, we've been able to dramatically improve speed and user experience for many of our clients when overhauling their websites. One of our clients, Notable, saw a 33% increase in web engagement, in part due to improved interaction design on their website.
Do you need a new website, a renovation for your existing website, or a migration from another hosting platform? Let’s talk!
