Combination of data and theory to make interactive design more professional

Part of taobaoued carbonated drinks lecture by user experience Analyst: Xiao He | Interaction Designer: Old [2010/7/21]

Pay.taobao.com is Taobao sellers order value-added services platform, but the platform's availability and operating experience is poor, resulting in customer service department received a lot from the seller's ordering service consulting, the pressure is very high, need to solve this problem at the system level. Therefore, the order process has been launched to optimize the project, the pay.taobao.com to the front and back of the Taiwan revision.

Figure 1: Pre-Optimized software services ordering page

Figure 2: Optimized software ordering Center Home (no home page originally)

Figure 3: Optimized Product List page

After the optimization, customer service Department feedback data showed that the seller's consulting volume dropped from 40% to 7%. To this end, share with you the project's two points of experience:

1. How to use data to guide interactive design

Analysis of user feedback data of

data analysis in the early stage after online

2. Good teamwork, improve ued discourse power

collaboration with UED colleagues and ued colleagues 1. How to use data to guide interactive design of 1.1 prophase data

The enemy, win. Often said for the middle user design, only familiar with the data, understand the data, just know who is our design intermediary users. Typically, there are data departments within the company, as well as background systems. As an interactive designer, you should have the internal authority of not less than the line of Business Product Manager (PD), so that you can provide a variety of data for design and decision support.

When making a software service ordering center, I collected the following data

Basic Data


includes the original Software service order page PV, UV, order transaction conversion rate, order success rate, failure rate and other data. Business Data

When the
project is well planned, PD will know the interaction designer in advance. PD then writes the PRD (requirements document), where the interaction designer should start preparing to fetch some of the relevant data, and in this case, the data is fetched as shown in Figure 4. This quantitative data is very important, and it plays a great role in the reference of the research and design.

Figure 4 Software Services ordering user data

Population distribution of service order quantity

It's not hard to see

Software service subscriptions are purchased primarily by members who have X (due to confidentiality, the data cannot be disclosed) and the core consumer is a member with X services. Most Members have the number of software services x.

The above data provide a reliable basis for the prophase design. The number of visits, the user's goal to use this page determines the final design results of the page, and the cost of the page when it is designed. At the same time, these data provide clear guidance for target user filtering of usability testing.

1.2 online post data

The task can be completed without external influence. ”

Guidelines for the use of interactive design foods by Qingyun

To see if our user tasks are complete, we need to monitor key pages: Order success and order failure pages. An important index of the software Service ordering Center is the success rate and the failure ratio of the recharge.

Recharge failed Page

Let's take a look at the initial 1 months of online access to the error page:

Online Initial error page traffic

You can see that in the early days of the line, users pay a very high rate of failure, we analyze the page flow at that time.

The first step: Enter the amount, pop-up surfaced

Step two: Click to pay Treasure Payment

Step Three: Pop-up Alipay page, payment after the completion of the old page click on any button to determine the payment status.

See this process, we are not difficult to find that the second step is a bit superfluous, why not directly into the third step? In fact, the second step of the increase is to address the high rate of failure to pay. Intuitive response should be the problem of the pop-up layer, after analysis, some browsers will block the unsolicited pop-up page, so the user clicks the recharge did not eject the Alipay page, the user is puzzled, and random click a button, resulting in a high volume of error page access.

After optimization, the number of access to the error page is significantly reduced.

1.3 User feedback data

Talk to the user, understand what your users are thinking, and gradually improve the product. With the development, PD, PM consultation questionnaire to collect the data, and with the students to cooperate with the research, they will be sorted out the appropriate topic. In particular, some of the design concerns of small points, such as page load speed, CDN speed, information architecture and so on. The entrance to this online questionnaire is placed on the left of the home page of the Order center.

Open, is a half open, semi-closed questionnaire.

Use the research alumni to organize the data and issue a report. The content includes two parts: quantitative and qualitative statistics. The feedback from the user can prove the work of the team and can also indicate the direction for the following optimization.

User feedback text is small

Received user feedback font is very small. View the page data, found that the software ordering center visitors, the large resolution of the user is twice times more than 1024x768 users! So they did a special interface optimization.

2. Good teamwork, improve ued discourse rights 2.1 analyze problems from a non-ued perspective (collaborate with non-ued colleagues)

