Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!


Best Prototyping Tool for Mobile, Web and Desktop Apps.

Get Started for Free


Handoff Designs with Accurate Specs, Assets, Code Snippets Automatically.

Get Started for Free

A Simple and Easy-to-Understand Interaction Guide for Designers

Mockplus Team 9350 Views

This post introduces the examples, the status, the elements and the outputs of interaction design. It’s an easy-to-understand interaction guide for designers.

From the moment I chose to do interaction design, I've been thinking, "what is the interaction design?" Recently, I've taken some interviews, and every interview has led me to rethink the question. Furthermore, Having done some work and read documentations lately, I have had a new understanding of this question. So, I want to record and share my interaction guide to all of you.

1.The interaction design for general public

Interaction designer, as a new position, hasn't been known for some people. Nevertheless, it does not preclude their cognition of interaction design. For example, we may know B&O play or Btherm app, and we probably interact with it every day.

The B&O play app implements a series of satisfying transitional effects upon interaction with scrolling and color choices.

 B&O paly app

Btherm’s app conveyed the fun and light-heartedness of their brand effectively by animating the icon transitions and background colors, as well as the individual icon elements themselves (including the scooter’s exhaust! ).

 Btherm’s app

The above examples may represent the vast majority of people’s cognition for interaction design. Although they may not understand in details what interaction design does, they can form such a stereotype: interaction design is to optimize the user experience.

2.The status of interaction design in product design

The status of interaction design in product design

Interaction designers are now active in various Internet product designs and they can be: product managers, interaction designers, visual designers, and development engineers. They play their parts in various steps in product design.

• Product manager: Making a product useful

The meaning of "useful" here is to let the product have some kind of functions or to meet the user’s needs. Internet product managers are constantly capturing the needs of users, and then figure out the solution to meet them. The product manager defines the most basic function of the product and makes the product useful.

• Interaction designer: Making the internal of product become easy-to-use

The interaction designer is the next step in bridging the product manager and is responsible for turning the abstract needs of product manager into visual processes and interfaces. By coordinating the layout of the page, the interaction designer can make the presentation of each page more properly, and the user can capture the most important content at a glance. By coordinating the process, the user can perform his or her tasks efficiently.

It shows that the role of the interaction designer is to make a product useful. The user may be able to feel it, but the details are mixed. So, it's kind of an internal use.

• Visual designers: Making the external of product become easy-to-use

After the interaction designer has completed the design of the page and the process, there is another step that visual designer should take in the process before the user can use. Visual designers enrich the interfaces by polishing the color, font, graphics, and dynamic effect (interaction designers will also participate in the design of the dynamic effect), which makes the interface colorful and lifelike. That's something that users can actually feel. So, it's kind of an external use.

• Development engineers: Making the product really work

The previous work that product managers and designers did so much were actually making models. The people who really turn the model into real products are development engineers. In other words, the previous work that we did so much will be an armchair strategist if there is no development engineer. So, development engineers make the product really work.

3.Three elements of interaction design

 Three elements of interaction design

The role of interaction designers is to make the product easy and pleasant to use. The interaction designers need to think a lot, and the main part of thinking is based on three things in below:

• The users

The audience of interaction design is the user, and we designate the corresponding interaction process and interface based on the users. So, the interaction designer must possesses the empathy. In other words, the interaction design is constantly learning to step into the user's shoes. To imagine how the user will do, and then to carry out the corresponding interaction design portfolio according to the user's mental model.

• The needs

The interaction design is to continue the work of product managers who will provide a set of requirements. In this case, interaction designers need to design according to the needs and the second element of interaction design is needs. At this point, we can see that the interaction designers need to balance the needs of both the user and the product manager, which is a test of the ability for interaction designers.

• The scenarios

With the users and needs, the next step is to imagine the user's usage scenario. The scenario is essential, because every design that interaction designers do is based on user scenarios. As far as I'm concerned, I think the user scenario can be the most important one among other elements. The scenario actually contains the three dimensions of " people, thing, and action ", which can be said to contain the first two elements in some degree.

4.The outputs of interaction design

 The output of interaction design

Unlike other positions, the main work of interaction designers is to think about the various processes and pages. However, each position will ultimately depend on its own result, so what are the outputs for interaction designers?

• The pages:

One of the outputs of interaction design is the interface. Nevertheless, the interface here is only a wireframe, which is composed of simple box-and-line drawings. The major issue is what are the elements of the interface? How is the location to be placed? What about the size comparison?

• The process:

The second output of interaction design is the process, which can be a flowchart or an interface flow.

• The information architecture:

There is an another very important thing for the interaction designers, and that's to sort out the information architecture of the product. This step is required when the content and functionality of the product become larger and more respectively. A good information architecture allows users to quickly find what they want and the final output of the information architecture is the mind map.

• The interactive mode:

Another work left in the interaction design is the interactive way, which is meant for the interaction trigger. Taking the B&O play and Bthere’s app for example, the pull to refresh, pinterest and something else are the typical interaction trigger. All of them are interactive innovations that can't be done by the average interaction designer.

From the original choice to be an interaction designer to the second internship in present, I find my understanding towards interaction design is gradually deepening, and the choice to be an interaction designer is more likely to be right. Meanwhile, I hope that this simple and easy-to-understand interaction user guide is useful for you. Finally, I expect that we can go further on the road of interaction design.

5. The recommendation to be an excellent interaction designer

Have you acquired some knowledge about the design after you read the interaction guide? For the beginners, I’d recommend you to read the excellent articles in below:

1.Step-by-Step Guide: Become an Excellent Interaction Designer

2.Beginner’s Guide to Interactive Prototyping: Which Tool Should I Choose

3.How Long Do You Need to Set An Interaction? 3 Seconds!

4.The Best UI/UX Design Books & Resources for Designers

Author: The UI micro class of Conson

Translator: Thomas

Original website: UX Ren

Original link:



Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here