【譯文】如何選擇用戶體驗研究方法

戴 均開 | 用戶研究 | 九月 20th, 2016 | 評論(回復)

【譯者注】用戶體驗研究方法比較多，非資深用戶研究人員在用戶體驗研究方法選擇可能會存在一些困惑，本文闡述了用戶體驗研究方法選擇的一些原則，希望對大家有所啟發和幫助。

用戶體驗研究方法範圍非常廣泛，從經檢驗的可靠方法（例如：基於實驗室的可用性測試）到最近發展形成的方法（例如：遠程在線評估）。 儘管幾乎所有項目都可以從多種方法組合中受益，但一整套用戶研究方法在一個項目都使用那是不切實際的。不幸的是很多設計團隊只使用他們一兩種自己熟悉的方法，最主要問題是不太清楚在什麼時候使用什麼方法。為了更好地理解在什麼時候使用什麼方法，可以從以下4個維度來考慮：

? 態度 Vs 行為

? 定性 Vs 定量

? 使用場景

? 產品開發所處的階段

下圖是最常用的20種用戶研究方法的分布：

1.態度Vs行為維度

態度關注用戶說了什麼，行為關注用戶做了什麼。態度主要用於了解用戶所持的觀點、看法。 雖然可用性研究主要關注用戶行為層面的研究，但態度研究仍然是有用的。舉個例子，卡片分類可以用來理解用戶對信息空間的心理模型，用於幫助產品/應用/網站的信息架構的決策。調查測量、分類態度或收集用戶聲音可以發現需要解決的重要問題。對於可用性來說，焦點小組討論是不太適合的，但可以用於了解用戶對產品的感知和評價。

在這個維度的另一端就是主要聚焦於了解用戶行為的研究方法。舉個例子，A/B測試就是將網站的不同設計隨機地向不同訪客展現，但要保持其它因素恆定，目的是了解不同設計方式對用戶行為的影響。同時，使用眼動測試可以分析用戶在使用網站時的視線行為。

可用性研究與現場研究在行為、態度這個維度兩端上的最常用方法，同時這2種方法在使用時都會收集和利用用戶的聲音和行為數據，但更傾向於用戶行為數據。

2.定性Vs定量維度

狹義的定性研究是開放性問卷調查中的開放性題目，但在我們這裡是這樣定義的：定性研究是通過直接觀察獲得用戶行為和態度的數據，而定量研究通過測量或儀器間接地獲得用戶行為和態度的數據。例如，在現場研究和可用性研究中，研究人員可以直接觀察用戶是如何使用產品，這樣就給研究人員提問題、探討行為原因的機會，為了更好地達到研究目標，甚至可以直接調整研究內容。對於這些數據的分析，通常不是從數學角度來進行分析的。 相對而言，定量研究形成的觀點通常來源於數據分析，因為數據收集的工具（例如，調查工具或Web伺服器日誌）捕獲如此大量的數據，很容易進行數字化編碼。

由於定性研究與定量研究的差異，定性研究方法適合用於回答為什麼、如何解決問題，而定量研究方法適合用於回答多少或多少類型。有了這些定量研究的數據，可以幫助你進行資源優化，例如聚焦於影響力最大的問題。

3.產品的使用場景

用戶研究方法選擇中，第3個需要考慮的因素是：在用戶研究中，用戶有沒有使用或如何使用產品。可以分為以下幾類：

? 自然狀態或接近自然狀態下的產品使用

? 按事先準備好的測試腳本內容的產品使用

? 在用戶研究中過程中沒有產品使用

? 以上多種情況混合下的產品使用

在研究自然狀態下的產品使用時，為了了解盡量接近真實情況下的用戶行為與狀態，在研究中最大程度地減少對用戶的干擾。這樣保證研究最大化的有效性，而不受研究人員所掌握的信息的干擾。很多人種學的研究雖然總是會存在一些偏差，但試圖避免研究人員對研究用戶的影響。

腳本化研究是為了聚集於產品的某些具體使用場景，例如新設計的產品流程。根據研究目標的不同，腳本化程度可以有很大的不同。例如，一個基準研究通常有一個非常嚴緊的腳本，而且有更定量的性質，所以它可以進行可靠的可用性度量。

對於沒有產品使用的研究，主要為發現產品那些比可用性更寬泛的問題，例如，品牌研究。 混合情景是為了滿足研究目標，對產品使用創造了一種新的形式。例如，在參與式設計方法中，為了與用戶一起討論他們提出的解決方案、以及他們為什麼作出了這樣的選擇，可以讓用戶參與和重新布局設計元素。在概念測試方法中，為了了解用戶對某個產品或服務的需求度時，會採用一個低保真的產品或服務原型，讓用戶對這個產品或服務的核心功能有個了解。

圖表中的20種常用方法中，大多數方法可以在一個或多個維度上移動。有時在同一個研究中，同一個方法為了滿足多個目標，同一個方法會屬於同一個維度的不同兩端。例如，現場研究中可聚焦於用戶說的內容，也可以聚集於用戶做的內容；需求度研究和卡片分類也都有定性和定量兩種版本；眼動測試可以編寫腳本，也可以脫稿進行。

4.產品開發所處的階段

在選擇用戶研究方法時，產品開發所處的階段與對應的目標也是另一個需要考慮的重要維度。

? 策略階段。在產品開發的初階階段，需要考慮產品未來的機會點。根據研究目標不同，在這個階段的用戶研究方法會有很大不同。

? 執行階段。當你持續優化設計過程中，完成一個設計決策進入下一階段時，還是會進入到下一個的「行或不行」決策點。這個階段的研究主要是形成性研究，發現設計方案存在的問題，有助於降低執行決策風險。

? 評價階段。到了某個時間點，產品或服務有了足夠多的用戶，那這時就可以開始測量產品效果。這就是典型的總結性測試，並可能會與自己的歷史數據或競爭產品進行對比。

下表列出了不同產品開發階段的研究目標、典型的解決方案和研究方法：

藝術還是科學？

雖然很多用戶體驗研究方法在科學實踐中有著自己的根基，但目標不是純粹的科學，而是以滿足相關利益方的需求為前提，在實踐中對研究方法進行調整。這就是為什麼這裡的方法特徵描述只作為一般的指導原則，而不是嚴格的分類的原因。

最後，工作的成功取決於它對改善網站或產品用戶體驗的影響力大小。這些分類是為了幫助你在正確的時間做出最好的選擇。

原文鏈路：When to Use Which User-Experience Research Methods

用戶研究視角-3種問題拆解的思路探討

晚風 | 用戶研究 | 八月 23rd, 2016 | 評論(2)

引言：

在一秒鐘內看到本質的人和花半輩子也看不清一件事本質的人，自然是不一樣人生。——電影《教父》 本文沒辦法幫你一秒鐘看清人/事，而且也不奢望能做到，但希望能和大家一起朝這個方向做些努力。

一、 什麼是問題拆解？

在日常工作中，不管是用研、設計，還是產品等，雖然具體工作內容有差異，但也會有相似的地方，那就是「問題解決」，偶爾也會遇到一些棘手的問題，大家先來看兩個工作中的情景：你是不是與遇到過類似的問題？以上這些問題具有「大」「籠統」「難入手」的特點，那麼把複雜的、籠統的問題拆解成一個個小的、可執行開展的問題就是問題拆解能力，只有正確拆解了問題，才能形成合理的假設、切入點。這個能力是不斷進階並勝任複雜任務的基本功。

二、 為什麼講思路而不是方法？

在看多人眼中，用研就像是「工具箱」，裡面裝滿了各種解決問題的方法，比如訪談、卡片分類等等，所以很多人會非常希望了解到有用的，新的調研方法或工具，甚至有人提調研需求時也會說：「我想做個問卷調查，。。。」。但本文重點講的思路而不是方法，一來是介紹方法的資料已經很多了； 二來我越來越覺得思路決定方法，清晰的思路是選擇和讓方法發揮作用的前提。如果把問題解決比喻成一段旅程，那麼研究思路是攻略，方法是交通工具。正確的攻略保證了方向和結果，定了攻略才能選定出最合適的交通工具。

三、問題拆解的價值？

問題拆解是形成思路的關鍵第一步，是後續形成假設，找到重點，切入點的前提。

1、思考過程結構化、可視化， 既能幫助你理清問題，確保沒有遺漏，找到切入點；也能方便別人了解你的思考過程和方案/結論，從而推動方案的接受和落地。

2、經過拆解提出需重點關注的方向，找准方向。如：提出問題的原因假設，方便後續有針對性的找原因。

四、如何做問題拆解？

由於在現實工作中，不同崗位所遇到的問題各有不同，因此本文主要是以用戶研究員的工作視角來提供三條問題拆解的思路，並附上相關的例子，希望能起到拋磚引玉的作用。

（一）用「接觸點」來拆解問題

所謂「接觸點」即用戶在使用互聯網產品中，與產品發生接觸的點，這些點可以是由業務角度來看的業務流程各環節（如購物中的搜索-查看搜索結果-查看詳情-下單-付款），也可以是以用戶視角來看的的接觸產品的用戶生命周期各階段。

1. 以業務流程為主線，梳理出現問題、需要重點關注的環節

【適用場景】：這個思路比較適合去分析和發現產品存在的問題，一般都是藉助漏斗模型來看流程各步驟的轉化

【簡介】：

第一步：畫出產品流程圖

第二步：附上流程中某一階段（建議看某一時段而不是某天的，一來減少數據偏差，二來可能有些流程本身也需要數天才能完成）各步驟的轉化數 據，發現轉化差的步驟流程

第三步：和業務方討論，形成原因假設，再據制定下一步可調研/執行的問題

【案例】（流程和數據僅是舉例所用）： 產品經理：「我們最近上線了一個新產品，但是用戶開通成功率不高，希望通過調研找找原因」 經過了解產品的開通率目標，對比其他類似的產品數據後，發現開通率的確偏低。所以先來拆解問題 第一步：梳理出產品流程圖，開通分三步：審核—綁卡—填寫驗證碼

第二步：註明每一步的轉化數據，可以看出，轉化差的步驟有兩個：「綁卡」「驗證」（審核失敗主要與報名條件等硬性標準有關）如下圖

第三步：與業務方結合實際操作流程特點討論以上兩步轉化差可能的原因，並帶著這些假設從後台抽取這兩類用戶進行有針對性的調研。比如，綁卡失敗可能與流程斷裂且反饋機制不好有關，即：綁卡後校驗周期長，即使審核通過也沒有及時有效的通知用戶返填數據。後續在調研中，除了搜集用戶的失敗原因，也會針對這些假設進行了驗證，讓調研更有了更精確的方向和切入點。

2、用戶視角—以用戶接觸產品的各環節為主線進行分析

【適用場景】 當我們需要了解整個產品的用戶習慣、痛點，或者希望對用戶全貌有個了解時，就不適合使用以業務流程為視角的問題拆解方式了，因為整個產品往往包含的內容非常多，流程也很複雜。所以拆解問題時可以用戶接觸產品的過程為主線，用戶接觸產品的過程並沒有固定的模型，可以根據自己產品的情況自行制定，注意要符合金字塔的MECE原則（相互獨立，完全窮盡）即可。我這裡提供一個經驗類的思路，供參考。

【簡介】認知—理解—嘗試—使用—付費（如有）—留存/流失—迴流 這是一條從用戶接觸到使用各環節的鏈路，經過對各環節的調研分析，基本就可以對產品和用戶有個全面的認識了。依然舉例說明：

【案例】 需求方：「我們產品計劃升級改版，需要了解下用戶的基本情況，痛點，我們想了解：。。。具體見下圖：

原始需求雖然有些繁亂，但如果用上述的鏈路進行分解，就會清晰很多了，不僅能幫助到產品，也能為品牌推廣宣傳提供參考，而且調研的結論可以以這種鏈路方式展示，比較清晰易讀。梳理後的問題見下圖：

當然，可能在實際的項目需求中，未必需要這種大而全的行為描繪，甚至有些產品也沒有付費，可根據具體需要重點針對某些環節進行分析。

（二）用「因果關係」來拆解

當我們需要對一個問題進行解釋或分析時，可以嘗試查找造成這個問題的原因，通過對原因的逐個分析，來找到出現問題的環節，比如：「某商品月成交量低，什麼原因呢？」

第一步：先來分解一些帶來成交量的原因，如 月成交量=當月有交易的天數X每天交易次數X每次交易商品數X每商品每次交易件數X每件成交金額

第二步：對比該產品歷史的各環節數據或其他類似產品，找到數據明顯較低的環節，再具體分析原因.

當然，會月成交量的結果拆分可能有多種方式，比如月成交量=來訪用戶X轉化率X客單價等，如果可以，可以多試試不同的拆分方式，找到有明顯漏斗、比較好入手/執行的分析的環節即可。

（三）通過界定「問題」來拆解問題

說到這裡，其實還沒講到真正的「大（籠統）」問題，有一種「大」問題叫領導交辦的問題（認真臉）。還是以例子說事吧，開篇埋下的坑，現在可以來填了。

領導：「我們中心打算布局xx類產品，但不知道是不是有前景，你調研分析看看？」 所遇到的問題就是要分析「前景」，這應該算是個比較大的問題了，也是比較模糊，模糊的點就是「什麼叫做有前景？」如果是第一次接觸這類問題，可能是無法入手的，但也恰是更需要問題拆解的時候——以「問題」為導向，即定義，拆分「前景」，可以自己先思考，也可以找領導，請他描述他認為的「前景」（或者至少把自己定義的有前景的標準和他確認一下，再開展後續的分析或調研，目的依然是要保障「做正確的事」），在這個例子中，前景被定義為三個方面，市場有機會；用戶有需求；有利潤空間： 其實這三個維度，依然都也挺模糊的，可以藉助上文的因果關係等方式分析，經過拆解如下圖：

