Auction bidding process floating window design summary

Before the interactive weekly meeting, as the project to share the previously done auction line bidding process, because of the relatively hasty talk, so still want to organize into words, accumulated under. Do more everyday, often feel that if you do not do more literal accumulation, a lot of seemingly instant accumulation, will soon be overwhelmed by more projects ~ ~

The reason why we share this project is that we feel that we have the same size and daily routine in our work. 99% of them are not "born out of the ordinary." They all have a certain history. They must also have certain pain points and certainly have new businesses. Changes in it, how to grasp these factors in a short time, quickly converted into a reasonable program, there is a certain way, although the method is not perfect, but I hope to give you some ideas.

The beginning of the topic, presumably introduce the background of the bidding process: The original auction page to confirm the auction page is the same as the normal purchase of the product, with http://www.aliyun.com/zixun/aggregation/6401.html "> The development of the auction business, it is felt necessary to operate in a simpler form, so the form of floating window becomes the new form of the bidding process .Because the auction involves a lot of different concepts and judgments, Window bidding process is not interactive design complete participation, resulting in some problems in the page logic, so need to participate in interactive again to sort out the bidding process, but on the other hand, although the problem before the bidding process due to business needs, but Now on the line ......

First of all, from the background of the project, we can conclude that the project has several features: 1. There is an approximate form of interaction that can not be modified (although some people thought the floating window was not very good at the time, but everything was on the go , So for the time being can not be changed) 2, the development of business and the attitude of innovation (which exist in many projects, we usually do not like static, but in the face of developing business, changing is also a challenge) 3, no original Page data (this is the most frustrating point, because you can not see the user's feedback, let us less a lot of basis)

Second, the project from the interactive point of view, this project has several challenges: 1, the form of window interface (different from the general page, the information classification and presentation requirements) 2, the need to make a complete carding process (Usually related to the steps before and after the page, it is best to have a complete flow chart to help test the page) 3, previous versions from non-professionals (bound to be corrected some of the obvious problems, which is where to start afterwards)

Summarized the above points, identified the main core of the project, that is, the original process upgrade and amendment, fix the original error in the bidding process, to enhance the interaction of the original process page experience.

As we were not familiar with the auction business at the time of this task, we were able to communicate with the PD on the one hand to understand the auction business and on the other hand QA to give me every status of the auction-ready window on the fly (as the previous version did not Complete Interactive Manuscripts) As we said before, start with the trivial issue of correcting the original page. So I summed up some of the problems in the original page, in order to conclude a targeted approach.

1, the text guide and the input box is too far away

2, similar information is placed in different places

Whether set to proxy bidding is related to the user's bid and should be categorized.

1,2 two points, in fact, involved in the information classified display problems. In one page, some relevant information (eg, similar, behaviorally continuous) can be put together as much as possible, but the information to be avoided in the same form (for example, in the form of numbers) should be displayed separately Confused with each other.

3, the beginning and completion of the operation of the logic barrier

There is a modified click in the image above but no "OK" or "Edit Complete" operation, but an end to the entire action to confirm the bid, to a certain extent did not give the user an operation closed, It is easy for users to figure out whether they are in the process of modifying data or bidding.

4, window file copy prompt did not proceed from the user point of view

In this first prompt the user "bidding success", but then inform the user that other users have exceeded his bid, and then let the user to re-bid, this page is full of contradictions, because not from the user's point of view. The so-called "bidding success" here is just the background of the bidding record, but for the user should actually be "bid failed."

In the floating window operation experience process, due to encounter many situations, it is likely to drain a certain user in the page jump, so to avoid giving frustration to the user. And no matter at what step of the expression of the copy should be from the user's point of view, more convenient throughout the auction process to convey the correct information.

5, the copy shows uncle on the second unknown

Floating window on the map in the non-bold font to express a more important words, but the floating window in the picture below is bold font to say something is not so important. These may not be so prominent in a large page, but because of the relatively small floating window area, the error is obvious.

6, lack of expression on the copy

Floating window on the map, "I suggest you set a higher price and re-bidding," the semantic expression repeated and cumbersome, the following figure floating window is a similar problem. And the same is to allow users to re-bid, the use of two different text is indeed the button.

4, 5 and 6 o'clock are all problems expressed in the copywriting. For copywriting in the floating window, on the one hand, it can be distinguished by visually different copywriting at the different levels; on the other hand, the copywriting itself is also logical.

7, the lack of some necessary information

For example, the unit "yuan" in a floating window disappears. This common problem can easily be ignored by us.

As each of the original page to find out some of the problems, the idea of ​​the next show up, the window information will do about the functional separation, and the specific block of information to regulate the expression.

Floating window is divided into three regions: the orange area is the information about the bid / the most important information tips; the blue area is the margin and customer information / information to supplement the area; the green area is to determine the area / bid button or close the window.

The orange area is also subdivided into three parts, the first line shows the number-related information / information that represents the current status of the most important; the second line is the re-bid setting; the third line sets the proxy price. The second and third lines of information in some states are not, so the corresponding will not show.

Division of the functional area only dimensions, I also regulate the level of visual expression, as much as possible useful information to highlight it. Through this method, there is a certain standard in the interactive performance level, which can effectively reduce the misunderstanding of the original interaction design in the visual process.

Do the above two steps at the same time, in communication with the PD, but also on the whole increase of the logic to do a full sort, of course, the process of complementing Qa classmates aided, as QA more understanding of business logic Details, on the basis of which made a logical diagram. The last is in accordance with the rules established before, the corresponding information "fill in" to the appropriate area.

On the line of the page, please be free to participate in auction activities Taobao auction: http://www.paimai.taobao.com you can see. If you have any questions you can through the right side of the page entrance to give us valuable advice, I believe this auction is a good product experience is the result of participation with everyone, we will continue to give users the most feedback products Timely and effective improvement!

Lin Yun wrote on 2011.12.23

Source: http://ued.taobao.com