Part of TaobaoUED 碳酸飲料會(huì)講稿 By 用戶體驗(yàn)分析師：曉荷 |  交互設(shè)計(jì)師：老三 [2010/7/21]

Pay.taobao.com是淘寶賣家訂購(gòu)增值服務(wù)的平臺(tái)，但該平臺(tái)的可用性和操作體驗(yàn)欠佳，導(dǎo)致客服部門收到非常多來(lái)自賣家的訂購(gòu)服務(wù)咨詢，壓力很大，需要在系統(tǒng)層面解決此問(wèn)題。因此發(fā)起了訂購(gòu)流程體驗(yàn)優(yōu)化項(xiàng)目，對(duì)pay.taobao.com進(jìn)行前后臺(tái)改版。

圖1：優(yōu)化前的軟件服務(wù)訂購(gòu)頁(yè)面

圖2：優(yōu)化后的軟件訂購(gòu)中心首頁(yè)（原來(lái)無(wú)首頁(yè)）

圖3：優(yōu)化后產(chǎn)品列表頁(yè)

優(yōu)化之后，客服部門反饋數(shù)據(jù)顯示，賣家咨詢量由40%下降到7%。為此，與大家分享項(xiàng)目的兩點(diǎn)經(jīng)驗(yàn)：

1. 如何利用數(shù)據(jù)指導(dǎo)交互設(shè)計(jì)

前期數(shù)據(jù)采集
上線后數(shù)據(jù)分析
用戶反饋數(shù)據(jù)分析
2．良好的團(tuán)隊(duì)協(xié)作，提升UED話語(yǔ)權(quán)

與非UED同事協(xié)作
與UED同事協(xié)作
1.如何利用數(shù)據(jù)指導(dǎo)交互設(shè)計(jì)
1.1前期數(shù)據(jù)
知己知彼，百戰(zhàn)不殆。常說(shuō)為中間用戶設(shè)計(jì)，只有熟悉數(shù)據(jù)，了解數(shù)據(jù)，才知道誰(shuí)是我們?cè)O(shè)計(jì)的中間用戶。通常，公司內(nèi)部都會(huì)有數(shù)據(jù)部門，也會(huì)有后臺(tái)系統(tǒng)。作為交互設(shè)計(jì)師，你應(yīng)該有不少于業(yè)務(wù)線產(chǎn)品經(jīng)理（PD）的內(nèi)部權(quán)限，這樣才能為設(shè)計(jì)和決策提供各種數(shù)據(jù)作為支持。

在制作軟件服務(wù)訂購(gòu)中心時(shí)，我采集了以下幾種數(shù)據(jù)

基礎(chǔ)數(shù)據(jù)
包括原軟件服務(wù)訂購(gòu)頁(yè)面的PV、UV，訂購(gòu)的交易轉(zhuǎn)換率，訂購(gòu)的成功率、失敗率等數(shù)據(jù)。
業(yè)務(wù)數(shù)據(jù)
項(xiàng)目在規(guī)劃好時(shí)，PD會(huì)事先知會(huì)交互設(shè)計(jì)師。然后PD會(huì)寫(xiě)PRD（需求文檔），交互設(shè)計(jì)師在此時(shí)應(yīng)開(kāi)始準(zhǔn)備調(diào)取部分相關(guān)數(shù)據(jù)，在本例中，調(diào)取數(shù)據(jù)如圖4所示。此份定量數(shù)據(jù)非常重要，對(duì)于后期用研的介入、設(shè)計(jì)的參考都起了很大的作用。

圖4 軟件服務(wù)訂購(gòu)用戶數(shù)據(jù)

服務(wù)訂購(gòu)量的人群分布

不難看出

