This is an excerpt from the Interaction Design Best Practices ebook, written by Jerry Cao, Kamil Zięba, Matt Ellis, and originally published on UXPin.com.
The Interactive Imperative: The What & Why of Interaction Designs
Interaction is the essence of all user experiences. It is the conversation between your product and your user, and if the conversation is boring, your user will leave and talk to someone more interesting.
In today’s world of infinite-scrolling websites and touch-driven mobile apps, you must understand interaction design (abbreviated as IxD) in order to create user experiences that feel fluid and lifelike. As you can see above, interaction design requires an understanding of multiple UX disciplines — which makes sense, since it’s not easy to make a system of objects and text be friendly, learnable, and useful. Interaction design is the conversation between your product and user. If the conversation sucks, they’ll just leave.
Let’s start by defining IxD, breaking down the core principles, and explaining a 5-step process to better interaction design.
Defining Interaction Design
IxD is everywhere: BluRay player menus, smartphone controls, your Facebook page. Every time you make a decision on a digital device — checking sports scores, returning your mom’s email — you project your needs into a machine that must then respond as though it knows you.
- What Is Interaction Design?
Interaction design requires art and skill to move beyond human-to-computer interfaces and embrace human-to-human design. The skill of IxD is taking into account the human element of your users, and in creating that human connection built from human-to-computer interaction (HCI).
It’s important to distinguish IxD from UI. As discussed in our free ebook The Guide to Mockups, the UI is what the user actually sees. IxD is concerned with how users engage with the UI, and how that UI will respond so that users knows how to accomplish their goals. As a result, the user’s enjoyment of the interface (which becomes part of the larger product enjoyment) forms the overall user experience. Interaction design makes you think beyond human-to-computer interfaces and embrace human-to-human design.
You can’t really design a user experience any easier than a business can just make more money, but you can certainly design better UIs and interactions. And that’s why IxD is so imperative — it makes the difference between having a system that merely works, and having one that your users actually enjoy.
Your design is an extension of your brand. You need to think about the UI as your digital staff, the “people” who facilitate interactions between your “customers” and your “store.” Interaction design, then, is how your digital staff engages with customers to meet their needs. Naturally you’ll want your staff to be helpful, accommodating, and friendly — that will make your customer enjoy shopping at your store. But a poorly designed interface is like a staff that’s unhelpful, rude, and at times doesn’t even do their job.
Making the right decisions in UI design is like hiring the right staff. Making the right decisions in interaction design is like training that staff to work in the most efficient and pleasant manner possible.
2. Why Does Interaction Design Matter?
To understand feedback as the heart of IxD, let’s look at a story of analog interaction design told by Robert Fabricant of Frog Design in his piece for FastCo.Design. He explains the evolution of the UI for the NYC subway, which is a prime example of how technology is only as powerful as the interactions it produces. If you’re old enough to remember subway tokens, that’s a good place to start. You put the coin in the slot (an interaction), you heard that satisfying click as the coin fit into its place in the mechanism (feedback), and that’s how you knew you now had access (result). That sound of the coin falling into place was not intentional, but rather an accidental interaction design decision, albeit a fortunate one. This action-reaction feedback loop is the groundwork of all interactions, digital or analog.
Then came the metrocard, which replaced the coin drop with a card swipe. This made using the subway easier because users didn’t need to carry around coins, but as an action, the swipe proved a little more difficult (and sometimes takes two or three tries to get it right). It also didn’t create the click noise of a token sliding into place, signalling to people to lean into the turnstile.
While the metrocard makes people’s lives easier, some people still talk fondly of the old tokens for the clearer feedback and simpler interaction. From a digital perspective, this means that not everyone will be quick to abandon the status quo unless your site or app takes into account all the nuances and shortcomings of human behavior. Your app might be a technological marvel, but don’t forget that it’s people who need to interact with it.
The 5 Pillars of Interaction Design
Good interaction design is driven by a human connection. But what drives human connection and how does that translate into a computerized interface? The answers to these questions aren’t so black-and-white; but thankfully Andrew Maier, designer and co-founder of UX Booth, explains in an article for his site some of the core principles of interaction design. In our experience, we’ve found 5 concepts to be critical for even the most basic interaction design.
1. Goal-driven Design
While you might not be the person who’s conducting the user research (especially if there’s a UX researcher or UX designer around), you still need to know how to apply the results. As Maier writes:
In every design discipline, the artist must first acknowledge their constraints, and then devise a solution. In the case of interaction design, users themselves generally form the basis of an interface’s constraints.
So, discussing the goals of interaction design becomes very people-centric, especially your target user. In our free ebook The Guide to UX Design Process and Documentation, we outlined 3 fundamental tactics for designing for your target user, which can be applied just as well — perhaps better — to IxD specifically:
- Personas — Personas are fictional characters created from the behaviors and psychologies of your target users. Personas come in handy as a reference when making crucial design decisions, for example, “What kind of checkout process would Sally the Seasonal Shopper prefer?” To take personas a step further, try turning them into characters.
- User Scenarios — Related to personas, user scenarios explain how the personas act when using the site. For example, “It’s Black Friday, and Sally the Seasonal Shopper has a long list of presents to buy online before work.” User stories urge you to think critically about your personas’ behaviors so you design the UI to suit them. Kristopher Layon gives more details in this piece for A List Apart.
- Experience Maps — Going one step further than user scenarios, experience maps chronicle all the different conditions surrounding a single interaction, including emotions and external circumstances. “Angry that her skiing trip ended in a broken leg, Sally the Seasonal Shopper must do her Black Friday Christmas shopping online — though as quickly as possible.” Chris Risdon, Design Director at Adaptive Path, explains the anatomy of an experience map in this post.
Following these people-centric methods for general design will help you stay focused on what’s most important for your IxD: the people. For more information on how personas and scenarios can benefit your interaction design, we recommend reading this piece on goal-driven design from Christina Wodtke, former General Manager of Zynga.
2. Usability
In many ways, usability is the bare minimum of interaction design. If your audience can’t use your product, they certainly won’t desire it. For an example that goes above and beyond, let’s look at EventBrite’s seat designer. This online app lets event organizers create a reserved-seating event from start to finish with a high level of detail (such as determining rows, tables, and a dance floor, if needed). It consolidates what otherwise would be a multistep, multi-program process into a single linear path.
A system’s usability should be effortless. The less attention the user pays to figuring out how to use the system, the more they can accomplish the task at hand. For this reason, usability is essential — a system must first be usable before you can work on making it desirable. To learn more, ZURB illustrates how usability, utility, and desirability are all required for good design.
3. Affordances & Signifiers
The concept of affordances is that a function should speak for itself, and suggest its own use (i.e., a road affords walking). Signifiers are what hint at the affordance (i.e., the road’s flat surface signals you to walk with your feet). One of the most common signifiers is the blue underline for link text. This is a cue to almost every user that clicking on the text will take you to a new page. Without signifiers, users won’t be able to perceive the affordance.
The play button on a video invites you to watch it, whereas a video with no play button might be mistaken for a static photograph. In the above example, you can see the progression of button design. The first stage lacks any signifiers and looks just like standard text, while the third stage starts to resemble a button with its rounded edges.
Signifiers also work on a metaphorical level, because people also need to know why they would interact with something, not just if it’s possible. In the above iPhone dock example, you can see how the rounded edges let us know that we can interact with the buttons, while the metaphorical images (phones, envelope, musical note) let us know what purpose will be served.
4. Learnability
In an ideal world, a user would remember every function after only a single use, but we do not live in idealism. The reality is that familiarity and intuition must be consciously designed into the interface.
Tesler’s Law of the Conservation of Complexity states that every system has an immutable amount of complexity that must be dealt with during development, specifically when designing your UI. Successful interaction design boils down this complexity into the most comprehensible manner through consistency and predictability. For example, don’t make some links open in a new tab while others redirect the user. Likewise, don’t use a lightbox for some images while others open in a new tab. Consistency creates predictability, which improves learnability.
A common tactic for improving learnability is using UI patterns. Many sites and apps already use these patterns so the user is familiar (plus the design is consistent), and you’re still allowed plenty of creativity to customize the design elements for your site.
For example, breadcrumbs — the navigational strategy that lists where on the site your are by showing its place in a hierarchy — is a common web pattern for helping users get around. It doesn’t matter what site you’re on, if you see breadcrumbs, you understand how they work. This familiarity lends itself to a product’s learnability. And when products are learnable, in encourages people to use those products, which also improves usability.
Ultimately, the goal of learnability is to hook users on your product faster, as explained in serial entrepreneur Nir Eyal’s best-selling product design book Hooked: How to Build Habit-Forming Products.
For a fuller list of web UI patterns, check out this, this or this pattern library. We also wrote this free e-book analyzing 63 of the most popular web UI patterns.
5. Feedback & Response Time
As we saw by the NYC subway example, feedback is the heart of interaction. If user interaction is a conversation between your user and the product, then your product better participate in a friendly, interesting, and helpful manner.
Whether an elaborate animation, a beautiful micro-interaction, or a simple beep, a response gives the user the satisfaction of knowing if their task was or was not accomplished (and what to do next).
In this example from Hootsuite, the owl simply “goes to sleep” after a long period of user inactivity, which makes sense since the app pulls in data from Twitter (and doesn’t want to overload the API). The feedback is intelligent and fun, and actually turns a possibly negative experience (stopping updates) into a positive one.
It’s also important to mention that a key factor in feedback is response time. The best response times are as immediate as possible, with any lag time killing the user’s momentum. If you don’t understand why, imagine how infuriating it would be if you were playing a guitar, and every note came seconds after strumming. The best interaction designs are barely there: they respond promptly and don’t require much thought.
5-Step Process for Improving Interactions
Now that you know the fundamentals, we’ll describe a process we’ve found helpful to nailing the details.
As notable interaction designer Stephen P. Anderson advises, it can be eye-opening to have someone pretend to be your interface while you interact with them as a user. You’ll be able to hear out loud any awkward responses from the interface, which will help you avoid creating robotic interactions that feel inhumane. Once you’re done with the roleplay, you can start scripting the narrative and restructuring interaction.
Here’s the process:
1. Roleplay the interaction
As Anderson suggests, Grab 2 people, one to act as the interface and the other to take notes. Make a browser window prop to be held by the interface person and show the interface on a projector. Then, start a dialog with you as the user explaining their goal, and the “interface” limiting their responses only to labels, menus, and anything else on the UI. Check out this video and transcript to see how it plays out.
2. Map out the narrative
Document each step of the experience, including tasks and emotions. As discussed in The Guide to UX Design Documentation, this can be as simple as a few user scenarios or as complex as a 4-stage experience map.
3. Simplify the steps
Users sometimes have goals that require many steps (buying a car online, booking airline tickets). As recommended in The Guide to Prototyping, your interface must be able to separate a complex goal into simple steps (like asking for a destination, then a departure/arrival date, etc). For example, Virgin America’s stepped form design make the booking process feel much easier than it is.
4. Limit user choices
This is probably the hardest step, but you must minimize the actions available to users. Always ask yourself if all the choices are critical for that moment in time. If not, separate it for another conversation. As you can see in the example below, this also ties into the previous point because it’s better to have an extra step that feels effortless, rather than less steps but more clutter.
5. Pay attention to micromoments
According to Anderson, a micromoment is when a person might hesitate, advance, or stop when engaging with interfaces. If you look back to the role-playing exercise, you’ll remember the moments of apprehension. To clarify the conversation, take advantage of microcopy and UI patterns like contextual actions and selection-dependent inputs (which we discuss in Web UI Patterns 2014).
Just like a magician’s trick will fail if the details are off, just one bad interaction can ruin the entire user experience. The process we described above will help you approach interaction design as a conversation rather than just a way of animating interfaces. If you’d like more inspiration and examples of good interaction design, this Quora thread includes great sources ranging from films to websites like Core77 and PatternTap.
Takeaway
Interaction design isn’t about how interfaces behave, it’s about how people behave, and then adapting technology accordingly. It’s a two-part challenge: first, you must know your target users on a level that reveals what they like and what they expect; second, you must figure out how to satisfy those needs given your technological constraints.
When in doubt, think about your own experiences interacting with similar designs, and use that to improve your own designs. And of course, keep reading — we’ll explain the finer points of interaction design in the following chapters.
How does your current IxD perform? Take a look at this IxD Checklist to pinpoint any areas of improvement.
