January 31, 2019
12 Competencies of UX Design No. 6: The Art of Interaction Design
By Ward Andrews
[===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][= [===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][= [===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][= [===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][= [===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][= [===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][= [===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][= [===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][= [===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][= [===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===] ==][===][===][===][===][===][===][===][===][===][===][===][===][===][===][===][=
Interaction design is the "language" and "feeling" that ties a digital workflow together. It communicates feedback to users, advances them through a journey, and guides them toward their goals in a way that feels comfortable, intuitive, and - when done well - genuinely delightful.
What Is Interaction Design in UX?
Interaction design is how a digital product responds to a user's actions. It is not just about function - it is about the quality of that response. A product that simply works is one thing. A product that works and feels right is another.
Think back to your favorite arcade game. You drop a quarter in the slot. Cheerful lights flash, a jingly tone plays, and a brightly colored start screen appears. Technically, the start screen alone would have been enough to tell you the game had begun. But without those lights and sounds, it would not have felt the same. The machine interacted with your input in a delightful, stimulating way - and that made the whole experience better.
The same principle applies to virtually any digital product. A quality digital experience does not only respond to user actions (what we call feedback) - it leverages that feedback to help users achieve their goals in the best and most delightful way possible.
Interaction design plays an enormous role in reducing user friction. It is the connective tissue of a workflow. Get it right, and users feel empowered and understood. Get it wrong, and they feel confused and overlooked.
What Are the Five Principles of Great Interaction Design?
The best way to understand interaction design is to see it done well. Here are the five principles of successful interaction design, using the Drawbackwards website as a working example.
Does Great Interaction Design Help Users Achieve Their Goals?
Yes - and that is its primary purpose. Interaction design communicates to users when they interact, giving feedback, acknowledging where they have come from, and pointing them toward what comes next.
On the Drawbackwards homepage, one goal a user might have is to figure out how Drawbackwards improves user experience and decide whether we are the right team to help them do it.
We start by stating the end state they would want to achieve: "dissolving complexity, creating simplicity." Once we have established where we are going, we prompt users to take the next step: "Let's Begin."
We continue moving users through the site, introducing the Drawbackwards approach. At the end of that initial content, interactive elements appear at the bottom of the page to carry them forward. Wayfinding copy on buttons, arrows, and subtle hover effects help users interact and move toward their next goal - or draw their next conclusion - more easily and in a way that feels natural.
Does Great Interaction Design Accommodate Different Types of Users?
Every user is different. Their goals are diverse, and so are their preferred methods for achieving them. Great interaction design takes that diversity into account and creates flexibility so that different users can reach their unique goals in the best way possible.
On the Drawbackwards site, when a user reaches the end of a page of content, they may feel they have enough information to get in touch - so we give them a button to do exactly that. On the other hand, some users will want to learn more before contacting us, so we have created a route for that too, signified by an arrow and text that changes colour on hover.
These elements might seem small, but they mean a lot to a user. They ease and guide people from wherever they are in their thinking.
How Does Interaction Design Tell Users What to Do Next?
Since the purpose of interaction design is to help users navigate a workflow and achieve their goal, one of its most important functions is communicating next steps clearly.
Take a specific section of the Drawbackwards site - our Design Thinking approach - as an example. In this section, we want users to be able to:
- Easily see how each step in our Design Thinking process builds on the previous one
- Freely explore and engage with each step at their own pace and in the order they prefer
To communicate this, we use an arrow to visually signify "next," while also underlining the current step in a sequenced menu below it. This helps users visualise the entire Design Thinking process end-to-end in a single line, while giving them the freedom to read about each step in whatever order they prefer. The arrows guide them along a particular path. The linear menu lets them hop around freely without getting lost or confused.
How Does Interaction Design Account for User Constraints?
One of the hallmarks of great interaction design is its ability to deliver clarity and simplicity within a user's constraints.
Those constraints can be anything from state of mind ("I'm stressed about my card being declined, so I need to check my account balance quickly") to device ("I hope I can check into my flight on my phone while taking a Lyft to the airport").
Thinking through how and why a user might be feeling, thinking, or doing something while moving through their life helps interaction designers create experiences that fit within those constraints.
Take the difference between the Drawbackwards desktop site and the mobile site. On desktop, the main navigation sits at the top of the page - where it has the best visibility and usability for a desktop user. On mobile, that menu sits at the bottom - where a mobile user's thumbs can actually reach and activate it.
We do this because users on a mobile phone have different constraints than users on a desktop. On desktop, a white button asks the user to begin a story while a menu is exposed above. On mobile, a white button activates a mobile menu that allows the user to enter the story through "Approach" or jump to any other menu content easily. We adapt the interaction and content consumption workflow to suit the context.
How Does Interaction Design Help Users Learn New Processes?
No matter how well a workflow or experience is designed, there is always a learning curve for first-time users. Ideally, moving through a particular workflow gets easier over time.
To help users learn new processes, great interaction design usually strikes a careful balance between established UI patterns and new elements.
Look at the icons in the bottom left corner of the Drawbackwards mobile menu. What do they mean? Our experience with user research shows that almost anyone who uses a smartphone could easily identify the "call" and "email" icons - and to a lesser degree the "location" pin icon - even without any words to indicate it. That is because we used recognisable icons that match what users already see on most mobile interfaces.
Simply put: we use visual language that users already know, so it is easier for them to learn how to achieve their goal.
The Art (and Science) of Interaction Design
Interaction design is equal parts science and art. Much of what works is influenced by data and testing. But truly great interaction design demands a high level of creativity, storytelling, and emotional intelligence.
Great interaction work is influenced by a certain level of intuition, empathy, and creative boldness that unlocks delight and meaning in the interaction. That includes things like adding a piece of content that lightly assists or reassures a user at the moment of interaction, or removing a step from a process that is not needed or can be presented later after the core interaction is complete.
Good interaction designers know how to move an interaction forward by making it clear and engaging. Great ones know where to add delight and meaning without disrupting the task at hand.
This is why the art of interaction design is such a critical competency in user experience. Without a certain level of artistry, experiences would never ascend to the top rung of the experience success ladder. The art of interaction design is a key component in delivering the meaningful experiences that modern consumers crave, show fierce loyalty to, and send to their friends.
Frequently Asked Questions About Interaction Design
What is the difference between interaction design and UX design? Interaction design is one competency within UX design. UX design is the broader discipline covering the full user experience. Interaction design specifically focuses on how a product responds to user input and how that feedback guides users through a workflow.
Why does interaction design matter for reducing friction? Interaction design is the language that ties a workflow together. When it is done well, users know where they are, what to do next, and feel in control. When it is missing or inconsistent, users get confused and drop off. Reducing that confusion is how interaction design reduces friction.
What makes interaction design feel delightful rather than just functional? Delight comes from intuition, empathy, and creative boldness applied on top of solid function. That might mean a reassuring piece of copy at the right moment, a satisfying hover effect, or the removal of an unnecessary step. Function gets users there. Delight makes them want to come back.
How does interaction design account for different devices? Great interaction design adapts to the constraints of different devices. A navigation menu that works well at the top of a desktop screen may need to move to the bottom on mobile so users can reach it with their thumbs. The goal is the same; the interaction is adapted to fit the context.
How do you help first-time users understand a new interface? By balancing familiar UI patterns with new elements. Using icons and visual language that users already recognise from other products means they can start achieving their goal without having to learn everything from scratch. The familiar scaffolding makes the new parts much easier to absorb.
Get Educated