軟件服務(wù)訂購(gòu)主要由擁有X個(gè)（由于保密性，該數(shù)據(jù)不能透露）服務(wù)的會(huì)員所購(gòu)買，核心消費(fèi)人群為擁有X個(gè)服務(wù)的會(huì)員。
大多數(shù)會(huì)員擁有的軟件服務(wù)數(shù)為X。
以上數(shù)據(jù)為前期設(shè)計(jì)提供了可靠的依據(jù)。訪問(wèn)量的多少、用戶使用此頁(yè)面的目標(biāo)決定了頁(yè)面的最后設(shè)計(jì)結(jié)果，以及設(shè)計(jì)該頁(yè)面時(shí)投入的成本。同時(shí)，這些數(shù)據(jù)對(duì)于可用性測(cè)試的目標(biāo)用戶篩選，提供了明確的指導(dǎo)。

1.2上線后數(shù)據(jù)

“任務(wù)可被完成  任務(wù)在無(wú)外界影響下可以被完成?！?/P>

《交互設(shè)計(jì)食用指南》使用指南總則  by 青云

要知道我們的用戶任務(wù)是否可完成，就得監(jiān)控關(guān)鍵頁(yè)面：訂購(gòu)成功與訂購(gòu)失敗頁(yè)面。軟件服務(wù)訂購(gòu)中心的一個(gè)重要指標(biāo)是充值的成功率和失敗率。

充值失敗頁(yè)面

我們來(lái)看一下上線初始的1個(gè)多月來(lái)，出錯(cuò)頁(yè)面的訪問(wèn)量：

上線初始出錯(cuò)頁(yè)面訪問(wèn)量

可以看到，在上線初期，用戶支付的失敗率非常高，我們來(lái)分析一下當(dāng)時(shí)的頁(yè)面流程。

第一步：輸入金額，彈出浮出層

第二步：點(diǎn)擊去支付寶付款

第三步：彈出支付寶頁(yè)面，付款完成后在舊有頁(yè)面點(diǎn)擊任意按鈕，判斷支付狀態(tài)。

看過(guò)此流程，大家不難發(fā)現(xiàn)，第二步有點(diǎn)多余，為什么不直接進(jìn)入第三步呢？其實(shí)第二步的增加是為了解決支付失敗率高。直覺(jué)反應(yīng)應(yīng)該是彈出層的問(wèn)題，經(jīng)過(guò)分析，一些瀏覽器會(huì)阻擋非用戶主動(dòng)激發(fā)的彈出頁(yè)面，故用戶點(diǎn)擊充值后并未彈出支付寶頁(yè)面，用戶就疑惑了，并隨意點(diǎn)擊一個(gè)按鈕，從而導(dǎo)致出錯(cuò)頁(yè)面訪問(wèn)量高。

此處優(yōu)化以后，錯(cuò)誤頁(yè)面的訪問(wèn)量有非常明顯的下降。

1.3用戶反饋數(shù)據(jù)
與用戶對(duì)話，了解你的用戶是咋想的，并逐漸的改進(jìn)產(chǎn)品。與開(kāi)發(fā)、PD、PM共同協(xié)商問(wèn)卷想采集的數(shù)據(jù)后，再與用研同學(xué)合作，他們會(huì)整理出合適的題目。特別是一些設(shè)計(jì)中擔(dān)心的小點(diǎn)，如頁(yè)面載入速度、CDN速度等、信息架構(gòu)等。這份在線問(wèn)卷的入口放置在訂購(gòu)中心首頁(yè)左側(cè)。

打開(kāi)后，是一份半開(kāi)放、半封閉式的問(wèn)卷。

用研同學(xué)會(huì)將這些數(shù)據(jù)整理好，并出具報(bào)告。內(nèi)容包括定量與定性統(tǒng)計(jì)兩部分。來(lái)自用戶的一手反饋能證明團(tuán)隊(duì)的工作，還能為后續(xù)優(yōu)化指明方向。

用戶反饋文字很小

收到用戶反饋?zhàn)煮w很小。查看頁(yè)面數(shù)據(jù)，發(fā)現(xiàn)軟件訂購(gòu)中心的訪問(wèn)者中，大分辨率的用戶是1024X768用戶的2倍以上！于是他們做了專門的界面優(yōu)化。

