在上一篇文章裡，我們講到對產品背景知識的認識，想出解決方法，有了產品的雛形之後，接下來終於可以進入實際設計產品的步驟了！
6.0 Interaction Map（互動地圖）
在開始之前，我們先來複習一下，一個簡單的AMT玩具的Interaction Map大概長這樣：
6.1 Wireframe（框線圖）
根據上一篇文章做的Interaction Map（互動地圖），就大概會知道會需要哪些功能、頁面、按鈕等等。接下來就是要把上面這些格子做成畫面。
Wireframe的重點在於確認功能、畫面及互動，比起上面的Interaction Map又更具體，客戶更容易想像實際畫面，而又不會被細節拉走。
下面是用Axure畫的wireframe，再加上箭頭指示按了這個按鈕之後要連到哪個頁面。
在設計的時候必須要注意到當初使用者研究的結果，要符合使用者的需求。同時心中要有Persona，想著實際的使用者。理論上來說，應該能比沒有使用UX方法做出更貼近使用者需求的產品。
7. Lo-fi Prototype（低擬真原型）
接下來就是把上面畫好的wireframe稍作加工，做成可互動的Prototype。
Lo-fi全名Low Fidelity，中文：低擬真。到底什麼境界叫低擬真呢？
大概長這樣：
Video Credit: Debby Hsu
以上是精選本學期最精美Paper Prototype。
這個步驟最重要的是讓功能、流程、畫面可以實體呈現，在進入耗時的Mockup之前可以先做過一次使用測試。我們在畫wireframe的時候，常常會陷入設計者的迷思。因為自己對於各種功能都很熟悉，就會覺得這樣的流程理所當然。但其他人看起來只覺得：這什麼鬼設計！按鈕怎麼會在這！我要怎麼回上一頁！什麼？怎麼可以沒有這個功能！
當然有些錯誤可以透過經驗避免，但使用者想的永遠跟你不一樣。為了在進入不可挽回的階段之前盡量進行修正，在Lo-Fi階段先做一版測試，在覺得自己做的設計是個垃圾之餘，還可以找出很多bug，做出下一版更好的設計。
8. 1st Usability Testing（易用性測試）
下一步是利用做好的Lo-Fi Prototype去找使用者做測試，可以找其他部門的同事、朋友、家人，或是任何不熟悉這個產品的人。
給受測者一個使用情境，然後給他們一些任務去完成，讓他們在操作的時候同時說出自己看到這個介面之後在想什麼，想怎麼操作它，介面是否給出他想要的回應。
下面是一個找二手家具網站的範例：
想像你剛搬到一個新的地方，新莊好了。你沒有車，但卻又希望可以省錢，所以你打算先上這個二手家具網站看看附近有沒有堪用又便宜的二手傢俱。接下來，請你搜尋一項家具，並且使用篩選功能找出符合你需求的家具。
使用測試實在是個非常有趣，可以馬上看到使用者的反應，他們的反應和想像中有什麼不一樣等等。之後會再更詳細介紹這個階段。
我喜歡做Paper Prototype，是因為在測試階段發現少了個按鈕或是少了個功能可以馬上畫出來加上去，讓測試可以進行下去，或是可以直接在畫面上做筆記，非常方便。
從冰天雪地的密西根HCI畢業之後，現在在矽谷為一間B2B公司做UX Design，天天為系統管理員做設計。希望能用中文和更多台灣人分享UX。http://www.stephkuo.com/
原文出處Medium；政府網站營運交流平台授權轉載
|