到這個階段，可以看出，需要進一步調研或者收集的資料都是日常中常見的一些指標了，所需要的方法也是訪談、問卷。桌面等較常見的方法，基本上是把一個起初比較「大」的問題化解成了一個個可以執行的常規問題。

以上，主要內容介紹完畢，最後來個簡要的總結：

1、什麼是問題拆解？

把複雜的、籠統的問題拆解成一個個小的、可執行開展的問題即問題拆解能力。

2、為什麼要做「問題拆解」以及它的價值是什麼？

當你遇到的問題比較「大/」籠統」不太可能直接執行的時候，問題的拆解就是幫助你「做正確的事」：理清問題，確保沒有遺漏，找到切入點，明確方向。思維結構化。

3、問題拆解的思路有哪些可參考的？

1)「接觸點」（業務流程、用戶接觸產品的生命周期行為）

2) 因果關係（引起問題的可能原因，逐個分析找突破點）

3) 界定「問題」（問題的定義，維度等） 當然，現實工作中，各種複雜的問題還有很多，希望本文能起到些微的引發思考、拋磚引玉的作用吧。

【譯文】圖標的可用性測試

戴 均開 | 交互設計, 用戶研究 | 六月 6th, 2016 | 評論(7)

【譯者注】

圖標在頁面設計中被廣泛使用，圖標設計的好不好、圖標應用效果如何，是設計師非常關心的問題。本文作者提出從發現性、理解性、預測性、吸引力這4個方面來評價圖標，也為圖標設計構思提供了一個方向。

引言

設計師經常使用圖標來節省頁面空間、提高用戶識別速度。隨著像智能手機、可穿戴設備等這些小屏設備越來越流行，圖標的使用也更多了。但是，這些圖標是否可用？唯一的方法就是對這些圖標進行用戶測試。

如何進行圖標測試

不同方法可以解決圖標可用性的不同方面，判斷圖標是否可用可以從以下4個量化指標來測量：

1）發現性：用戶能否發現頁面上的圖標；

2）理解性：用戶能否理解圖標的意義；

3）預測性：用戶能否猜到圖標點擊會發生什麼；

4）吸引力：圖標是否美觀；

以上4個指標都是圖標設計中起著關鍵性的作用，但需要獨立去思考如何來提升。

圖標測試方法

圖標評價的方法有很多，要根據評價目標和所處的設計階段來決定測試方法。圖標評價方法可以分為2大類：無背景的圖標測試、基於背景的圖標測試，區別在於圖標測試時，是否將圖標放在頁面中進行用戶測試。無背景的圖標測試，就是單獨用圖標（測試素材只有圖標，沒有頁面）進行測試；基於背景的圖標測試，就是圖標放在實際的頁面中進行測試。

需要注意的是，儘管採用無背景的圖標測試，受測用戶也必須目標用戶，熟悉產品行業並有相關背景知識或概念。

發現性測試方法

為了評估圖標的發現性，需要將圖標放在頁面中實際位置，基於背景的圖標測試可以用於判斷：多個相似的圖標放在一起是否會導致用戶找到目標圖標會比較困難，或者放在太隱蔽的位置或周邊有很多廣告導致圖標被用戶忽視。

查找時間測試是用於判斷用戶能不能容易地發現圖標的最好方法，在測試過程中，受測用戶需要按任務點擊圖標，計算受測用戶成功找到目標圖標的操作時間、首次點擊準確率。

理解性測試方法

理解性測試最好進行無背景的圖標測試：只向受測用戶呈現單獨的圖標（而沒有頁面內容），讓受測用戶猜測圖標所代表的意義，在某種意義上來說，這種測試也是洛夏墨跡測驗的一種方式。這個測試的目的是保證圖標能夠被用戶容易地理解。

從用戶的描述或詞語中來獲得用戶對圖標的理解，如果用戶的理解與圖標想要表達的意義/內容不相符合，那就意味著需要重新構思圖標，重新設計圖標。

我們知道圖標都伴隨著文字標題，你可以會認為：先向用戶呈現圖標的名稱，再讓用戶從多個圖標方案中選擇一個與名稱最匹配的一個圖標，這種測試方式更為合理。但是我們不建議使用這樣的方法測試，因為在真實使用場景中，用戶很可能只看圖標，而是不看圖標名稱。因此，在測試時使用以下方式更加合理：以某種方式讓用戶知道需要在這個頁面上查找某個功能，從而找到對應的圖標。

預測性測試方法

不僅需要用戶理解圖標的意義，而且還需要預測圖標代表是是什麼功能。實際上，即使用戶不知道這個圖標是什麼/叫什麼，只要用戶知道圖標所代表的功能就夠了。

用於評價理解性的無背景圖標測試方式同樣可以用於評價圖標的預測性。然而，預測性測試不是簡單地問用戶圖標代表了什麼功能，而是當圖標點擊後，用戶期望發生什麼。不像理解性測試一樣，在理解性測試中，需要向用戶簡單（但盡量少）描述一下圖標所在系統/頁面。例如：告訴用戶手提箱是電商網站的一部分，請用戶找出能夠代表的圖標。在預測性測試中，不能告訴受測用戶網站的任何具體信息，也不能告訴用戶任何產品相關的功能。通過這種測試方式，可以了解圖標的用戶心智模型。

另外，如果有多個圖標方案，A/B測試也可用於判斷出哪個圖標的預測性最好。對於A/B測試，需要分析不同圖標下的用戶行為差異，同時需要分析用戶是否存在這種現象：點擊了圖標然後又馬上返回到前一頁。這個現象是一種探索行為，通常說明圖標的預測性比較差，表明用戶點擊圖標後，對看到的內容不滿意，從而返回原來的頁面。在測試不同的圖標圖形方案時，不同圖標需要放在頁面相同的位置和使用相同的圖標名稱，保證沒有其它因素影響了用戶行為。

吸引力測試方法

圖標需要進行吸引力測試，因為最普遍目標是使用圖標來增加用戶的吸引力，但不能保證所有圖標的吸引力都很好。在圖標吸引力測試中，既要進行單圖標測試，也要進行圖標組測試（一個產品或頁面會有多個圖標，一個產品或頁面的所有圖標稱之為圖標組）。

吸引力測試的最簡單方法就是用戶對圖標吸引力進行1-7分的主觀評分。如果有多個圖標方案，叫用戶選擇一個最喜歡的圖標，並解釋對某個圖標喜歡/不喜歡的原因。最後從多套圖標組選擇中，選擇一套最喜歡和最不喜歡的圖標組。圖標組測試主要是為了避免整套圖標大多數圖標是好的，只要修改少數幾個圖標，整套圖標就可能是最適合產品/頁面的圖標組。

標準的可用性測試與圖標測試

標準的可用性測試可以發現一些圖標問題，但不能準確地發現圖標的所有問題。例如：在測試過程中，用戶被其它一些頁面元素搞得不耐煩，甚至不能完成操作任務。即使圖標存在問題，但不準確地發現圖標的具體問題在哪裡：是用戶沒有識別出圖標，還是用戶不能理解圖標的意義，還是用戶沒有發現圖標？

由於存在多種可能的原因，所以不能單靠標準的可用性測試來評價圖標的可用性。

產品開發周期

與用戶體驗研究方法一樣，選擇測試方法時需要考慮產品所處的項目生命周期。

1. 規劃期：在早期的概念階段，主要使用有利於形成概念、探索多種設計想法的測試方法。在這個適合進行無背景的理解性、預測性的圖標測試，用於判斷圖標使用的可行性和確定合適的圖標心智模型。

2. 執行期：在設計和實現階段，主要使用有利於持續地幫助系統設計出最好的圖標方案。一旦圖標方案是可理解的，主要持續地進行無背景的圖標吸引力測試，直至得到吸引力優秀的圖標為止。接著進行有背景的圖標測試，將圖標放在真實頁面中，讓用戶去查找目標圖標，圖標查找時間測試用於量化評價圖標的發現性。可用性測試（開始使用紙面原型，後面使用高保真原型進行測試）可以在圖標意義理解性與可發現性方面給我們更多的發現。

3. 評估期：產品一旦發布，圖標測試主要用於評價圖標上線效果、幫助圖標持續優化。基於可用性測試的基準測試、圖標查找時間測試可以定期開展來跟蹤效果。在圖標持續優化的過程中，A/B測試是衡量和選擇圖標方案的最好方法。

原文鏈接：Usability Testing of Icons

【譯文】移動可用性測試，你不知道的新招

舒舟 | 交互設計, 無線U遞, 用戶研究 | 三月 23rd, 2016 | 評論(23)

【譯者注】在移動設備上進行可用性測試是大多用戶體驗設計團隊既關注又頭疼的部分，市面上的各種專業測試工具各有利弊，如何抉擇是一道難題。性能好、對用戶干擾少、錄製質量高、能記錄用戶面部表情和手部操作、價格便宜等要素成為大家在選擇工具與方法時重點關心的內容。本文作者Colman Walsh提供了一種討巧的方式，能較好的解決測試中大部分問題。儘管不完美（無法記錄用戶與移動設備屏幕互動），依舊值得一試，有精力的同學可以結合Lookback（Lookback: Simple and powerful user research），或許能搗鼓出一套更完善的解決方案來。

移動端令人難以置信的增長趨勢和移動設備的全面普及，讓用戶體驗設計師的工作更具挑戰性與趣味性。這意味著移動應用與移動站點的用戶測試成為用戶體驗工具中的重要一環。

與桌面環境有所區別的是，移動端可用性測試缺少像Silverback或Camtasia這樣開箱即用的軟體記錄工具。

即使不開發一款移動應用，你的網站大部分流量也可能來自於移動設備。執行常規的移動可用性測試，便成為衡量該渠道是否正常工作的唯一途徑。

此時需要一定的動手能力，經過多年實驗，我們認為已經找到了最理想的手段。如果你想簡單測試iPhone或Android的體驗，這套方法不僅簡單，性價比高，而且效果出色。

舊法：線纜加膠帶

過去我們使用「雪橇」將智能手機與攝像頭固定在某個位置，從而方便我們記錄用戶在屏幕上的行為。（要製作一個雪橇，我們在五金店買了一些丙烯酸通過烤麵包機將其彎曲成型，非常有趣）

我們將攝像頭用膠帶粘貼在雪橇上，並且把手機用膠帶和尼龍搭扣裝好。回頭看來，這種做法還是很簡陋的。用戶不得不經常用兩隻手托穩手機以保持雪橇穩定，當然也談不上自然體驗。

圖1. 用戶正在使用綁著攝像頭與雪橇的手機

從技術上說它是不可靠的。由於使用了一台筆記本的雙攝像頭（雪橇上的攝像頭和筆記本內置攝像頭），我們不得不同時開啟兩個攝像應用，這導致了一定性能問題。要麼在設置中造成內存緊張，要麼在測試中攝像頭熄滅，往往兩者兼而有之。

還有其它一系列問題，比如屏幕炫光和攝像頭失焦。總得說來，設置測試環境非常耗時，而且性能不可靠，測試環境並非最優。尤其是客戶在身邊時，壓力尤其大，但這也是那時我們能做到最好的情況。

新招（當然更好）：無線

理想情況下，用戶應該無法看到測試環境與軟體。我們希望創造儘可能自然的測試環境，只有用戶與智能手機，沒有線纜、雪橇、攝像頭或膠帶等干擾。

對於用戶體驗團隊來說，在用戶測試中不斷學習和洞察才是關鍵。我們不希望一直為設置測試環境或者攝像頭熄滅而費心。

我希望通過介紹一個簡單的設置來達成這些目標，它幫助用戶體驗團隊專註於真正重要的事情，讓用戶專註於他們的手機。因為它非常可靠，所以我們經常在培訓課程中面對客戶使用。

接下來重點談智能手機的可用性測試，我們使用一台MacBook作為記錄設備。當然，這種方法也適用於Windows PC。

圖2. 無線測試的方式更加自然

【第一步：安裝軟體】

產生神奇效果的關鍵在於Apple的AirPlay無線技術，該軟體能讓你把流媒體（音樂、視頻）通過無線的方式傳送到Apple TV上。

因此，首先你需要購買並安裝一個叫做Reflector（大概15刀）的軟體，它能將筆記本變成一個AirPlay信號接收器，像Apple TV一樣。這樣一來，我們能夠把用戶智能手機屏幕以鏡像的方式投射到筆記本電腦上，用戶屏幕上的內容將在筆記本屏幕上同步出現。

現在我們可以不需要額外攝像頭來錄製用戶屏幕了，只需要在筆記本電腦上通過屏幕錄製軟體進行錄製即可。強烈推薦ScreenFlow（大概99刀），不但可靠性高，並且在測試環節中能通過筆記本電腦攝像頭捕獲用戶面部內容，這是任何可用性測試的重要組成部分。

【第二步：設置顯示器】

這一步是可選的。因為我傾向於使用外接顯示器，使主持人和記錄員不必同時瞥過用戶肩膀來觀察行為。這樣也能將用戶干擾降至最低，用戶不會看見面前筆記本電腦屏幕上的巨大手機屏幕投射，它會出現在外接顯示器上。

