Guides

UX fundamentals: interaction design

We’ve written this guide as an introduction to the fundamentals of IxD.

Back to Resources

UX is no longer just a concern resigned to technical teams; it’s now a focus that transcends departments as more and more businesses are realizing the importance that good UX has on the success of their websites, products, and services.

In today’s saturated online landscape, your tech-savvy users are looking for more than mere functionality; they want to be left feeling delighted with every interaction. And if they don’t get that, if they have a negative experience while engaging with your brand even just once, chances are they won’t come back. If you can’t offer the positive user experience they are looking for, you can be sure that someone else will. Designing a good user experience hinges on the interactions within it and so, Interaction Design forms an integral part of good UX Design. But, understanding all of the concepts that contribute to successful Interaction Design and knowing where to start can be an overwhelming feat.

We’ve written this guide as an introduction to the fundamentals of IxD to give you the basis you need to design for better interactions and ultimately, a better user experience

What is Interaction Design?

Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving with the world. —The Interaction Design Association (IxDA)

In a nutshell, Interaction Design is about making the connection between a device, its interface, and the user; it facilitates the actions we want to take with any given system.

Every time you make a choice on a digital device, interaction design is what responds; it makes a framework of text and objects useful, learnable, and ultimately, intuitive. It delivers that almost-human element that makes technology enjoyable and pleasant to interact with.

Good Interaction Design

Centers on Human Connection Interaction design isn’t only about how interfaces behave, it’s about how people behave and then adapting the technology accordingly. You first must understand your users on a level where you can determine what they want and expect, and

then you have to determine how to facilitate those needs within the technological constraints of your website, product, or service. This is a key concept in building a positive user experience.

Why Is Interaction Design important?

Interaction design seeks to go beyond making something merely work well but focuses instead on creating an experience for the user that feels intuitive, exciting and in the end leaves them feeling like they’ve encountered something great.

Touchable, scrollable interfaces have created a new level of expectation; now, it’s all about how users feel while using technology. If interactions are difficult or don’t meet user expectations, they will contribute to a negative experience. Interactions are the essence of all user experiences—without good interactions, there won’t be a positive user experience.

IxD and UX

Interaction design is concerned with specific actions between user and device, whereas user experience design accounts for the all-encompassing, user-focused aspects of any system.

There will always be overlaps with the two disciplines, but each is integral to the other. Good interactions will positively contribute to a good user experience. The image below shows the many facets of User Experience Design and where Interaction Design fits in the bigger picture.

IxD and UI

Another tricky distinction is that between IxD and UI. The User Interface (UI) is what the user sees and Interaction Design is how users engage with the UI, and how it facilitates the desired actions of the user.

The ideal result is that users will delight at the functionality and intuitive nature of the interface, which forms their broader opinion of the product, which in turn, forms part of the overall user experience. A poorly designed interface is like interacting with someone at a help desk who is rude, unhelpful, and unwilling to do their job—nobody wants that! User interaction is a ‘conversation’ between your user and the product so there is an expectation for the product to interact in a pleasing and helpful way.

A poorly designed interface is like interacting with someone at a help desk who is rude, unhelpful, and unwilling to do their job—nobody wants that.

The 5 elements of Interaction Design language

Communication is the basis for interaction, and written text is a central component of communicating effectively online. From a design perspective, written text is often overlooked as an almost secondary element, but it actually influences and is influenced by the design. Everything on your site should be designed with the content in mind. The words you use will greatly influence the overall impression of your offering and will certainly play an important role in guiding interactions.

Visuals

Visuals are what users interact with. These can be graphics or elements included in layouts—basically anything that isn’t text. You should include only the necessary elements so as not to overwhelm the user; make the intended and possible interactions accessible and not confusing.

Objects/Space

This refers to the physical hardware that the user is interacting with i.e. the things that allow for interaction. So this could be a mobile device, a screen, or another system. The object of interaction will determine the kind of interactions that are possible within that ‘space’.

Time

Time is what users interact within; it’s the duration that the user spends interacting with the first three elements and includes the ways in which the user might measure progress. Time is important in managing the expectations of your user. If an action is taking longer than expected to complete, the user might deem it broken or might question the legitimacy or functionality of the entire system.

Behavior

Behavior is how users and the interface act & react. The behavior, as well as time, defines the interaction itself. It is the emotions and reactions that the user has when interacting with the system and the way that the system responds.

The core concepts of Interaction Design

The action-reaction feedback loop

Interactions are comprised of an action-reaction feedback loop; this really is the essence of all interactions, online or in the physical world. For example, you press a doorbell (action), you hear the bell ring (reaction) and then the door is opened/answered (feedback).

This loop of action-reaction is at the heart of all good interactions and only when all three elements are satisfied, does the interaction work well. If you press the doorbell and nothing happens, you assume the functionality is broken, hindering your experience of carrying out the desired action. The essence of interaction hinges on this loop, it’s the only way that your users know that the action is complete.

Affordances and signifiers

The concept of affordances is that a function should be obvious, and essentially suggest its own use (i.e. a keyboard ‘affords’ typing). Signifiers are what hint at the affordance (i.e. the keyboard’s flat surface and clearly defined keys with letters on them ‘hints’ that you can type characters).

One of the most common signifiers that most online users have become accustomed to is the blue underline for hyperlink text. Users know this signifies that clicking on that text will direct you to another page.

Learnability

In an ideal world, a user would remember every function after only a single use, but unfortunately, that’s not always the case. The concept of learnability and intuitiveness must be designed into the actual interface of your website or product and is a vital component of designing good interactions. Tesler’s Law of the Conservation of Complexity suggests that the

