How the requirements turn into product prototypes

In an Internet company's workflow, the product manager (mainly refers to the product design of the product staff) and interactive designers is the most starting point on this line, but also the most ambiguous two links. To say that it is ambiguous, because in many internet companies, these two links do things are coincident, which means that they may also be the entire process of cooperation the most closely two links.

In contrast, product managers are more concerned with the internal logic of products, operating processes, strategies, and interaction designers are more concerned with the ease of use of products, fluency and operating experience. On the whole, it seems that product managers are designing products from a more macroscopic perspective, while interaction designers are starting with more details to enhance the user experience. These two different perspectives determine that only product managers and interaction designers in close cooperation, in-depth communication, can be the most efficient and reasonable product strategy into the product prototype, so as to provide accurate reference to the back of the pipeline.

The following is an example of some of the products and interaction details of Renren advertising platform, using the form of dialogue to share some of my personal experiences and thoughts in the process of interactive design. Entry level article, Master please bypass.

In one of the advertising platform for the system, there is a demand for products, according to the advertising audience in the region of the targeted advertising targeting. In other words, you can control the ads only to the fixed area of the audience. This means that you need to design a zone selector for the user to select an area. The original requirements of the Product manager are as follows:

Product Manager: "Our launch system needs to design a regional selector, which is to allow users to select ads targeted areas." Can be accurate to the city, you can choose more. In addition, ' zone ' as a restriction on advertising, if the user does not select any option, then on behalf of the user to ignore the condition, then the ad will be for the national launch. ”

Interactive Designer: "Oh. ”

Product Manager: "Well, I can think of this prototype of something that can provide two dropdown boxes, allowing users to select provinces and cities, respectively." When the user selects the province in the first Drop-down box, the second drop-down box displays the prefecture-level city below the province. I made a simple block diagram, let's have a look. ”

Product Manager: "That's probably the way it is." For each selected city, click the Add button later to add the city to the list below. Also, if you click the Delete link after the city name you have added, the city will be erased from the selected list. ”

Interactive Designer: "Wait a minute, I have a problem." According to the product strategy, if users do not choose a city, then the default will be put into the country. But this concept is difficult to express to the user, for example, if you put a hint next to the area selector, not many people will notice it. ”

Product Manager: "Not a choice, is tantamount to ignoring the conditions ah." Because these are restrictive conditions. ”

Interaction Designer: "The problem is that it's hard for users to realize that." In the Chinese concept, we all feel that the election is what I want. But there is no "no choice is equal to all" this kind of thinking habit. ”

Interactive Designer: "I think so." We put two radio buttons on the area selector now. One is called "the whole country" and the other is called "designation". When you open a page, the national item is selected by default, and the area selector is hidden. The zone selector appears only when the user selects the "specified" item. The expression is clear, you are not "national" or "designated". ”

Product Manager: Oh, that sounds good. Try it. ”

So I got the following version of the prototype diagram:

Interactive Designer: "Well, I think, now this version has been basically from the interface to solve the problem of the national launch options, I think, users should not because do not know how to choose and card here." ”

Interaction Designer: "I think the next step is to make some visual design of some key elements to help guide the user in the process." such as "Add" button, should be more obvious. I think you can ask the UI designer to have a simple version of the UI. ”

Product Manager: "Wait a minute, I think we should discuss the details again to find the UI." For example, the color of the word ah what is not decided. And, I think it's strange that each city name is followed by a delete link in the selected area. ”

Interactive Designer: "Uh. Indeed。 My idea is this, the color of the word, use black bar, or a darker gray also line. Although from the visual design point of view, 10243.html "> Visual designers feel slightly lighter gray more eye-pleasing, may be black too ' rob '." But our system, after all, is for human use, gray, and may make people mistakenly believe that these options are not operational. What do you think? ”

Product Manager: "Agree." ”

Interaction Designer: "About the list of areas that have been selected." I think you can change the "delete" link to X, in fact, the user is more sensitive to the symbol x than the Chinese character. You see, everyone is using Windows or MAC, close the window is X, long accustomed to. In addition, to make the selected city name appear to be a whole and separate from other city names. I think, can give each city with background color, each city a color block, so also at a glance. ”

