Interaction design and its 5 dimensions

Akshay Devazya
UX Collective
Published in
4 min readJul 10, 2019

“Interaction Design is the creation of a dialogue between a person and a product, system, or service. This dialogue is both physical and emotional in nature and is manifested in the interplay between form, functions, and technology as experienced over time” - John Kolko

As the name indicates, it is the interaction/communication between the user and the product (in our case digital products like a mobile app, web app, website, etc:). So an interaction designer should always aim to get the best interaction like human communication between those two. To achieve that goal, we need to put more effort when it comes to visual design. After UX Design processes, where we find and solve problems through various methods, reach the second phase of a project, Interaction design. This is such a crucial point in product design because here we create things that are directly interacting with the end users. That is where interaction designers join the party. Most people think UI animations are what we called interaction design and the designers who are doing these animations are called interaction designers. that’s wrong. These animations are just one of the five dimensions of interaction design. Through a UI animation, the designer depicts how the user is interacting with the product. Nothing more nothing less.

1 Word/Text

Since Interaction design is the communication/interaction between the product and the users, Texts/words have a significant role in it. A perfectly used word can be as powerful as a sword. So giving the right word at the right place would make the user’s interaction smoother and easier. When I’m saying the “right word”- the term should be familiar and easy to understand to the end users. Also, at the same time, the term should exactly be conveying its role or purpose. If we are adding text underneath an icon, the user would definitely read the text first and understand the action. Nothing is quickly understandable as words. So use terms/words accordingly.

2 Visual representations

All the visual elements other than texts that aid in the interaction between the user and the product. We can use Imagery, iconography, graphical representations, etc: for better communication and use typographical treatment for better visual hierarchy — all these kind of visual representations comes under the 2nd dimension of Interaction design. Sometimes, Visual representation can be powerful as texts. For example, certain iconography like search icons are very much familiar to the users and without even looking at the texts, they would get to know its purpose. Similarly, we can make the interaction smooth as heaven.

3 Physical Objects

The 3rd dimension includes the medium through which the user interacts with the product. It could be a Mobile/tablet screen, computer mouse or keyboard, joystick, etc: Understand the medium and design things that are easily doable with them. For example, when a user is working on a task using the mouse, we can show a hover action to give a clickable feel, but when it comes to the touch screen, there is no chance for a hover action. We need to find some other solution to make it looks clickable.

4. Time.

Media that changes over time like animations, videos, sound, etc: These kinds of elements always help the user to engage with the product in an exciting way. We can use animation in a success message with a nice sound while completing a task. That would give the user a pleasant feel of that experience. But never make the users wait too long to complete these animations. Another best use of time is the progress bar animation where we can see the progress of a particular process/operation.

5. Behavior

View original Shot on dribbble

Action, reactions, operations, presentations… In simple words, The actual behavior of our application. Showing a success message with a summary when we complete a task, Swipe actions, etc: are comes under this 5th dimension. Make a behavior that is easily adaptable and understandable to the users.

Summary

The success of any product depends on how good the interaction between the user and the product is. That’s why interaction design is having a vital role in product success. The above described 5 dimensions of interaction designs help our product to communicate with the users in the best way. With confusing text or a misguiding icon/image, we cannot direct the users in the right direction. So always be keen on these 5 points and the valuable lessons you would learn from the real projects. Only these 5 points cannot help you to achieve the ultimate goal, nothing can replace hands-on experience.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Responses (1)

What are your thoughts?

Great workflow. Thanks for sharing! I’m using more figma Variants feature. I hope figma will implement Variants prototyping soon. .

--

Follow our steps

Would be a great tutorial but I am missing the "Smart animate" setup here. No matter how I try, the animation isn't as seamless as in your examples and I cannot figure out why... Care to help?

--

So much work for something done easily in css. Hey, Figma, how about releasing the Variants prototyping feature?

--