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

Interaction Design Methods From A Designer with 7-Year Experience

Mockplus Team 12668 Views

These interaction design methods are shared by a UX designer in world renowned tech company. Though his professional tutorials, you would get inspired a lot.

What do interaction designers actually do?What are the best interaction design methods?

We can find the answer of this question in some books:

1.Find users' demands and specify them

2.Propose design methods

3.Make prototype

4.User testing and assessment

However, there are still many people who are interested in interaction design come to ask me this question, looking for more specific answers , and even every detail when I'm working on it.

In fact, the interaction designers' work depends on the content of interaction design and various projects. I would like to share some interaction design methods that I often use in the following part, but I don't think they are suitable for I'm looking forward to exchange ideas with you.

skills of interaction designer

Find users' demands and specify them

There are many means of finding out users' demands, for example, we can collect a lot of ideas from the feedback of users and which product brings them problems. We can also take initiative observation of daily life to get more inspirations.

Take the schedule management project as an example, many users email us that they would possibly forget something important like some meetings or appointments, so they hope that we can provide a professional function of schedule management to help them effectively manage their daily schedule.

After clarifying this demand of users, the product department would conduct a new project on this.Then the product, user research and design staffs will work together to find the target users.

User research team would collect information by means like questionnaire survey. Interaction designers would also participate in this research by starting a meeting to help user research team complete some information. In the meeting, we always adopt some interesting ways such as brainstorming, recalling some scenes of life, and we would write down some keywords. Our purpose of this step is to know the real demands of users.

Though these steps, we can pick up some of the most important functional requirements, then the product team will sort out the requirements and compose the product requirements document. Finally, it will be designers' show time.

Through the research, we collect a lot of data and clarify the demand. Then next step is to start to design the project.

Propose design methods

At this stage, I always do some conceptual design. For example, when I design a cup, I will describe more details of that cup: I want to design a cup that can be used when I'm traveling; it can be stacked into a small disc. When I drink water, I only need to press down the center of the small disc and it would change to a cup.

So does the Internet product. It needs to be given a concept, such as schedule management: it is a professional calendar management function, by using the product, we can effectively manage our daily schedule and time to improve work efficiency and will not miss every important appointment.

These words are not necessarily summed up by interaction designers, but the interaction designer must be clear about the product and know what do we need to do, come up with some interaction design methods.

At the same time, we still need to carry out the draft design. However, here what I call the first draft does not always refer to interaction design prototyping or wireframing made by interactive designers. You can use Axure to make the main page flow, and you can also design some hand-painted sketches with Balsamiq. If you need to make a prototype that isn't of so high fidelity in a short time, Mockplus would be a good choice. In a word, you can use any method as long as it clearly reflects your ideas.

Make prototype

The way to make a prototype, which is usually called the interaction sketch, is different from the way to make the first draft. In this interactive sketch, I always describe the flow and specific forms as detailed as possible.

As making interaction design is an iterative process, I would make an interactive update log on the first page of the design layout to record each update of interactions including time, version name, update type, update content, reference requirement documents and principals of interaction design. This is one of the most important interaction design methods.


The purposes of adding this update log are:

Update time - To follow the entire project easily and master every key point

Version name - To enable the participants of this project to find the interaction sketch of previous version easily

Update Type – To learn about the features of each update request.

Update content –To clearly demonstrate the contents of each update, and provide a link direct to the update page. In this way my colleagues don't have to find the update point page by page when doing the iterations of product.

Requirements documents for reference - To enable the participants of this project to find the corresponding requirement documents easily.

Person in charge of interaction – To record the person in charge of interaction in every iteration to facilitate the work transition.

Designers usually use Axure to make the prototype in the process of making interactive sketch. If I need to make some mature and relatively stable products like mailbox, I would tend to do a high-fidelity model by organizing a components library to improve efficiency. When I need to do a new project, black and white manuscripts would be workable solutions for designers. If the interaction designer can handle the approximate visual effects, they can also do it more delicate. I believe you are already very clear about this, so I would not explain more.

Make interactive instructions

