用一個實戰案例，教你一款適合UI設計師的調研方法

@小魔女HOHO ：UXD是最近很火的一個詞，我也總是在想怎么做才能把自己在交互用研上積累的一些知識融匯貫通到視覺設計領域。嘗試著做了一些摸索，很樂意把這些經驗寫出來同大家分享。作為最初期的探索，可能有很多不成熟的地方，歡迎大家留言，我們一切探討學習。

可能很多UI設計同學都有過這樣的疑慮： 我們作為整個產品設計的最后一環，很容易受到一些局限，冷不丁就成為了交互稿的“填色工具”。越來越多的UI設計師也更傾向于轉崗去“話語權”更大的交互崗位（對，我一定是個奇葩）。

很多人都會認為UI設計是一件簡單的事：美術。關于設計方案的討論也總會歸結到個人偏好上。當“從用戶角度出發”在視覺設計嘴里蹦出，總顯得有那么點力度不足。我們總在強調用戶體驗，但在實際工作中卻發現各種各樣的測試調研都會較多的落地到流程和操作面，關乎視覺的部分少之又少。

“美感”真的是UI設計的唯一評判標準嗎？ 在UX六項基本原則中，我們怎么做才能在保證美感的同時讓頁面中每個元素都“運作良好”，用視覺的手段去促進用戶目標和商業目標的雙贏？

在這里我打算結合一些經驗和探索，用實際案例，從調研分析的角度向大家介紹一款適合UI設計師的調研方法－DIY可用性測試。

Guerrilla Test（又稱DIY可用性測試）是一種被國外UE（在Airbnb的官網上就有他們的相關案例）廣泛認同并使用的測試方法，它屬于小樣本定性測試，僅需3～5名用戶,每人大約15～20分鐘即可完成。它的目的并不要證實什么，而是找出并修復最關鍵問題，同時捕捉用戶的真實情感。

調研目的：針對滴滴代駕車主福利中心，從視覺設計的角度出發，找到用戶在產品使用過程中存在的問題，確定后續視覺優化方向。

和傳統招募方式不同，在DIY test中可以使用人脈招募的方式，通過朋友、朋友的朋友去找到相關的產品用戶。在車主福利中心的測試中，我們通過人脈招募的方式聯系到不同等級的代駕會員共4名。

在具體測試中，我們分成提問－瀏覽－任務－分析這幾大步驟。

提問

首先，我們需要對參與者的一些個人情況進行詢問，使他們放松并對其做發聲思維引導。同時通過這些基本信息，我們能夠更好的判斷測試用戶對產品目標用戶而言處于一個怎樣的水平。

在車主福利中心的測試中，我們主要針對參與者的職業，愛好、車型、代駕場景等問題進行了一些提問。

界面瀏覽

提問之后，我們正式進入界面測試環節。界面瀏覽的目的是通過一系列問題去了解用戶對界面的感知是否符合設計預期。

在車主福利中心的測試中，我們針對車主福利中心首頁的設計，就三個問題對用戶進行了提問：

（注：該圖為設計效果圖，實際金卡會員的等級、活動、工具等依線上具體環境而定）

Q1: 這個頁面中什么地方最吸引您？

目的：測試頁面視覺呈現是否做到了主次分明，對于產品戰略的重點部分，是否給予了足夠的視覺比重？

Q2: 您認為這個頁面的作用是什么？

目的：測試頁面視覺設計是否向用戶傳遞了正確功能引導？

Q3: 當您使用這個頁面的時候，您會用它提供的哪些功能或服務？

目的：測試頁面的視覺設計是否很好符合了我們的商業預期，用戶對此是歡迎還是排斥？

在每一個提問環節，設計師都要做到刨根問底，鼓勵用戶說出最真實的想法和原因，最后很有可能獲取到完全出乎意料的結果。

任務測試

任務測試是DIY test的重點，也是從前期準備到后期數據整理花費時間最多的部分, 主要分為問題排查－任務設計－任務執行三個環節。

