• Home
  • /
  • Blog
  • /
  • What Is Interaction Design?

Interaction design is one of the most important components in user experience design. 

In this article, What Is Interaction Design, we will discuss with you what interaction design is along with the following sub-topics:



Interaction design explained

In a simple explanation, interaction design is about the design of the interaction between users and products. And most of the time, when we speak of products, we often refer to digital products like websites or apps. 

The purpose of interaction design is to help users achieve their goals in the best and easiest way possible. 

You may find that this simple definition of interaction design is quite broad. The reason is that this field is broad as it involves elements such as aesthetics, motion, sound, space, and more. 

Additionally, each of these elements also involves some specialized fields such as sound design use for crafting sounds that are important in user interaction. 

Interaction design vs user experience

There is a huge overlap between interaction design and UX design as both are shaping the user experience in terms of using a product. 

To easily distinguish the difference between interaction design and UX design, the latter is more than just interaction design, as it also includes other areas like user research, user testing, creating personas, and more.

The key difference between interaction design and UX design is also in the way we think about user interactions. 

Interaction design is more focused on the moment when a user interact with the interface with a product and the goal is to improve that interactive experience. 

User experience design, on the other hand, and as discussed, also focuses on the user interaction but this interaction is just part of the journey that the user goes through when using the product. User experience design accounts for all facets of a product or a system. 

Since there is a slight line to differentiate interaction design and UX design, both are interconnected. However, it is impossible to create a good interaction design without UX.


The role of cognitive psychology in interaction design

Cognitive psychology is the study of the mind and mental processes. These processes include attention, language use, memory, perception, problem solving, creativity, and thinking.

Psychology is quite a broad field of study. However, there are several key elements of cognitive psychology that are valued and have helped in forming interaction design as a separate field of study. 

Here are some of the key elements: 

Mental models

Refers to the images in a user’s mind that provide information of their expectations about a certain interaction or system. By learning the mental models of your users, interaction designers can help create a product that feels intuitive.

Interface metaphors

They use known actions that lead users to new actions. An example is the trash icon that usually resembles physical trash by default to alert users of an expected action.

Affordances

Refers to the things that are only designed to do something. However, these are designed to look like they are designed to do something. For example, a button that looks like a physical object that you can push is an affordance designed for someone unfamiliar with the button will still need to understand how to interact with it. 


5 dimensions of interaction design

To have a better understanding of the interaction design, we will discuss what are the different dimensions or dimensions of interaction design, which is a useful model when it comes to knowing what an interaction design is about.

The 5 dimensions of interaction design are first introduced by Gillian Crampton Smith, which studied interaction design. Gillian Crampton Smith came up with four dimensions of an interaction design language. Later on, Kevin Silver who is a senior interaction designer at IDEXX Laboratories added the fifth dimension. 

1D Words

When it comes to words used in interactions such as button labels, they should be meaningful and easy to understand. The goal is to communicate information to the users, but also at the same time, not to overload them with too much information since they can overwhelm the users. 

2D Visual representations

The visual representations refer to the graphical elements like the images, typography, icons, and all the graphical elements that users interact with. They supplement the words that are used to communicate information to the users.

3D Physical objects or space

By physical objects or space, it could be the physical objects that users interact with the product such as laptop, mouse, or a touchpad. You may also expect a physical space where a user utilizes this physical object such as in a crowded space or a room. 

4D Time

This dimension may seem abstract, but it mostly refers to the media that changes in time such as sounds, or videos. 

Motion and sound play an important role in providing audio and visual feedback to a user’s interactions. 

Another important thing to note is the amount of time a user spends interacting with the product. And you question, can users track their progress, or can they resume their interaction later?

5D Behavior

This refers to the mechanism of the product. Some important questions about this dimension are: How do users perform actions on the website? How do users utilize the product? 

In other words, behavior is a dimension of how all previous dimensions define the interactions of a product. This includes the reactions like emotional responses or feedback from users on the product.


Tips when designing for interaction

Define the interface

  • What can your users do with their screen, stylus to directly interact, or mouse to interact with your interface? 
  • What commands can your users give that are not directly part of the product to interact with it?

Provide users clues about behaviors prior to actions taken

  • Does the appearance (color, shape, and size) give your users clues about how it should function?
  • What is the information that you provide your users to let them know what will happen before they do the action?

Anticipate and mitigate errors that can happen

  • Are the constraints in place to help prevent any errors?
  • Does it explain why the error messages occurred and does it provide users to correct them? If not, do they provide any explanation for why the errors happened?

Provide system feedback and response time

  • What feedback does a user get after an action is performed?
  • How long should be your product’s response time after an action is initiated?

Think about each element strategically

  • Is the size of each interface elements a reasonable size to interact for users to comfortably interact with?
  • Are the edges and corners strategically utilized to locate interactive elements such as the menus?
  • Are you following the design standards?

Simplify things

  • Is your information too chunked?
  • Is the user’s end simplified?
  • Are familiar formats used?


Example tasks and deliverables of an interaction designer

When it comes to the entire development process, the key player will always be the interaction designer who has several particular set of activities. These activities include creating a design strategy, wireframing key interactions, and prototyping. 

Design strategy

There are a lot of design strategies to apply but one thing is always certain, the interaction designer should know who he or she is designing for, along with what the users’ goals are. 

