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.
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.
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 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.
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.
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 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.
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.