Product Manager: "What's the color?" ”

Interactive designer: "Blue bar, Renren is a blue style." ”

Product Manager: "OK"

So, with the UI designer, you get the following interface:

Product Manager: "I think this place is basically shaped now." We have been talking for a long time. It's time to ask someone else's opinion. ”

———-Time Dividing line ———-

Product Manager: "hi~, everyone." I have collected some opinions on internal tests. There are users who are not sure about the relationship between the two Pull-down menus and the Add button. ”

Interaction Designer: "What does that mean?" ”

Product Manager: "That is, some people are not aware of the election of the province, the city after the election, but also to point" Add. They feel that the election is finished. ”

Interactive designer: "Halo." ”

Interaction Designer: "Maybe the selected list box is too delicate to be empty, and we don't realize it's for loading." ”

Interactive Designer: "Well, I have two options." 1. Add the button with a downward arrow. Point to the Selected list box. 2, when the selected list is empty, add a prompt to prompt the user that he did not complete the zone selection operation. ”

Product Manager: "The hint language, you mean that when the user added the city, will automatically disappear, right?" ”

Interactive Designer: "Yes." ”

Product Manager: I think it's a hint. Feel a little silly to put the arrow. ”

Interaction Designer: "Well, and, maybe after putting the arrows, the user is still unintelligible." ”

Product Manager: What about the hint? You have not added any areas, please select the city, click the "Add" button above, the city will be added to ... "

Interactive designer: "Stop!" Too long, most people will not read it carefully. ”

Product Manager: "Indeed ..."

Interactive Designer: "I can see just a word." Write ' You have not added any area. ’”

Interactive Designer: "You see." The button behind the Drop-down list is called Add. The prompt also explicitly conveys a state that has not been "added". This shows that the box is used to put things, but also to tell the user that this thing can be selected multiple. Because the concept of "adding" is to put one into the inside. If you can only put one, it should be called "choice". ”

Product Manager: "Top." ”

Interaction Designer: "And, I think the original prototype of this control you designed well." Well, as long as a successful operation of the user, the future can be very efficient operation. The learning and cognitive costs of this thing are low. ”

Product Manager: "oh,yeah~"

So, now the UI is like this:

Product Manager: "Oh, yes." In other words, my first strategy is that if the user does not choose, the equivalent of a full election, to the national launch. What do you say if the user chooses "specify" but does not add a specific city and submits the form directly? The system should be directly to the user's advertising set into the national launch, or error, to prevent users to continue? ”

Interactive Designer: "I see, the error." Because now the "national" and "designated" These two, has been clear to the whole and partial to separate. I don't think your strategy needs to be applied anymore, because it's already reaching your original goal, and it's okay to understand. Then there is, our platform is involved in money, is to allow users to spend money, if the user has spent the wrong money, would have voted in Beijing to cast the whole country, then we will be scolded by the user dead. Although the feeling of error will make users frustrated, but in this detail, or the user benefits should be placed first, the user experience, you can put a little back. ”

Product Manager: OK. ”

Interactive Designer: "Oh, you see, this story tells us, not everything to listen to products." The product is only a requirement, but how to achieve the requirements, or from a number of angles to discuss. ”

Product Manager: OK. So, tech guys, here's the job. ”

Personal Opinion:

1, product managers and interaction designers need to work closely with, in-depth communication.

2, sometimes, the product strategy and user experience conflict, should be from a variety of perspectives to consider and explore the final solution, there should be no one who must be more important than the argument.

3, excellent product Manager, the equivalent of half the interaction. Similarly, an excellent interaction designer is the equivalent of half a product. Although the positions are different, they should consider each other's work content to some extent.

4, the product is only the strategy and demand, not necessarily according to the details described by the product personnel to design specific product details. Interaction designers and all other members of the team are obligated to have the right to present their own insights and better design options for product requirements. There are different opinions to discuss, but the final decision should still belong to the product manager.

5, the product manager is called Manager, because they, in addition to design products, but also need to grasp the entire process. For example, when the details are not discussed clearly, do not look for the UI to do the design.

Source Address: http://fed.renren.com/2010/07/298