These data are provided by the user researcher. The interaction designer will assess the goals in order to develop a design strategy independently or with the help of other team of interaction designers.

The goal of having a design strategy is to better provide common understating between members on what interactions are needed to facilitate user goals.

Wireframes

Once the interaction designer has a good idea of the design strategy, he or she can then sketch the interfaces needed to facilitate the needed interactions. 

And in this stage, the details are the key to getting this work done. You may use a traditional board or sketch pad or you may use some web applications when sketching your wireframes. 

There are some cases where design professionals create the interfaces collaboratively. This will depend on the interaction designer and the particular workflow they are doing.

Prototypes

The next step is creating your prototypes. This step will depend on the project but by default, after wireframing, you can then proceed to creating your prototypes. 

There are many ways in creating an interaction prototype, Some examples are HTML or CSS prototypes or paper prototypes.


Tools to use in creating an interaction design

Like what was previously discussed, we do have several web app tools that you can utilize for your interaction design processes and tasks. 

Whether it is about sketching an interaction or presenting your prototype to a client, you can rely upon these tools to help you.

The goal of using this tool is the same: communication via conversion. The key to speeding up the process is better communication. After all, interaction designers should communicate well. 

Here is a list of interaction tools that can help facilitate conversations. 

Invision

Invision is a popular tool that is used by Evernote and Twitter. This is a prototype tool with a strong focus on communication.

You can utilize this tool to gather relevant feedback from stakeholders, clients, and team members. 

The focus of this tool is the flow as it links pages using hotspots. You can quickly switch between build, preview, and comment mode and it nicely integrates with other tools like Sketch and Photoshop. 

Another interesting feature of Invision is the LiveShare which features real-time in-browser collaborations.

Flinto

Flinto is a tool used by Shopify interaction designer. This focuses on easy and low-fi prototyping for mobile apps. 

It is also a good tool for flows and quick iterations, and it allows you to simply drag and drop mockups and link them via hotspots. 

You can also create fixed headers and footers to make the content scroll underneath. 

Another good feature of this tool is if you share a link by SMS or email, it will automatically be updated as you do your iterations and designs.

You can set timers too to make transitions between screens.

Framer

Framer is a prototyping and interaction toolkit that is based on Javascript. 

This tool allows for codes with visual representations feedback, wherein you can do some test animations and interactions directly on the browser. 

You can curate your animations with Spring physics for example.

This tool is a good tool for an interaction designer to get in the mindset of an engineer. It also integrates with other tools such as Sketch and Photoshop. You can skip several tedious works like slicing. You may also bounce between JavaScript code and PSD files to progress.

And as a bonus tip: This tool is a good starting point for interaction designers who want to learn how to code.

Origami Studio

This is a free toolkit for Quartz Composer, created by Facebook Design team. 

This tool is a node-based design platform, with layers and patches to gives to give you infinite possibilities.  

This is a great tool for interaction designers for instant iteration and collaboration with the developers by exporting code snippets that engineers can use. 

This is a good tool to fine-tune animations and interaction design.                         

Marvel

Marvel is a tool for interaction designers that easily links images with hotpots and implements essential transitions and interactions. 

It has a clean interface, which makes it easy to use when it comes to creating a simple prototype for the web or mobile.

If you are a Dropbox fan, then Marvel is the right prototype tool for you. It automatically saves PSD files and updates your screen with seamless syncing with DropBox. 

Atomic

Atomic is a tool that gives interaction designers the opportunity to prototype, and also interaction design on the platform. 

It provides all the basic graphic tools that quickly test some possible layouts and buttons without the need of using another interaction design tool. 

The interface is clean and intuitive, the same style as Sketch and with the same keyboard shortcuts as Sketch. 

The platform is based on layers and pages, and it can create links via hotspots. 

You may also easily share a link with anyone and invite them to collaborate. 

Axure-RP

Axure RP is a popular tool for user experience and information architecture fields. 

It provides beautiful wireframes that can be created with boxes, placeholders, texts, shape, size, etc gives to users to utilize.

This tool allows interaction designers to document functional specifications and generate prototypes. 

You can generate click-through mockups and even highly functional and rich prototypes with features like conditional logic, dynamic content, animations, and drag and drop. 

The Team Projects allow for simultaneous work with other team members on the project.


Conclusion

These days, digital design is considered a conversation. This conversation refers to the interaction between a user utilizing the machine. 

And when people interact with the product, they expect smooth interactions. This can only happen if interaction designers are willing to make things right.

One of the challenging tasks of an interaction designer is keeping up with the changes in the industry. You can notice that every day, new interaction designers are taking the medium in a different direction. 

And on the same note, users are also expecting these new kinds of interactions to appear on the website or application. 

As an interaction design, another key role you should be doing is to constantly explore the web for new interactions and taking advantage of the new technologies available.

Mary Ann Dalangin

About the author

A content marketing strategist and a UX writer with years of experience in the digital marketing industry.

Leave a Repl​​​​​y

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Userpeek

COMING SOON

We are on a misson to build the ultimate Remote User Testing Solution.

For UX Professionals, User Researchers, Growth Hackers, CROs and Product Managers.

Join our private Facebook Group to gain early access.
 
Join Facebook Group
close-link