(本篇刊載於2012臺灣災害管理研討會論文集)
康仕仲 國立臺灣大學土木工程學系 副教授
楊兆中 國立臺灣大學土木工程學系 研究生
許睿叡 國立臺灣大學土木工程學系 博士生
楊兆中 國立臺灣大學土木工程學系 研究生
許睿叡 國立臺灣大學土木工程學系 博士生
摘要
經驗學習中心之主要目的乃集結過去之實際經驗予以整理歸納，以利於相似情境發生時，能有效地藉由經驗汲取來解決問題。經驗學習多用以處理難以預測的複雜系統，而天然災害即屬於複雜系統的一種，在歷年災害經彙整並系統性管理整建為經驗學習中心後，若遭遇類似條件因素之災害，災中能提供決策者防災應變之參考，災後能檢視學習經驗資訊是否真的對防災有所幫助。除此之外，經驗學習中心可提供一般民眾進行閱覽，藉由對過去災害的了解，加強防災的觀念，達到教育意義。災害管理經驗學習中心之經驗擷取共分為三個步驟：(1)資料蒐集 (2)資料整理 (3)實際施作。目前，我們著重於過去15年來發生於台灣之嚴重災害：包括28次水災事件、4次旱災事件等及9次重大水利事件加以整理，除了蒐集每項事件之氣象資訊、災因分析、災情處置、新聞報導等相關資料外，更有專家與災民訪談，以從更多面向來了解災害之影響。在資訊蒐集後，再套入此研究中所設計之模版來協助資料之整理，且確認資料之完整性，最後再實際整建為經驗學習中心。為使經驗學習中心能有更高的可及性，我們選用HTML5 standard之網頁形式呈現；每筆災害事件皆提供相同呈現格式，依框架將事件訊息予以分類，並可依閱覽習慣與需求調整相對位置。目前已實際提供給經濟部水利署進行測試，以驗證其使用性。
一、研究背景
一直以來，台灣被列為世界上最易受天災的地方，且多屬兩種以上之複合式災害，形式複雜而難以管理，尤其以夏秋季之風災影響最為嚴重，平均每年受到約三到四個颱風侵襲，近年來更因氣候變遷造成雨旱季雨量分布不均，嚴重影響供水，更增加氣象預測的困難性(National Research Council, 1994)。由於天災的複雜性與其難以預測，我們選擇以「經驗學習」之方式來協助災害管理(Smith, 2001)。藉由過去所留下來的災害資料，在經過分析整理與篩選後，找出可能各種影響災情的因素，並予以歸類。在災害來臨前，依照現有可用的資料與過去災害資料進行比對，根據其相關性來判斷可能帶來的，並加上原本的預測方式，便能在當下給予及時性的決策(Finlay, 1994; Power, 1997)。「經驗學習」之使用目的不單是解決當下可能遭遇之災害，更是為未來建立防災的參考指標，且不斷的更新與改進。
經驗學習中心之建立在許多先進國家之各領域已行之有年，藉此方法能將過去經驗予以保存，並可供相關機關參考與研究。舉例來說，Wild-land Fire Lessons Learned Center為美國荒地火災經驗學習中心網站(WFLLC, 2012)，其中包含許多與森林火災相關之會議與研討會論文與多媒體資訊，提供過去救災經驗並在持續更新(圖1)。水利署亦針對各項水利災害事件建置水利經驗學習中心(LLC, 2012)，將災害事件依水災、旱災及重大水利事件進行分類，每項事件又包含七項分類以描述災害內容。而本份研究之主要目標就是探討如何針對既有之經驗學習中心之不足予以改進，以增加「經驗學習之效率」，協助人們更快速且正確地取得所需資訊。
為能讓使用者有更適切的操作環境，研究裡我們著重於整體介面改善，並希望能提高系統之被接受度。下列為欲解決之問題：
(1)、介面操作不易
(2)、資訊傳達不直觀
(3)、缺少重點整理
(4)、災害事件間比較困難
(5)、閱覽裝置支援程度不一
經驗學習中心之建立在許多先進國家之各領域已行之有年，藉此方法能將過去經驗予以保存，並可供相關機關參考與研究。舉例來說，Wild-land Fire Lessons Learned Center為美國荒地火災經驗學習中心網站(WFLLC, 2012)，其中包含許多與森林火災相關之會議與研討會論文與多媒體資訊，提供過去救災經驗並在持續更新(圖1)。水利署亦針對各項水利災害事件建置水利經驗學習中心(LLC, 2012)，將災害事件依水災、旱災及重大水利事件進行分類，每項事件又包含七項分類以描述災害內容。而本份研究之主要目標就是探討如何針對既有之經驗學習中心之不足予以改進，以增加「經驗學習之效率」，協助人們更快速且正確地取得所需資訊。
為能讓使用者有更適切的操作環境，研究裡我們著重於整體介面改善，並希望能提高系統之被接受度。下列為欲解決之問題：
(1)、介面操作不易
(2)、資訊傳達不直觀
(3)、缺少重點整理
(4)、災害事件間比較困難
(5)、閱覽裝置支援程度不一
圖1、 Wild-land Fire Lesson Learned Center
二、研究目的
由於眾多領域對於易用性之重視，使用者介面成為軟體設計中相當重要的一環(Jakob, 2012)。使用者介面為系統和使用者之間進行互動和資訊交換的媒介，也最直接影響使用者對於系統之使用經驗；好的使用者介面不單使使用者能在舒適之環境下操作系統，更能提高訊息傳達之效率。因此，為了加強目前系統之不足，我們提出以下五點作為加強易用性之目標：
(a) 易學性：減少使用者第一次熟悉系統使用之所需時間。
(b) 可記憶性：減少使用者重新熟悉系統使用之所需時間。
(c) 使用效率：在熟悉系統操作後，減少資訊獲得所需耗時。
(d) 錯誤：降低使用系統時使用者操作失誤之次數，並減少解決錯誤之所需時間。
(e) 滿意度：提昇使用者操作時之舒適度。
此外，在過去HTML版本中，欲增加網頁動態瀏覽功能，需借助於第三方軟體(如: Adobe Flash, Microsoft Silverlight等) 之支援，以在網頁中添加和處理多媒體與圖片內容，但由於市面上各網頁瀏覽平台對第三方軟體之支援程度不同，以致原先設計之網頁呈現無法在各瀏覽器都有預期的表現，且因下載第三方套件之不便，進而增加使用者經驗之困難度。除此之外，近年來行動裝置之普及，我們更訴求於經驗學習中心能藉此搭載於行動裝置上，以提高其可攜性，以利使用者能隨時隨地取得所需資訊，並協助決策人員於現地進行經驗學習。
綜合以上各點，我們選擇以HTML之最新修訂版本「HTML5」作為水利署經驗學習中心之網站架構語言。HTML5為繼1999年所製定之HTML 4.01後之最新版本，其為包括HTML (HyperText Markup Language)、CSS (Cascading Style Sheets)和JavaScript之技術組合，目的是希望藉由此項技術之推行以減少瀏覽器對於外掛多樣化網際網路應用程式(plug-in-based rich internet application，RIA)之需求。
(a) 易學性：減少使用者第一次熟悉系統使用之所需時間。
(b) 可記憶性：減少使用者重新熟悉系統使用之所需時間。
(c) 使用效率：在熟悉系統操作後，減少資訊獲得所需耗時。
(d) 錯誤：降低使用系統時使用者操作失誤之次數，並減少解決錯誤之所需時間。
(e) 滿意度：提昇使用者操作時之舒適度。
此外，在過去HTML版本中，欲增加網頁動態瀏覽功能，需借助於第三方軟體(如: Adobe Flash, Microsoft Silverlight等) 之支援，以在網頁中添加和處理多媒體與圖片內容，但由於市面上各網頁瀏覽平台對第三方軟體之支援程度不同，以致原先設計之網頁呈現無法在各瀏覽器都有預期的表現，且因下載第三方套件之不便，進而增加使用者經驗之困難度。除此之外，近年來行動裝置之普及，我們更訴求於經驗學習中心能藉此搭載於行動裝置上，以提高其可攜性，以利使用者能隨時隨地取得所需資訊，並協助決策人員於現地進行經驗學習。
綜合以上各點，我們選擇以HTML之最新修訂版本「HTML5」作為水利署經驗學習中心之網站架構語言。HTML5為繼1999年所製定之HTML 4.01後之最新版本，其為包括HTML (HyperText Markup Language)、CSS (Cascading Style Sheets)和JavaScript之技術組合，目的是希望藉由此項技術之推行以減少瀏覽器對於外掛多樣化網際網路應用程式(plug-in-based rich internet application，RIA)之需求。
三、實作方法與應用
1、改善介面以加強易用性
水利署經驗學習中心由HTML5中之CSS語言，將系統架構為框架型式。為增加使用易學性與使用效率，我們選擇使用較明亮之外框顏色以方便使用者閱讀。舉例來說，位於網頁左側之欄位主要目的為搜尋之用，而右側為資訊的呈現，因此顏色必須明顯作區隔(圖2)。再者，每項災害事件皆為獨立頁面，各包含七項分類，藉此即可在一開始便清楚了解災害之概要資訊，並依所需分別點選細節分類。
水利署經驗學習中心由HTML5中之CSS語言，將系統架構為框架型式。為增加使用易學性與使用效率，我們選擇使用較明亮之外框顏色以方便使用者閱讀。舉例來說，位於網頁左側之欄位主要目的為搜尋之用，而右側為資訊的呈現，因此顏色必須明顯作區隔(圖2)。再者，每項災害事件皆為獨立頁面，各包含七項分類，藉此即可在一開始便清楚了解災害之概要資訊，並依所需分別點選細節分類。
圖2、基本架構
除此之外，我們也提供使用者依照個人之閱覽習慣移動框架之相對位置(圖3)，以增進對系統之使用印象。在心理學中，短期記憶能藉由有意義之關聯性的建立來成為長期記憶，而在本系統中則提供具使用彈性之介面來協助使用者發掘分類項目間之關係，並在移動中增加記憶。此外，使用者還能藉由變更欄位顏色，以標註重點或提醒上次閱覽紀錄。
圖3、資料欄移動步驟（左至右）
 |  |