所以，為你的MacBook連上外部顯示器，如果外接顯示器與筆記本屏幕顯示一致內容，意味著這不是我們希望設置的鏡像模式。打開「系統偏好-顯示」，將「鏡像顯示」去掉勾選。

圖3. Mac的正確顯示設置

【第三步：設置Reflector】

要將智能手機內容發送到筆記本電腦屏幕上，只需打開Reflector，在筆記本電腦屏幕左上角的工具欄上可以看到它的圖標。

圖4. Reflector打開後你將看到的圖標

【第四步：對智能手機進行鏡像】

現在就是見證奇蹟的時刻！如果你使用的是iPhone，從屏幕底部上劃，啟動AirPlay。然後從列表中選擇你的MacBook，再打開鏡像按鈕。

圖5. 在你的iPhone上打開鏡像

你的iPhone應該出現在外接顯示器的中間，是不是很神奇！（要是iPhone出現在MacBook屏幕中，只要把它拖拽到外接顯示器上即可）

使用Android 4.4.2或更高版本設備的，從屏幕頂部向下划動進入設置，選擇「投射屏幕」選項，然後選擇你的MacBook。

注意：你的智能手機和MacBook必須保持在同一Wi-Fi網路中，要是出現問題，這是故障排除首先進行的事情。

【第五步：設置ScreenFlow】

開始錄製前，打開ScreenFlow。初始設置對話框彈出，你需要做如下設置：

圖6. 設置ScreenFlow

1、「錄製桌面來源」

選中並確保從下拉菜單中選擇你的外接顯示器。（參照示例中的2270W）

2、「錄製視頻來源」

選中並確保選擇默認選項「FaceTime高清攝像頭（內置）」。

3、「錄製音頻來源」

選中並選擇「內置麥克風」。

【第六步】開始錄製測試內容

讓用戶處於MacBook正前方，這樣你能在ScreenFlow的預覽中看到他們的面部。然後按下紅色錄製按鈕，搞定，現在已經開始錄製了。

當你與記錄員在外接顯示器上觀察用戶行為時，用戶正端坐在空白的筆記本電腦前，像往常一樣使用手機，沒有線纜、膠帶、攝像頭或者其它干擾。

在以下截圖中，我在iPhone上把玩Spotify。你能看到，在錄製手機屏幕的同時，ScreenFlow提供了畫中畫窗口來顯示用戶面部表情，完美的可用性測試。

圖7. ScreenFlow輸出錄製內容的截圖

當然，這種方式依舊不能展示用戶的手指與設備互動的過程。但總體說來，它的優點還是很多（見結論中的列表），算是一個無可非議的好方法。

【設置總覽】

需要明確的是，讓我們回顧下設置的全貌。用戶應該坐在MacBook面前，使用自己的手機，主持人和記錄員應該坐在附近，通過外部顯示器觀察用戶行為。

圖8. 測試中房間與屏幕等設施的安放方式

使外接顯示器正面遠離用戶視線，否則大屏幕上的手機屏幕影像會干擾用戶的注意力。

結論

我們介紹的這種方法有諸多優點值得一試：

1、簡單

首次將所有環節調試完畢之後，接下來每次只需要花費5分鐘左右來設置。

2、可靠

它並不完美，但軟體崩潰和設置問題出現的幾率很低。然而，雪橇+攝像頭的方案出現問題則是意料之中的事。

3、性價比高

假如你使用MacBook，整個解決方案只需花費不到200刀。（與之對應，專業高端的可用性測試軟體Morae售價2000刀）

4、專業

高質量並專業的輸出，看上去不像是黑客技術。我們把錄製的內容與參與的客戶、高管們分享，效果很好。

5、靈活

這種方案適用於主流平台：PC、Mac、Android和iOS。

6、方便

因為不需要任何膠帶或者尼龍搭扣，測試者還能使用自己的手機，這讓你的測試更加自然有效。

原文地址：

A Guide To Simple And Painless Mobile User Testing

譯者：

阿里巴巴1688事業部/無線交互/舒舟

流動法則與響應度量——1688網站的響應式設計

heyuchan | 交互設計, 用戶研究 | 四月 30th, 2015 | 評論(2)

新的設備不斷增加，舊的設備依然存在，這種快速增長且日趨加劇的可聯網設備的多樣化，使得網頁設計已不再有標準的屏幕尺寸。基於一個固定尺寸對網站頁面進行設計的模式，已無法滿足用戶設備多樣化的通用需求。理想的情況是分別為每種設備單獨創建一個版本，然而這對於大多數網站來說是不切實際的，於是越來越多的網站選擇成為響應式，響應式設計已成為網頁設計的一大主流模式。

除了設備多樣化的現狀與趨勢之外，響應式設計能夠帶來多終端體驗的一致性，因此作為全球企業間(B2B)電子商務平台的我們（1688網站）也在積極研究適用於本站的響應式設計方式。

本文將對目前主要的響應式設計方式進行梳理，把不同響應方式的響應規則與體驗改善程度通過可視化的方式進行量化評估，並基於1688網站的設計現狀及用戶設備環境，反思網站的響應式設計模式，從而探索適用於本站的響應式柵格系統及普適規則。

一、什麼是響應式設計

自2010年5月，伊桑.馬科特（Ethan Marcotte）提出並實踐了響應式網頁設計，便引起了廣泛關注，許多設計師、工程師們紛紛加入到響應式設計的研究和實踐中來。響應式設計發展到目前的階段，已不僅僅是一些技術工具（如①流動布局、②媒介查詢、③彈性圖片）的集合，更是一種設計技術、設計策略的能力體現。

響應式設計的本質目標是：通過識別用戶設備屏幕的尺寸環境，選擇最佳的內容展示方式，讓頁面有能力覆蓋所有設備環境的良好用戶體驗。它應該有三個特質： 1）內容靈活性：內容可以像水一樣，能夠根據容器的不同，而展現出不同的形狀。 2）設備多樣性：頁面能夠適配多種類型終端設備，兼容已有或未來的設備。 3）體驗一致性：網站在多種設備場景中均能保持統一的良好體驗。

二、響應式設計的三種方式

許多網站為實現響應式設計，有各自的不同做法，主要可以歸結為以下3種方式： 1）多個固定尺寸切換的響應方式 2）為移動端、桌面端分別打造兩套區間尺寸的響應方式 3）跨終端無縫體驗的響應方式

1、多個固定尺寸切換的響應方式 基於核心用戶的主流設備，選擇典型的解析度，分別設計出幾個尺寸版本，投射到相應的設備中去。嚴格意義來說，這不是真正意義上的響應式，或者可以稱之為偽響應，它並沒有從根本上解決讓頁面有能力去適應多種設備屏幕的問題，而是讓一些屏幕尺寸相近的設備使用同一套尺寸頁面。其主要案例有：http://1688.com、http://taobao.com、http://etao.com…

該響應方式的優缺點分別為： 1）優點：不用考慮同一斷點內的拉伸規則，基於現有固定尺寸的頁面設計流程和模式就可以完成網站的設計開發，主要可用於一些桌面端的設備環境。 2）缺點：它只能在幾個特定解析度設備下顯示非常好的體驗效果, 而除這幾個值之外的設備上的體驗效果將大打折扣；另外用戶的設備無法窮舉，隨著用戶主流設備屏幕尺寸的變更，網站仍需要不斷增加或更換尺寸版本。

2、為移動端、桌面端分別打造兩套區間尺寸的響應方式 通過綜合評估網站用戶設備的終端類型、屏幕尺寸、網站定位，以及不同終端環境的用戶使用特性，分別為移動端和桌面端打造兩套獨立頁面，它可以實現所有用戶設備屏幕尺寸中的部分區間段的理想體驗覆蓋。有人說這是殘疾版響應式，但基於移動端與桌面端完全不同的用戶行為方式及體驗環境，以及從小屏手機到大屏電腦的大尺寸跨度給設計帶來的局限性，這種方式就現階段而言，尤其是對一些內容較為豐富的綜合型網站來說，是一個不錯的選擇。其主要案例有：http://alibaba.com、http://aliexpress.com、http://amazon.com…

該響應方式的優缺點分別為： 1）優點：能較好地基於不同終端設備的體驗環境，考慮不同的用戶行為習慣及操作方式，分別為移動端及桌面端打造不同的用戶體驗。 2）缺點：所有的頁面都要單獨開發兩套，有較大的工作量，也不利於體驗的一致性；另外不同類型終端間的尺寸界線已漸漸模糊（如大屏手機與小屏平板、大屏平板與小屏筆記本電腦），兩套方案尺寸分割點的劃分會變得越來越尷尬。

3、跨終端無縫體驗的響應方式 從小屏手機到大屏電腦所有用戶設備全尺寸區間覆蓋的一套完整頁面系統，能兼顧不同類型終端的交互行為差異，帶來跨終端設備的用戶體驗一致性。其主要案例有：http://smashingmagazine.com、http://bootcss.com、http://indochino.com、…

該響應方式的優缺點分別為： 1）優點：所有用戶全設備的良好體驗覆蓋，能兼容已有或未來的設備，包括新興起來的穿戴設備、電視、甚至其他物聯網設備界面等的全場景。 2）缺點：對網站設計師及工程師們的能力都提出了更高的要求和挑戰，從視覺設計、跨端交互、頁面性能等方面都存在很多難點需要去攻克。

總結以上這三種方式（如下圖），在廣義上來說，他們都可以稱之為響應式設計，只是不同方式的響應式設計分別對網站的設計能力與技術水平提出了不同等級的要求： 1）多個固定尺寸切換的響應方式：需要考慮頁面體驗的一致性，設計多個尺寸版本的頁面方案。 2）為移動端、桌面端分別打造兩套區間尺寸的響應方式：需要基於內容的可讀性，擴大頁面的尺寸覆蓋範圍，制定區間尺寸的內容拉伸規則。 3）跨終端無縫體驗的響應方式：需要兼顧跨終端不同操作方式的交互行為差異與區間尺寸的內容拉伸規則。

……

———————— 我是華麗的分割線 —————————

特別說明：

因本文章發表在《U一點 ● 料——阿里巴巴1688UED體驗設計踐行之路》中，目前處於新書發行的內容保護期，所以更多內容請大家在實體書中查看。

購買請移步天貓>

[譯文]移動電商網站中輪播組件用法研究

10000 | 無線U遞, 用戶研究 | 三月 13th, 2015 | 評論(6)

看到這個標題你內心裡或許會充滿疑惑，我在寫這篇文章之前，也曾經有很多疑問。你去問任何一個人，他們都不會推薦使用輪播這種模式。但是輪播本身並不是那麼一無是處。 本文將基於真實的數據，針對近期業界對輪播組件的各種爭論做個回應，看看大家對它的評論是不是名副其實。我會針對各個觀點進行剖析，看看我們的數據與預期是否一致。通過這些內容，我會詳細闡述我們的研究發現和研究方法，並給大家一些建議，希望對大家未來在判斷何時以及如何使用輪播組件有價值。之前有很多人不看好輪播這種模式。從NNG的一篇文章開始；真正的轉折點是Erik Runyon發表的關於聖母大學網站的一篇詳細分析輪播模式的文章「輪播組件用法詳解」；在Jared Smith的文章「是否應該使用輪播」中，他建議大家放棄使用輪播組件；Brad Frost也在他的文章「輪播組件」中呼應了這種對輪播的負面評價；緊接著Luke Wroblewski加入了反對派的陣營，他說從目前的數據來看，建議不要使用輪播，他的文章詳情見「 以後絕對不再使用輪播」，（他後來又補充數據說對他的結論有懷疑）。

在Mobify（提供移動建站服務的網站），我們開發用於移動設備的大型電子商務網站。很多情況下，這些網站都有一個輪播組件。我們這樣做錯了嗎？是不是傷害了我們的用戶？如果我們停止使用輪播組件，我們的網站是否就會變得更好？這些問題是我和這篇文章的共同作者Peter Maclachlan在審查我們開發的網站時反覆問自己的。我和Peter決定做我們自己的研究，而不是盲目追隨網上這些反對輪播組件的聲音。

自此，我們開始研究那些我們能獲取的數據。剛開始，我們充滿好奇，我們的數據說明了什麼呢？我們的發現令人非常驚喜，並且鼓舞著我們不斷深入研究。我們在為期11個月的時間裡審查了幾個中型到大型的網站。我說的中型到大型網站，是指在過去一年裡交易額不少於兩千萬美金的網站。在這11個月的時間裡，我們研究了近750萬次輪播組件的交互事件。這篇文章的結論都是基於這些數據所做的分析。

我們為什麼要使用輪播組件

輪播組件存在的意義絕對不僅僅是為了在首頁顯示更多的市場營銷信息。因為我們是專註於做無線端設計的，我們最大的顧慮就是要確保在有限的屏幕尺寸和信息的密度之間做好平衡。這意味著，我們總是要在有限的面積里做好水平和垂直方向上的空間利用。我們使用輪播組件可以增強信息的密度，並且不需要用戶在查看時滾動頁面。使用情景也是理解輪播組件的一部分。我們的設計團隊只是在規避使用輪播組件，而沒有向用戶提供具體的使用情景。大部分情況下，我們只是在一中情境中使用輪播組件：在商品詳情頁中展示更多的圖片。在商品詳情頁中，用戶知道左右滑動一個輪播組件可以查看更多的商品圖片。在一個網站首頁的市場營銷輪播組件中，用戶是沒有辦法知道下一張圖片是什麼內容的，也不清楚這裡面的信息是否需要去關注。