In the whole design process, the interactive instruction may only cost you a small amount of time, but it plays an important role. It can help us to reduce the communication cost, complete the description of interaction sketch, express the interaction design process and demonstrate more details of our design.

Unlike the design sketch, I personally think the interactive instruction requires you to know more about its objects, namely, product managers, visual designers, demands of developers so as to achieve a real "auxiliary" effect, rather than tell a long story subjectively. Otherwise we have to spend a lot of time on it.

For this, I have communicated with my colleagues and try to extract their demands of interactive instructions. It cannot be so comprehensive, but it must be able to clarify some problems. Here are some interaction design tutorials about this issue.

1.It would be better to use both words and illustrations in interactive instructions.

Easy to read and understand.

2. Description of page jumps (product & program)

Page jump involves a large number of operations of pages. When the product staffs check the interaction sketch, they would be more concerned about the purpose of the tasks of the operation process. Since it's hard to remember every page jump clearly, they need page jumps' instructions.

3. Whether the Interactive instructions can be combined with product requirements document or not (product)

Development documents involve product concepts, technical scheme, business execution roles and so on. And it also has a close relationship with interaction design sketch, so the interactive instructions and development documents can complement each other, then they can be sorted into a document to avoid duplication of work contents.

4. Describe the interaction or hidden settings in the interaction sketch (product & visual & page structure)

Details and actions need to be clearly described, such as the action of the mouse focus, click or after click, there would be the loading or jump. All of these should be discussed at the meeting, but the staff involved in the project may not be able to remember, so they need interactive instructions. You should also reserve the structure that can be adapted to the changes for page structure group.

5. Product style positioning (visual)

Business style or leisure style? The visual sense needs an accurate positioning of product style. This part of the work is not necessarily determined by the interaction designers, but in the product breeding stage, the discussion of design sketch and update of data from time to time will make the product style positioning gradually clear. Visual colleagues are more involved in the design. This requires the interaction designers to record the information in the interactive instructions to assist in the visual completion.

6. Limit state (front end)

For example, the longest or shortest display of a list component.

7.Disorder/ error description (program)

This is easily overlooked in the process of interaction design and communication about the product.

Some designers will wonder: why nobody would like to see my design instructions? Even I wrote every detail, they still ask me a bunch of design problems! What's worse, they ask me why do I have to do this document.

Faced with these situations, the designer should consider: does the instruction I made really solve the problem?

Some basic logical judgments and textual contents have been listed in the requirement document by product staff and have been clearly presented in the interactive sketch, such as the full set of content in the prototype, or a radio check.

So I personally think that the interactive instruction is not necessarily a copy of text, it should not be the way to show the designers' skills as well as the copy of prototype with interaction design.

We can make comments on the interactive prototypes, write instructions on the images, or write an e-mail message to the project team. Of course, it can also be a word document or PPT.

In short, what we have to do is to solve the real problems, so that the interactive instruction can help members in the project to communicate more effectively and understand the design content to make a tool that can improve the efficiency and be worked out when needed.

Conduct user testing and assessment

After realizing the basic functions of the product, we will do user testing. How to conduct usability testing and user testing are also essential in interaction design methods. Design is something very subjective, and it will be affected by various factors, so there will be inevitably some unexpected problems in our product. If we can recruit some people to use our products, we will collect some feedback and change them into the optimization points to improve our products.

user testing

At the same time, interaction designers are also supposed to use their own products more to ensure the released content is same to your design.

This is a relatively complete description of my interactive work. I feel that this work is not so difficult, because I am also a user, I will find some problems when I'm using the product, so I naturally want to solve these problems, and finally I accumulate a lot on this way. However, you should also put a lot of energy on this work. Although the way of design is free, the design content still should be rigorous. If you ignore a problem, there would possibly be a negative impact on the product, or even lose the user's favor.

To keep our products a healthy development, designers should continue to explore more excellent interaction design methods. Finally, I hope that we can share our design experience and learn from each other frequently in order to improve the user experience of our products. Finally, you would become an excellent interaction designer.

Author:Xian Yu

Translator: Julie

Original website: uedc



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