災害防治行動裝置應用程式之使用者介面設計準則

（本篇刊載於2013臺灣災害管理研討會論文集）

吳宗翰、康仕仲 國立臺灣大學土木工程學系
蔡孟涵 國立臺灣大學氣候天氣災害研究中心
謝明昌、耿承孝 經濟部水利署水利防災中心

摘要

       臺灣受到其地理位置與自然環境條件的影響，致使臺灣長年災害不斷，因此臺灣政府成立許多災害防治單位，例如：中央氣象局、經濟部水利署、內政部消防署等，各政府單位依照需求建立其所屬單位的網站，期望透過建立網站達到災防資訊傳遞的功能。隨著行動裝置的普及，行動裝置上的應用程式(Application, App)已然成為未來的趨勢，因此政府單位相繼開發行動裝置上的應用程式，讓行動裝置也能享有其單位網站原本所提供的服務，然而各政府單位在設計行動裝置應用程式時，多未依照設計準則進行設計，且無考量到政府單位之間的整體性，即使政府單位提供相當多的災害防治行動裝置應用程式，但實際幫助民眾的效益有限。根據以上問題，本研究欲建立一套行動App設計準則幫助政府單位設計使用者經驗良好的行動App，因此本研究蒐集了國內、國外針對使用者介面設計所建立的準則，並匯整目前主要三種行動裝置作業系統(iOS、Android、Windows)之設計準則，且依據臺灣針對防災資訊的需求，彙整行動App設計準則，再經由專家座談會，由使用者介面設計以及防災領域的專家們逐項檢討行動App設計準則，並以經濟部水利署的行動App「行動水情」進行驗證，最終制定行動App設計準則第一版，提供各單位進行行動App設計之參考，以提升各單位防災App之整體性。

一、研究背景與動機

       根據2005年世界銀行的資料統計，臺灣同時暴露於三種以上的天然災害之土地面積與面臨災害威脅的人口為73%，高居世界第一；而同時暴露於兩種以上的天然災害之土地面積與面臨災害威脅的人口為90%（世界銀行，2005年）。對此，臺灣政府為了使災害所造成的傷害降至最低，成立眾多災害防治單位，例如：中央氣象局、經濟部水利署、內政部消防署等單位，進行災害防治及應變之任務。災害防治一般需要從兩方面著手：災害資料觀測及災防資訊傳遞。因此各政府單位藉由建立網站，來達到災防資訊傳遞的目的。近年來由於行動裝置的普及，運行於行動裝置上的應用程式(Application, App)已為目前民眾查詢資料之主要來源，根據2013年7月的資料統計，臺灣擁有智慧型手機或平板電腦的民眾已高達1053萬人，占12歲以上人口的49.5%（資策會Find，2013年）。為了使原本提供在網站上的服務也能透過行動裝置來傳遞，政府單位因此投入開發行動裝置應用程式之行列。然而，各單位由於沒有開發行動裝置應用程式的經驗，開發時大多以功能導向為主，僅是盡可能地將服務從網站轉移至行動裝置，並未考量使用者介面設計，且各政府單位開發行動裝置應用程式前，並未作協調溝通，致使政府所提供的應用程式缺乏整體性，儘管政府單位提供眾多災害防治行動裝置應用程式，但是民眾可獲得的效益有限。據2013年5月4日的新聞，政府單位意識到這項問題，因此要求各政府單位檢討其行動裝置應用程式之適用性及整體性（中時電子報，2013年）。

       根據以上問題，本研究認為會致使政府單位眾多行動應用裝置無整體性，主要因素是因為政府單位沒有針對行動裝置應用程式建立設計準則，以至於各單位所開發的應用程式沒有整體性、以及使用者介面不友善導致使用者經驗不佳等問題，因此本研究致力於蒐集國內、國外針對使用者介面設計的規範，以及行動裝置作業系統的設計準則，同時考量防災需求，建立一套行動App設計準則來改善此問題。

二、研究方法

       本研究蒐集國內外針對使用者介面設計所建立的準則，進而彙整行動裝置主要作業系統iOS、Android、Windows的設計準則，並衡量臺灣針對防災資訊的需求，建立行動App設計準則。再經由專家座談會，由使用者介面設計以及防災領域的專家們逐項檢討行動App設計準則，以及設計經濟部水利署的行動App「行動水情」Windows Phone 8版本作為驗證。以下說明資料蒐集及建立準則之方法：