問題排查

由于是針對視覺設計進行的用戶測試，我們首先要按照一定的順序對頁面中的視覺元素進行逐一梳理。

以車主福利中心為例，該頁面自上而下分為：會員板塊、特權／福利板塊、專屬福利板塊、小工具板塊及活動板塊。每個板塊都由一系列視覺元素構成，我們需要測試的就是每一個視覺元素能否各司其職去完成自己的使命。

在針對這些視覺點準備問題時，我們可以把自己想象成用戶，跳出UI設計的框去思考：如果我是用戶，我在使用這個界面的時候會對每個視覺元素有什么不同的看法？我知道什么地方可點，什么地方不可點嗎？我會先閱讀文字還是圖形？我能正確理解這些圖形元素的意思嗎？它們向我提供了正確的引導還是反而讓我更加迷惑？

以會員板塊為例，它包含的視覺元素有用戶頭像，用戶等級，用戶姓名、代駕頻次、升級進度以及最右頁面跳轉引導箭頭。我們在問題梳理的時候這么詢問自己：如果我是用戶，我能清楚判斷出當前等級嗎（對應元素：背景圖及對應icon／文字）？我清楚大概還要多久才能晉升到下一等級嗎（對應視覺元素：中間文字信息及進度條）？我知道如何查看到關于會員等級的更多信息嗎（對應視覺元素：最右跳轉箭頭）？

在問題梳理時，可以使用FreeMind對頁面視覺元素及對應功能按照自上而下的順序去做梳理，猜測每個元素可能給用戶帶來怎樣的誤解，每個誤解背后對應的是怎樣的視覺問題。

任務設計

問題梳理完畢后，我們對相關部分進行整合，組織成一個個包含情景及限制條件的小任務，同時每個任務在實際完成的過程中又可以拆分成一個一個的子任務,通過用戶完成任務的過程對每一視覺元素的運作問題進行分析判斷。

在任務設計的時候需要注意以下幾點：

1、不要給出任何相關的線索

2、不要使用專業術語

3、?添加有用的情景，去除無用的情景細節。

在任務設計時，需避免使用頁面中的文字提示，以防用戶不是去完成任務，而是去尋找相關詞語。而添加情景是為了讓用戶自主的去利用我們提供的視覺元素完成任務，而不是像機器人一樣，在接到指令之后“尋找”相關的視覺元素：添加合適的情景是在DIY Test測試中是一個非常重要的環節。

仍舊以頂部會員的UI測試為例，首先我們對每個可能存在的問題都進行了羅列。

在這所有問題中，我們覺得用戶可能對不同等級的感知較弱（icon和對應的背景），同時右側箭頭的引導可能不是很明顯。這兩點會成為該板塊引起較差用戶體驗最主要的部分。因此我們在針對會員板塊的任務設置中將主要就這兩點疑慮進行測試。

測試目的：判斷會員等級設計是否明確，頁面跳轉引導是否正確

任務執行

在任務執行環節，首先設計師要做到不去打擾到參與者，鼓勵他們做每一步操作的時候都盡可能說出自己心中的想法。如果遇到參與者提問，可以巧妙的將問題重新拋還回去，切忌不要給予任何的提示。

其次，當參與者無法順利完成任務，或者出現一些不良的情緒，比如暴躁，沮喪的時候，應該立刻終止任務的繼續，表示感謝后進入下一個任務或下一測試環節。

如果對參與者的某些操作有所疑慮，或者任務的部分無法覆蓋到所有需要測試的點，可以將有問題的部分記下，待整個測試結束后再進行詢問。

提一下在做調研過程中的一些注意事項：

1、無論如何都不要向參與者提供任務相關的線索；

2、不能回答他們的任何關乎任務的問題，而是用“您覺得呢”直接拋還回去；

3、不能透露出自己的觀點，如“這個功能很好用，這個部分很又吸引力”，也不要附和參與者的類似觀點；

4、可以說的是“好的”“可以”或者是對參與者話的附屬

