March 21, 2019 Last updated March 15th, 2019 108 Reads share

Interaction Design: Definition and Implementation Guide

Image Credit: Depositphotos

Technology has made industries more competitive these days. Automation and efficiency are slowly becoming staples in traditional business processes. As the need for customer-driven designs and developments arise, companies have to utilize the best concepts and tools in order to keep up with the ever-changing consumer demands. One of the concepts that every company needs is called Interaction Design.

Interaction Design Defined and Why it Matters in 2019

Interaction Design (IxD) is one of the most important components within the user experience (UX) spectrum. In layman’s terms, it is the design of how users interact with a certain product. Oftentimes, IxD is associated with apps or websites, but it’s actually applicable to anything that users can touch.

In 2019, the way the product interacts with the user will be just as important as the way the user interacts with the product. The material design will also have an impact on the overall experience while adding features like micro interactions in the design will go a long way in ensuring the customer will continue engaging with your product.

The Five Dimensions of Interaction Design

 

Great is characterized by a successful implementation and combination of different dimensions to achieve the best user experience possible.

1D: Words

The first dimension is the most basic and fundamental of all design dimensions. It is used in instructing, labeling and giving information to the users. Google, for example, utilizes text elements in the majority of its design to let the users know what basic interactions are available. Even the Google logo itself is made of text elements.

2D: Images

The second dimension is a graphical supplement to words. You can see it as website logos, photographs, colors, images, and other graphical elements. Icons like the shopping cart for e-commerce sites, magnifying glass for search, and tickets for vouchers are some of the common images e-commerce websites like Lazada use to facilitate customer interactions.

Keep in mind that these images must not only grab users’ attention, they must also serve a function.

3D: Space or physical objects

The third dimension or space is where the interaction takes place. It can be a touch screen, a mouse, a touchpad, a laptop or smartphone, basically any device that allows the user to interact.

As well, users interact with products in different spaces. For example, they could be comfortably sitting on their beds while browsing your site on their laptops, or they could be in a grocery queue swiping through your app on their phones. Consider the devices people use to interact with your product, as well as the spaces they’re in the design process.

4D: Time

This refers to elements like animations and sound that affect users’ concept of time. Nobody likes to wait, but if you can come up with a cool enough animation, you can make the unavoidable wait worth their while (or at least make it seem so).

Additionally, similar elements allow users to track their progress. When you’re uploading something, for example, the animation lets users know how close they are to be done.

5D: Action or behavior

This refers to how users interact with your product. Use simple and learnable actions such as swiping down from the top to refresh, swiping up to scroll down, double tapping an image to enlarge, holding down button for additional features and other functions, among other common gestures.

As well, determine how users react to the different elements of your product. Did they find any design element problematic? Was there something that performed well in facilitating interactions?

Use these kinds of feedback to improve the user experience. As well, consider how the previous four dimensions influenced user behavior when interacting with your product. This will help you come up with a more seamless interaction design.

Interaction Design Principles

 

In order to create a great interaction design, you have to be familiar with the psychological principles that influence positive interactions. In e-commerce websites, for example, these principles are important for current customers, as well as seasonal buyers, since your overall goal is to make interactions easier for everyone involved.

  1. Fitts’ Law

In essence, this posits that farther the buttons are from each other, the longer it will take to navigate; and the smaller the buttons, the longer time it will take to press.

Spaces by InVision projects is a good example of an IxD that utilizes Fitts’ law. Spaces iOS application uses big frames for images and shorter distances between functions so users can quickly go from one task to the next.

  1. Hick’s Law

Basically, British psychologist William Edmund Hick came to the conclusion that the number of choices affects the reaction time. In application to IxD, when you put too many choices in front of your user, you will tend to cause confusion and potentially cause your customer to lose interest.

For example, in Airbnb, a logged-in user will quickly be met with simple selections of either searching for a place, selecting one of the three choices: homes, experiences or restaurants, or knowing more about Airbnb plus.


This makes initial interactions simple, allowing users to proceed before getting into more complex tasks like evaluating possible choices and inputting personal information.

  1. Poka-Yoke Principle

Poka-Yoke is a Japanese term that roughly translates to error proofing. It is a part of your IxD that protects users from misclicking or accidentally doing undesirable actions. Here are some ways to apply Poka-Yoke in your website or application’s interaction design:

  • Creating prompts whenever an irreversible action is about to be done like deleting from the Google Drive Trash bin.
  • Making sure that potentially irreparable actions such as deleting accounts, accessing sensitive information and deactivating accounts are placed in hard-to-reach places that would require multiple clicks to access. A good example is Instagram account deactivation that would require selecting a reason from a drop-down box and typing in your password.
  • Asking users if they’re sure about a certain action, and having a backup system in place if they make an error. A good example of this is Samsung’s gallery deletion prompt.

The 7 Steps in Interaction Design Implementation

 

With all the dimensions and principles in mind, here are the 7 steps to implementing your interaction design:

  1. Start by doing research about your users

The most important step would be to think about your customers or clients and what their preferences are. For example, Etsy deploys creative GIFs as part of its website because most of its users are artists who sell their creative outputs online.

  1. Develop thinking in systems

Make sure that you are systematic in your approach. Group together similar and related elements of your design. A good example of this is Amazon’s gift cards that sort the events by the occasion but are still all in one place.

  1. Create prototypes early

There is no perfect product. This is why it would be good practice to prototype early and often. This allows you to find out which elements work, and which don’t, enabling you to learn and come up with a better product with every prototype.

  1. Direct user’s attention

Enhance your interactive design by emphasizing key parts of your product. For example, OnePlus6T is advertised with a large image set in a hot pink background to emphasize the company’s current flagship device.

Utilize the dimensions of IxD discussed above to direct your users to interactions that would make their overall experience more seamless.

  1. Educate your users

Make sure that your product is easy to learn and use. Label your buttons appropriately and make sure that your users know what will happen when they click or tap on the buttons. You can do this by creating prompts for first-time users, as Slack expertly does.

Alternatively, you can create a frequently asked question (FAQ) page for new customers.

  1. Simplify the decision-making process

According to Hick’s law, the number of choices directly affect the length of time in making a decision, so make sure that you simplify the process by giving only a few options to select from.

  1. Re-engage your customers

Make sure to expand your focus beyond first-time users. After a customer’s purchase, for example, you should re-engage them by offering discounts and promos whether as a popup or through their inbox. This is an example of Agoda’s post-sales re-engagement campaign:

Instagram Stories does a good job of re-engaging users whenever they launch a new feature by telling them exactly how the new feature works, encouraging users to try the feature, thus furthering engagement.

Closing Thoughts

In 2019, customers want products that are convenient and easy to use. Interaction Design will allow you to get ahead of your competition by prioritizing your users’ engagements with your product, which ultimately lead to better customer experiences. This is why you need to include its improvement in your business strategy this year and beyond.  

What parts of your interaction design are you looking to improve? Which brands’ IxD do you admire? Let us know in the comments section.

Hand presenting web search concept

Aaron Chichioco

Aaron Chichioco

Aaron Chichioco is the managing editor of designdoxa.com. He loves to write about online marketing, eCommerce and web design. He has a vast experience in overseeing daily operations of several online businesses since 2011. You can follow Aaron on twitter at @Aaron_Chichioco

Read Full Bio