反對輪播組件的理由

目前反對使用輪播組件的理由主要有以下幾個方面：

1、用戶不會點擊輪播組件中的內容；
2、如果用戶要點擊輪播組件中的內容，他們只會點第一個；

3、輪播組件不易理解；
4、自動輪播對用戶不友好；

針對前兩條，我們將用我們自己的數據和Erik Runyon文中的數據作比較。最後兩點更多的是定性的結論，我會針對性的剖析。

猜想一、用戶不會使用輪播組件

大家的爭議

這個猜想基於Erik Runyon文章中展現的聖母大學網站數據。只有1.07%的訪問者點擊了網站的Banner輪播圖。只是查看Banner無法作為交互行為被記錄，只有產生點擊行為的用戶才算數。為了反駁這一猜想，需要有數據能夠顯示實際上發生交互行為的人數高於1.07%才行。

我們的結論

用戶對產品圖片輪播產生交互行為的比例：72%的用戶至少切換輪播圖一次；23%的用戶會放大圖片。如果你看我們的研究結果，具體的以放大操作為例，你會發現23%的用戶直接進行圖片的放大以獲得更多的信息。如果你更關心哪些用戶有切換輪播圖的行為，數據顯示高達72%的用戶直接產生了操作行為。下文中將會展示我們的數據是如果獲取的，請留意「發現」部分。

猜想二、用戶只對第一張輪播圖感興趣

大家的爭議

Erik提到的點擊了輪播圖的1.07%的用戶中，有89.1%的人點擊了第一張輪播圖。並且，我們猜測如果這個輪播組件是有效的，那麼隨著輪播圖數量的不斷增加，點擊分布將會有一個合理的下降趨勢。Erik的數據顯示，在第二個位置的輪播圖只有整個點擊數據的3.1%。更客觀地來看，聖母大學網站中3,755,297位訪客中只有1,234人點擊了第二個位置上的輪播圖。第二個位置之後的輪播圖的點擊數據也符合我們預期的落差。我們如果要反駁這個猜想，那麼就要有數據顯示，對第二個位置上的輪播圖有交互行為的用戶比例高於3.1%。

我們的結論 我們的數據顯示，和第二個位置上的產品圖片輪播有交互行為的用戶佔比為15.7%。至少64%的用戶從第二個位置的產品圖切換到了第三個位置的產品圖。用戶切換輪播圖有一個線性的變化規律。不同的輪播圖切換方式會導致不同的數據結果。所有的數據都表明用戶從當前的輪播圖切換到其他輪播圖的比例較高。和第一個位置上的輪播圖有交互的用戶中，有64%的人和第二個位置上的輪播圖也產生了交互。聖母大學的數據只是包含了用戶的點擊，而不是全部交互行為。為了確保我們的數據更有說服力，我們也會看產生直接交互行為的數據。對於我們的產品圖輪播組件來說，那就是用戶的放大操作。數據顯示，有23%的用戶產生了放大產品圖的行為，其中54.1%的人放大的是第一個位置的產品圖。所有的放大行為中，有15.7%發生在第二個位置的產品圖。這個圖和Erik的數據很相似：第一個位置的輪播圖佔據了絕大多數交互行為。然而，我們的數據中隨著輪播圖位置而產生的數據衰減趨勢更為合理；45.9%的直接交互行為發生在第一個位置之外的輪播圖上。這就意味著，接近一半的直接交互行為產生在第一個位置的輪播圖之外。 提示：關於這個數據的來源，詳情請查看下文中「發現」部分。

猜想三、輪播組件不屬於無障礙設計

接下來的問題是不好的，但是易於解釋。這個爭議整體上沒有否定輪播組件，只是對於當前用法的質疑。輪播組件本身並沒有所謂的無障礙問題。當然，我們在應用輪播組件的時候，可能存在設計上對無障礙的考慮。 這一點，我不認為是輪播組件本身的問題，但是當你決定要用輪播組件的時候，你必須要考慮。下一個版本中，我們一定會讓我們的輪播組件變成一個無障礙的插件。這不是關於輪播組件有效性爭議的一部分，所以這裡我們就不做更多論述了。輪播組件本身不算是無障礙的，但是這並不能說明我們將來在應用的時候做不到無障礙。

猜想四、輪播組件的自動輪播對用戶不友好

這個爭議是說能自動輪播的輪播組件，想要去點擊的用戶會有障礙。我們完全同意這種觀點。如果你想要用輪播組件，一定要避免使用自動輪播。如果你需要更多的理由，請看這篇Brad Frost的文章。 關於這個問題的可以閱讀Jakob Nielsen的文章」用戶不喜歡自動輪播的輪播組件以及手風琴組件」，沒有那個輪播組件我們設計成自動輪播的。 如果你不得不使用自動輪播，那麼在用戶準備要產生交互行為的時候，請停止自動輪播。 當用戶想要點擊一個輪播圖的時候，因為自動輪播到下一張，導致用戶點擊錯誤，這種體驗非常糟糕。在PC端，這意味著當用戶的游標Hover到輪播圖的時候，停止自動輪播。在移動端，這意味著當用戶準備觸摸的時就停止自動輪播。自動輪播不友好。如果你要使用輪播組件，請不要讓它自動輪播。

發現

提醒：這一部分主要是揭秘我們是如何做上述研究，數據是如何獲取的。如果你對此感興趣，請繼續往下讀，如果不感興趣，請跳過這一部分。

研究方法及情景 這些數據來源於對幾個中型到大型電子商務網站長達11個月的分析。在此期間，我們抽樣了大約750萬個輪播組件的交互事件。我們遵循隱私保護協議，沒有保留任何個人信息。

為了針對上述的前兩個猜想，我們的數據主要著眼於以下兩點：

1、用戶與輪播組件產生交互的頻率；

2、用戶與輪播組件中第一個位置之外的圖片產生交互的頻率；

定義交互方式

在研究中，我們跟蹤了輪播圖組件中的四種交互方式： 1、智能手機中，用左右滑動的手勢切換輪播圖； 2、單擊輪播圖組件中的箭頭，每次切換一張圖； 3、單擊輪播圖組件底部的縮略圖切換； 4、單擊輪播圖中當前的圖片，放大至全屏查看；

為了和聖母大學的數據相對應，我們選擇了第四種交互方式，單擊放大，這個操作和點擊比較類似。兩種情況下，用戶都是對當前的輪播圖比較感興趣，並且希望了解更多內容。補充另外一點，我們關注的交互方式是指那些最核心的交互，不包含那些無法觸發交互事件的操作。沒有導致輪播圖切換的意外滑動也不算是能觸發交互事件的交互。

結論

1.各種交互方式的使用佔比 我們首先研究的是用戶使用手機中輪播圖組件的頻率，我們是通過獨立的交互事件來看這一現象。這裡所說的獨立交互事件，是指用戶通過上述的交互方式和輪播圖組件的首次交互行為。如果一個用戶點擊了5個輪播圖的縮略圖，那麼我們計算的時候還是只算一個獨立的交互事件。下文中我們將更詳盡的闡述獨立交互事件。數據顯示，一個頁面中大約72%的用戶以各種方式對輪播圖進行了操作。縮略圖是最清晰地，能夠提前預知內容的交互方式：55%的用戶至少點擊一個縮略圖。

1a.各種交互方式的佔比 我們的數據表明，縮略圖是最受用戶歡迎的交互方式。事實上，縮略圖的使用率是其他類型的輪播圖切換方式的兩倍，受歡迎程度比箭頭和左右滑動加起來還要高。放大操作是用戶進行的操作中頻次僅次於點擊縮略圖的操作。放大和左右滑動的共性是，可以出發操作的區域都比較大，幾乎是點擊輪播圖的任何位置都可以觸發。我們猜想用戶的放大操作中又不部分可能是誤操作。話雖這麼說，放大操作仍然是用戶目的性比較強的一個操作，所以產生意外操作的概率不高。大約23%的訪客進行了放大操作。左右滑動是用戶使用率最低的操作。這一點強有力的說明，給用戶提供一個清晰的控制系統有利於引導用戶進行操作。箭頭和左右滑動操作都是為了切換到下一張輪播圖。如果我們把這兩種交互方式整合在一起，他們的使用率和縮略圖比較接近。

2.所有類型的操作 總體上看，每個輪播圖平均有2.4次交互事件。這表明與輪播圖產生交互的72%的訪客中，產生多次交互行為是很正常的。

2a.各種類型的交互方式操作次數佔比（非獨立） 點擊縮略圖的用戶中更傾向於使用縮略圖而不是其他交互方式，平均在一個輪播圖中點擊6張縮略圖。 左右滑動和點擊箭頭進行操作的用戶有近似的操作頻率：平均數分別是3.5和3.9次。放大操作的交互次數較少，這表明用戶只有在對某張產品圖非常感興趣的情況下才會放大。操作縮略圖的用戶擁有最高的點擊次數，這說明略縮圖的交互方式比箭頭和左右滑動有更高的用戶參與度。探索這一層次的參與度所導致的額外轉化，比如「加入購物車」將會是件有趣的事情。如果結合箭頭和左右滑動兩種交互方式來看，數據和我們分析的獨立交互方式比較接近，前後移動（滑動或箭頭操作）是輪播圖中最普遍的交互方式。

3.交互頻次衰減率

從我們統計到的數據，可以畫出用戶每次操作時之後再次操作的概率曲線。在輪播圖切換的案例中，這就是說在用戶從第一張輪播圖切換到第二張輪播圖之後，再從第二張輪播圖切換到第三張輪播圖。 在直接交互的案例中，這就是說點擊放大第一張輪播圖之後再去點擊放大其他的輪播圖。我們畫出了各種不同交互方式下的曲線：縮略圖、箭頭、滑動、放大。

3a.縮略圖

每一張被點擊過的縮略圖，用戶有大約69%的可能性會繼續點擊其他縮略圖。從下圖中的指數衰減曲線可以更精確的看出這一變化趨勢。儘管用戶點擊縮略圖可以有很多可能的順序，但是大部分的縮略圖用戶還是按照輪播圖中默認給定順序查看。

3b.箭頭

對於每個被點擊的箭頭，我們發現用一個接近線性的衰減曲線來描述是比較準確的。在這種線性衰減中，用戶有大約76%的可能性會會再次點擊這個箭頭來查看下一張輪播圖。

3c.左右滑動

左右滑動的衰減也是線性的，用戶有64%的可能性會再次滑動。下圖是一個更精準的指數變化趨勢圖。3d.放大 放大操作的規律遵循冪定律，線性的變化不能準確描述這一趨勢，下圖的函數能夠比較真實的反映其趨勢。

一些思考

營銷類輪播圖 VS 圖片輪播

這是我們在用我們的數據和Erik統計的聖母大學的數據作比較時發現的問題。我們用的輪播圖類型不同。我認為這個問題並不影響我們的研究結論。這兩種輪播圖或許在視覺樣式上不相同，但是我們的研究說明他們的基本模式是成功的。我們這項研究的目的是為了驗證這種水平滾動的多頁輪播圖是不是有缺陷。從數據來看，並沒有明顯的缺陷。聖母大學輪播圖的問題可能不在輪播圖組件本身，而是設計問題。

用戶對營銷Banner的認知本身就比較疑惑。這類輪播Banner可能根本就不能給用戶提供有效信息。有很多的原因會導致輪播Banner的無效，以至於大家認為這個UI模式本身就有問題。我們的網站有時也會使用營銷類輪播Banner。接下來我們將會用我們的數據和聖母大學網站的數據作一個很有意思的比較。

Luke Wroblewski在Google的一次演講中提到Amazon UX經理PJ McCormick的數據。PJ展示了Amazon使用營銷Banner輪播圖組件的一些積極樂觀的數據。Luke認為目前的營銷輪播組件最大的設計問題是控制輪播的部分不夠明確。下圖中，Amazon的輪播圖組件設計明確的將控制輪播的部分單獨出來，這樣做就很好地迴避了控制部分不夠明確的問題。

手機端交互 VS PC端交互

我們的輪播組件只在手機端有。聖母大學的網站只在PC端有輪播組件。用戶在手機端的交互要比PC端頻繁。這有可能是因為手機端有滑動操作，也可能是因為PC端用滑鼠操作小控制項比較難。還有可能是由於輪播組件原本就是更適合手機上實用的一種模式。

輪播組件成功應用的標準 我們這裡說的輪播組件成功應用的標準和Erik的標準不同。Erik的更在意用戶是否通過輪播圖點擊到了裡面的內容，重點看這個轉化率。我們的標準是看用戶是否有查看更多的意圖，是否看了所有產品圖片。前者的標準顯然更高，要求用戶點擊打開新的頁面。這就是為什麼聖母大學網站中的輪播組件數據相對於我們的數據更低。

大學的網站VS電子商務網站 我們拿聖母大學的網站和我們的網站作比較，有一個局限性，那就是聖母大學的網站用戶和我們的網站用戶使用情景不同，兩個網站或許沒有可比性。電子商務網站用戶的目標是發現更多關於產品的信息以便於做出購買決策。大學網站的用戶是為了學習或者找到關於大學的一個具體信息。

對未來的一些思考