數據分析

完成整個測試之后，我們需要對所收集的數據進行整理分析。

在車主福利中心測試中，我們分別統計了每個任務的完成情況，并針對完成度較弱的任務進行操作步驟的拆解與進一步分析。

任務完成情況統計

在任務完成情況統計中，橫向代表任務編號，縱向代表用戶編號。這里會涉及到3個不同分值：

1分:?參與者無法完成任務

2分:?參與者經過一些試錯和誤操作之后完成任務

3分:?參與者準確、迅速的完成任務

（上圖表格僅為示例，并非實際調研結果）

假設任務與參與者的數量均為4，則每項任務的總分為4～12分，共分三個等級：

4～6分：任務完成度極低－急需改進

7～9分：任務完成度低－需改進

10～12分：任務完成度高－不需改進

步驟拆解分析

在分析完任務完成率后，我們需要對那些分值較低，參與者出現問題較大的任務做步驟拆解，去了解用戶究竟是在哪一步操作中出現問題才導致的完成情況較差。

在這個分析中，我們把出現問題的視覺點歸位三類：操作、知覺、認知

操作：視覺上可點／不可點的狀態設計存在誤導，致使用戶進行誤操作；

知覺：重要文字或圖標過小，用戶難以察覺或直接忽略；

認知：對圖標圖形的理解出現歧異，有悖設計初衷；

其中對于出錯頻率大的操作，還需要配以具體截屏及輔助說明。

仍舊以頂部會員部分為例，下圖為會員部分一些操作問題，錯誤類型，頻次以及對應的截圖解釋說明。

優化方向分析

最后，我們需要將整個測試每個環節提取出來的優化方向做一個匯總。依然是按照頁面自上而下的順序進行羅列，將那些嚴重的問題標紅作為高優先級進行處理。在redesign的時候盡量通過微調的方式去解決，而不是推翻重來。

總結

Guerrilla Test 是一種比較簡單的測試方法，較容易上手，同時也可以讓我們跳出設計的框架去更深入的了解用戶的思維。這里給大家列舉的是針對代駕車主福利中心的一個測試，但是相同的方法和步驟也可以用到其他的界面測試環節中。

當然，一輪的測試和修改并不是終點，而是不斷優化迭代的中的一步。在后面的設計中，我們也會按照這種不斷測試不斷改進的步驟去更好的優化滴滴代駕車主福利中心的設計，當最終設計令我滿意的時候，也會再次把如何通過數據做再設計的這個過程分享給大家。

希望那一天快點到來吧，哈哈。

最后感謝靜靜同學全程和我一起腦暴、整理、調研。

「用一個案例教你學東西系列」

1. 智能對象丨《用一個實戰教程，讓你學會智能對象》
2. 直方圖丨《用一個后期教程，幫你學會利用直方圖破解圖像的方法》
3. 圖層樣式丨《做一個實戰教程，讓你學會圖層樣式9大技能》
4. 設計流程丨《用一個實戰案例，幫你認識完整的設計流程》
5. 總監思考方式丨《用一個簡單的體重記錄功能，揭秘UI設計總監的思考過程》
6. 交互思考方式《用一個文本框，讓你學到交互設計師的邏輯思考方法》
7. 交互面試題丨《用一個框架，幫你學會這個最常見的交互面試題》
8. 數據驗證交互丨《用一個實戰案例，幫你學會用數據驗證產品設計》
9. 復雜界面設計丨《用一個實戰案例，教你學會復雜界面的布局設計》
10. 視覺改版方法丨《用一個實戰案例，教你學會視覺改版的方法》
11. 用戶體驗研究丨《用一個實戰案例，帶你從零開始做用戶體驗研究》
12. 設計沖刺法丨《用一個實戰案例，幫你快速學會現在最火的設計沖刺法！》
13. 交互思考方式丨《用一個實戰案例，帶你學習交互設計師的思考方式》
14. 重設計思路丨《用一個實戰案例，幫你學會講述重設計作品的思路》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com