Wisemapping 心智圖工具

　　Wisemapping是一套免費開源的軟體，採用HTML 5 + Java Web開發並建構於Web server上，它與其它市面上常見的mind mapping tools不同的之處，在於除了可安裝建置於公司內部之外，還支援多人分享及共同編輯等功能，因此，除了作為個人使用的mind mapping tool之外，亦適合作為團體的Brain storming ideas工具．

一）關於Wisemapping

　　如果我們連到Wisemapping的網站，會發現它的說明文件便是直接用mind maps的方式來製作（https://app.wisemapping.com/c/maps/3/try），相當一目瞭然，使用者也直接就清楚了wisemapping的特色和可達到的功能．

    如同大部份的mind mapping tools，我們可以直接在Wisemapping網站上(https://app.wisemapping.com/c/login)註冊自己的帳號並開始使用，所建立的圖表將會直接儲存在網站上，往後在任何地方或使用任何工具，只要登入帳號便可繼續使用，這種方式也是大部份市面的線上版本（均為商業性付費版），如MindMeister、Mind42.com、Mindomo、bubbl.us、Spinscape等等mind mapping軟體所採用的方式；但儲存於第三方的網站空間而非儲存自己硬碟上總是讓人不放心，尤其是企業用戶，因此，Wisemapping也開放直接下載，一般人也可以安裝在自己的Linux機器上使用．

二）建置Wisemapping

1. 環境準備:

準備一台建置於VMWare的虛擬機器：

• RAM: 1GB
• HD: 15GB
• IP: 172.30.8.115 (server網段)
• OS: CentOS 6.0 64bits 預設安裝

2. 安裝Wisemapping

1. 安裝 Java Development Kit 7 (或以上) 的Java SDK，可從http://java.sun.com/javase/downloads/index.jsp下載
2. 從https://docs.google.com/a/wisemapping.com/forms/d/1k2VanrKTgBQBl4dut85weWOZdYvP-NE7KSdmTbmn7yI/viewform下載Wisemapping source(需先註冊，目前為wisemapping-v3.0.2版本)
3. 將下載的wisemapping-v3.0.2解壓至/usr/local下（其它目錄也可）
4. 下載的source已包含了jetty這套Java HTTP Servlet Server，預設port為8080，wisemapping的目錄則位於webapps/之下．
5. 進入/usr/local/wisemapping-v3.0.2，下此command便可啟動jetty web server：java -Dorg.apache.jasper.compiler.disablejsr199=true -jar start.jar
6. 開啟瀏覽器，進入網址http://172.30.8.115:8080/wisemapping即可看到如下畫面

3. 將後端資料庫更改為mysql

Wisemapping的資料庫預設是使用HyperSQL，它是一套用java編寫輕量型的資料庫；但若要將wisemapping作為production使用，官方建議後端要更改為mysql DB．

1. 安裝mysql server:

我們可透過yum或者下載source( http://dev.mysql.com/downloads)來安裝．

但需注意的是，mysql版本需求為5.5以上，若需要用更新方式升級，可採用下列的方法：

• 增加升級mysql到5.5的來源

rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm

(參考: http://www.binarytides.com/setup-remi-repository-centos-fedora/)

• yum upgrade mysql-server
• 啟動mysql server並更改root預設密碼．
• 進入/usr/local/wisemapping-v3.0.2/config/database/mysql，透過mysql執行下列的sql：

create-database.sql: 建立資料庫及使用者帳戶

create-schemas.sql: 建立表格和索引.

test-data.sql: 建立範例檔和測試帳號 ("test@wisemapping.org" with password "test")

4. 進入/usr/local/wisemapping-v3.0.2/webapps/wisemapping/WEB-INF，修改app.properties檔案，將所有HSQL的區域用「#」mark起來，mysql區域則將「#」清除．
5. 執行java -Dorg.apache.jasper.compiler.disablejsr199=true -jar start.jar即可啟動jetty server．

4. 修改相關的icon檔案：

我們可以修改位於/usr/local/wisemapping-v3.0.2/webapps/wisemapping/images的圖片/Logo檔，將整體網站修飾為公司的形態如下：

三）Wisemapping使用說明：

    Ａ）進入網址：http://172.30.8.115:8080/wisemapping

    Ｂ）註冊自己的帳號

Wisemapping有支援LDAP的認證，但在與Microsoft AD的認證方面，目前測試無法成功連線，尚待更深入的測試研究，因此暫時需要由使用者自行註冊帳號來登入．

    Ｃ）使用者在註冊後便可直接登入使用：

    Ｄ）將mouse停在按鈕上方便會顯示其功能：

   

Ｅ）可將檔案與其他人共用：

Ｆ）可將檔案公開，任何登入的同仁皆可看見：

Ｇ）詳細的檔案修改記錄，並且可以回復或瀏覽：

Ｈ）支援多種格式的匯出勁能：

ps. JPG, PNG, PDF的格式匯出後，檔案大小為０，因此無法開啟，此為系統的bug，已有其他網友詢問中，此問題尚待解決．

四）Wisemapping與Xmind的比較：

	Xmind	Wisemapping
安裝	須安裝	不需安裝
執行方式	安裝於local後執行	透過瀏覽器執行
費用	有free/plus/pro三種版本, plus比起free多了匯出以及Creative Toolbox功能, pro又比plus多了Brainstorming, Presentation…等功能	開源軟體, 免費
檔案儲存	儲存於client端	集中儲存於server端
匯出功能	Free版本沒有	有
分享/共用	僅支援本地共享, 不支援指定user及權限	有, 且可指派人員及設定權限.
歷史版本記錄	有	有
編修功能	多	少
圖庫	多	少
細項功能	多	少
繪製複雜圖形	適合	不適合
使用自訂圖片	可	無

資訊系統介面的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表格，與使用者進行流程與功能面的討論．

什麼是UX?

1. 「用戶體驗」(User Experience)

Richard Saul Wurman (一位architect and graphic designer)曾經提到過：「資訊」是「引導我們去瞭解」。

用戶體驗是一個過程，一個引導用戶去瞭解的過程；用戶所體驗的，往往不僅止於最後目的的達成，還包含了整個使用的過程，因此，UX (User Experience)這個名詞，所包含的範疇，遠比我們實際上理解的還要多，它並不僅僅是那些背後操控UI (User Interface) 的元件或程式碼、頁面上的顏色、排列和設計、也不僅僅指設計上的可用性；傳統的UI設計，是讓使用者「知道」，但UX，則著重在於讓使用者「瞭解」。我們經常忘了這基本的概念，忽視了過程而著重於目的，急於將所有訊息展現給使用者，想讓使用者一次就知道我們想告訴他們的事。

1. 用戶體驗就是品牌的代稱

    Gartner於March 2002曾經提到：當一位客戶（使用者）使用任何的方式與企業接觸，下列三種印象的任何一個就有機會在他的腦海中形成：「好」、「壞」與「無感」，隨著時間過去，這一連串的使用者經驗就會在客戶腦海裏架構成一幅影像，最終形成對此企業的品牌/價值的印象。

2. 用戶體驗（UX）＝「工藝」＋「科學」

3. 用戶體驗（UX）的本質

1. 面向所有的用戶
2. 以用戶為核心價值
3. 客觀（而非主觀）的設計決策

4. UX的組成元素(下方圖示擷取自原著簡報)

　　對於用戶來說，網站或程式的外在表層就是UX，但對於企業（開發人員）來說，在這個表層之下，更多的UX思考，是來自於架構、各個層面以及抽象的策略行為。

　　下圖以一個Web的建置為例，分別從兩個構面「Software Interface」(UI部份)以及「Hypertext system」(內容部份)，從使用者需求及企業目標出發，最後完成整體的設計，列出它們可能包涵的UX元素：

5. UX並不僅止於「作得漂亮」

1. 增進UX的作法應具嚴謹性、再利用性、可重複性
2. 能明確釐清並劃分用戶的需求
3. 一致性的用戶介面（我想該項與第一項的嚴謹性、再利用性、可重複性有關）
4. 加強可用性（Usability見第三點）

2. 什麼是「用戶為中心的設計User Centric Design (UCD)」？

一位名為Frank Lloyd Wright的建築師曾經說過：建築師最重要的兩個工具，就是繪製客廳時的橡皮擦，和建築工地上的大鎚。（註）

（註）我想這和「攝影是減法的藝術」這個概念很類似，簡單的設計理念遠比複雜的編排更能讓使用者接受；UX的技巧在於，如何用最簡單清楚的方式，讓使用者瞭解和接受。

UCD是一種在設計過程中以用戶體驗為設計決策的中心，強調用戶優先的設計思考模式。白話說就是在進行產品設計、開發、維護時從用戶的需求和用戶的感受出發，圍繞用戶為中心進行產品設計、開發及維護，以產品迎合用戶，而不是讓用戶去適應產品。

A. User Centric Design的特性：

• UCD是一種設計哲學：換言之，它可能沒有一定的作法和一致性的想法。
• UCD是一個多階段的過程，無法一次性就完成。
• 設計者需要針對使用者的情境假設來進行測試。
• 著重在用戶的需求、目的以及使用限制。
• 用戶也必須包含在測試成員之中。

    B. User Centric Design是互動性的：

        在project中的每個階段，都應會有如下的UCD行為

    C. User Centric Design方法舉例：(圖示擷取自原著簡報)

    D. User Centric Design文件舉例：(圖示擷取自原著簡報)

3. 什麼是「易用性」(Usability)？

Jakob Nielsen曾經提到：「現今的使用者介面設計就跟軟體一樣的複雜，因為我們必須考量各種不同的變數；此外，最重要的，可用性工程師累積了20年的經驗告訴我們，第一次就能設計出好的使用者介面是不可能的事。」

1. 衡量易用性(Usability)的因素：

1. 有效性：用戶如何利用系統來達成他們的目的？
2. 效率：用戶要達成目標會使用到那些資源或方法?
3. 滿意度：用戶使用此系統的感想與心得。

2. 易用性(Usability)的效益：

有很多體認到可用性重要的企業，他們經驗法則告訴我們，易用性的成本效益比是 $1:$10-100：當一個系統正在開發時，更正一個錯誤的費用是十倍於在之前的設計時期就發現並修正它；而不幸的，假若這個系統已經上線了，那麼你會需要花費100倍的費用來修正這個錯誤。（Glib, 1998）。

舉一個例子，搭高鐵時我們是否會經常把票放反了而過不了閘門？這樣的車票設計就是缺乏測試，無法了解大眾的使用經驗，以至於產出這種「不直覺」的設計。這種背面朝上的設計完 全違反了我們平常使用ATM或火車票的習慣，導致高鐵要多一倍人力在閘門處協助人們出入，修正的成本不但可觀，也帶來不佳的使用者體驗。

易用性應具有下列特性：

1. 可增加用戶使用上的便利
2. 可增加用戶的滿意度
3. 可增加用戶工作上的效率
4. 可減少維護或功能加強的成本
5. 可節省開發的費用

易用性作得好，會增加品牌的價值！因為用戶是精明的，通常你只有一次脫穎而出的機會，而易用性可以讓你和競爭者之間的差異更加明顯。

3. 易用性的冰山現象：

下圖是一個巨大的冰山，上方的顯露的部份，有10%是視覺外觀設計，30%屬於使用者與外觀的互動（如按鈕），因此總共有40%是浮在水面看得到的，但下方仍有60%是屬於隱藏的易用性，例如概念模型、各元件之間的關係、工作流程、導覽等等；一個系統可用性的主要因素，其實有一大部份是隱藏在可見的表層之下，這部份經常為人所忽略。

4. UX和易用性的相關性：

如果我們把UX想像為一家Countdown store(紐西蘭知名的連鎖雜貨店)，易用性想像為效率，那麼，很容易便能理解兩者的關係：

把UX想像為一家Countdown store：

1. Countdown store這棟建築物
2. 將車停在停車場
3. 採購雜貨/日用品（目的）
4. 付錢購買（任務）
5. 每星期的特價品廣告
6. 網站

把易用性想像成效率：

1. 不同大小的推車、籃子
2. 商店的動線規劃
3. 走道寬度
4. 雜貨物品的放置安排
5. 結帳的速度

使用者會在Countdown store的每個節點/行為產生UX，易用性usability則會影響到UX的結果，因此，如果我們針對每個影響到易用性的地方進行改善，就可以增加UX，讓用戶體驗變得更加滿意。

下方為一張設計流程圖，其中有六個打上紅色勾勾的部份代表此環節需要進行易用性測試，你會發現，易用性可能會發生在很多的環節上（如同上方Countdown store有五個usability），但僅有這六個地方嗎？我們有發現到其它usability冰山下方的60%嗎？

4. 「User Experience」不是什麼？

5. UX不是好看或秀色可餐的東西
6. UX不是嘴上說說而已
7. UX不是可選擇性的選項

如果您將UX當成可選項而非必要性，那麼，你就會造成如下的結果：

這是一個沒有採用UCD方法設計出來失敗的的UX例子，這個茶壺擁有一個正常茶壺該有的結構和外形，但，它完全不能用…..您看出來了嗎？這是一個失敗的使用者體驗例子。

5. UE、UI、UCD、UED、GUI、UX的不同

UE、UX (User Experience)：用戶體驗，即本文重點所在，在國外多半將User Experience簡稱為UX，在中國則常用UE縮寫。

UI (User Interface)：一般指人機的互動介面

UED (User Experience Design)：用戶體驗設計，比較完整的UED團隊會包括：交互設計師(Interaction Designer)、視覺設計師(Vision Designer)、使用者體驗設計師(User Experience Design)、使用者介面設計師(User Interface Design)。

GUI (Graphical User Interface)：圖形化使用者介面，以圖形化的使用者介面來取代文字顯示的方式。

UCD (User Centered Design)：以用戶為中心的設計，如本文前面所敍。

6. 重點提要
1. 使用者體驗是一個多階段性的端對端End-to-end流程(註)，它必須透過以使用者為中心的設計方式並通過易用性的測試。
2. 使用者體驗的基礎在於透過探討研究並深入瞭解使用者的需求和目的。
3. 針對產品功能和設計的用戶體驗，必須是從頭至尾、依照用戶可能的行動模式的走過一遍，而不僅僅侷限於某一個測試點。

(註) 「端End」指企業外部的輸入或輸出點，這些點包括客戶、市場、外部政府或機構以及企業的相關利益者等等。「端到端流程End-to-end process」則指這些點之間一系列連貫、有序的活動的組合。

7. 企業內部的資訊部門與ＵＸ：

自從賈伯斯風潮襲捲全球之後，iOS搭配Apple硬體所構建而成體貼入微的介面與手感，讓使用者愛不擇手，一時之間，UX(User Experience)這個概念成了風潮，好像當初Google興起時所帶來的AJAX學習熱潮一般，似乎一家企業的產品或服務若不強調UX，就會失去競爭力而不為消費者所青睞。

然而，比起企業對待客戶端，一般企業內部的資訊部門，對於User Experience的著墨較少，也不太重視，這是有原因的：

1. 用戶不同：企業的產品面向的消費群，個體差異極大，UX成為一門顯學，而資訊部門面向的是企業內部員工，同質性較高，往往一份prototype就應用在好幾個系統。
2. 效益不同：企業產品或服務的UX，最終其目標就是提昇客戶評價與利潤，全公司上上下下都有共識進行UX的改善；但MIS部門的UX，其利潤產出很難界定，最終在於改善員工的作業，與最終的產品與利潤沒有直接關係。
3. 目的不同：企業進行UX最終目的是為了利潤，上上下下皆會持續努力不懈的要求，那MIS進行UX呢？對於MIS來說，只要完成使用者要求的系統，達成他們需要的功能，工作便可算結案了，系統使用過程中的UX不是很重要的一環，除非使用者要求，否則MIS很少會主動去發現並改善。
4. 使用者要求度不同：用戶往往會因為產品不好用或服務差而拒絕再上門，轉而改用其它選擇，但企業員工對於MIS開發的系統忍耐度與接受度是比較高的，往往到了忍受不了才會提出改善案，他們一般都會強迫自己適應公司的系統，並認為這是工作的一部份。
5. 人力問題：UX的改善並不是一個人的責任，企業對於產品和服務，UX部份會有專門的人負責，溝通規劃設計並組成團隊進行測試改善，這是相當花費時間和金錢的工作，那麼對於僅僅是員工內部使用的系統呢？這時，只有靠有經驗的MIS的巧手來設計了。
6. UX數量不同：企業會針對不同的產品/服務以及不同的客戶群而有不同的UX，並持續的針對它們進行改善；但是對於MIS來說，UX可能產生在不同的部門、不同的project、不同的系統，MIS在結束每項工作之後，往往不會持續地去追蹤使用者的滿意度或使用情況，因為有太多的工作等待處理，而是等到使用者回報或是提案改善時，才會去回頭檢視。
7. 效益問題：針對內部員工使用的系統，若過度強調UX，反而會導致MIS工作loading過重，開發時程延宕，成本效益比太低等問題。

以上數點，並不是說明MIS不需要UX，反而MIS在進行內部系統的開發時 ，要導入UX是比較容易的，因為企業內部員工相對數量少、同質性高、忍受力強，UX滿意度的提昇會比針對消費者的UX來得容易，但要注意的是，內部員工對於MIS滿意度提昇若持續一段時間後，往往會成為常態而變成新的滿意度基準點（但企業的消費者由於有不同的選擇與比較，只要保持一定的品質，其消費者滿意度是持續性的）； 建議MIS開發系統時，應要著重UCD的觀念，以使用者的情境來進行設計開發，經常與使用者保持聯繫，並進行各階段的使用測試與回饋，這是最基本的。