Interaction Design for UX & UI Designers

chat icon on a blue background

What is interaction design?

If you ever use an app and swipe left, flick upwards, or press on a button, you’re using interaction design.

Now, you may be asking

Cool, but what exactly is interaction design?

Well, before we talk about that, we need to first understand what interaction is.

An interaction is a reciprocal action or influence.

The word interaction suggests that there’s an ongoing interplay between two parties. As a human, you can interact with another human, a pet, or even objects.

And if we focus on digital product design, interaction applies to the devices or the apps you use as well.

You tap something, and the app will do something back. It’s a conversation.

Thus, let’s get into the core of interaction design.

I love the definition given by Jamal Nichols, an Ex. Sr Product Designer at Meta:

Interaction design is creating the conversation a product or system has with its users.

Once we view interaction design as a creation of conversation, things get interesting.

Because, as Jamal said, what’s a key principle of conversing with a human?

Don’t be awkward and rude!

So he stressed that:

When designing interactions, make them feel like natural conversations.

He gave a great (and hilarious) example at the beginning of his talk. Imagine this:

You’re walking into a Trader Joe’s. And before you enter, someone blocks you and says:

Hi there! Thanks for coming! Before you enter, can we have your name, address, email, and permission to send notifications to your phone?

Source

Who in the world will do that?

Well, that’s a typical experience of shopping online at Trader Joe’s.

Source

So, to take the previous definition even further:

Interaction design is the discipline of creating products that behave more like people.

Now, onto some key concepts:

Key concepts/tips

5 dimensions of interaction design

According to Interaction Design Foundation, these represent the aspects an interaction designer considers when designing.

Words (1D)

Text, such as button labels, help give users the right amount of information.

Visual representations (2D)

Graphical elements such as images, typography, and icons aid in user interaction.

Physical objects/space (3D)

The medium through which users interact with the product or service. For example, a laptop via a mouse, or a mobile phone via fingers.

Time (4D)

Media that changes with time, such as animations, videos, and sounds.

Behavior (5D)

How a user can perform actions on the product and how the product reacts to the users’ inputs and provides feedback.

a gif of the 5 dimensions of interaction design
Source

Important questions interaction designers ask

Now, you may be wondering:

Okay... that was a list of abstract concepts to remember. Can we get practical?

For sure! Usability.gov actually wrote an excellent article on the best practices and questions to consider when designing interactions.

I won’t go over everything because that’ll take too long. So I suggest checking out the article when you have time.

But here are some of the questions that stood out to me:

  1. What can a user do with their mouse, finger, or stylus to directly interact with the interface?
  2. What about the appearance (color, shape, size, etc) gives the user a clue about how it may function?
  3. Do error messages provide a way for the user to correct the problem or explain why the error occurred?
  4. What feedback does a user get once an action is performed?

Another great article I’ll recommend is written by Toptal. It goes over some of the most important principles in interaction design (discoverability, signifiers, feedback, and more).

Source

To get you started

Start noticing affordances, signifiers, and feedback around you

Woah wait. What are these words?

Don’t worry. Let’s break them down one by one.

Affordances

Affordance refers to the possibility of an action on an object. For example, we’ll say:

A button affords pressing. A door handle affords pulling or turning.

Now, the tricky part is that affordances do not have to be perceivable or even knowable.

They simply exist. And we’ll talk about this later.

Signifiers

Signifiers specify how people discover the possibilities.

Think of signifiers as signs or signals of what can be done.

Now, it’s important to distinguish between affordances and signifiers.

As I mentioned earlier, affordances may not be directly visible to the user.

Signifiers, however, have to be clear and visible.

And according to Don Norman, the father of UX:

Signifiers are far more important to designers than affordances.

Because what people need are clues. They need some way of understanding the product or service, some sign of what it is for, what is happening, and what the alternative actions are.

In fact, in his 2018 essay, he even said:

Designers of the world: Forget affordances. Provide signifiers.

Putting it to practice

Alright. Now I sorta understand affordances and signifiers. What should I do?

Great question. As the headline suggests,

Start to notice and be curious.

Pick your favorite app or product. And analyze all the interactions you have with it.

If you’re stuck, two good places to check out are growth.design and builtformars.com. Both sites provide in-depth case studies on different products.

One of my favorite design resources!

Learn the principles & laws

Excellent interaction design relies on a set of standards and best practices.

Thus, it never hurts to learn more about the principles. Here are a few great resources:

Remember: It’s important to treat these as guidelines, not constraints.

Keep the principles in mind when designing

As I mentioned in my previous article about visual design: It’s one thing to read about the principles.

It’s another thing to actually apply them to your designs.

Next time you’re designing, ask yourself the questions interaction designers ask themselves.

You can only grow by actually designing.

Conclusion

If you want to be a UX designer, you have to understand interaction design.

It may sound daunting, but I hope this article gives you a high-level overview of the field.

If you take one thing from this article, it’s this:

Interaction design is creating the conversation a product or system has with its users.

Think of it as a conversation.

You already know how to have good conversations with humans. So why not apply it to your product?

And that’s a wrap!

Thank you for being awesome and reading this far! :)

If you have any questions, feel free to reach out on LinkedIn, Twitter, or by email. Will love to set up a casual call and chat!

Read Next