1. 資料收集

       為建立行動App設計準則，本研究蒐集國內、國外針對使用者介面設計所建立的準則，整理行動裝置上主要的作業系統iOS、Android、Windows的設計準則，共彙整了十項資料，作為建立行動App設計準則之依據。本研究彙整之十項資料為：

(1)     User Interface Design and Evaluation
(2)     iOS Design Principles
(3)     Android Design Principles
(4)     Windows Design Principles
(5)     ISO 9241 - Ergonomic Requirements for Office Work with Visual Display Terminals (VDTs)
(6)     ISO 13407 - Human-Centred Design Processes for Interactive Systems
(7)     ISO 20282 - Ease of Operation of Every Day Products
(8)     Mobile Decision Support System for Disaster Responses
(9)     UK National Government Digital Service Design Principles
(10)  Universal Principles Design

2. 建立準則

       本研究以使用者為中心的思維來進行行動防災資訊之處理，先經由蒐集防災資料，再進行資料處理，進一步將資料呈現，最後再加以收斂，以系統性及整體性方式，將資訊傳遞給使用者，如圖1所示。

圖1、防災資料的生命週期與收斂示意圖

       設計準則的基本理念是希望設計者以使用者為中心進行設計，設計出的產品本身除了具備該有的功能性外，產品還必須要提供使用者良好的使用經驗；擁有良好的使用者經驗更可以幫助產品被使用者所喜愛。除此之外，本研究的設計準則之設計目標係針對防災資訊的呈現，設計的主要考量點在於將資訊呈現給使用者，以及使用者與資訊之間的互動，因此參考了於軟體工程領域上常見的MVC模組 (Model-View-Controller Pattern)。MVC模組是將軟體的架構分成三部分：模型(Model)、檢視(View)、控制器(Controller)；模型負責儲存所有資料以及各種要求的應對方式；檢視負責圖形化介面的資料呈現，控制器負責控制應用程式的流程以及處理使用者的要求。本研究將依據MVC模組來制定行動App設計準則，以符合防災資料的呈現及互動。

三、研究成果

       本研究基於使用者中心設計的理念以及MVC Pattern，提出了行動App設計準則，並將準則分成三大面向：資料面、呈現面、互動面，這三大面向分別對應至MVC Pattern中的Model、View、Controller。各面向又細分三至四項準則，如表1所示。    

表1、行動App設計準則

1. 資料面 Information

       在防災領域中，資料量龐大、資料更新快速、資料之間具有複雜關聯性，為一般防災資料都具有的三項特色。因此，在進行資訊傳遞時，設計者必須同時考慮這三項特性，忠實的傳遞資料給使用者。根據防災的需求，資訊的面向包含了忠實性、時效性、連結性等三個部分。

(1)     資料面 - 忠實性 Integrity
防災資訊應能忠實地傳遞資訊，且依據不同的使用者需求，傳遞符合需求的資料給使用者，以幫助使用者做出正確的決策。在傳遞該資料的過程中，必須注意不可因為資料遺失，或不當的處理，造成使用者誤會資料之真實含意。
(2)     資料面 - 時效性 Timeliness / Timestamp
在防災領域中，防災的資料往往具有迫切性與時效性，當資料隨著時間不斷的更新與產生，使用者介面必須優先呈現最新的資料，並保留那些仍有時效性的資料，以協助使用者掌握即時且全面的防災資料。
(3)     資料面 - 連結性 Connected
資訊之間通常都具有某種程度的關聯性，在防災領域上，種類繁多的資訊更是如此。要掌控災情需要掌握的資訊不可能僅是一項，若要讓使用者自身逐一找出，將花費不少時間，甚至無法完成，因此資料應當根據可能的使用情境連結，以提升找尋資料的效率性與完整性。

2. 呈現面 Presentation

       當防災資訊產生後，需透過好的介面設計來呈現給使用者。良好的介面設計除了能協助使用者快速判讀資訊內容與資訊整體架構外，還可以降低使用者閱讀資訊時的視覺負擔。呈現面包含了清楚性、簡單性、一致性、階層性等四項準則。