圖4、颱風路徑與衛星雲圖（左）；累積雨量圖與衛星雲圖（右）
為減少操作上的錯誤，本系統盡可能簡化介面之複雜性以免造成使用者使用上之疑慮。在左側欄位最上方為Google自訂搜尋引擎新增搜尋框，協助使用者在系統中搜尋所需內容；其下方我們將所有災害依照災害年份、種類或事件類型三種搜尋方式。在各別災害事件中，每災害頁面層級亦不會多於兩層，在進入第二層頁面後亦能輕易地回到主頁面，不致使用困難。
總而言之，為求在資訊傳達上能有更好之使用者經驗，我們藉由增進經驗學習中心之效率與資料視覺化以達目的，使用者藉由操作的自由性亦能提高使用舒適度，更一別於過去以單向瀏覽方式，增進系統與操作者之間的互動性。
總而言之，為求在資訊傳達上能有更好之使用者經驗，我們藉由增進經驗學習中心之效率與資料視覺化以達目的，使用者藉由操作的自由性亦能提高使用舒適度，更一別於過去以單向瀏覽方式，增進系統與操作者之間的互動性。
圖5、資料視覺化：各雨量站之雨量
圖6、資料視覺化：不同流域之累積雨量
2、 多媒體展示
經驗學習中心裡，每筆災害資料都含有圖片、影片、文字、圖表等多種資料。藉由以上資料媒介可將資訊更為生動地提供給使用者，並有增加人與系統間的互動性(Najjar, 1998)。以流域累積雨量為例子：在研究裡我們以HTML5中之JavaScript呈現模組代替過去傳統表格(圖6)，使用者能快速理解各流域累積雨量之關係並比較差別。此外，我們也將訪問災害期間執勤人員之錄音或錄影紀錄放入系統中。
3、 關鍵報告
經驗學習中心裡，每筆事件都包含大量災害訊息，以予決策者足夠之資訊協助分析研判，但往往災害來臨之時間緊迫，過多訊息易使人無法在短時間內消化，以致減低效率。鑑此，針對每項災害事件我們都會製作一份「關鍵報告」，其中內容包含由颱洪中心、水利署專家彙整每項災害事件最為重要之部分，濃縮至三到五張簡報當中(圖7)，以達到快速瀏覽之功效，且可供下載作為研究或簡報之用。另外，我們亦使用Google所提供之HTML5 Slide Template(圖8)，可直接於系統中提供簡報功能。
經驗學習中心裡，每筆災害資料都含有圖片、影片、文字、圖表等多種資料。藉由以上資料媒介可將資訊更為生動地提供給使用者，並有增加人與系統間的互動性(Najjar, 1998)。以流域累積雨量為例子：在研究裡我們以HTML5中之JavaScript呈現模組代替過去傳統表格(圖6)，使用者能快速理解各流域累積雨量之關係並比較差別。此外，我們也將訪問災害期間執勤人員之錄音或錄影紀錄放入系統中。
3、 關鍵報告
經驗學習中心裡，每筆事件都包含大量災害訊息，以予決策者足夠之資訊協助分析研判，但往往災害來臨之時間緊迫，過多訊息易使人無法在短時間內消化，以致減低效率。鑑此，針對每項災害事件我們都會製作一份「關鍵報告」，其中內容包含由颱洪中心、水利署專家彙整每項災害事件最為重要之部分，濃縮至三到五張簡報當中(圖7)，以達到快速瀏覽之功效，且可供下載作為研究或簡報之用。另外，我們亦使用Google所提供之HTML5 Slide Template(圖8)，可直接於系統中提供簡報功能。
圖7、關鍵報告
圖8、Google HTML5 Slide之關鍵報告
4、 颱風動態關聯模組
所謂「動態關聯模組」即依照某指定分類方式，將不同之獨立事件依其特定關聯性互相連結，由於其關聯性造成之相似，以快速從關聯事件中擷取經驗。在本系統裡，選用「颱風路徑」與「受災地區」作為關聯依據(圖9)進行分類：根據台灣氣象局之分類，颱風路徑一共分為十種；受災地區則將台灣分為北、中、南等六大區域。當颱風來臨，根據預測路徑與受災地區則能快速找到較高關聯性之颱風事件，以助分析研判。
所謂「動態關聯模組」即依照某指定分類方式，將不同之獨立事件依其特定關聯性互相連結，由於其關聯性造成之相似，以快速從關聯事件中擷取經驗。在本系統裡，選用「颱風路徑」與「受災地區」作為關聯依據(圖9)進行分類：根據台灣氣象局之分類，颱風路徑一共分為十種；受災地區則將台灣分為北、中、南等六大區域。當颱風來臨，根據預測路徑與受災地區則能快速找到較高關聯性之颱風事件，以助分析研判。
5、 跨平台展示
由於目前Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer 9等主流瀏覽器皆已支援HTML5技術，經驗學習中心即可於各瀏覽器上完整呈現多媒體資訊。此外，除提供人們於個人電腦上使用外，亦希望在災害來臨時能於災區以行動裝置作即時瀏覽，進而藉由過去經驗進行災情研判並決策。為使經驗學習中心在平板電腦上有適當之閱覽畫面(以iPad為例)，我們選擇以置中之呈現方式(圖9)，根據平板電腦之螢幕解析(1024×768)作調整(圖10)，藉此使使用者有更舒適之閱覽環境。
由於目前Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer 9等主流瀏覽器皆已支援HTML5技術，經驗學習中心即可於各瀏覽器上完整呈現多媒體資訊。此外，除提供人們於個人電腦上使用外，亦希望在災害來臨時能於災區以行動裝置作即時瀏覽，進而藉由過去經驗進行災情研判並決策。為使經驗學習中心在平板電腦上有適當之閱覽畫面(以iPad為例)，我們選擇以置中之呈現方式(圖9)，根據平板電腦之螢幕解析(1024×768)作調整(圖10)，藉此使使用者有更舒適之閱覽環境。
圖9、於Google Chrome 21.0.1180（左）與Internet Exploer 9.09（右）之瀏覽畫面
圖10、iPad瀏覽畫面
四、訪談與討論
為提昇本系統之使用性，本研究訪談位於防災最前線之經濟部水利署颱風期間值勤應變人員，針對水利署人員在經驗學習時所需之功能做討論，包括多媒體資訊呈現與颱風間關聯性之表達等。其結果顯示，相對於每次災害事件之細節，他們更關注於過去人員所留下之防災經驗。因此，本研究除了蒐集過去災害來臨時之值班資料，並就水利署內部各層級人員進行訪談，將訪談內容以錄影、錄音方式記錄，再與台灣颱風洪水研究中心(Taiwan Typhoon and Flood Research Institute)合作剪輯成約3～5分鐘長度之影音檔案上傳至經驗學習中心。
為使操作上更為舒適與順暢，本研究針對操作介面與資料內容作改善，包括：(1) 將文字敘述精簡化，改以更易被使用者接受之圖表格式呈現，以避免閱讀大量文字所造成之學習效率降低。(2) 提供下載由颱洪中心所編輯之原始數據，以方便使用者做進一步研究。(3) 透過路徑或受災區域分類之搜尋索引，可以快速找到所需要的資料，且每筆災害網頁層級不超過兩層，以減少使用上的複雜度。
經多次討論，本研究決定將經驗學習中心提供為開放平台，供任何民眾瀏覽每筆歷史災害事件資料，並開放下載關鍵報告以作為研究或進階學習之用。此外，亦使用受各瀏覽器廣泛接受之HTML5 standard之網頁架構(Power, 2000)，以提高使用者之可及性，使資料能有更豐富的呈現方式。
為使操作上更為舒適與順暢，本研究針對操作介面與資料內容作改善，包括：(1) 將文字敘述精簡化，改以更易被使用者接受之圖表格式呈現，以避免閱讀大量文字所造成之學習效率降低。(2) 提供下載由颱洪中心所編輯之原始數據，以方便使用者做進一步研究。(3) 透過路徑或受災區域分類之搜尋索引，可以快速找到所需要的資料，且每筆災害網頁層級不超過兩層，以減少使用上的複雜度。
經多次討論，本研究決定將經驗學習中心提供為開放平台，供任何民眾瀏覽每筆歷史災害事件資料，並開放下載關鍵報告以作為研究或進階學習之用。此外，亦使用受各瀏覽器廣泛接受之HTML5 standard之網頁架構(Power, 2000)，以提高使用者之可及性，使資料能有更豐富的呈現方式。
五、結論
在本研究中，我們著重於改善水利署緊急應變經驗學習中心之學習效率。藉由使用者介面改善與HTML5之應用實作，提供水利署人員與民眾更友善的操作環境。以過去研究資料為基礎，本研究經過介面調整使資訊更為精簡與易於閱讀。根據前述五項易用性原則，我們以明晰的版面設計增加學習性與效率，並以版面編排的自由性增加可記憶性。為減少使用失誤，我們保持經驗中心網站之層級在兩層以下，並提供索引來搜尋災害事件。
除此之外，我們藉由HTML5擁有之圖表呈現功能，使資料視覺化以增進使用者對於資料間關係之印象。另外我們更將颱風依路徑予以分類，並提供關聯性模組以比較災害事件間異同，以強調災害事件之關係。我也提供災害事件關鍵報告以快速且精準地了解災害事件。
總而言之，由於災害之複雜與難以預測，本研究以經驗學習中心概念來彙整過去經驗提供實際防災應變使用，且著眼於根據易用性之五項原則來改善使用者介面之設計，並透過HTML5進行實作開發。
除此之外，我們藉由HTML5擁有之圖表呈現功能，使資料視覺化以增進使用者對於資料間關係之印象。另外我們更將颱風依路徑予以分類，並提供關聯性模組以比較災害事件間異同，以強調災害事件之關係。我也提供災害事件關鍵報告以快速且精準地了解災害事件。
總而言之，由於災害之複雜與難以預測，本研究以經驗學習中心概念來彙整過去經驗提供實際防災應變使用，且著眼於根據易用性之五項原則來改善使用者介面之設計，並透過HTML5進行實作開發。
參考文獻
Najjar, L. J., 1998. Principles of educational multimedia user interface design. Human Factors, 40(2), 311-323.
Jakob N., n.d.. Usability 101: Introduction to Usability, Retrieved August 28, 2012, from http://www.useit.com/alertbox/20030825.html
Smith, M. K., 2001. David A. Kolb on experiential learning, the encyclopedia of informal education. Retrieved Aug.28, 2012, from http://www.infed.org/biblio/b-explrn.htm
Finlay, P. N., 1994. Introducing decision support systems, Oxford, UK: NCC Blackwell; Cambridge, Mass., USA: Blackwell Publishers.
National Research Council, 1994. Facing the Challenge: The U.S. National Report to the IDNDR World Conference on Natural Disaster Reduction, Yokohama, Japan, May 23-27, 1994, National Academy Press.
Power, D. J., 1997. What is a DSS?, The On-Line Executive Journal for Data-Intensive Decision Support 1(3).
Power, D. J., 2000. Web-based and model-driven decision support systems: concepts and issues. in proceedings of the Americas Conference on Information Systems, California: Long Beach.
Jakob N., n.d.. Usability 101: Introduction to Usability, Retrieved August 28, 2012, from http://www.useit.com/alertbox/20030825.html
Smith, M. K., 2001. David A. Kolb on experiential learning, the encyclopedia of informal education. Retrieved Aug.28, 2012, from http://www.infed.org/biblio/b-explrn.htm
Finlay, P. N., 1994. Introducing decision support systems, Oxford, UK: NCC Blackwell; Cambridge, Mass., USA: Blackwell Publishers.
National Research Council, 1994. Facing the Challenge: The U.S. National Report to the IDNDR World Conference on Natural Disaster Reduction, Yokohama, Japan, May 23-27, 1994, National Academy Press.
Power, D. J., 1997. What is a DSS?, The On-Line Executive Journal for Data-Intensive Decision Support 1(3).
Power, D. J., 2000. Web-based and model-driven decision support systems: concepts and issues. in proceedings of the Americas Conference on Information Systems, California: Long Beach.
RSS Feed