這一次的數據分析使我明白了，對於輪播組件，我們還有很多研究工作要做。下面的這些內容使我希望自己將來可以進一步研究，也希望看到其他同行可以針對此進行一些研究： 1、針對不同類型的輪播組件做對比研究。這將有助於研究我們的營銷類輪播組件和 Erik Runyon的數據有何不同。 2、衡量交互方式是如何影響用戶的操作行為趨勢。如果他們操作的是一個產品圖片集合，他們是更願意還是更不意願使用加入購物車呢？ 3、我希望知道是否有辦法衡量手機端、PAD端、PC端用戶在輪播組件的交互方式的差異。不幸的是，我們不做PC端的站點，所以我們缺乏PC端的數據。我們期望做直接的對比，而不僅僅是從已知數據去做推測。 4、數據顯示，在手機端，滑動是最低頻的操作。我認為滑動操作在手機上被其他交互方式弱化了，或許也是因為在PC端，用戶對滑動操作還沒有什麼認知。通過提供額外的控制項，用戶可以很明確的獲得操作輪播組件的交互方式，因此，他們更願意選擇這樣的交互方式。假如移除了輪播組件中其他的可操作控制項，那麼滑動的交互方式是否會增加？

結論

這篇文章是在徹底調查Mobify為什麼以及如何使用我們提供的輪播組件，構建自己的網站。不同類型的輪播組件之間差別很大。給用戶提供了額外的上下文情景之後，不用迫使用戶做滾動操作，他們就很樂意使用輪播了。 目前關於輪播組件的數據都是關於市場營銷Banner的。這些數據都說明了一點，用戶對輪播組件中的內容很少產生交互。同時也說明了，用戶切換輪播組件中的內容，翻到下一張輪播圖的概率非常低。當然，這些數據也證明了一些普適性的觀點：輪播組件不易於理解，自動輪播不友好。 我們的數據和Erik Runyon提供的關於聖母大學的數據共性比較少。用戶在我們的網站上交互行為更多。相對於聖母大學網站的用戶數據，我們的用戶對當前輪播圖之外的內容有更高的交互行為比率。產生這些差異是是有很多原因的，這也是我們想在總結的環節去探討的。不同的的輪播組件形式適用於不同的產品目標。 對我而言，這就是本文最大的結論。 輪播組件有很多的形狀和尺寸。有一些很有效，有一些效果並不好。在盲目的批判之前，我們應該針對不同的情況收集更為豐富的數據，來充分了解真實的狀況。Erik的研究結果認為，首頁的市場營銷輪播效果不好也是事實。用戶不知道能從輪播組件的內容中獲取到什麼信息，因此，他們也不想去操作。如果你能夠很清晰的告訴用戶你將會獲得什麼信息，這些信息對你有什麼用，那麼，用戶肯定也樂意去做更多的操作。

那麼，你到底會不會用輪播組件呢？

不要僅僅是為了在有限的屏幕空間展示更多內容而去用輪播組件。輪播組件主要是用於為用戶提供特定情境下更多的內容。在手機端，當橫向的屏幕空間有限，內容彼此有關聯性，並且這個內容對用戶有意義的時候通常會用輪播組件。 當內容根本就無趣或對用戶無意義時不要用輪播組件。第一張展示給用戶的輪播圖一定要能傳達出其他剩餘輪播圖將要給用戶傳遞的內容。用戶從當前輪播圖切換到其他輪播圖的時候必然是因為這樣可以獲得更多有用的信息。輪播的內容要有吸引力，這樣才能保障輪播的有效性。如果用戶對你的輪播不感興趣，這不一定是是輪播組件本身的問題。 不要為了讓用戶看到你要展示的全部的容而使用輪播。即使你的輪播是有效的，用戶也不會查看所有的內容。第一個展示的輪播內容應該是最重要的，所有的輪播圖應該按照重要性的順序展示。如果查看多個內容很重要，但是這不是必要的操作，那麼我推薦使用縮略圖輪播的方式。 這個問題並沒有唯一的答案。在某些情況下，與市場營銷Banner輪播一樣，答案是NO。在其他情況下，與產品輪播圖一樣，答案是YES。在各種不同的設計模式下，如果你要問「我是不是應該用輪播組件」，這的確有一個正確的回答：如果這適合你的用戶就是對的。

原文地址：[Carousel Usage Exploration On Mobile E-Commerce Websites] 原文作者：Kyle Peatt

淺析數據化設計思維

余代軍 | 交互設計, 用戶研究 | 一月 6th, 2015 | 評論(27)

1、做設計為什麼還需要看數據？

很多設計師從來不看數據，要麼是因為沒有數據可看，要麼是根本不想看，但是也一樣把設計做的很好啊！設計本來就是有感性的一面，為什麼非得要和數據扯上關係呢？我們不妨先看看設計的本質是什麼。設計不同於純粹的藝術，藝術源於藝術家對現實的觀察和思考，以及對這種觀察和思考的自我表達；設計天生就是為別人在做事情，縱然同樣需要觀察和思考，但是這種觀察和思考不是為了表現設計師的自我，而是為了更好地服務於某個用戶群，因而設計師了解用戶就變得非常重要。尤其是要了解用戶的目標、行為、態度等相關的情況，我們這裡說的數據其實也就是對用戶的目標、行為、態度等情況的量化，因此，通過對這些數據的分析，我們可以更好地挖掘用戶的需求，進而為用戶提供更好地體驗。

簡單點說，設計是服務於用戶的，了解用戶才能更好地做設計，數據是了解用戶的一種途徑。

2、數據在項目中的作用有哪些？

要了解這個作用，我們先回到設計師看數據的主要場景，總結起來無外乎兩類：一個是因為項目的需求，通過數據的論證，讓設計走得更從容，有理有據，而不是設計師自己的YY；另外一個是日常監測的需求，自己做的產品，總要知道大概有多少人在用，使用的情況如何，用戶的行為和預期是否一致。也就是說要了解你的設計被使用的情況，否則你怎麼知道設計的好不好，是不是達到了設計目標，是不是真的幫助用戶解決了問題。

先來分析下項目中看數據的場景。幾乎整個設計的過程都可能會用到數據，概括起來可以把這個過程切分成三部分：

設計前數據幫你發現問題：所有設計開始之前的研究和分析，都是為了更明確用戶的需求，明確為什麼要做這個設計？從業務的角度來看，這個產品對公司有何價值，此次設計要達到什麼目的；從用戶的角度來看，這個產品對用戶有何價值，此次設計要為用戶解決什麼問題；在了解業務訴求和用戶訴求的過程中，我們難免要用到數據，這個階段，數據的作用就是為了「發現問題」，看看設計可以解決什麼問題，從而更佳明確設計的目標。

當然具體的工作中，多數設計師都比較糾結，既要考慮業務訴求，又要考慮用戶訴求，如果這兩者不能完全匹配的時候，我們該咋辦，是兩者的相加嗎？還是我們就只考慮用戶訴求，對業務訴求看看就行了。我個人的理解是，現實工作中我們都不是在追求最完美的設計，更多的是在做平衡，如果是一個用戶型的產品，比如偏向於為用戶提供某個功能的平台，本身就是完全從用戶的角度出發，通過為用戶提供功能幫助用戶解決問題的，應該向用戶訴求靠攏多一些；如果是一個商業型的產品，比如偏向於為用戶提供某些內容的平台，那麼在為用戶提供主動查找的入口的同時，可以適度的向著業務發展需求傾斜，做適度的業務層面的引導；當然這個也不是絕對的，往往同一個平台，同一個產品，在不同的發展階段也有不同的需求，如果是一個全新的產品，業務的生存就變得格外重要，這個時候設計應該多一些考慮業務訴求，先幫助業務生存，否則，這個產品都要掛了，還怎麼為用戶提供服務呢？

當然，好的設計師總是能在業務和用戶之間找到巧妙的平衡，找到二者的交集，舉個例子，假如這個產品這個階段就是要做用戶規模，而用戶訴求是享受個性化的服務，看似完全不關的兩個訴求，實際上我們完全可以通過更好的個性化服務提升用戶滿意度，獲得好的用戶口碑，再間接地藉助用戶口碑提升產品的用戶規模，這二者之間並不是完全的不相干，更多的時候看能否找到他們的關聯性，抓住階段性的設計目標。

通過一個具體的例子看看如何利用數據來發現問題？數據代表的是用戶的目標、行為和態度，但是單獨看一個數字是沒辦法發現問題的，數據的對比是最簡單有效地手段。我們知道交易關係買家所產生的交易對1688網站有著非常重要的意義，我們想提升交易關係型買家的交易體驗，但是不知道從何入手，因此做了大量的數據分析。交易關係買家是通過什麼方式找到老賣家?不同路徑的轉化率如何?不同用戶查找方式與轉化率有什麼差異?

首先，通過用戶群的細分，我們發現，交易關係買家通過搜索支付訂單轉化率是搜索整體支付訂單轉化率的2倍。因此,在搜索結果中增加老買 家標籤,方便找到老賣家。

此外，我們還發現，普通會員、1-2星會員等級,是提升交易關係交易的關鍵用戶。通過以上的數據分析，我們找到了目前主要的一些問題，圍繞著這些問題，後續做了優化方案。

設計中數據幫你判斷思路：因為設計師的個人經驗不同，創造性思維不同，因此不同的設計師面對同一個問題，解決方案也很可能差別較大，即便是同一個設計師也會想到不同的解決方案，到底哪個方案更合適，有些情況下數據可以給你參考意見，為你提供「判斷思路」，協助你做決策；條條大路通羅馬，但是哪一條路才是當前最合適的呢？

通過一個具體的例子看看如何利用數據來判斷思路？有一個批發類的電商網站（http://1688.com）的頻道首頁（http://ye.1688.com），我們發現用戶的轉化率很低，就去研究了數據，然後結合了對典型用戶做的用戶訪談的結論，最後發現轉化率底的原因其實很簡單，這個頻道的首頁入口主要是來源於整個網站的首頁，而整個網站的首頁是一個全行業品類的頁面，用戶如果是女裝行業的買家，她從一個全品類的首頁點擊一個鏈接進入另一個全品類的頁面，再艱難的找到女裝這個類目，再點擊進入List頁面查看商品，這個路徑是非常深的，那麼怎麼解決這個問題呢？那就是要避免做女裝的用戶從網站首頁進入這個頻道之後還要再次選擇女裝類目，才能看到女裝的商品！

解決這個問題的思路有哪些？可以在網站首頁增加入口，讓用戶直接點擊女裝類目進入頻道首頁，給用戶展示女裝商品；可以在用戶進入頻道首頁之後，根據行業偏好的個性化數據來推薦商品，推薦的不準確，用戶也可以去定製；到底哪個更靠譜？兩個思路各有利弊，鑒於前一個思路需要有外部依賴，要改動網站首頁，所以我們內心都很期望後一個思路能跑通，但是怎麼知道這個思路行不行？首先我們需要知道行業的個性化推薦能覆蓋多大的人群，又有多少的人願意去定製行業偏好？

對於普通的網站來說這個可能是一個不夠明確的問題，但是http://1688.com是一個會員用戶早就過億的B類電商網站，有著如此龐大的用戶規模，較高的用戶覆蓋率，這就意味著對用戶行為數據的積累，再者B類的用戶有一個顯著地特徵就是在一個較長的時間裡，行業的偏好相對比較穩定，如果是一個主營女裝的買家，那麼她的偏好一般會以女裝為主，不會超出服裝的範圍，最多會有少量的服裝周邊配套的採購。

如上圖，通過行業偏好的個性化演算法，我們追蹤了一段時間來訪這個頻道首頁（http://ye.1688.com）的用戶數據，我們發現大約2/3的用戶是有著非常明確的行業偏好的，那麼這基本可以斷定做行業偏好的個性化推薦是靠譜的！但是剩下的1/3用戶願意去定製行業偏好嗎？我們當時因為時間原因，無法直接從這1/3無明確偏好的用戶中去判斷他們是否願意定製偏好，但是通過整個用戶群的問卷抽樣調查發現，大約3成的用戶表示定製行業偏好是很好的服務，基於這些情況，我們判定基於行業偏好的個性化推薦能夠解決絕大部分用戶的行業偏好問題，提升了內容的相關性。這個方案最終上線後，實際上有大約10%的人真正找到定製入口並且產生了定製行為，70%的人不用定製，實現了默認的精準推薦。

設計後數據幫你驗證方案：我們的設計方案到底做的好不好呢？衡量標準就是看設計方案是否能夠達成設計目標？這也需要數據來量化，通常會用GSM的模型來支撐設計的驗證。G（Goal）設計目標、S（Signal）現象信號、M（Metric）衡量指標，所謂的設計目標，就是要確定設計要達成什麼結果，要解決什麼問題；衡量指標，我們不能憑空猜想，必須建立在設計目標的基礎上，先假設設計目標會實現，那麼會出現什麼現象或信號呢？列舉出所有的現象或信號，選擇我們可以監控的到的，然後對這個現象或信號產品進行量化，自然就得到了衡量指標，但是指標的波動幅度往往要依賴經驗來定。

比如說，某個產品的設計目標是通過設計的引導，讓更多的買家產生購買，想像一下，如果設計目標實現了，會有什麼現象呢？可能會有更多的人有購買意願，看了商品詳情頁，點擊了購買按鈕等等，最終也產生了購買，那麼，衡量指標是哪個？設計只是改變了商品信息的呈現方式，並不能改變商品本身的質量或背後的服務，所以我們應該重點考察設計是否強化了引導，提升了購買意願，是否激發了用戶進一步了解的行為，主要是指瀏覽行為，最典型的就是到達了商品列表頁或者商品詳情頁等，量化的結果就是看又進一步行為的用戶的比例；