(1)     呈現面 - 清楚性 Clarity
設計者必須依照不同的裝置的尺寸與解析度，採用不同的字體大小、字體型式、正確的配色與合適的版面配置等，以確保資訊呈現的清楚性。如此可減輕使用者閱讀資料的視覺負擔，並能加速使用者判讀資料的速度。
(2)     呈現面 - 簡單性 Simplicity
使用者的介面設計應能符合使用者的直覺，讓介面儘量的簡單，沒有讓人分心的資訊。除此之外，使用者畫面僅不應太過複雜，以避免增加使用者對於使用介面的學習時間，或是使用者對於資料的理解能力。
(3)     呈現面 - 一致性 Consistency
在不同的作業系統或是硬體設備中，應保持一致化的使用者經驗，讓使用者在轉換系統的操作上，可以快速上手，以增進溝通，且降低初次操作時的不舒適感。
(4)     呈現面 - 階層性 Hierarchical
將系統功能依照合理的邏輯劃分階層，建立系統功能的階層性。階層式的分類方式可讓使用者快速掌握系統的架構，降低理解架構所需耗費的心力；將資訊內容依照一定的標準來劃分階層，建立資料內容的階層性，階層式的呈現方式可讓使用者快速理解資料內容的重要性，降低搜尋資訊所需耗費的心力。    

3. 互動面 Interaction

       為滿足防災工作的需求，系統設計必須能協助使用者有效率地完成工作，在系統的使用上，藉由良好的互動介面設計讓使用者有良好的操作指示及回饋。根據以上所述，此面向準則包含了容錯性、流暢性、個性化 (/個人化)。

(1)     互動面 - 容錯性 Tolerance
容錯性是考慮使用者的犯錯，且預留因為犯錯造成損失的容許程度。容錯性可分為三程度：第一是避免使用者犯錯；第二是就算使用者犯錯，還是可以取得預期成果；第三是使用者犯錯後，能回復到犯錯前的狀態。其中第二、三階段都要告知錯誤原因，讓使用者明白錯誤原因以減少下次再度犯錯的機會。
(2)     互動面 - 流暢性 Fluency
程式要有自我描述性，讓使用者在任何時間都能知道自己在哪裡，可以使用什麼功能，下一步能做什麼事情，並預期下一步能夠獲得的結果。介面也必須考慮使用者的學習曲線，能夠即時提供不同熟悉度的使用者所需要的幫助。除此之外，使用者操作時畫面也必須順暢，等待不宜過長。
(3)     互動面 - 個性化 (/個人化) Personalized
個性化的程式是能依照使用者個別需求，訂定不同的操作方式與方法。個性化的程式可以讓使用者專注在使用者自身關注的事情上，而非操作程式。個性化的程式可自動幫使用者選擇相關設定，再交由使用者決定是否依照自動選擇之設定，或是依照使用者自身的需求修改設定。   

四、驗證

       本研究以專家座談會的方式，邀請使用者介面設計的專家以及防災領域的專家逐項檢視本研究所提出的設計準則，再藉由依循設計準則所設計行動水情Windows Phone 8第二版本作為驗證。

1. 專家座談會

       本研究所提出之設計準則，已經過於2013年5月30日於臺大 iNSIGHT OpenLAB所召開的專家座談會進行驗證，座談會的與會人員包含了使用者介面設計的專家，以及防災App的開發人員，如表2所示。圖2為專家座談會的開會照片。

表2、專家座談會與會者名單

圖2、專家座談會開會照片

2. 設計行動水情Windows Phone 8版本

       經濟部水利署之行動水情Windows Phone 8版本是開發者在沒有任何設計準則可參考的情況下所開發，其第一版本僅是盡可能的把應有的功能從原本運作於iOS以及Android平台上的App轉移過來，轉移的過程中主要是以功能導向為主，因此缺乏以使用者為中心的設計概念，導致第一版本的使用者經驗較差，如圖3所示。本研究依照行動App設計準則以及使用者中心的設計理念，將行動水情依照顏色劃分七大功能，建立行動水情Windows Phone 8第二版本架構圖，如圖4所示。

圖3、行動水情Windows Phone 8第一版本使用者介面

