Three levels of Interaction Design

How much do we need? 🤔

Robert Raimann
Netguru

--

Why do we feel that some apps are hard to navigate, difficult to understand, or might be incomplete? This might be because the app is lacking smooth movements and tiny details which are a part of something we called Interaction Design✨.

Let me present you my concept of the three levels of Interaction Design.

Level One: some animations and transitions applied.
Level Two: user experience improved.
Level Three: standing out from the crowd.

Let’s try to determine how much Interaction Design we need! 🎉

But before that, let’s try to answer the question “What is Interaction Design?”

Interaction Design is about how the user interacts with a product, how information (e.g. words) appears on the screen, and how other graphic elements (e.g. shapes) support the communication. It’s about time and space, which is, for example, how long the information will be displayed. We can say that Interaction Design shapes the deep level conversation between the user and the application telling us what we can do, what’s happening now, or what is going to happen.

According to some experts, such as Kevin Silver, Interaction Design is five-dimensional (based on Gillian Crampton Smith’s Introduction to Designing Interactions) described here.

Level One

Let’s say that we have an idea for an app we would like to develop. We have completed the discovery and ideation process. We have even conducted user testing using a clickable prototype based on UI designs…

AI-based virtual assistant app design.

Is it enough for developers to build our app? The answer is ‘no.’

During the design process, we need to take some time and think how one screen will transfer into another. By doing it, we are entering Level One.

A simple screen transition (we can still do a lot to improve the experience).

Something is missing here. The truth is, we didn’t take care of Interaction Design in every dimension. One screen jumps on top of the other.

If motion design is something new for you, luckily, there are many great resources that you can gain the knowledge from. I highly recommend the material design by Google: https://material.io/design/motion/

Level One is when we didn’t stop at the UI phase. We’ve also put some thoughts into the user journey through the screens.

What can we gain from Level One?
First and foremost, you will help users understand how your product works.

Deliberate transitions will eliminate the unpleasant question :
What has just happened?

Level Two

How can we make it better?

There are thousands of apps, where this level is visible. As you might have discovered, there are some apps, that basically… do the same thing. So why do you prefer one application over another?

Because of the details that make up the whole! Our app needs to be true to itself. If the application is light and full of space, the same has to be applied to any of the support graphics, icons, illustrations, transitions, animations, micro-interactions, and so on.

Adjusting the order, duration, and speed of animations can be the first step, the Interaction Design can be much more thoughtful.

Alternative screen transitions.

In the example above, I updated the animation and added a skeleton screen to prepare the user for what’s going to happen next.

We can imagine that we could have an app with thousands of products that need to be downloaded from some database, and the user will need to wait. In this case, smart Interaction design can make the waiting time more enjoyable, maintain the user’s attention, and improve the experience. It’s just one example, the possibilities are endless here.

What’s even better is the feelings applied to the application can be transferred to your other digital materials, e.g. a website or animated video. Good Interaction Designs should support the power of your brand.

Interaction Design is now part of digital branding.

What can we gain?
We can increase customers’ engagement, improve the usability, and create our style across multiple media.

Level Three

Level One is when we go the extra mile after the UI phase. Level Two happens when all the interactions that we’ve done are clever and compatible with our brand. So what would Level Three be? Breaking the patterns…! :)

An animated virtual assistant interface with micro-interactions.

Let me welcome you to Level Three. A fully animated interface with focus on micro-interactions can make your app unique. It’s true that these kinds of elements that breaks patterns need to be developed from scratch. But this is the price of being ahead of the others.

What can we gain on the Level Three?
We can create a product that will be ahead of our competition and take the leading position on the market.

By using Interaction Design, we can build products that are unique and, thanks to that, memorable.

Recap

Interaction Design can be divided into three levels. It depends on us how much of our time and resources we would want to invest, and what we want to achieve.

I keep my fingers crossed for Level Three. Maybe, we will create a brand new design pattern, which will then be used by millions?;)

That’s all! Thanks for your time and I hope that you enjoyed the read!

--

--