通過一個具體的例子看看如何利用數據來驗證你的設計方案是否達成設計目標。曾經有一個找產地的功能模塊，我們在設計前進行了調研，用戶告訴我們他們需要找產地，而且比較習慣於用地圖來找產地，我們欣喜若狂，照著這個方向做了個產地直達的樓層，我們堅信用戶告訴我們的肯定是對的！但是這樣的設計真的能達到幫助用戶高效找產地的需求嗎？來看下面的數據分析。

用戶的目標不是要找產地嗎？還告訴我們用地圖找產地很符合他們的習慣呢？為什麼上線後，用戶卻不怎麼使用這個版塊？？？我看到這個數據非常的意外，一時之間根本摸不著頭腦，後來再去看了看這個板塊的熱力圖，一下子恍然大悟。通過數據分析得出，地圖縱然符合用戶習慣，但是才這麼狹小的地圖上進行如此複雜的操作，其效率是非常底下的，因此將地圖找產地的功能保留下來，只是不作為默認的方式，採用了按照熱門的、區域的、附近的、可搜索的、地圖的方式綜合承載，最後取得了較好的效果！

3、如何利用數據做日常監控？

作為一個設計師，你的作品上線後，有多少人用？這些用戶是誰？有什麼特徵？用戶具體是怎麼在使用你的產品的？你的設計是否還有優化的空間？如何才能為用戶打造更好的使用體驗？怎麼才能知道這些數據好不好，有沒有問題呢？主要是靠比較、靠經驗，靠對這個產品長期跟進產生的直覺，只有在對這個產品非常熟悉的前提下，你才有可能對數據的變化給予比較靠譜的解讀。

日常監控中用於發現問題的主要手段就是做數據的對比，但是如何具體的作對比呢？主要有三種最常用的最簡單的對比方式：a、橫向比較，和類似的產品去比較，看相對的狀況，進而推測出自身是否存在問題；b、縱向比較，和自己的過去比較，看看從歷史的發展規律中是否能得到某些啟發，主要是看自身的變化趨勢；c、用戶細分，這個就是把用戶按照不同的分析需要，拆分來之後來看數據，看看各個群體之間的差異在哪裡，有沒有一部分用戶和其他用戶表現出不同的行為，進而找到問題所在。當然除了這三種常用的對比之外，我們還可以做一些配套的定性研究，進而把問題搞得更透徹。一些統計學的工具有時候也能起到作用，比如說用SPSS做數據的因子分析、聚類分析等等，也可以有一些意想不到的收穫。

4、數據不是核心價值，你才是！

說了這麼多，我並不是要強調數據有多麼的萬能，但是在互聯網領域，任何一個具有一定用戶量的的產品，你都不得不去了解數據，這些數據中有一些是宏觀的，作為設計師我們可以當做是背景知識，應該去了解了解，但是設計師更多的是應該關注用戶的目標、行為和態度等相關的數據，關注那些微觀的、和用戶、和設計方案息息相關的數據，這樣才能更好的了解我們的用戶，了解用戶對我們的設計方案的反饋，以幫助我們更好的發揮自身的價值！

響應式設計的現狀與趨勢

heyuchan | 交互設計, 用戶研究 | 一月 4th, 2015 | 評論(6)

從2012年開始到2014年，各大家對Web設計的趨勢預測中，都提到響應式設計；2015年網頁設計趨勢預測中，響應式仍在繼續。這個經歷了幾年依然大熱的響應式，在過去的幾年裡，快速鞏固了自己的地位，並掀起了一股網頁設計新標準的浪潮。這裡本人基於一些資料文獻及自己的陋見，談談響應式設計的一些現狀和趨勢。

源起

2010年5月，伊桑.馬科特（Ethan Marcotte）在「A List Apart」寫了一篇開創性的文章（題為「Responsive Web Design」 ），他利用三種已有的工具：流動布局（fluid grids）、媒介查詢（media queries）和彈性圖片（scalable images）創建了一個在不同解析度屏幕下都能漂亮地顯示的網站。 Ethan Marcotte力勸設計師們要去利用那些Web獨有的特性去進行設計： 「我們可以將不同聯網設備上眾多的體驗，當作是同一網站體驗的不同側面來對待，而不要為每種設備進行單獨剪裁而使得設計彼此斷開，這才是我們前進的方向。雖然我們已經能夠設計出最佳的視覺體驗，但還要把基於標準的技術也嵌入到我們的設計中去，這樣才能使得我們的設計不僅靈活，而且還能適應渲染它們的各種媒介。」 Ethan Marcotte證明了一種在多種設備上都能提供卓越體驗的方法的存在，而且這一方法不會忽視不同設備的差異，也不會強調設計師的控制權，而是選擇了順其自然並擁抱Web的靈活性。

這裡簡單介紹下上面的提到的三個概念：流動布局（fluid grids）、媒介查詢（media queries）和彈性圖片（scalable images）原本都是指現有的一些技術手段，但在做響應式設計研究的過程中，這些概念還是有更廣泛的意義，設計師也應該有所了解：

1. 流動布局：原特指以百分比為度量單位的布局技術實現方式。這裡就不對如流動布局、彈性布局、流體柵格等各種概念做一一說明。筆者就此統為一個大的概念：在響應式設計的布局中，不再以像素（px）作為唯一單位，而是採用百分比或者混合百分比、像素為單位，設計出更具靈活性的布局方式。
2. 媒介查詢：媒介查詢可以讓你根據在特定環境下查詢到的各種屬性值——比如設備類型、解析度、屏幕物理尺寸及色彩等——來決定應用什麼樣的樣式。通過使用媒介查詢，可以獲取到設備及設備的特性，並給出求同存異的方案，從而解決之前在單純的布局設計中遺留的問題。
3. 彈性圖片：伴隨布局的彈性，圖片作為信息重要的形式之一也必須有更靈活的方式去適應布局的變化。個人認為彈性圖片是Ethan Marcotte提出設計產品時提出的概念，我們在後續的研究中可以以圖片為典型，擴大研究範圍：除了圖片，還應該包括圖標、圖表、視頻等信息內容的響應方式研究。

盛行

響應式設計的概念從提出至今，一直不斷蔓延擴散，並得到各方認可的主要原因：

1. 外部環境：快速增長且日趨加劇的可聯網設備的多樣化，讓現今已不再有標準的屏幕尺寸；
2. 自身特色：嚴格定義的響應式一般是指響應式Web設計，而Web憑藉其特有的靈活性和可塑性，可以適應各種尺寸和配置的設備，可以無處不在。
3. 內部需求：響應式設計概念一提出，各大網站及平台都希望能夠採用這秉一應萬的模式，可以更靈活地去適配更多設備，尤其是現在移動設備大爆棚的時代。

當然也並不是所有的情況都理所應帶應該採用響應式設計，那麼什麼情況下更適合採用響應式呢？

1. 你想節約成本地去適應更多場景:> 資源都是有限的，但總是希望能利用有限的資源去獲得更大的價值。雖然比起開發設計一個普通的網站來說，要打造一個響應式站點，所需要的人力和時間資源都會有所增加，但比起為不同設備分別打造多個版本的成本還是要低很多；從維護的角度來說，也會輕鬆很多。
2. 你並不清楚要設計開發的全新產品更適合哪個場景:> 與其通過預測挑選核心設備再進行分別設計，倒不如先花些心思將網站打造得更具彈性，使其在各種設備中都擁有儘可能優秀體驗。因為在各方面都未知都情況下，做預測會加劇過程風險，使得結果存在巨大的挑戰性。
3. 你希望網站可以兼容未來的新設備:> 新的設備層出不窮，與其被動地進行更新維護，不如主動應萬變，成為響應式。 當然這裡只是說更適合，其實個人認為只要項目資源和時間允許，基本上大部分網站都可以去嘗試實現響應式；而對於初次嘗試響應式設計的，也可以從「簡單瀏覽型頁面」開始。

模式

目前大多網站中選擇成為響應式的設計模式主要有兩種：

1. 基於設備：通過主流設備的類型及尺寸來確定布局斷點（break point），設計多套樣式，再分別投射到響應的設備。
2. 內容優先：根據內容的可讀性、易讀性作為確定斷點（break point）的標準，即在對內容進行布局設計的時候，可以無視設備，有內容決定何時需要採用不同的呈現方式。

個人還是傾向內容優先的方式，這是真正符合響應式設計核心策略的模式，也是對未來友好的方式。 從過去基本上是基於pc的幾個尺寸，選擇最佳的標準尺寸去設計頁面；到現在移動設備已經玲琅滿目，同時電視、穿戴設備也慢慢開始起來，已經不再有固定的尺寸；未來，將是更加無法預知的設備環境；那麼什麼才是王道呢？——就是內容本身！ 變化總是來得快且狠，我們要做的就是抓住那根可以貫通全局的線！

在內容優先的策略中，有三點思維模式可以貫穿整個響應式設計的過程：

1. 忘記設備：因為我們不知道用戶會用什麼樣的設備來訪問網站，因此，我們必須儘可能地把所有情況都囊括進來；所有的東西（布局、組件等）都能與不同類型的設備和平台相兼容。
2. 優雅降級：雖然這個概念一開始是技術實現上對新的特性在老的瀏覽器上無法很好實現時的折中做法，但在此僅想表達在對布局做彈性設計時，內容從寬到窄的變化呈現，必須經過重重篩選，留存最核心的內容塊。這種模式非常適合對已存在的pc頁面產品進行響應式設計改造。
3. 漸進增強：此概念是在Steven在2003年的SXSW活動上提出的。在本質上來說，就是把優雅降級倒過來：先創建一個基本體驗，側重讓內容以一種簡介的方式來展現；之後，在保證基本體驗的前提下，開始著手做有關顯示的布局和交互。而在此，也借用來說明下對於響應式設計的內容策略中，內容從窄到寬的變化呈現中，可以讓內容的豐富度也相應地有所增加。這種模式與移動優先策略是相匹配的。

當然，目前響應式也是有存在各種爭論的，也許你有一個很好的理由不用響應式網頁設計？但我想沒人會說，「讓我們擺脫響應式設計吧」，而實際上，越來越多的網站選擇成為響應式。2014年如此，2015年也還是會繼續，因為這已經不是種趨勢，而怡然是種常態了。

未來的路

雖然響應式設計的優勢和趨勢已被普遍認可，但目前響應式設計的模式的普及還是有很多難題需要突破：

1. 響應式圖片：目前彈性圖片的做法主要是：縮放、剪裁、分條件載入等實現方法本質上都只是一個技巧，只是治標不治本地掩蓋了問題，並未真正完美地實現圖片的彈性。
2. 跨端的交互：在響應式設計中，我們不僅要需要考慮桌面用戶的使用習慣，還必須兼顧不同尺寸的手持設備。比如在桌面端無盡優雅的Hover，在移動端卻是無比糟糕的體驗，如何「求同存異」，讓各端體驗均能最佳，還是需要繼續深入探究的。
3. 性能：性能估計是在響應式開發中最大的痛，按條件載入、隱藏或顯示什麼內容，都會比單一條件判斷的代碼結構來的繁瑣，並影響體驗及維護。尤其是移動性能上，更多樣的設備具有更加複雜的使用環境，如何識別設備，並讓設備在不同環境均能良好體驗，也是一根硬骨頭。
4. 合作流程：響應式設計遠遠不止是一種簡單的設計策略，它為Web項目帶來的是一整套全新的、完整的方法，還應該包括一種新的、可以更好地利用這一模式的工作流程。

最後，我想說下響應式體現的是一種高度適應性的設計思維模式。在響應式設計探究的道路上，響應式本身不是唯一目的，基於任意設備對頁面內容進行完美規劃的設計策略及工作流程應該是我們更大的課題～

基於用戶尺度評價的人物角色分類方法與實踐

戴 均開 | 用戶研究 | 十二月 26th, 2013 | 評論(11)

人物角色可以從很多維度來劃分，例如用戶目標、用戶場景、用戶行為、體驗周期、用戶價值、……，根據實際情況，人物角色可能按一個維度劃分，或結合多個維度進行劃分。 為設計服務的人物角色，用戶目標是人物角色劃分中最重要，也是必不可少的一個維度。 對於資訊/信息型的分析對象，對資訊/信息的關注度能夠很好地體現用戶的使用目標。 本文以1688網站用戶對供應商信息關注度的問卷調查案例為基礎，來介紹基於用戶尺度評價的人物角色分類方法，主要分為以下幾個過程：

1 獲得尺度評價結果

1.1調研目標 通過了解用戶對供應商不同信息的關注度，為產品詳情頁面供應商信息的組織與呈現提供設計參考與依據。

1.2調研內容 根據目前供應商信息中所展示的內容，以及公司檔案中的相關信息，結合以往相關調研結果，總共進行17項供應商信息的關注度調研（詳見因子分析結果列表，因子分析結果列表中只列出了16項，根據因子分析理論，「保障」沒有納入到最終的因子分析中去）。

用戶滿意度指標權重計算方法

戴 均開 | 用戶研究 | 十一月 21st, 2013 | 評論(13)

用戶滿意度調查是用戶體驗工作中重要一項活動。在了解整體滿意度、一級指標滿意度、二級指標滿意度外，還需要了解下一級指標對上一級指標的權重，幫助確定各個方面的工作優先順序，為產品優化改進方向提供決策依據。下文將簡單介紹一下幾種滿意度指標權重的計算方法。

Part 1. 權重計算的作用

指標權重可以更合理的評分用戶滿意度，指導用戶體驗優化方向。

滿意度調查的主要作用有：