圖4、行動水情Windows Phone 8第二版本架構圖

       第一版本的行動水情雖然其已符合部分的設計準則，如資料面的時效性、呈現面的一致性、互動面的流暢性以及個性化，但其實際上是在沒有設計準則可以依循的情況下所開發，因此使用者介面的使用者經驗仍不佳。第二版本的行動水情是依據本研究所提出的行動App設計準則進行設計，定義七種顏色來區分程式的七大功能，可幫助使用者透過顏色即可知道自己當下所使用的功能，符合互動面的流暢性；修改按鈕圖案讓其更符合使用者直覺，符合呈現面的簡單性；重新規劃使用者介面的顏色搭配與字體大小幫助使用者看得更清楚，符合呈現面的清楚性；透過字體大小的修正區分不同階層的資訊，符合呈現面的階層性；經過本研究的設計準則所重新設計的第二版本行動水情，更是在2013年8月24日成為Windows Phone市集上最佳評選第四名，如圖5所示；圖6至圖12為七大功能的修改前後對照圖。

圖5、Windows Phone 市集最佳評選第四名 – 行動水情

       行動水情主要是提供使用者臺灣水情的狀況，內容包含「水情資訊」、「警戒狀態」、「氣象圖資」、「影像監控」等，並具有訊息推播功能，幫助使用者時時掌握最新狀況。以下針對行動水情Windows Phone 8之現有內容，將依照水情、警戒、圖資、監控、訊息、設定、關於等七部份進行介面呈現。

1. 水情

圖6、水情修改前後對照圖

2. 警戒

圖7、警戒修改前後對照圖

3. 圖資

圖8、圖資修改前後對照圖

4. 監控

圖9、監控修改前後對照圖

5. 訊息

圖10、訊息修改前後對照圖

6. 設定

圖11、設定修改前後對照圖

7. 關於

圖12、關於修改前後對照圖

五、結論

       本研究藉由蒐集國內、國外針對使用者介面設計所建立的準則，彙整行動裝置上主要作業系統：iOS、Android、Windows的設計準則，並衡量臺灣針對防災資訊的需求，再透過專家座談會的進行，完成行動App設計準則第一版。在設計準則中，定義三大面向：資料面、呈現面、互動面，以及十大細項：忠實性、時效性、連結性、清楚性、簡單性、一致性、階層性、容錯性、流暢性、個性化。並透過經濟部水利署之行動水情Windows Phone 8版本進行行動App設計準則驗證，且依據行動App設計準則設計行動水情第二版本，其使用者介面較第一版本更加清楚且更為友善。然而，本研究的設計準則並非最終版本，後續將再進行專家座談會進行修正及調整，並透過實際案例重覆進行驗證，以提出可供防災單位參考及使用之行動App設計準則。

參考文獻

Dilley, M., Chen, R.S., Deichmann, U., Lerner-Lam, A.L. and Arnold, M., 2005. Natural Disaster Hotspots: A Global Risk Analysis, Washington, DC: World Bank.

Stone, D., Jarrett, C., Woodroffe, M. and Minocha, S., 2005. User Interface Design and Evaluation, USA: Morgan Kaufmann Publishers.

iOS, 2013. iOS Design Principles.(http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Principles/Principles.html)

Android, 2011. Android Design Principles.
(http://developer.android.com/design/get-started/principles.html)

Windows, 2013. Windows Design Principles.
(http://developer.windowsphone.com/en-us/design/Principles)

International Standard Organization, 1998. ISO 9241, Ergonomic Requirements for Office Work with Visual Display Terminals (VDTs).

International Standard Organization, 1999. ISO 13407, Human-Centred Design Processes for Interactive Systems.

International Standard Organization, 2006. ISO 20282, Ease of Operation of Every Day Products.

Tsai, W.T., Kang , S.C. and Shiu, R.S., 2011. Mobile Decision Support System for Disaster Responses, 2011 Conference for Disaster Management in Taiwan, Taipei, Taiwan, November 17-18, 2011.

GOV.UK, 2012. National Government Digital Service Design Principles.
(https://www.gov.uk/designprinciples)

Lidwell, W., Holden, K. and Butler, J., 2003. Universal Principles of Design, USA: Rockport Publisher, Inc.

中時電子報，2013。防救災資訊APP多而亂 政院研議整併。
(http://news.chinatimes.com/politics/130502/132013050400498.html)

中央通訊社，2013。行動裝置夯 普及率近 5成。
(http://www.cna.com.tw/News/aFE/201307170103-1.aspx)