I remember a friend said, if two lovers quarrel, make the same. You repeat her words, she repeated your words, two people will feel very funny, natural contradictions are reconciled.

Life is, and so is work. Operations, PD, front-end, testing, development requirements of things, you think about it, and naturally understand why, and will not go to the blind. If you do not have the experience of these positions, it is easy to make a change in the same industry as PD, the operation communication.

Mastering the language of communication with pd\pm\ development testers

To better communicate requirements with PD, PM, Dev, and architect, the author in the completion of the interactive design task, but also specifically to understand the background of complex billing model, product Definition model, so as to better understand what functions can be done, what function can not be done, when other members of the project team will not think you are a nothing know , will only talk about the experience of the silly force.

These low-level knowledge have played a significant role in prototyping design.

For example, by understanding the prepaid model, the Pay-as-you-go model. It will be clearer when designing billing details and renewal details to show users the whole charging process more clearly.

Discuss experience from an architect's perspective

The old version of the Order List page lists all the services, and the order buttons in the operation are valid regardless of whether they are ordered or not. Users click the Order button, according to user rights to determine access to the order page or error page. Users may return to the error page many times, the experience is very bad.

In order to reduce the user's unnecessary operation, in the New Order center, when users browse the Value-added Products list page, the logical decision to order or not to move to the page (before the Product Details page), if you do not have the right to buy, will be prompted at the beginning can not buy reasons. At the same time, according to whether the renewal of the subscription display button status, depending on whether you can upgrade the display upgrade status, and prompts the user reason.

It is this that improves the order process satisfaction. Reduce the consultation in order and increase the consultation before ordering. However, the page needs to be based on the order of each user to analyze the effect should be displayed, the architect presented the page performance concerns. The worry is necessary. After the communication with the front-end to propose the following scenarios, combined with online data analysis:

Scenario 1: The page is calculated in the background and then returned. The front-end engineer does not need any work, the disadvantage is that the user sees the page time will increase. Whether the list page makes independent calculations for each user and reads all of its service states. We can refer to the previous acquisition of the page PV data to get the following analysis:

Request amount:?, 000,000*1*40 =?, 000,000; Without considering the speed, the page response is more 200+ms than another one. In addition, according to the page PV, UV data, the server can withstand the pressure.

Scenario 2: Page rendering and service ordering status asynchronous rendering. That is, the user will first see the overall interface, personalized software service status within 1S will be based on user specific circumstances adjustment. Get the data asynchronously in Taobao's product Details page has the use, applies to the page volume is big, the user gradually accepts the data page. The disadvantage is that front-end engineers need to add extra work. Moreover, if the mobile phone is based on whether to determine whether to open the message to order the entrance of these cases, the billing system itself can not judge, need to call external interface, the development cost is unusually high. Therefore, the decision to enumerate only the billing system, covering more than 80% of the permissions.

Comprehensive consideration of front-end, development costs, from the current page PV and so on, the final choice of scheme 1. Data collected through subsequent user feedback portals: Only a small amount of user feedback is slow to access. This improvement is effective.

Working with operations

When you design the interface, you think of marketing tools. When making a product list page, think about how your co-workers can accomplish their marketing goals on this list. In fact, it is very simple, we can all think of, in the supermarket to see the special needs of promotional goods will be posted discount information, so using ued skills, to provide some promotional skills for the operation. It's not about ued, but it's an expression of attitude. The cooperation is very happy!

2.2 Collaboration with UED colleagues

As a platform, when other services are plugged in, we usually expect other interaction designers and visual designers to make the icon that meets the requirements. When the product is transferred to someone else, let them understand your thoughts and write them in the same way as job notes. The convenience of others, respect for others, is to be respected. Therefore, in my prototype, in addition to the page, there are a lot of comments added.

Copy description, unified Platform Introduction language.

Icon Access instructions, for access to other software services when the visual unity to prepare.

Module specification, this is the front end, and it's easier to think about global components.

3. Sum up ...

Through the early data acquisition, post-date analysis, user feedback data analysis and other methods to guide the interactive design, and Ued, ued colleagues in the good teamwork, and ultimately enhance the ued discourse power. Let interactive designers to professional, quality, Synergy!

Source: http://ued.taobao.com/blog/2010/07/26/data-for-interaction-design/