紙模型

 

Paper Prototype

紙模型

 

摘要 (Abstract)

紙模型是以用戶為中心的常用設計方式之一,它能快速建立介面並表達互動方式與模擬人機互動的流程,設計師透過架構出介面流程(UI Flow)後,用手繪或是拼貼等方式,將流程中各個介面的設計依邏輯關係逐頁地建立紙模型,且定義各元件的相互關係。

定義(Definition)

紙模型(Paper Prototype)利用圖像化的方式進行手繪介面作為原型或模型,幫助設計師把用戶期望和需求的設計想法融合,具有更多創造力,能快速將新想法形象化,在短時間內快速做介面設計操作經驗的生成並達成經驗操作及快速評估,方便討論也易於更改,低成本帶來高效益。通常用於軟件開發。紙模型的目的是用來評估使用者介面背後的想法及流程,而並非圖像本身,因此並不需要畫的十分精美。紙模型使用範圍非常廣大,最常用於軟件開發。

紙模型用於設計和測試用戶界面,包括“低保真草圖”與“高保真草圖”,低保真草圖用於內部團隊討論及設計師所有初始想法,高保真草圖用於與客戶討論及進行真實用戶測試,較於詳細整理設計師想法。為了確保用戶了解可在紙模型加入文字或圖像,可概述用戶流程中的步驟或應用程序結構,分類紙張顏色可保持紙模型的一致性。

優點:能讓使用者一同加入設計行列,且紙模型修改容易,只需修改圖紙設計,快速、簡單且具有成本效益,易於與用戶、領導和其他相關人員溝通,這種可用性測試方法可以提供大量有用的反饋,從而可以設計出更好的產品。

缺點:紙模型無法真實反映實際產品。

 

步驟(Procedure)

Step1.決定好要解決的主要問題

收集資料與團隊討論,不要只有空談的意見,要有實際數據與潛在解決方案。

Step2.在紙上畫出你的想法

以簡單的繪畫方式呈現出設計想法。

Step3. 關注重點項目和圖像位置

加入重點項目及圖像,能使觀看者更清楚。

Step4.對紙模型進行可用性測試

透過讓一到兩個開發人員扮演“計算機”的角色,或是會實際使用到這項產品的使用者進行可用性測試,操縱紙片來模擬界面的行為。

Step5.進行會議

整個開發團隊進行會議,觀察並記錄了介面給用戶帶來的問題。

Step6.修改紙模型

由於紙質原型容易創建和修改,能更加靈活並願意嘗試新的想法。

Step7.再次進行測試

修改後,找不同的用戶再次測試。

 

案例(Case)

案例一    商業軟件產品

該產品已上市一年左右,雖然客戶喜歡這個功能,但他們抱怨說這個軟件很難使用。

Step1. 決定好要解決的主要問題

這個軟件很難使用。

Step2. 在紙上畫出你的想法

繪畫界面的每個元素,顯示螢幕的外觀。

Step3. 關注重點項目和圖像位置

屏幕,菜單,錯誤信息等等。

Step4. 對紙模型進行可用性測試

選擇了一名開發人員扮演計算機的角色,通過操縱紙張來模擬軟件的行為,對紙張原型進行可用性測試,例如:用戶想在基於Windows的文字處理器中打開文檔,他們會觸摸菜單欄上的文件一詞。

Step5. 進行會議

結果得知開發團隊發現之前一直在爭論的竟然是用戶根本沒註意到的事情,而界面上出現了很多沒有預料到的問題。

Step6. 修改紙模型

接者修改紙模型。

Step7. 再次進行測試

修改後再次測試,找了兩位不同的用戶並讓他們完成相同的任務。


案例二    以改良居家智能控制面板為例

Step1. 決定好要解決的主要問題

智能控制面板介面過於複雜,不易操作。

Step2. 在紙上畫出你的想法

了解到問題所在(介面過於複雜)之後,利用繪畫或是拼貼等方式,將新的設計方案在紙上呈現出來。

Step3. 關注重點項目和圖像位置

將你設計的重點標記起來,讓使用者能更輕易地看到設計者的想法,同時也可以減少雙方討論時所需要的溝通時間。

Step4. 對紙模型進行可用性測試

將完成的紙模型交給使用者進行測試,並與設計師當面進行意見的交流,讓設計師能更直接的了解到使用者的想法(或許使用者覺得新的設計介面圖像太多)。

Step5. 進行會議

當與使用者溝通完畢後,設計團隊將會進行會議討論,繼續針對使用者所提出的意見與想法,激發出更多符合需求的創意構想。

Step6. 修改紙模型

紙模型的建立十分方便,因此不需要花費大把時間就可以輕易地建造新的紙模型,也就是再次回到Step2。

Step7. 再次進行測試

修改過後的紙模型再次給使用者進行測試,並與設計師討論彼此想法,若還是不滿意,將再次回到Step5,不斷輪迴,直到使用者能夠滿意為止。

 

參考資料(Reference)

Carolyn Snyder。Using Paper Prototypes to Manage Risk。

UX Planet。The art of UX sketching and paper prototyping。

維基百科。Paper prototyping。

webopedia。paper prototype。

Caroline Kronley、Kippy Joseph。Paper Prototyping: A Guide For Surfacing Innovative Ideas More Quickly。

Sofiya Merenych。How to make a prototype? The first step towards a successful product。

Vivienne Trulock。PAPER PROTOTYPING。

Nick Babich。Prototyping 101: The Difference between Low-Fidelity and High-Fidelity Prototypes and When to Use Each。

Summer。What Are the Advantages and Disadvantages of Prototyping。

Shen Gao。Paper Prototyping — How-to, Pros & Cons, and the Struggles of Guerrilla Usability Testing。

 

資料整理:2018 莊文馨2019 史鈞穎

總編輯:羅歆慈

編輯與排版:李明容

 

分享 Acadeck 給更多人!