從用戶行為打造活動交互設(shè)計閉環(huán)—2014年世界杯競猜活動設(shè)計總結(jié)

前言：從需求→交互設(shè)計→視覺設(shè)計→開發(fā)上線，不到20天的時間，6月12日世界杯活動上線了。首先為我們這個團隊點個贊?；顒觾蓚€月期間一直沒有時間整理，現(xiàn)在活動結(jié)束，說說此次暴露的一些問題及反思。

世界杯競猜活動平臺: web+wap，活動頁面如下圖。

本次世界杯活動暴露的主要問題：

1. 新手不知道在wap端怎樣可以領(lǐng)獎。

2. 一些用戶剛開始不知道如何換場。

3.手機端適配：UI整體偏小，沒有適應(yīng)手機端的小屏操作。

那么這些問題在后續(xù)的活動交互設(shè)計中，可以怎樣避免呢？筆者認為，設(shè)計完成后的自查自審是非常重要的一步。從成功或者失敗的經(jīng)驗中，不斷沉淀出可復用的方法。

從用戶行為打造活動交互設(shè)計閉環(huán)

圖3. 交互設(shè)計5大因素

江南大學辛向陽教授曾經(jīng)提出，交互設(shè)計的對象是人的活動，交互設(shè)計最核心的因素有人（people）、動作（actions）、輔助工具（means）、環(huán)境（contexts）和目的（purpose）。

因此用戶動作流程在交互設(shè)計中非常重要，在活動中用戶行為路徑較app使用行為來說更單一，如何步步緊扣，做好用戶操作行為引導和信息呈現(xiàn)，如何在每個步驟盡量減少用戶流失，是活動交互設(shè)計的關(guān)鍵所在。

這次活動設(shè)計中，我們期望以競猜世界杯輸贏貫穿始終。在獎品設(shè)置方面有兩條線，一條是為了刺激用戶回訪的積分有獎，猜中一場即可獲得相應(yīng)積分，積分達到一定數(shù)值即可兌換相應(yīng)獎品，積分梯度共6個，領(lǐng)取獎品積分不扣除；另一條線則是整個競猜活動結(jié)束，根據(jù)積分排名來贏取大獎。所以，這兩條獎品領(lǐng)取路線互不干擾。

有了上述活動規(guī)則前提，我們期望的用戶操作行為路徑就出來了。

圖4. 理想的用戶競猜流程

根據(jù)行為路徑，我們來分析每一步的用戶認知，從而推導出每一步的信息呈現(xiàn)：需要呈現(xiàn)的信息有哪些？哪些是主要信息，哪些是次要輔助信息？

圖5. 通過任務(wù)分解找到重要信息

根據(jù)行為路徑，我們能確定頁面基本元素：活動標題、活動規(guī)則、競猜區(qū)域、積分有獎。另外為了刺激用戶參與、增強活動的互動性，我們在頁面上突出了大獎的展示區(qū)域和競猜排行榜。從數(shù)據(jù)來看，wap端參與人數(shù)明顯比web多；從信息結(jié)構(gòu)來看，web信息更扁平，wap受限于屏幕大小，信息層級更深，更易暴露設(shè)計上的問題，因此筆者在下文中主要分析wap上的用戶行為路徑。推廣部分此文暫不分析。

行為1：進入活動主頁

圖6. 言簡意賅的活動主頁banner

傳達了活動主題，活動規(guī)則通過什么去體現(xiàn)呢？大段的文字是沒有人會去讀的，筆者總結(jié)了一些活動頁面，總體呈現(xiàn)要素有3個：

①一目了然的參賽界面

這一點不用細說，即可視化的呈現(xiàn)方式，通過圖形讓活動玩法一目了然。本次世界杯活動中，筆者認為比較出色的是QQ和網(wǎng)易新聞的處理方式，模擬現(xiàn)實場景，讓用戶通過已知事物移情，減少了認知和學習成本。

圖7.形象化的競猜主界面

②參賽流程介紹

參賽流程往往是作為規(guī)則的輔助說明，對于邏輯較多，且用戶操作后不能立即獲得結(jié)果反饋的活動頁設(shè)計尤為重要。在此次的世界杯活動設(shè)計中，筆者自認為忽略了這個重要環(huán)節(jié)，導致很多用戶并不知道“積分有獎”機制。后期通過數(shù)據(jù)觀察，發(fā)現(xiàn)此問題后，我們通過私信push消息告知，很多用戶也根本找不到入口。下面看看其他家的做法：通過流程的介紹，簡要告知活動機制。

圖8. 活動流程介紹

③頂部的活動規(guī)則入口

前面提到過，很少有人去讀長篇大論的活動規(guī)則介紹，但是也必不可少。一般在活動頁面頂部banner中嵌入活動規(guī)則入口，或者在頁面底部做簡短的文字說明。

行為2.競猜各場輸贏

競猜是這次活動的核心，用戶也需要最快捷地知道活動的玩法 ——how。由于活動規(guī)則設(shè)定，每次只能競猜一天的賽程，每個比賽日又有N個場次。用戶競猜的核心動作就包括：“猜”和“換場”。

①猜

上文提到過，活動玩法可通過可視化的圖形界面引導用戶。同時，還有一點不容忽略，即Dan Saffer在《微交互》一書中提到的一個重要環(huán)節(jié)——反饋?！段⒔换ァ分刑岬降睦匣C的虛假反饋機制是激勵人們即使贏不到錢，也會繼續(xù)賭博下去的利器。當然，在活動設(shè)計中，并不存在如此強大的物質(zhì)驅(qū)動力，但有效的反饋不僅能友好地傳達界面與用戶行為的互動，處理得當也能出其不意地增加活動的趣味性，逗用戶會心一笑，提升好感度。這里又拿QQ的反饋做栗子：點擊某隊的大拇指后，相應(yīng)的隊員會舉起手臂，非常形象化。

