Dialogue between product managers and interaction designers: how requirements become product prototypes

Visual Design three thousand eight hundred and seventy 13 years ago (2010-10-16)

 twenty million one hundred thousand seven hundred and twenty-eight

In an Internet company In the workflow of Interaction design The teacher is the starting point of the assembly line and the two most ambiguous links. It is ambiguous because in many Internet companies, what they do in these two links overlap, which means that they may also be the two most closely cooperated links in the whole process.

In contrast, product managers pay more attention to the Internal logic Operation process , strategy, etc; Interaction designers pay more attention to the ease of use, fluency and operating feeling of products. In general, it seems that product managers design products from a more macro perspective, while interaction designers improve products from more details User experience These two different perspectives determine that only when product managers and interaction designers cooperate closely and communicate deeply, can the most efficient and reasonable Product strategy It is transformed into a product prototype, so as to provide accurate reference materials for the later stages of the assembly line.

Let's take some products and interaction details of Renren advertising platform as examples to share some of my personal experiences and ideas in the process of interaction design in the form of dialogue. Entry level article, experts please detour.

In one of the delivery systems of the advertising platform, there is a product demand, which is to conduct targeted advertising according to the region where the advertising audience is located. In other words, advertisements can be controlled to be displayed only to audiences in fixed regions. This means that a "region selector" needs to be designed for users to select regions. The original requirements of the product manager are as follows:

Product Manager: "Our launch system needs to design a region selector, which allows users to select the region for targeted advertising. It can be accurate to the city, and multiple choices can be made. In addition, 'region' is a limiting condition for advertising. If the user does not select any option, it means that the user ignores the condition, and the advertising will be launched nationwide."

Interaction designer: "Oh."

Product manager: "Well, the prototype of this thing that I can think of can provide two drop-down boxes for users to select provinces and cities respectively. When users select provinces in the first drop-down box, the second drop-down box will display the prefecture level cities below the province. I have made a simple block diagram for you to see."


Product Manager: "It's like this. Click the Add button after selecting a city to add it to the list below. At the same time, if you click the Delete link after the name of a city that has already been added, the city will be erased from the selected list."

Interaction designer: "Wait a minute, I have a question. According to the product strategy, if users do not select a city, it will be launched nationwide by default. But this concept is difficult to express to users. For example, if you put a prompt next to the" region selector ", it is estimated that few people will notice."

Product Manager: "If you don't select any, you ignore the conditions. Because these are restrictions."

Interaction designer: "The problem is that it is hard for users to realize this. In the Chinese concept, everyone thinks that I want to choose. But we do not have the habit of thinking that" no choice is equal to all "."

Interaction designer: "I think so. We put two radio buttons on the current" Area Selector ". One is called" National "and the other is called" Specify ". When opening the page, the" National "item is selected by default, and the" Area Selector "is hidden. Only the user selects" Specify " Item, the region selector appears. This expression is very clear. You are either "national" or "designated"

Product manager: "Oh, that sounds good. Try it."

Then the prototype diagram of the following version is obtained:


Interaction designer: "Well, I think this version has basically solved the problem of options for nationwide launch from the interface level. I think users should not be stuck here because they don't know how to choose."

Interaction designer: "I think the next step is to do some work on some key elements vision Designed to guide user operation. For example, the Add button should be more obvious. I think you can invite UI Design I have learned a simple version of UI. "

Product Manager: "Wait a minute. I think we should discuss the details more clearly before looking for the UI. For example, the color of the characters is not determined. Moreover, I think it's strange that each city name in the selected area is followed by a delete link."

Interaction designer: "Yes, indeed. My idea is that the color of characters should be black, or darker gray. Although from the perspective of visual design, visual designers think that lighter gray is more attractive, and black may be too" grabbing ". But our system is for people after all. If it is gray, people may mistakenly think that these options are inoperable What do you think? "

Product Manager: "Agreed."

Interaction designer: "For the list of selected areas, I think you can change the" Delete "link to ×, In fact, users × This symbol is more sensitive than Chinese characters. You see, whether you use Windows or Mac, when you close the window ×, I've been used to it. In addition, in order to make the selected city name appear as a whole and separate from other city names. I think we can add a background color to each city, and each city has a color block, which is also clear at a glance. "