• 了解當前產品用戶滿意度（產品的用戶滿意度怎麼樣？）
• 發現產品的滿意度短板（滿意度中的哪方面用戶最不滿意？）
• 確定改進方向（哪些方面是需要優先改進的？）

不同評價指標對整體滿意度的影響力是不一樣的，但之前我們基本上默認不同指標的影響力是相同。

在計算滿意度時，在多級指標結構的滿意度評價中，採用算術平均方法來使用二級指標計算一級指標、使用一級指標計算整體滿意度是。這樣的計算方法是存在不合理性。

在計算用戶滿意度改進優先順序時：

• 在沒有權重的情況，不同指標的改進優先指數=（極大值-得分）/（極大值-極小值）；
• 在有權重的情況，不同指標的改進優化指數=權重*（極大值-得分）/（極大值-極小值）。

在確定滿意度指標改進優先順序時，不但考慮滿意度指標的提升空間，同時考慮指標權重（即影響力），這樣滿意度指標改進優先順序更加合理。

用jQuery的$()包裝函數來實現數組元素分頁效果的優勢

tiegen.zhutg | 前端開發, 用戶研究 | 八月 2nd, 2013 | 評論(21)

最近一周在做中文站搜索禮品widget的需求，這個需求中有一個分頁的功能；具體demo可以參見下圖：

(如上圖，寬屏模式,1180下，每頁3個offer)

對應的js應用文件是同一個，頁面中後面的offer數據已經埋好了，只是啟用了css display:none樣式把後面的offer元素隱藏了。現在要求對已存在的頁面元素實現上下分頁效果，也就是頁面元素總集可以通過$(.class)獲得，然後來實現分頁功能。

按照傳統的一般做法，用jQuery可寫成如下:

利用選擇題進行信息關注度研究案例解析

小晨光的味道 | 用戶研究 | 四月 16th, 2012 | 評論(25)

如果我們想知道瀏覽某個頁面的用戶到底在看些什麼？一般往有如下幾種方法：1.查看點擊流數據，如CTR（Click through rate，點擊轉化率/點選率）、點擊熱圖（Heat Map，可用於測試不同的布局方式、配色方案等對整體效果造成的影響）；2.眼動測試，可得到用戶的注視軌跡、某一區塊的注視時間、注視點個數、回掃次數，及注視熱圖等。3.用戶訪談和用戶測試，定性了解用戶的瀏覽行為及其背後的原因。

方法1屬定量分析，方法2和方法3屬於定性研究。針對於用戶對頁面信息關注度問題的研究，頁面的點擊數據並不是一切，我們無法準確分析那些不能產生有效點擊的瀏覽行為，而定性研究雖然可以挖掘用戶關注的信息及其原因，但是無法量化，說服力不足。所以一般採用定量和定性方法結合來研究。

本文要探討的是基於定量與定性分析之間的灰色方案，即利用問卷的選擇題來挖掘分析用戶對頁面信息的關注度。問卷調研既可以了解用戶的行為和態度，又由於收集量較大，具有一定的說服力。問卷中，對於涉及點擊行為的指標，可以結合點擊數據進行驗證分析；對於不涉及點擊行為的指標，可先利用定性研究（如用戶訪談）確定調研內容、設計選項，再利用問卷收集數據來量化用戶觀點。

選擇題設計的注意點：

1.題型的選擇。

題型可以有多選題、單選題、評分題。根據調研內容確定題型。如想知道用戶比較關注的信息版塊，而現有的信息版塊個數較多，超過了5個（數據參考：渡劫 調研問卷中多選題的分析方法探討（2）），就用多選題，如圖1；如果小於5個，比如現有旺鋪的產品版塊分類基於4種常見方式，則可採用評分題，如圖2。評分題與多選題的區別在於評分題讓用戶評價更為細膩，但填答成本較高，所以適用於選項較少（一般不超過5個）的題目。如果調研內容需要明確最為關注、最常使用等性質的信息，則應採用單選題迫選，以明確問題。

網站分析方法系列二——分析頁面區塊價值

王雪蓮 | 用戶研究 | 十一月 8th, 2010 | 評論(41)

如何在寸土寸金的首頁上使頁面的價值最大化，是每個網站設計者最關心的話題。

用戶關注的頁面長度、寬度都是有限的。寬度自不必說，一般網站都會根據自己網站最大用戶群的硬體條件來設置；長度雖然沒什麼限制，但很少有用戶有耐心看完太長的頁面。

這個有限的區域相當於一個超市，頁面內容相當於商品，超市要決定如何放置商品，就需要清楚每類商品所能帶來的價值，然後綜合協調擺放，使整體利益最大化。

超市在衡量商品價值時，不會一件一件的去衡量，而會把一種類型商品作為一個整理來衡量。 在網頁內容的設計過程中，同一主題的內容經常會作為一個區塊的方式展現在頁面上，例如中文站首頁的「賣家即時供應」、小商品首頁的「飾品混批」等等。這一個區塊的價值就是網站運營者或者設計者需要了解的「一種類型商品」的價值。

圖1

那麼如何計算區塊的價值呢？

兼顧安全及易用性的遠程測試系統之搭建

meng.xum | 用戶研究 | 十月 21st, 2010 | 評論(8)

一. 前言

遠程測試的優點已經無需贅述，在產品開發項目周期短暫，來回實驗室時間及路費成本高昂，用戶遍布全國各地難以邀約的情況下，遠程可用性測試正在成為「實現傳統可用性測試80%好處和70%效果」的最佳替代品。

在遠程測試的實際可行操作中，第一步所要做的就是搭建一個穩定，安全，且滿足測試需求的測試環境。 中文站用研組最近在這方面進行了積極嘗試，並得到一定成果。

圖1：傳統實驗室可用性測試

二. 傳統方式的遠程測試系統搭建

在傳統遠程測試（圖2）中，我們通常可以採用如下兩種方式搭建測試系統：

方法1：先讓參與者在自己的電腦上安裝屏幕共享軟體的server端，然後主試通過viewer觀看其操作，並在自己的屏幕上進行錄屏。

方法2：參與者遠程連接到主試電腦並進行操作，同時在主試電腦上錄屏。

圖2：傳統遠程測試系統

與傳統可用性測試（圖1）相比，遠程測試的好處是不言而喻的：

1. 1. 招募參與者更容易，範圍也更廣。提高了邀約成功率，且潛在的參與者將從「居住或工作在測試地點附近的人」擴大到「任何有快速internet連接的人」，這意味著全國各地的用戶均可參加測試。
2. 2. 研究周期大為縮短。邀約成功率的提高，無需考慮參與者往返時間，以及可以在任意時間安排測試，這些都為整個項目開發節省下了寶貴的時間。
3. 3. 在用戶真實操作和使用環境下進行測試，更有利於發現實際問題。
4. 4. 效果幾乎相同。遠程測試發現的問題類型和數量很可能與現場測試相同。

但這兩種傳統的遠程測試搭建方法本身都有其缺陷和不足之處：

第一種方法只適用於demo存在於線上，或者供測試的demo不存在保密方面的問題可以無阻礙的傳送給參與者的情況（在實際商業環境的項目中這種情況很少存在）；且參與者在共享屏幕前需要在自己的電腦上安裝一個軟體（webex或gotomeeting，有時還要進行相應的設置），這對於操作及計算機知識水平都較低的用戶（恰恰是中文站的典型用戶，相信在其他網站用戶中也占相當一部分數量）來說存在著相當的顧慮和障礙（安裝設置麻煩，擔心有病毒等等），這就在挑選參與者時又多出了一層限制，減少了邀約成功率，並且也相應延長了遠程測試所需要花費的時間。

第二種方法適用於demo存在於線上或公司內部的電腦線下環境里，但若直接讓用戶訪問我們平日工作用電腦，將存在很大的安全隱患問題；且園區的辦公網路環境存在特殊性（如外網IP統一等），在這種情況下，外部用戶無法直接連接到公司內部的任何一台普通電腦。

網站日誌分析方法系列一：聚焦式分析

王雪蓮 | 用戶研究 | 十月 11th, 2010 | 評論(34)

在網頁運營改版過程中，經常有設計師或者運營同事有這樣的疑問：我的頁面到底產生了多大價值？這個頁面引導的用戶接下來訪問了多少商品的頁面？有沒有產生交易？有沒有到我想讓用戶去的那些頁面？

如果使用資料庫查詢，固然可以得到一些結果，但查詢過程過於複雜，數據量大的網站查詢耗時太長，很難靈活應用到普通頁面。本文提出一種相對簡單的分析方法可以解決這個問題。

每個用戶在網站上的訪問軌跡在網站日誌或者資料庫中，都是一串URL，有的只訪問了一兩步，有的訪問了成百上千步，如何在如此複雜繁多的數據中找到用戶在訪問某個頁面（例如服裝首頁）之前或者之後n步，有多少人訪問過特定頁面（例如交易頁面）？

先拋開這個問題，我們想像這樣一個場景：在一個大會場中，熟人坐在某個座位上，如果我們知道他們的位置，我們的眼睛很容易聚焦到這幾個位置，自動忽略其他座位的人，請參看圖1。同樣，人們在觀察周圍事物時，經常會把精力聚焦到自己關心的事物上，下意識忽略其他。我們曾經做過這樣的實驗，我們的報告廳有4個很大的外置式擴音器，分列在兩側。注意不是那種不顯眼的內置式，任何人只要稍微留心就會看到。而當我們要求會場的人閉上眼睛回答會場有幾個擴音器時，很少有人能給出正確答案，因為大部分人會關心更重要的東西，比如會議內容，提問問題，甚至是如何找個舒適的位子也比擴音器的多少更讓人關心。

圖1

回到我們網站碰到的問題，某個項目的設計師關心的頁面並非全部，而只是幾個與之頁面有關的頁面和部分重要的指標頁面。因此我們可以去除相關性不大的頁面，只保留關心頁面，從而縮短用戶路徑，大大提高計算效率。

另外，我們把索引的思想引入分析過程中，把網頁的URL按照一定規則（例如正則表達式）替換成簡單字元，把相關性不大的頁面統計替換為同一個字元（例如「0」），把一些過渡性的頁面替換成某個字元（例如」p」），如此以來，每個用戶的訪問路徑就可以表示為一個字元串，例如」a,c,0,0,0,a,p,p,c,0,c,d,0,0,0」。也有的用戶的訪問路徑全為相關性不大的頁面，此時，路徑為」0,0,0,0,0,0,0,0,0,0,0,0,0,0」，這表示用戶並未訪問到目標頁面，如果不需要計算用戶比例或用戶分類，那麼這樣的記錄我們可以刪除掉。

A/B測試：實現方法

oldj | 用戶研究 | 九月 27th, 2010 | 評論(69)

上文介紹了 A/B 測試的基本概念，接下來我們繼續探討如何實現 A/B 測試。

我們先來看一個圖：

（註：感謝Algo提供本圖。）

上圖展示了 A/B 測試的實現原理。從左到右，四條較粗的豎線代表了 A/B 測試中的四個關鍵角色：客戶端（Client）、伺服器（Server）、數據層（Data）、數據倉庫（Data Warehouse）。從上到下代表了三種訪問形式：無 A/B 測試的普通訪問流程（Non AB test）、基於後端的 A/B 測試訪問流程（Back-end AB test）、基於前端的 A/B 測試訪問流程（Front-end AB test）。

一般情況下，用戶在一次瀏覽中，會從客戶端（Client）發起一個請求，這個請求被傳到了伺服器（Server），伺服器的後台程序根據計算，得出要給用戶返回什麼內容（Data），同時向數據倉庫（Data Warehouse）添加一條打點信息，記錄本次訪問的相關信息。這個過程也就是圖上橫向的流程。數據倉庫收集到足夠的數據之後，就可以開始進行分析（Analytics）了，這也即是圖中右上角的部分。

A/B 測試需要將多個不同的版本展現給不同的用戶，即需要一個「分流」的環節。從上圖中我們可以看到，分流可以在客戶端做，也可以在伺服器端做。傳統的 A/B 測試一般是在服務端分流的，即基於後端的 A/B 測試（Back-end AB test），當用戶的請求到達伺服器時，伺服器根據一定的規則，給不同的用戶返回不同的版本，同時記錄數據的工作也在服務端完成。

基於後端的 A/B 測試技術實現上稍微簡單一些，不過缺點是需要技術部工程資源介入，另外收集到的數據通常是比較宏觀的PV（Page View）信息，雖然可以進行比較複雜的宏觀行為分析，但要想知道用戶在某個版本的頁面上的具體行為往往就無能為力了。

基於前端的 A/B 測試則可以解決上面的問題。它的特點是，利用前端 JavaScript 方法，在客戶端進行分流，同時，可以用 JavaScript 記錄下用戶的滑鼠行為（甚至鍵盤行為，如果需要的話），直接發送到對應的打點伺服器記錄。這樣的好處是不需要技術部（如果你們和我們一樣，前端工程師與後端工程師分屬不同部門的話）參與，並且可以比較精確地記錄下用戶在頁面上的每一個行為，甚至包括後端方法難以記錄到的無效點擊！

下面，我將重點介紹一下我們在基於前端的 A/B 測試上的一些實踐。

A/B測試：基本概念

oldj | 用戶研究 | 九月 13th, 2010 | 評論(15)

網站設計中，我們經常會面臨多個設計方案的選擇，比如某個按鈕是用紅色還是用藍色，是放左邊還是放右邊。傳統的解決方法通常是集體討論表決，或者由某位專家或領導來拍板，實在決定不了時也有隨機選一個上線的。雖然傳統解決辦法多數情況下也是有效的，但A/B 測試（A/B Testing）可能是解決這類問題的一個更好的方法。