圖9. QQ世界杯的趣味反饋

②換場

如何讓用戶知道可以換場呢？首先，在界面上增加預知信息，讓用戶一目了然就能知道今天什么時間有哪幾場比賽。針對這點，在設(shè)計上，我們引入時間軸的概念，給用戶一個全局的預覽。其次，需要有簡潔方便的換場操作方式。在這點上，我們最先考慮的是手機屏上最常用的左右滑動手勢來切換場次，但此方案需要適配不同的機型，耗時較長，鑒于上線時間比較緊，我們選擇了手動切換場次的方案。

圖10. wap世界杯競猜交互稿

后期通過數(shù)據(jù)觀察，有一少部分用戶，沒有競猜完當日的所有場次。分析原因可能有：①懶得猜完所有場次；②不會換場。這里就引出一個問題：我們以為用戶看到的，用戶往往就是看不到。因此前期引導非常重要。舉個栗子，支付寶的世界杯競猜，點擊賽程，然后返回主頁，競猜區(qū)域會自動左滑，告知用戶切換場次方式。

圖11. 支付寶的世界杯競猜頁

行為3.領(lǐng)取積分大獎

領(lǐng)取積分大獎作為活動中的一條輔助活動線，重在傳達給用戶領(lǐng)獎規(guī)則，以及如何領(lǐng)獎的問題——how? 在這次設(shè)計中卻沒能有效傳達。究其原因：

①用戶初次進到活動頁，并沒有明確地引導，二次回訪的用戶已對活動方式形成固定認知。

②在UI處理上，”積分有獎“也不像可點的button，入口比較隱蔽。

對于多條活動路線的界面設(shè)計，有以下兩種處理方式：

①主界面分流。對于多任務(wù)的活動，在主界面提供分流入口，能讓所有參與方式一目了然。

圖12. 多分支活動的主界面分流法

②突出主活動路線的同時，在界面上明確強化另外一條活動主線入口。下圖為中國好聲音的線上活動，同節(jié)目規(guī)則一樣，活動設(shè)計存在兩條線：一是導師轉(zhuǎn)身，二是選手選導師。活動主界面呈現(xiàn)的是選手選導師，在頁面頂部顯著位置提示活動另一分支入口——“挑戰(zhàn)另一種玩法”。

圖13. 在一條主活動線上強化另一分支入口

行為4&5.退出和回訪

由于競猜結(jié)果不能實時獲得，從觸發(fā)競猜操作，到最終獲得競猜結(jié)果，中間會有較長的時間間隔，用戶早已經(jīng)離開我們的競猜頁面并投入到其他日?；顒又?，因此，回訪機制的設(shè)計也特別重要。

“回訪”是個特別容易忽視的問題，需要站在時間維度去考慮全局的設(shè)計。而且，世界杯時間歷時太長，前期的熱情過去，怎么留住用戶，是前期考慮的一個難點。在規(guī)則設(shè)定上，我們會通過云閱讀客戶端進行每日的賽程push通知。在交互細節(jié)上，后期維護任務(wù)中我們在每天的場次競猜完成后，補充了個比較輕量級的賽程更新提醒，讓整個競猜行為串聯(lián)起來，此優(yōu)化在6月25日上線。從下圖數(shù)據(jù)上來看，在后期UV整體持平的情況下，web和wap兩個平臺的總用戶留存率得到改善。雖然總體趨勢在降低，但由于賽事時間持續(xù)長，也屬自然現(xiàn)象。關(guān)于這點，在交互和活動設(shè)計層面可以做出怎樣的彌補和改善，筆者暫時想不到更好的方案，歡迎大家來探討。

圖14. 世界杯活動期間數(shù)據(jù)變化

再回到信息層面，用戶回訪的主要任務(wù)是什么？是競猜和領(lǐng)獎，當然還有次要任務(wù)：查看我的競猜結(jié)果。關(guān)于領(lǐng)獎，界面上是否該給出直觀的引導，而不用靜靜等待用戶自己去尋找呢？以下是我反思之后的方案。

圖14. wap世界杯活動改進方案

小結(jié)

針對以上拋出和反思的一些問題，總結(jié)活動交互設(shè)計中應(yīng)注意的問題有：

1.針對用戶參與路徑，設(shè)計活動行為閉環(huán)。

2.對每一步行為的細分研究，推倒出信息層級。

3.活動中對數(shù)據(jù)的觀察，針對一些重大問題及時更新迭代。對一些周期較短的活動，數(shù)據(jù)分析的作用除了驗證活動效果外，對交互設(shè)計師而言，更是下一次的設(shè)計依據(jù)。發(fā)現(xiàn)問題，分析問題，在哪跌倒，下次就開辟一條新路，繞著走。

4. 如果時間充裕，可在前期進行快速的可用性測試，規(guī)避上線后的一些風險。

相關(guān)資料：

[1] 網(wǎng)站設(shè)計分析：活動頁設(shè)計心得二三 http://www.3lian.com/edu/2013/03-06/59255.html

[2] How to design call to action buttons that convert http://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/

[3] 被忽略的交互設(shè)計本質(zhì) http://blog.sina.com.cn/s/blog_be7829e70101cc9v.html