資訊系統介面的usability工具

　　接續上星期「什麼是UX？」一文，其中談到了易用性(Usability)的觀念；所謂易用性(Usability)的目的在於讓最終產品的設計能夠符合使用者的習慣與需求，這看似容易，但實際上卻很難完美的達成，正如同Haunani Pao在簡報中提到的易用性冰山現象()，露在水面40%屬於顯性的視覺外觀與互動設計，而有60%的部份是隱藏在水面下，需要透過持續的UCD步驟來發掘出來．

    一般我們在設計資訊系統時，有三個階段的方法能幫助我們時時檢視目前的設計不偏離使用者的需求，此三種階段方法為「線框圖(Wireframes)」、「視覺稿(Mockup)」、「雛形製作(Prototype)」．

1. Wireframe (線框圖)：

主階段的主要目的在於讓使用者知道系統的流程順序及主要功能、項目排列，一般多用手繪或簡要的圖示流程方式，不需要花時間間在製作各項UI設計的細節．

Wireframe多應用於專案初始討論的階段，透過簡單且快速的形式，在內部團隊中溝通時提供良好清晰的草圖，用以建立清楚的溝通管道及共識，並快速收集相關使用者的回饋資訊。

2. Mockup (視覺稿)：

系統中各項細部的UI介面及功能項目及細節的確定，但互動的部分可以先省略；此階段介於Wireframe及Prototype之間，主要目的在於將設計視覺化，並藉以獲得意見當參考依據進行修改．

3. Prototype (雛形製作)：

此階段著重於實際操作，像按鈕要可以按、多媒體要可以播放、下拉選單要可以動作等等，以便模擬使用者介面的互動，等於是將Mockup一頁頁的整合在一起，相當類似使用者與介面之間最終互動方式的模擬，雖然看起來不完全像是最終產品，但應該要相當的接近；一些不重要的小細節在此階段仍可被忽略，以免影響系統開發的時間。

在第一階段Wireframe，我們跟使用者確認系統的輪廓、功能及流程，第二階段則確認各細部的視覺外觀及功能介面等，第三階段則加入了互動操作，一步步的以使用者為中心的設計下，完成系統的開發工作．

　　　　

下方是一張有趣的圖，說明了專案中不同的人員，對於某件事物會因立場的不同而產生不同的想法和結果，這是專案中每個人員各自為政，未follow UCD所導致的後果．

    以創新目前的環境來說，Domino Notes的資訊系統佔了大多數，其次為以WEB介面開發的系統；Notes系統著重於系統流程及表單內容，不同元件之間的操作及外觀差異不大，系統開發時比較著重於文件的填寫與任務的完成，因此，在Wireframe階段確定了系統的流程與步驟之後，可直接進入Prototype步驟；而WEB AP則因沒有簽核流程，多用於資料統計與展示，在開發時會比較著重於UI與使用者互動，因此wireframe與Mockup階段可合併進行．

	Web		Notes
初始階段	使用流程圖或xmind等軟體，瞭解並匯整使用者的需求．
Wireframe	使用Evolus Pencil或Balsamiq Mockups等軟體，依使用者需求製作出Wireframe/ Mockup；進行流程較少的WEB開發時，可將wireframe與Mockup階段同時進行．	使用Evolus Pencil繪出系統流程及架構；在此階段，Notes的開發包含一部份的Mockup資訊收集．
Mockup		直接使用Notes元件及表格, 製作出外觀介面及各項功能表, 作為Mockup與使用者進行討論；
Prototype	直接使用HTML或Axure軟體進行prototype

    以週報系統為例，在Wireframe階段，Notes開發人員可在進行初始的會議瞭解使用者需求之後，在進行Wireframe階段時，利用Pencil軟體製快速地作出如下的Wireframe表格，與使用者進行流程與功能面的討論．