所謂 A/B 測試，簡單來說，就是為同一個目標制定兩個方案（比如兩個頁面），讓一部分用戶使用 A 方案，另一部分用戶使用 B 方案，記錄下用戶的使用情況，看哪個方案更符合設計目標。當然，在實際操作過程之中還有許多需要注意的細節。

基於網站日誌數據挖掘的用戶訪問行為模式可視化研究

王雪蓮 | 用戶研究 | 十二月 17th, 2009 | 評論(9)

摘要：在進行互聯網用戶瀏覽行為的定量研究中，我們採用數據挖掘的方式對網站日誌進行分析，用可視化技術展現日誌的有效信息，開發了一個基於網站日誌的可視化分析系統。這個分析系統通過用戶產生的伺服器日誌數據自動還原出網站結構，按照頁面流量閾值繪製站點地圖，並將關鍵的頁面流量數據及其他商業指標進行可視化處理，標註在這張特殊的網站地圖上。這個分析系統能夠讓用戶研究員更加實時直觀地了解網站用戶動態，獲得網站重要頁面及產品的直觀圖像甚至健康狀態。

關鍵詞：網站日誌，數據挖掘，可視化，多維縮放，相關性分析

1. 引言

隨著互聯網的飛速發展，人們的工作和生活越來越依賴網路，尤其在金融、電子商務等領域裡，傳統的交易模式已經被快速便捷的網路交易模式所取代。網站用戶數量及其訪問率隨之迅猛膨脹，如何更加快速實時了解用戶訪問行為模式，幫助改善企業網站的用戶體驗，成為越來越備受關注的課題。數據挖掘技術和網路信息的可視化為該課題提供了有效的解決途徑。

2. 日誌數據挖掘

2.1 概述

數據挖掘是從大量的數據中，抽取出潛在的、有價值的知識（模型或規則）的過程。用戶在訪問網站過程中，伺服器會將用戶的訪問軌跡記錄在網路日誌中。對這些日誌進行分析，研究者將會發現很多有價值的信息。

我們研究小組研究開發了基於網路日誌的網站用戶行為可視化系統G2G(the Guide to Galaxy)。在該系統中，我們採取的分析過程主要包含數據預處理，數據提取，數據可視化三個部分。本節我們將分別闡述分析過程以及實現原理。

2.2 數據預處理

數據預處理部分包括數據清理和數據補充。

對於訪問量較多的大型網站，日誌數據往往也會相對龐大。在提取有效信息之前，我們需要過濾掉無效信息，例如出錯記錄、圖像文件請求記錄以及公司內部員工由於工作需要產生的訪問記錄等干擾記錄；另外，如果研究目的不是分析研究網路爬蟲行為，我們也需要過濾掉這些非人為產生的記錄。

對於用戶訪問的URL，很多研究者更傾向於從宏觀角度研究，更關心這是屬於哪一種類型的URL。因此，我們需要在每個URL上補充一個類別標記，以便於我們在可視化展示的過程中，研究者很容易看到各類URL的訪問情況。

2.3數據提取

每條訪問記錄里包含如下信息：當前訪問URL、來源Refer（用戶訪問當前頁面的前一個來源頁面，例：用戶從A頁面的某個連接進入B頁面，則B頁面的Refer是A頁面；如用戶直接在地址欄輸入頁面B的URL並轉向B頁面，或直接從收藏夾打開B頁面，則B頁面的Refer為空）、訪問時間、IP地址、CookieID（用來標識用戶）、瀏覽器信息等。這些正是我們需要提取的信息，經過程序處理，我們將把這些信息讀取到數據結構里，圖1描繪了數據提取在整個分析過程中的作用。

圖1 數據提取過程

在圖1中，左邊柱狀圖為網站日誌，我們截取某個時間段的日誌，提取出以上信息，還原為各單獨用戶的訪問序列，形成索引節點，最終在可視化界面上以多種維度顯示有價值的信息。

2.4數據可視化

我們的系統分為三個頁面，圖2是時間步數序列圖，圖3是URL分布圖，圖4是行業用戶群關係圖。

圖2 時間序列圖

圖2縱坐標為時間：0:00-24:00，橫坐標為用戶訪問步長：1步-800步。每個像素代表用戶在一分鐘內有多少用戶訪問過，顏色越紅表示訪問用戶越多。例如，當某個用戶的訪問步長是100步時，則在橫坐標為100處，縱坐標為用戶訪問時間處標註顏色。如果用戶在接連不斷的訪問網站，則在相應位置會出現一條縱線。

圖3 URL分布圖

圖3上的每個圓圈代表網站的一個URL，圓圈大小代表訪問量，越大代表訪問量越高。顏色代表轉換率，越藍代表轉換率越高。基本上，藍色節點可以看做是起點，橘黃色節點可看做是終點。

URL的排列採取目錄結構方式，內圈代表最簡單的目錄，越往外圈，目錄越深。例如，某個URL名稱為a/b/c.html，則a作為一個URL在最內圈，a/b在次外圈，a/b/c.html在第三圈。在很多情況中，a和a/b只是純目錄結構，並非實際頁面，並沒有用戶會訪問到它們。因此以正方形表示，以此為圓心的空心圓圈大小代表其子節點的總訪問量。在上例中，a的空心圓圈的大小就是a/b，a/b/c.html，a/d，a/d.html等等形如「a/*」的頁面的訪問量之和。

圖4 行業用戶群關係圖

圖4展示了不同行業用戶群之間的互相發送反饋行為的情況，可以作為行業相關性分析的一個重要參考。圖中不同的圓代表不同的行業，圓越大代表該行業的用戶群越活躍，圓的顏色越偏向紅色說明該行業相對被關注得越多，越偏向藍色則說明該行業相對被關注得越少。最有價值的信息是不同圓之間的距離，距離越近說明兩者之間相關度越高。圓與圓之間的連線表示兩個行業之間存在足夠的聯繫。

2.5 實現方法及原理

由於涉及到海量日誌信息的處理以及大量節點圖形的表現，為了在可視化顯示上儘可能地做到高效，我們採用Xlib來實現圖形展示。

其中，在繪製URL分布圖時，由於有些情況下需要快速繪製上萬甚至十幾萬的節點及連線，此時使用Xlib自帶的繪圖函數已不能滿足需求，於是我們採用了內存緩衝的方式，先用高效的演算法在內存緩衝區中畫出圖形，再緩衝區輸出到屏幕上圖形顯示區域。

另外，由於需要表現的信息維度較多，我們從多種角度表現信息，例如視覺角度的顏色、大小、位置關係等，而用戶訪問路徑等信息則通過交互方式來展現。

行業相關性分析的數據來源於不同行業用戶之間的發送反饋的記錄，我們將一段時間內（比如24小時）所有反饋記錄提取出來，得到任意兩個用戶群之間的聯繫方向與次數。

提取的反饋結果雖然包含了所有用戶群之間的確切聯繫，但其所表現的關係是一種不直觀的高維關係，我們採用了多維縮放方法，在儘可能保持節點（用戶群）之間相對關係的情況下將表格轉化成為平面二維圖形。

3. 日誌分析結果

3.1 交互方式

G2G系統除了可以顯示網站結構，訪問量，轉化率等信息之外，還被加入了豐富的交互功能，允許用戶研究員選中或者搜索某個頁面（節點），查看當前頁面的主要用戶來源和流向，並列印出URL列表。

圖5 URL分布圖

圖5中顯示了樣本時間內訪問網站內博客用戶的下一步去向，在圖的最下方顯示最主要的幾個來源和去向。

同時它也支持按照session或者cookie對用戶的群體行為進行多步回溯，從中發現用戶瀏覽網站或者產品使用上的群體行為。

另外，研究員可以在圖1中選中某個區域，點擊搜索，在圖2中將會只顯示選中區域時間段內的日誌信息，因此我們可以對某些時間段做針對性分析。

在行業相關性分析的界面，研究員可以點擊選中某個節點，此時將顯示由這個節點發出的指向其它節點的箭頭，這些箭頭代表當前選中節點所代表的用戶群與其它節點用戶群之間的主動聯繫關係。箭頭的長短與相關性強度成反比，箭頭越長說明相關性越弱。

現在這個系統可以在普通筆記本上在10分鐘內處理1000萬訪問量級別的日誌樣本。假設再加上實時的日誌數據，或許這個系統也將改變網站產品設計和內容運營的方式，讓網站運營成為一個「Real Time Game」。

3.2 用戶訪問模式發現與分析

在利用G2G查看數據的過程中，我們會發現很多用戶訪問模式。

有些信息很明顯，例如從圖2上，我們很容易看出一天24時內，何時是訪問高峰期或低谷期，因此可以選擇合適的時間做一些更換伺服器等維護工作。

我們也可以輕鬆查看到外站的搜索引擎會把用戶引導到哪些頁面，從而判斷哪種搜索引擎更有效。

圖6 用戶訪問步驟對比圖

圖6展示了不同搜索引擎所引導的用戶在我們網站上的訪問路徑。研究中發現，左邊搜索引擎引導的用戶數量偏少，後續訪問行為也不強勁，而右邊搜索引擎效果相對較好，不僅用戶數量多，而且這些用戶黏性大，能夠在網站上持續訪問。

對於本站頁面，如果用戶沒有按照我們引導的路徑訪問，則可能說明這些頁面的用戶體驗存在問題，我們可以及時發現並做新的嘗試。

另外，我們在研究中發現一個有趣的現象，在阿里巴巴十周年時，從淘寶訪問阿里巴巴的用戶，大部分被引導到阿里巴巴十周年欄目。

研究者如果對數據比較敏感，或者能夠從多種角度查找信息，則會發現更多有價值的模式。

3.3 行業相關性分析

不同行業的用戶之間互發反饋的行為，也讓我們對行業之間的相關性有了量化認識。

來自不同行業的用戶群之間存在著許多聯繫，大部分聯繫與我們的常識或猜想一致，比如「紡織、皮革」行業與服裝行業顯示出了高度的相關性。但有時也會發現一些在我們平時的思維中不是那麼顯而易見的相關性。

另外，除了相關性外，無相關性也是值得關注的信息。比如冶金礦產與家居用品在圖中顯示出了很弱的相關性，這和我們的常識一致。但有些意外的是，服裝和服飾兩個行業的相關性也表現得很弱。

通過對行業相關性的分析，我們可以了解不同用戶群之間的相關度如何，是否與我們預期的一致，是否有一些我們沒有想到的關聯，並由此進一步判斷用戶群的分類是否存在優化的空間，這些信息對於產品陳列相關工作有較大的價值。

3.4 前景展望

在用戶研究的過程中，定量研究與定性研究應該是相輔相成的。定性研究對於訪談用戶的選擇經常會遇到困難，定量研究可以通過數據挖掘，尋找每個行業的活躍用戶，或者訪問指定路徑的用戶，定性研究可以有針對性的對這些用戶進行訪談分析。同時，定量研究也可以分析這些用戶日常在網上的行為軌跡，從而驗證訪談結果。

對於指定URL，研究需要了解的不僅僅是上一步下一步的路徑，用戶是通過哪些路徑到達此處，又會轉往何處，這一系列的路徑更有研究意義，所以需要提取經過指定URL的最健壯的幾條路徑，從而達到給用戶分類的目的。

在網站中，特定用戶群體的行為也會備受關注。例如誠信通會員，使用特定瀏覽器的會員，是否有過網上交易行為的會員，他們的訪問行為如何？是否按照我們預期的路徑訪問？定量研究可以通過在預處理時增加關聯數據的方法，挖掘出這些會員的訪問路徑。

另外，從網站設計者的角度來看，對於設計者預想的流程，有多少用戶會買賬，在哪個節點被卡住，是非常重要的信息。我們可以通過選定多個URL，列舉訪問這些URL的用戶人次的方法實現。

對於每次比較重要的分析結果，我們可以保存到資料庫中，並以圖表的形式呈現變化趨勢。尤其是改版前後，重要數據的變化趨勢可以告訴我們用戶對新版本的接受程度。

4. 結束語

在改善用戶體驗領域，國內外在定量方面的研究還相對較少，而網站用戶的行為軌跡對網站來說是一筆很巨大的財富，如果能夠充分利用這些信息，將對網站的發展意義重大，我們期待更多研究者參與網站用戶行為的可視化研究領域。

參考文獻

[1] C. Shahabi，AM zarkesh，J. Adibi，V. Shah, Knowledge Discovery from Users Web—page NaVigation Proceedings of the 7th International Wbrkshop on Research Issues in Data Engineering (RIDE』97)High Performance Database Management fbr Large—Scale ApplicatiOns，pp.20，April 07. 08，1997.

[2] J. SriVastaVa, R. Cooley, M. Deshpande，P. N. T. an. Web Usage Mining: Discovery and Applications of Usage Patterns ffom Web Data. SIGKDD Exploration，January 2000，pp: 12—23．

[3] 毛國君. 數據挖掘原理與演算法. 清華大學出版社

[4] Keim D.A. , Information virsualization and visual data mining. IEEE Transactions on Visualization and Computer Graphics, 2002, 8(1)，pp: 1—8

[5] Card S.K., Mackinlay J.D., Shneiderman B., Readings in Information Visualization: Using Vision to Think. New York: Academic Press/Morgan Kaufmann, 1999.

推薦閱讀：