complexity of any system must be dealt with at the development stage of your UI. Similarly, successful interaction design requires reducing complexity down to consistent and predictable elements.

For example, if the confirm button is on the right for one action on your site, don’t switch it to the left for the same action on another page. Consistency will create expectation in the user through what they have ‘learned’ about the functionality; this will ultimately lead to successful interactions in your system.

Usability

In many ways, usability is the bare minimum of interaction design. If your audience can’t use your product, they certainly won’t want to use it.

In the book Human Computer Interaction by authors Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale, usability is broken down into three principles:

• Learnability: how easily can a new user learn to navigate the interface?

• Flexibility: how many ways can a user interact with the system?

• Robustness: how well are we supporting users when they face errors?

When it comes down to it, a system’s usability should be effortless. The less attention the user pays to figure 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.

Microinteractions

Microinteractions are the small, contained actions that only perform one main task. The Facebook ‘like’ functionality is one of the best examples of this. It only exists as a single use-case, to perform the task of ‘liking’ something. Microinteractions can be seen everywhere, from devices in your home to apps and online interfaces.

Microinteractions should be almost imperceptible to your users; they should be a natural and intuitive element of your design. Users should be able to operate them almost without thinking.

However, this doesn’t mean that they should be ignored or given less attention. Because users expect them and almost don’t notice them being there, if they don’t function as they should, it may be even more noticeable.

With microinteractions comes an opportunity to turn something mundane into something that contributes to the delight of your user. Good interaction design is often largely comprised of well-considered microinteractions. They will only become more important as the spotlight continues to shine on UX; start paying attention to microinteractions.

6 step process for building good interactions

As with any process, success can only occur after the goals have been defined. When you start discussing the goals of interaction design, it very quickly becomes people-centric. The process that you follow when defining the user experience can be applied to the interaction design process specifically and the user-centric approach is perhaps even more applicable here.

1. Define personas

The first step in building any user experience and in turn, any interaction, is to define the people you are designing for. Only by understanding the goals, needs and wants of your target persona, will you be able to design effective interactions within the user experience.

2. Identify scenarios

Once you have your personas defined, you can identify the scenarios that they typically would find themselves in. Where are they when they’re engaging with your website, product or service? What is the motivation that has brought them to you? In what way are they trying to engage with you? Understanding your users’ situation will mean you can fully empathize with them and build effective interactions that meet their expectations. As we know, empathy is the key to a strong user experience.

3. Map the experience

Next, you must document every stage of the journey that your user will experience. It can be helpful to treat it as a narrative and include emotions, obstacles, tasks that the users might encounter. Put yourself in the place of your user, how do you expect the system to respond?

Document as many stages of the experience as possible to effectively design the interactions within them.

4. Wireframe interactions

Wireframing/prototyping is the most effective way to give life to the interactions you have designed before they reach the development stage. Draw out the interface on paper with all of the intended functionality, then ask as many people as possible to ‘role-play’ the interaction. This process will highlight any potential hurdles or unexpected user behavior that you may have overlooked; the intended interactions should be obvious and ideally, intuitive.

5. Simplify

Take a look at the process and the interactions you have mapped out, have you created the least number of steps possible to carry out the desired action? Can it be simplified at all? If your user feels they are jumping through unnecessary hoops to reach their goal, they are likely to get frustrated or even abandon the process.

6. Limit choices

Cutting down the number of options that your users have for any given step will also help to simplify the process and will minimize their potential confusion in making choices. This can be a difficult process for Interaction Designers in the fear that part of the user base will be alienated but it will ultimately lead to a better and more fluid experience as users won’t be overwhelmed with options and will be more likely to take the desired action.

What’s next for Interaction Design?

As the need for a good user experience intensifies, so too will the need to explore new realms of interaction - users will always be looking for more. The tech-savvy generation that we are, the newest thing is never enough. We want to be wowed, we want to be delighted.

Will it become more and more difficult to do this as time goes on? Our expectations are moving as quickly as technology will allow, so what does this mean for the future? We’ve come up with a few predictions for things we want to see more of in IxD.

What’s next for Interaction Design?

As the need for good user experience intensifies, so too will the need to explore new realms of interaction - users will always be looking for more. The tech-savvy generation that we are, the newest thing is never enough. We want to be wowed, we want to be delighted.

Will it become more and more difficult to do this as time goes on? Our expectations are moving as quickly as technology will allow, so what does this mean for the future? We’ve come up with a few predictions for things we want to see more of in IxD.

Immersive interaction

The term interaction has taken on a whole new meaning with the level of complexity and immersiveness that parallax design offers. We will see interaction taken to the next level with users expecting to be drawn into new virtual realms. Interaction will no longer mean simply engaging with an interface, but being consumed by creative and immersive experiences.

Storytelling takes center stage

Being immersed in a digital experience really centers on storytelling; you have to care about the experience. Storytelling is the best way to build a compelling experience and draw your user in by empathizing with them and giving them a narrative to interact with. We expect to see exciting and creative new ways of telling stories with interaction design.

Internet of Things/Device interconnectivity

The rise of the ‘Internet of Things’ boasts the question, will human-computer-interaction no longer be the focus but instead device-to-device interaction? As interconnectivity continues to rise, devices must know how to ‘speak’ to each other. Will the interaction designers of the future be designing for dialogues between devices? We can’t wait to find out!

Subscribe for the lastest CX content

© 2021 GetFeedback, Inc.|888-684-8821|Privacy notice|California privacy notice|Terms of use|Cookie policy

*Net Promoter, Net Promoter System, Net Promoter Score, NPS and the NPS-related emoticons are registered trademarks of Bain & Company, Inc., Fred Reichheld and Satmetrix Systems, Inc.