2.良好的團(tuán)隊(duì)協(xié)作，提升UED話語(yǔ)權(quán)

2.1從非UED的角度去分析問(wèn)題（與非UED同事協(xié)作）
記得一位朋友講過(guò)，要是兩情侶吵架，鬧得不可開(kāi)交那種。你重復(fù)她的話，她來(lái)重復(fù)你的話，兩人會(huì)覺(jué)得很搞笑，自然矛盾也就和解了。

生活如是，工作上也如是。運(yùn)營(yíng)、PD、前端、測(cè)試、開(kāi)發(fā)要求的東西，你換位思考一下，也自然理解為什么了，也不會(huì)去瞎鬧騰了。如果你沒(méi)有這些職位的經(jīng)驗(yàn)，多和PD、運(yùn)營(yíng)交流，類似行業(yè)的變身還是很容易。

掌握與PDPM開(kāi)發(fā)測(cè)試人員溝通的語(yǔ)言

為了與PD、PM、開(kāi)發(fā)、架構(gòu)師更好地溝通需求，筆者在完成交互設(shè)計(jì)任務(wù)之外，還專門去了解了后臺(tái)復(fù)雜的計(jì)費(fèi)模型、產(chǎn)品定義模型，這樣才能更好地了解什么功能能做到，什么功能不能做到，時(shí)，其他項(xiàng)目組成員才不會(huì)認(rèn)為你是一個(gè)啥都不知道、只會(huì)空談體驗(yàn)的傻逼。

這些底層知識(shí)，在原型設(shè)計(jì)時(shí)發(fā)揮了相當(dāng)大的作用。

例如，通過(guò)了解預(yù)付費(fèi)模型、后付費(fèi)模型。在設(shè)計(jì)計(jì)費(fèi)詳單、續(xù)費(fèi)詳單時(shí)會(huì)更加清晰，能更清楚的向用戶展現(xiàn)整個(gè)收費(fèi)過(guò)程。

站在架構(gòu)師的角度討論體驗(yàn)

舊版的訂購(gòu)列表頁(yè)面將所有服務(wù)羅列出來(lái)，操作中的訂購(gòu)按鈕無(wú)論訂購(gòu)與否、一直有效。用戶點(diǎn)擊訂購(gòu)按鈕后，根據(jù)用戶權(quán)限判斷進(jìn)入訂購(gòu)頁(yè)面或者錯(cuò)誤頁(yè)面。用戶可能多次點(diǎn)擊均返回錯(cuò)誤頁(yè)面，體驗(yàn)十分糟糕。

為了減少用戶的不必要操作，在新版的訂購(gòu)中心，用戶在瀏覽增值產(chǎn)品列表頁(yè)時(shí)，訂購(gòu)與否的邏輯判斷移動(dòng)到該頁(yè)面（進(jìn)入產(chǎn)品詳情頁(yè)前），如果你沒(méi)有購(gòu)買權(quán)限，會(huì)在最開(kāi)始就提示不能購(gòu)買原因。同時(shí)，根據(jù)是否可續(xù)費(fèi)顯示續(xù)費(fèi)按鈕狀態(tài)；根據(jù)是否可升級(jí)顯示升級(jí)狀態(tài)，并提示用戶原因。

正是這樣，提高了訂購(gòu)流程了滿意度。減少訂購(gòu)中的咨詢而增加了訂購(gòu)前的咨詢。但頁(yè)面需要根據(jù)每個(gè)用戶的訂購(gòu)情況來(lái)分析應(yīng)該顯示的效果，架構(gòu)師提出頁(yè)面展現(xiàn)性能的擔(dān)憂。該擔(dān)憂是必要的。與前端交流后提出以下方案，并結(jié)合線上數(shù)據(jù)做分析：