Product manager: "What about the color?"

Interaction designer: "Blue, Renren is all in blue style."

Product Manager: "ok"

Then, in cooperation with the UI designer, the following interface is obtained:


Product Manager: "I think this place has basically taken shape. We have also discussed it for a long time. It's time to ask others for their opinions."

——-- Time division line ---

Product Manager: "Hi, everyone. I collected some opinions from internal tests. Some users suggested that they could not understand the relationship between the two pull-down menus and the" Add "button."

Interaction designer: "What do you mean?"

Product Manager: "That is to say, some people do not realize that after selecting provinces and cities, they have to click" Add ". They think that after selecting cities, they will be finished."

Interaction designer: "dizzy."

Interaction designer: "The selected list box may grow too delicate when it is empty, and people do not realize that it is used to hold things."

Interaction designer: "Well, I have two solutions. 1. Add a downward arrow above the Add button. Point to the selected list box. 2. When the selected list is empty, add a prompt to remind the user that he has not completed the area selection operation."

Product manager: "The prompt says that when users add cities, they will disappear automatically, right?"

Interaction designer: "Yes."

Product manager: "I think it's a bit silly to put an arrow."

Interaction designer: "Well, after putting the arrow, users may still be confused."

Product Manager: "What about the prompt? You haven't added any areas yet. Please select a city and click the" Add "button above. The city will be added to..."

Interaction designer: "Stop! It's too long for most people to read it carefully."

Product Manager: "Indeed..."

Interaction designer: "I think just one sentence is enough. Write 'You haven't added any areas yet.'"

Interaction designer: "Look. The button behind the drop-down list is called" Add ". The prompt clearly conveys the status that has not been" Add ". This not only indicates that this box is used to place things, but also tells the user that multiple items can be selected. Because the concept of" Add "is to put one item into the box. If only one item can be placed, it should be called Select

Product Manager: "Top."

Interaction designer: "Moreover, I think you designed the original prototype of this control well. Well, as long as the user successfully operates once, he can operate it very efficiently in the future. The learning cost and cognitive cost of this thing are relatively low."

Product manager: "oh, yeah~"

Then, the current UI is as follows:


Product manager: "Oh, yes. My initial strategy was that if users did not select all, it would be equivalent to selecting all. What would you do if users selected" specify "but did not add a specific city and submitted the form directly? Should the system directly set users' advertisements to be launched nationwide, or report an error to prevent users from continuing?"

Interaction designer: "Let me see. Report a mistake. Because now," national "and" designated " These two items have clearly separated the whole from the part. I don't think it's necessary to use your strategy anymore, because now it has reached your original goal and is easy to understand. What's more, our platform is about money. It is about making users spend money. If users don't know that they have wasted money, they would like to invest Beijing Our users will scold us to death if we invest in the whole country. Although I feel that reporting errors will frustrate users, the interests of users should be put first in this detail, and the user experience can be put a little later. "

Product manager: "All right."

Interaction designer: "Well, you see, this story tells us that we can't listen to everything about the product. The product only raises requirements, but how to achieve the requirements still needs to be discussed from multiple perspectives."

Product manager: "Well, then, technical brothers, please do the following work."

Personal opinion:

1. The product manager and interaction designer need close cooperation and in-depth communication at all times.

2. Sometimes, the product strategy and user experience will conflict. At this time, the final solution should be considered and discussed from various perspectives. There should be no argument that who is necessarily more important than who.

3. An excellent product manager is equivalent to half an interaction. Similarly, an excellent interaction designer is equivalent to half a product. Although their positions are different, they should consider each other's work content to a certain extent.

4. What the product proposes is only the strategy and requirements, and it is not necessary to design the specific product details according to the details described by the product personnel. The interaction designer and all other members of the team are obliged to have the right to put forward their own opinions and better design schemes on product requirements. Different opinions can be discussed, but the final decision should still belong to the product manager.

5. The reason why product managers are called managers is that they need to always grasp the whole process in addition to designing products. For example, when the details are not discussed clearly, do not go to the UI for design.

Note: The dialogue part in this article is not the real plot, but only to illustrate theme nothing more.