方案1：頁(yè)面通過(guò)后臺(tái)計(jì)算好之后再返回。前端工程師無(wú)需任何工作，缺點(diǎn)是用戶看到的頁(yè)面時(shí)間會(huì)增加。列表頁(yè)面是否針對(duì)每個(gè)用戶做出獨(dú)立計(jì)算，將其所有的服務(wù)狀態(tài)讀取出來(lái)。我們可以參考之前采集的頁(yè)面PV數(shù)據(jù)得到以下分析：

請(qǐng)求量：?,000,000*1*40 = ?,000,000；不考慮網(wǎng)速的情況下，頁(yè)面響應(yīng)相比另一種方案增加200+ms。另外根據(jù)頁(yè)面PV、UV數(shù)據(jù)，服務(wù)器完全可承受該壓力。

方案2：頁(yè)面渲染與服務(wù)訂購(gòu)狀態(tài)異步渲染。即用戶會(huì)首先看到整體界面，個(gè)性化軟件服務(wù)狀態(tài)在1S以內(nèi)會(huì)根據(jù)用戶具體情況調(diào)整。異步獲取數(shù)據(jù)在淘寶的商品詳情頁(yè)面有使用，適用于頁(yè)面量大，用戶逐步接受數(shù)據(jù)頁(yè)面。缺點(diǎn)是前端工程師需要增加額外工作。再者，如根據(jù)是否綁定手機(jī)來(lái)判斷是否開(kāi)放短信訂購(gòu)入口這些情況，計(jì)費(fèi)系統(tǒng)本身無(wú)法判斷，需要調(diào)取外部接口，開(kāi)發(fā)成本異常高。故決定只枚舉計(jì)費(fèi)系統(tǒng)情況，覆蓋了80%以上的權(quán)限情況。

綜合考慮前端、開(kāi)發(fā)成本，由當(dāng)前頁(yè)面PV等情況，最終選擇了方案1。通過(guò)后續(xù)用戶反饋入口收集到的數(shù)據(jù)：只有少量用戶反饋訪問(wèn)速度慢。這次改進(jìn)是有效的。

與運(yùn)營(yíng)合作

設(shè)計(jì)界面時(shí)，就想到營(yíng)銷手段。做產(chǎn)品列表頁(yè)面時(shí)，想想運(yùn)營(yíng)的同事如何在這個(gè)列表上完成他們的營(yíng)銷目標(biāo)？其實(shí)很簡(jiǎn)單，是大家也都能想到的，在超市里面看到特別需要促銷的商品會(huì)貼上折扣的信息，于是利用UED的技能，為運(yùn)營(yíng)提供一些促銷技巧。這不是特牛的事，但表達(dá)了UED的態(tài)度。大家合作也就非常愉快！

2.2與UED同事協(xié)作
作為一個(gè)平臺(tái)，當(dāng)其他服務(wù)接入時(shí)，我們通常希望其他交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師能做出符合要求的圖標(biāo)。當(dāng)該產(chǎn)品轉(zhuǎn)交到其他人手里時(shí)，讓他們理解你的思想，就CODING時(shí)候的注釋一樣，寫(xiě)在里面。方便他人，尊重他人，是為了自己得到尊重。因此，在我的原型里，除了頁(yè)面，還加入了大量的注釋。

文案說(shuō)明，統(tǒng)一平臺(tái)的介紹語(yǔ)言。

圖標(biāo)接入說(shuō)明，為接入其他軟件服務(wù)時(shí)視覺(jué)統(tǒng)一做準(zhǔn)備。

模塊規(guī)范，前端有了這個(gè)，思考全局組件時(shí)更輕松。

3.總結(jié)……

通過(guò)前期數(shù)據(jù)采集、上線后數(shù)據(jù)分析、用戶反饋數(shù)據(jù)分析等方法指導(dǎo)交互設(shè)計(jì)，在與UED、非UED同事的良好的團(tuán)隊(duì)協(xié)作，最終提升了UED話語(yǔ)權(quán)。讓交互設(shè)計(jì)師走向?qū)I(yè)、品質(zhì)、協(xié)同！

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