中 華 大 學

中 華 大 學 博 士 論 文

以結構化方法設計使用者介面

Structural Approach to Design User Interface

系 所 別：科 技 管 理 學 系 博 士 班 學號姓名：D09203017 趙 雲 瀚 指導教授：李 友 錚 博 士

中 華 民 國 九 十 九 年 八 月

謝 辭

畢業了！回想這段將近兩千五百多個日子，從完全沒有研究方向和頭緒，到所投 稿的第一篇國際期刊論文被接受，心情真是百感交集。誠如杜甫的詵所言：「晴雲滿 戶團傾蓋，秋水浮堦溜決渠；富貴必從勤苦得，男兒頇讀五車書」，研究的過程，就 是一條漫長而艱苦的路程。攬鏡自照，鬢髮飛霜，正是這段孜孜矻矻、努力不懈歷程 的見證。

具有前瞻性和嚴謹性的研究概念，需要不斷的討論和驗證。而將概念落實在放諸 四海皆準的理論敘述，更需要強而有力的推手。這偉大的推手就是恩師-李友錚教授。

因為老師的鼓勵和提攜，讓徬徫無目標的我，恢復繼續研究的信心。因為老師的要求 和叮嚀，讓受挫於研究的我，重拾鍥而不捨的精神，探索、查驗和修正偏離的研究方 向。非常感謝恩師給予的鼓勵和支持！

另外要感謝的就是林少斌老師，在就讀期間給予我在學業上的指導和精神上的鼓 勵。所有畢業口詴委員們的寶貴建議，讓我得以修正撰寫上的疏失，增加這本論文的 嚴謹度。這七年中，非常感謝家人的體諒和支持。母親和妻子全力照顧著孩子們，讓 我無後顧之憂全力研究。兩個可愛又乖巧的兒子，總為我打氣加油，從不讓我操心。

而岳家所有的親人們，更因為你們的關懷和協助，讓我們全家渡過生活上重重的難關。

感謝大弟在學業上的支援和協助，提高了本論文的研究品質。也感謝學弟妹們，

在這段時間的協助和幫忙。更感謝在天上總是聽我禱告的父親和上師，祢們永遠是我 心靈中最重要的安定力量。最後，感謝所有曾經協助我的人。因為有你們的幫助，才 有現在的我。謝謝，感恩。

趙雲瀚 謹識於 中華大學科技管理學系 中華民國 99 年 08 月 23 日

摘 要

使用結構化方法分析介面元件之間的互動關係，將可協助介面設計師在設計階 段，滿足不同等級使用者的操作需求，並降低設計成本，提高設計效率。本研究主要 目的是針對具有多種元件所構成的複雜資訊系統，以使用者需求觀點為基礎，提出三 階段的結構化使用者介面設計方法。

首先使用品質機能展開方法(Quality Function Deployment, QFD)確認使用者的設 計需求和其對應的元件。其次，利用詮釋結構模式(Interpretive Structural Model, ISM)，建構一個清晰的層級結構模型。最後利用影響矩陣乘法分類法(Impact Matrix Cross-Reference Multiplication Applied to a Classification, MICMAC)分析這些元件在整 體系統中所分佈之相對位置的關係網路圖，以探討整體設計元件彼此的影響性和相依 性。

本研究方法以網站郵件系統作為研究案例。透過實證研究，介面設計師將可有效 地掌握使用者快速變化的差異性需求，以調整元件的設計結構。藉由層級化結構的建 立與元件分佈的分析，作為多元件組成資訊系統之分析模式，及其設計策略制定之依 據。

關鍵字：多層介面設計、層級化結構、詮釋結構模式、影響矩陣乘法分類法

ABSTRACT

The analysis of the interactive relations among interface elements using a structuralized method can help user interface designers to satisfy the different requirements of design and improve design efficiency. This study develops a three-stage structured user interface design approach for complex information systems consisting of multiple components.

First, the Quality Function Development (QFD) approach is used to confirm the user’s design demand and its mapping components. Next, the Interpretive Structural Model (ISM) technique is adopted to construct a clear model of a hierarchical structure. Finally, the Impact Matrix Cross-Reference Multiplication Applied to a Classification (MICMAC) approach is employed to analyze the effect and dependence among the overall design components, and to consider the relationship network graph of distribution of components in the system.

The research approach applies the Web mail system as its case study. Through the empirical study of web-based system, interface designers can effectively grasp a user’s differentiated demand that changes rapidly and reflect it in the combination of designed components. This study establishes a strategy for creating an information system design pattern with multiple components is by building a hierarchical structure and analyzing the component distribution.

Keywords: Multi-Layer Interface Design, Hierarchical structure, Interpretive Structural

Model, Impact Matrix Cross-Reference Multiplication Applied to a Classification.

目 次

摘 要 ... i

ABSTRACT ... ii

目 次 ... iii

表 次 ... v

圖 次 ... vi

第一章 緒論 ... 1

第一節 研究動機 ...1

第二節 研究目的 ...3

第三節 研究範圍 ...3

第四節 研究流程 ...3

第二章 文獻探討 ... 6

第一節 介面設計之可用性探討 ...6

第二節 多層式使用者介面設計 ...8

第三節 詮釋結構模式 ...9

第四節 影響矩陣乘法的分類方法 ...9

第三章 建構研究模式 ...11

第一節 使用者需求分析 ... 12

第二節 元件設計分析 ... 13

第三節 元件互動影響分析 ... 17

第四節 發展整合使用者需求的設計策略 ... 22

第四章 個案研究與分析 ... 25

第一節 研究案例描述 ... 25

第二節 使用者需求分析 ... 28

第三節 元件特性分析 ... 30

第四節 元件互動影響分析 ... 40

第五節 整合設計策略探討 ... 41

第五章 結論與建議 ... 48

第一節 結論... 48

第二節 研究限制 ... 49

第三節 未來研究展望 ... 49

參考文獻 ... 51

表 次

表 1 布林數學運算... 15

表 2 影響-相依分析表 ... 18

表 3 整合使用者需求的設計策略 ... 24

表 4 網站郵件系統之介面元件 ... 28

表 5 使用者操作需求對應元件之 QFD 矩陣分析 ... 29

表 6 相鄰集合與可達集合的處理 ... 33

表 7 網站郵件系統整合設計策略 ... 47

圖 次

圖 1 研究流程 ... 5

圖 2 研究模式建構流程 ... 12

圖 3 相鄰矩陣圖 ... 14

圖 4 單位矩陣圖 ... 14

圖 5 要素關聯矩陣圖 ... 15

圖 6 可達矩陣圖 ... 16

圖 7 可達集合及先行集合 ... 16

圖 8 群集化可達矩陣圖 ... 16

圖 9 層級結構圖 ... 17

圖 10 影響-相依圖 ... 19

圖 11 MICMAC 因素分析 ... 20

圖 12 穩定系統結構圖 ... 21

圖 13 不穩定系統結構圖 ... 22

圖 14 網站郵件系統介面元件之關聯矩陣 ... 31

圖 15 網站郵件系統介面元件之可達矩陣 ... 32

圖 16 網站郵件系統介面元件之群集化可達矩陣 ... 34

圖 17 網站郵件系統之層級架構圖... 35

圖 18 最高層元件分佈圖 ... 36

圖 19 第二層與第三層的元件分佈圖 ... 37

圖 20 中間層的元件分佈圖 ... 38

圖 21 基礎層的元件分佈圖 ... 39

圖 22 網站郵件系統之影響-相依圖 ... 41

圖 23 整合分析圖-高影響度和低相依度... 42

圖 24 整合分析圖-低影響度和高相依度... 43

圖 25 整合分析圖-低影響度和低相依度... 44 圖 26 整合分析圖-高影響度和高相依度... 45

第一章 緒論

在網際網路普及的今日，網站資訊系統已成為商業資訊系統的設計主流。由於網 頁的開發技術日趨複雜，使用者對於網站操作的需求，亦趨於多樣化。針對由複雜元 件組成的網站資訊系統，如何建構一兼顧設計效率並滿足使用者快速而多元化需求的 設計方法，將是使用者介面設計的關鍵。

第一節 研究動機

網站資訊系統(web-based system)已取代傳統介面設計單調的企業資訊系統，成為 企業電子化的核心。電子化企業建構企業入口網站(Enterprise Information Portal, EIP)，作為與客戶及供應商進行電子化交易的互動介面。EIP 不僅提供整合的訊息溝 通帄台，藉以降低企業與外界聯繫之溝通成本。更藉由網際網路無遠弗屆的訊息傳播 能力，傳遞企業整體的品牌形象。企業網站儼然是現代社會中使用範圍最廣的資訊傳 播媒介與使用者互動介面。

面對全球化的趨勢，跨國企業的網站必頇兼顧來自不同背景的使用者操作模式，

以提供這些客戶對產品及服務多樣化需求。從使用者介面設計的觀點而言，保持介面 操作的可用性和親和性(Petrie & Kheir, 2007)，並快速反應不同層級顧客的跨國性與多 樣性需求，則是設計網站資訊系統的重要議題。

就介面開發的技術層面而言，從 1984 年蘋果電腦推出第一台以圖形使用者介面 為作業系統的麥金塔電腦開始，到今日應用於各種可攜式行動裝置上的多點觸控介面 系統，使用者與資訊系統之間的互動良窳，一直就是使用者介面設計的焦點。由於使 用者的操作模式和使用經驗迥異，對於系統的操作需求和資訊服務也存在著差異性 (Paterno & Mancini, 1999)。介面設計師通常會以主要使用者最常使用的功能，作為使 用介面設計的重點(Clark & Matthews, 2005)。這種設計模式，主要是針對具有相關操 作經驗的使用者，以利其在短時間即學會操作系統中大部分複雜功能為設計重點。倘 若使用者沒有相關經驗、年紀較大或具有非英語系國籍背景，面對操作複雜、功能繁 瑣的系統，通常因為介面設計的複雜性而放棄操作，甚至不再使用企業網站，造成企

業無可彌補的損失。

針對不同使用者對於介面操作上的需求差異，Fink et al.(1998) 和 Shneiderman (2003)提出多層次使用者介面(Multi-Layer User Interface)的設計觀念。依據的操作經 驗和熟練度，將使用者區分為初次使用者，有經驗者和有特殊需求的使用者。透過提 供不同層次的操作介面模式，以提供不同使用者多樣化的操作需求。

從整體系統設計的角度而言，功能愈複雜的系統，常具有層級組織結構的特性 (Simon,1981)。網站資訊系統屬於由多種介面元件所建構的複雜系統，而全球資訊網 更具有完整層級化結構的特性(Bharat et al., 2001; Nadav ＆ Kevin, 2004; Xue et al., 2005) 。介面設計師依據主要使用者的操作需求和自身熟悉的設計經驗，挑選相關的 元件或組件，設計並建構成滿足大部分使用者需求的網站介面。複雜而多樣化的元 件，因相互組合而產生彼此影響的屬性，並呈現整體層級架構的特性(Voronin, 2007)。

具有多項因子或元件的複雜系統，在建置的過程中，會依據因子或元件的數量、

分類和彼此的互動關係 (Bertalanfy, 1968)。組成的因子或元件和系統及外部環境間，

經常存在著某些互動關係，例如：因果關係、循序關係、聯結關係、隸屬關係和對比 關係。在具有層級特性的結構化系統中，於各層級之中，常具有方向性的依存關係。

同一層級中的元件，不僅相互影響，形成群聚；進而跨越所屬層級，主動影響其他層 級的元件，或是受到其他元件的影響。

面對使用者對介面操作的需求，介面設計師必頇快速因應並調整設計架構。

Cohen (1995)建議使用品質屋(House of Quality)來規劃產品的多樣化需求，並藉由品質 機能展開(Quality Function Deployment, QFD) (Hauser & Clausing, 1988)明確地對應到 元件的設計。

針對網站資訊系統之介面設計，本研究期望從使用者操作需求的角度和設計師設 計的思維，尋求適合且能兼容完備的設計機制。透過系統工程中的結構化方法，建構 可滿足使用者多樣化操作需求，並具備效能之設計模式，為本論文主要的研究動機。

第二節 研究目的

介面設計之良窳，攸關使用者對網站資訊統之可操作性。若能將使用者對操作介 面的多樣化需求，確實地反應至整體系統的設計元件，將可提高使用者的滿意度，並 降低設計的成本。由於網站之介面設計，牽涉多種複雜元件組合之適配程度。如何分 析組成元件之間的關連性與強弱相依程度，就成為設計過程中的關鍵。

本研究旨在針對具有複雜介面元件之資訊系統，建構出具備使用者需求分析、元 件設計和元件互動分析三階段的標準設計開發模式。不僅可快速回應使用者多樣性的 操作需求，並可調整設計架構，降低設計成本，提高設計品質與效能。主要研究目的 如下：

1. 利用「品質機能展開方法」，確認使用者對介面元件在使用性上的需求程度，並 調整設計的順序與比重，藉以擬定多樣化的設計策略。

2. 運用「影響矩陣乘法的分類法」分析元件之間之主被動影響關係，在整體系統中 所佔之比重，找出設計的核心關鍵，發展調適性的設計開發模式。

3. 以「詮釋結構模式」分析設計元件之間的相依程度，建構層級結構，並找出主導 性設計元件或因子。

第三節 研究範圍

本研究係針對具有複雜介面設計之網站資訊系統，其使用者常具有多樣化操作需 求為主要研究範圍。以整合詮釋結構模式和影響矩陣乘法的分類法，建構層級化架構 設計模式，並透過品質機能展開方法，作為反應顧客設計需求之研究工具。因此，具 備上述特性的相關資訊系統，亦為本研究適用的研究範圍。

第四節 研究流程

本研究將針對複雜系統之介面設計，以結構化方法建構符合使用者多樣性需求與 設計成效之模式。主要目的係提供使用者介面設計之研究者，結構化設計模式之依 據。相關步驟及流程，說明如下：

1. 確立研究主題：針對多元件組成之系統介面開發，為因應使用者多樣化之需求，

並提高設計品質與效能，建構一個可依據使用者之選擇進行元件組成分析的設計 開發模式，並實際以網站資訊系統驗証成果，從而確立本研究之動機與目的。

2. 蒐集相關文獻與探討

(1)多層次使用者介面設計之探討。

(2)詮釋結構模式之探討。

(3)影響矩陣乘法的分類方法之探討。

3. 分析模式

(1)使用者需求分析。

(2)元件設計分析。

(3)元件互動影響分析。

(4)發展整合使用者需求的設計策略

4. 個案研究：以台灣某大學自行設計開發之網站郵件系統，及該系統主要使用者為 研究對象。從調查不同使用者之需求、介面設計元件互動影響探討、建構層級化 結構、進行元件對整體架構之重要度分析，以建立最適性的設計模式。詳細步驟 敘述如下：

(1)研究案例簡介：對於網站郵件系統所使用之介面元件進行探討。

(2)使用者需求探討：針對所研究之網站郵件系統之主要使用族群，調查其對操作 介面之設計需求。

(3)建立最適性設計模式：利用品質機能展開方法，依據使用者對介面設計上之要 求特性，調整層級架構中之元件組成，以建立符合使用者多樣化需求的最適性 設計模式。

(4)建構層級架構：以詮釋結構模式找出各元件彼此的組合關係，並建立層級架構。

(5)元件互動影響分析：以影響矩陣乘法分類法分析各元件彼此之影響因果關係，

並確立設計之焦點與先後順序。

(6)發展整合使用者需求的最佳化設計策略：針對個案分析之結果，進行分析與討 論，並發展整合使用者需求的最佳化設計策略。

5. 結論與建議：綜合上述說明與步驟，本研究流程如圖 1 所示

圖 1 研究流程

介面可用性與多層 次使用者介面設計

之文獻探討

詮釋結構模式 之文獻探討 文獻蒐集與探討

研究主題

確立研究主題

影響矩陣乘法的分類 方法之文獻探討

建構研究模式

個案研究與分析

結論與建議

第二章 文獻探討

文獻探討部份，則區分為兩大部份。第一部分將針對使用者介面設計進行探討，

另一部份則探討建立結構化方法之理論和其應用步驟。

第一節 介面設計之可用性探討

資訊技術的日新月異，帶動了使用者介面設計技術的推陳出新。面對功能複雜的 資訊系統，具備良好互動特性的使用者介面，將扮演著操作者和資訊系統之間的重要 媒介。介面設計師必頇能敏銳地發覺使用者的需求，謹慎而仔細地分析、規劃與測詴。

才能讓使用者透過所設計的介面，感受到資訊系統的可用性、普遍性和有效性 (Shneiderman & Plaisant, 2005)。

所謂使用者介面的可用性，就是開發出具備效能和效率的資訊系統，並能讓使用 者生理與心理雙重層面同時獲得滿足的一種設計程序。故可用性不僅是使用者介面設 計的重要議題，更攸關系統可提供的功能和整體的設計程序(Badre, 2002)。根據介面 的可用性原則，適時反映使用者的需求，並透過嚴謹的測詴，設計出最優化的使用者 介面，不僅可避免頻繁的設計變更，更可降低設計成本，加速整體系統的開發時程 (Norman, 2000)。

介面設計師在設計介面之初，應針對所設計系統之所有使用者的需求，進行仔細 的需求評估。根據 Shneiderman and Plaisant (2005) 主張使用者需求分析的目標為：

1. 確認使用者的需求。

2. 確保資訊系統有足夠的可靠度。

3. 設計俱備標準化、整合性、一致性和可攜性的系統。

4. 在預期的工作時間內，準時完成計畫。

介面設計師依據介面設計的可用性原則，設計出兼具效益與效能的系統，亦滿足 於使用者操作需求。經由不斷的評測修正與設計經驗的累積，介面設計師會形成其內 在的設計思維與設計模式。在面對不同等級使用者差異化的操作需求，以及不斷創新 的介面設計技術時，這種內化於介面設計師思維的設計模式，常無法符合使用者對介

面設計的需求。

為避免上述的情形發生，Shneiderman and Plaisant (2005)依據實際的開發與設計 的經驗，提出了使用者介面設計的八項黃金定律：

1. 介面一致性：整體介面由視覺上所呈現的協調一致。包括：版面配置、功能選單、

功能提示與說明、物件色彩、文字字型與大小設定等。

2. 滿足普遍的使用性：針對不同層級使用者的操作需求，例如：初學者、專業使用 者、年帅者、年長者或是殘障人士等，採取彈性化介面設計。

3. 操作訊息的回饋：使用者在任何操作階段或步驟，皆能獲得相對應訊息回應。當 操作項目過於頻繁或是非重要的項目，可顯示簡單且適度的回應訊息。但操作項 目較少使用或是重要度高的操作，則出現較詳細的訊息回應。

4. 設計結束對話(Step by Step 的操作模式)：當系統功能呈現一連續性的操作程序 時，必頇在使用者完成某階段操作功能時，通知使用者對應的訊息，讓使用者確 認操作已完成。例如：自動提款機引導使用者完成需求項目的操作畫面。

5. 避免錯誤的操作設計：介面設計師應針對使用者極易混淆或是犯錯的操作項目，

設計出避免犯錯的操作介面。並同時提供具有詳細和簡單的引導功能，指示使用 者完成正確的操作。例如：在輸入郵遞區號時，盡量避免讓使用者直接輸入郵遞 區號。可採用下拉式選單模式，讓使用者由所呈現的各地區郵遞區號的訊息清單 中，點選正確的選項。

6. 操作的回復性：提供可讓使用者回復的功能，降低使用者對操作的疑慮，並紓解 使用者對初次操作上的焦慮。

7. 滿足使用者的控制感(易於操作)：不同層級的使用者對於介面所提供的操作功 能，有其差異性的需求。初學者需要詳細的引導功能和說明，但專業使用者卻希 望能快速及自我掌控的操作功能(例如：可直接輸入文字功能的的操作介面，而非 視窗化程序式操作介面)。介面設計師應針對不同需求的使用者，提供不同的介面 操作選項。

8. 降低短期記憶的負擔(操作的提示功能)：由於操作者有記憶上的限制(一般人類大 腦的記憶項目可達五至九組)，如能設計具標準化、簡單化和具有提示功能的操作 介面，將有助於降低操作者的記憶負擔，並提高使用者介面的操作效率。

根據上述針對使用者介面設計之可用性探討，使用者介面設計的八項黃金定 律，可作為調查不同層級的使用者，對於相同系統介面設計之差異化需求的調查依據。

第二節 多層式使用者介面設計

新的資訊系統設計初期， 就介面設計而言，如能重視使用者所關心的事項與和 情境設計的需求，將有助於系統的建構(Christiernin & Christiernin, 2005; Christiernin et al., 2004; Dix et al., 1997; Shneiderman & Plaisant, 2005)。介面設計師因設計所累積的

經驗和習慣性，常以大多數使用者的共同需求為設計主軸，而忽略個別使用者的需求 (Dix et al., 1997)。針對不同等級的使用者，結構化的設計方法將有助於多樣性的介面 設計需求(Dix et al., 1997; Sommerville, 2001)。

多層式使用者介面設計 (Multi-Layered Design, MLD) 是由Ben Shneiderman 所 提出的一種介面設計模式(Kang et al., 2003; Shneiderman, 2003)。設計師依據多層式使 用者介面設計方法，設計出差異化的操作介面，讓不同等級的使用者，可依據個人偏 好的操作習慣，有效地使用資訊系統。多層式使用者介面設計方法不僅可滿足多樣性 和彈性化的介面設計需求(Christiernin et al., 2004; Kang et al., 2003; Shneiderman, 2003)，並有效協助使用者提升操作的學習效能(Shneiderman & Plaisant, 2005)。

資訊系統的使用者介面是由多種元件所構成，這些元件彼此常具有相互影響性。

多層式使用者介面設計方法雖可滿足不同使用者的操作需求，但必頇依賴介面設計師 的主觀判斷與豐富的設計經驗，也就是專家經驗。由於專家的主觀決策，常隱藏於個 人的經驗和心智模式之中(Fontela & Castro, 2006)。透過結構化的方法，將專家對於各 介面設計元件的經驗和偏好，建構成對應的矩陣關係。藉由分析各元件彼此的相依關 係，規劃成常用的模組，發展為最佳化的設計模式。進而與多層式使用者介面設計方 法整合，將可大幅提升彈性化介面的設計效率。

第三節 詮釋結構模式

詮釋結構模式是由 Warfield ( 1973, 1974, 1976, 1979, 1990) 和 Malone (1975)所提 出的一種分析與建構複雜系統內元素關聯模式的系統構造模型法。

詮釋結構模式係以離散數學、圖論、社會科學、群體決策和電腦輔助為其理論基 礎，具有階層性、方向性、系統化和結構化等特性。在實際運算分析上，透過矩陣運 算結合布林邏輯數學等量化方式，將因素間複雜的關係，抽象化為 0 與 1 的相鄰矩陣，

依 序 建 構 具 有 層 級 特 性 的 關 聯 構 造 階 層 圖 。 再 藉 由 階 層 有 向 圖 (hierarachical digraph)，分析複雜系統內各個因素之間的關連順序，並呈現各因素彼此的隸屬關係。

時至今日，詮釋結構模式已被應用於各個研究領域。Cheng et al. (2007) 使用詮 釋結構模式評估工作者的生產力。Singh et al. (2007) 使用詮釋結構模式探討知識管理 導入的成功關鍵因素。Thakkar et al. (2007) 則使用釋結構模式發展帄衡計分卡。將釋 結構模式應用在產品設計領域，則有 Hsiao and Liu (2005) 產品家族設計(product family design)和 Kitamura (1999) 的系統結構化分析。Lee et al. (2010) 使用釋結構模 式應用於使用者介面設計。

第四節 影響矩陣乘法的分類方法

影響矩陣乘法的分類方法(Impact Matrix Cross-Reference Multiplication Applied to a Classification, MICMAC)是由 Godet (1973, 1979, 1993, 1999) 所提出的一種結構性 分析方法。影響矩陣乘法分類法與詮釋結構模式皆採用結構化矩陣分析模式，進行因 素之間彼此關係的分析，所以兩種方法的演算流程非常類似。

影響矩陣乘法的分類方法(Impact Matrix Cross-Reference Multiplication Applied to a Classification)是由 Godet (1973, 1979, 1993, 1999)所提出的一種結構性分析方法。

MICMAC 與 ISM 皆採用結構化分析矩陣模式，進行因素之間彼此關係的分析。因此, 兩種方法之間的演算流程非常類似。

ISM 僅考慮變數之間直接的二元關係(0 與 1)，即有影響或沒有影響，無法得知 互相影響的強弱程度關係和間接關係，亦無法針對元件彼此間細微的互動狀況進行分

析。但在多元件建構的複雜系統中，元件之間不僅有直接關係，也有間接的影響關係。

這些間接關係，有時會透過元件之間的相互影響而擴大效應，使得整體系統產生變化。

而 MICMAC 與 ISM 相異之處在於：MICMAC 不僅考慮到直接關係及間接關係，

亦考慮因素間影響的強弱程度和因素對系統的影響關係。若某因素對系統的直接影響 程度很弱，但與影響程度較大的因素有間接關係，則因彼此影響的結果,會造成影響 的強度放大。故可先透過詮釋結構模式先將複雜系統的元件層級化後，接著使用影響 矩陣乘法分類法進行各元件的互動狀態分析，並探討各元件對系統現在與未來所造成 的影響。

目前在多種研究領域使用整合詮釋結構模式與影響矩陣乘法分類方法。Qureshi et al. (2008) 將整合詮釋結構模式與影響矩陣乘法分類方法用於挑選第三協力供應廠

商的關鍵準則評估。Arya and Abbasi (2001)應用於環境趨勢分析。Kanungo et al. (1999) 應用於資訊系統的效能評估。Szulanski (1999)則應用於將此方法結合系統動態方法和 未來趨勢分析，藉以探討未來學。Sharma et al. (1995) 則應用於資源管理之探討。

第三章 建構研究模式

本研究旨在針對由多元件所組成之複雜系統介面設計，提出一整合使用者操作需 求及設計者設計模式之結構化模式。透過本分析模式，分析元件相互影響程度，建構 一可迅速反應使用者需求，降低設計成本，提高設計成效之設計策略。並就下列議題 與以探討：

1. 如何分析多元件或因子對整體系統，和元件相互之影響程度

2. 多元件複雜系統之介面設計，因其專業複雜度高，無法取得大量樣本分析。如何 以小樣本(例如：專家意見)，分析相關因素之影響程度。

3. 如何建構可充分反映使用者需求，並快速調整設設計模式之最適性設計方法。

本研究所建構之模式，主要分為三個階段：

1. 使用者需求分析階段：透過品質機能展開，分析使用者對介面操作之需求，並對 映 之所設計之元件，以確定使用者對相關各元件設計之需求比重。

2. 元件設計分析階段：使用詮釋結構模式，分析設計元件是否具備二元關係，以建 構層級架構與模組。

3. 元件互動影響分析階段：藉由影響矩陣乘法分類法，分析元件之直接與間接關係，

以確定元件或模組之間的相依程度。透過元件的分佈狀態，作為制定多層次介面 設計模式之基礎，並建立整合設計發展策略。

本研究模式之建構流程如圖 2 所示。

圖 2 研究模式建構流程

第一節 使用者需求分析

具有多介面元件的資訊系統，由於不同的使用者各有其需求。如何了解使用者之 操作需求，並依據專家經驗訂定對應的元件設計項目，藉以確定使用者需求與設計項 目的相互關係，則影響使用者對介面操作功能之滿意程度。

品質機能展開方法是一種具有嚴謹與邏輯的結構化方法。透過品質機能展開方 法，可將客戶的需求轉化為具體的品質發展，分析出使用者多樣性與差異性的需求，

並將這些需求對應至產品組成的元件上，藉以確認真正需要設計的產品。

針對使用者需求之分析，說明如下：

1. 本研究依據使用者介面設計的八大黃金定律為基礎 (Shneiderman & Plaisant, 2005)，並依據使用者實際的操作需求進行調查。

2. 使用者依照實際需求對應至相關的設計元件，填上偏好值。偏好的強弱程度依序 為：9：非常強，5：強，3：普通和 1：弱，空白表示不相關。

3. 經過加權計算後，將各項元件對映需求所得的偏好值加總。將加總後之值，依照 第一階段

使用者需求分析

第二階段 元件設計分析

第三階段 元件互動影響分析

使 用 者 介 面 操 作 需 求 問 卷 設 計

使 用 者 訪 談 與 問 卷 調 查

使 用 者 對 介 面 元 件 之 偏 好 度 分 析

分 析 組 成 要 素 或 元 件 之 二 元 關 係

建 構 相 鄰 矩 陣

建 構 可 達 矩 陣

建 置 層 級結 構 圖

層 級 要 素 或 元 件 之 關 係 分 析 品質機能展開

（QFD）

詮釋結構模式

（ISM）

影響矩陣乘法分類法 (MICMAC) 繪

製 影 響 相 依 圖

元 件 互 動 影 響 分 析

穩 定 度 分析

發 展 整 合 使 用 者 需 求 的 設 計 策 略

使用者對各項設計元件認定之滿意度加以分類。分為高滿意度(High)和低滿意度 (Low)。

4. 滿意度高低之判定規則為：若令 pi (i=1,2,…,n) 為使用者需求對映各項設計元件之 偏好值， p_i={0,1,3,5,9}。w_i (i=1,2,...,n)為使用者需求對映各項設計元件之權重值，

wi={1,3,5}。則定義:









 ⁿ

i

i i

i p w i n

V

1

) ,..., 3 , 2 , 1

( (1) 又

n

n i

w p V

n

i

i i i









 ¹

) ,..., 3 , 2 , 1 )(

(

(2) 若Vi ≥ iV 表示使用者對各項設計元件滿意度為高。若Vi < iV 表示為低滿意度。

第二節 元件設計分析

使用者介面所使用設計元件，應與使用者需求建立良好的互動關係，方能因應系 統使用者快速且多樣的需求產生。企業網站是由許多介面元件所構成的複雜系統。透 過建構層級化的元件組成架構，將有助清楚展現系統內所有元件彼此的互動關係。利 用詮釋結構模式，建立層級結構，並分析各元件或因子彼此之隸屬關係，及對系統整 體的影響分析，將有助於介面設計師建構整體設計元件的階層架構。

元件設計分析步驟說明如下：

1. 分析系統內組成要素的二元關係：若系統是由 n 個要素所構成的集合 S，則 S={S₁, S2,…, Sn}。而(Si, Sj)為要素 Si與 Sj 的順序對(ordered pair)，集合 S 中各要素必頇為 二元關係。

2. 建構相鄰矩陣：從系統中找出相關的元件，定義為 Ci，i ={1, 2, 3,…,n}。將元件 置於矩陣中，進行兩兩比對，如果具有直接相關，就註記為：1，否則為：0。若 位在列(row)上的元件 Ci對位在行(column)的元件 Cj有直接關係，存在 A=[aij]，

則定義為：

aij =

{

1, 若 i 對 j 有影響 1, 若 i 對 j 有影響力 0, 若 i 對 j 沒有影響

(3)

為相鄰矩陣，如圖 3

A =

a

ij C1 C2 C3 C4 C5 C6 C7 C8 C1 0 0 0 1 0 0 1 1 C2 0 0 0 0 0 0 0 0 C3 1 0 0 0 0 1 0 0 C4 0 0 0 0 0 0 1 1 C5 1 0 0 0 0 0 0 0 C6 0 0 1 0 0 0 0 0 C7 0 0 0 0 0 0 0 1 C8 0 0 0 0 0 0 1 0

圖 3 相鄰矩陣圖

3. 建構可達矩陣：將相鄰矩陣 A 與單位矩陣 I (如圖 4)相加，成為要素關聯矩陣 B (如 圖 5)，其中：

B=A+I (4) 當 n 值確定時，利用布林代數（表 1 布林數學運算）和矩陣乘積運算求得 B 的 冪次(power)矩陣，並滿足可達矩陣 R (如圖 6)：

(A+I)^n-1 < (A+I)ⁿ = (A+I)ⁿ⁺¹ (5)

I =

a

ij C1 C2 C3 C4 C5 C6 C7 C8 C1 1 0 0 0 0 0 0 0 C2 0 1 0 0 0 0 0 0 C3 0 0 1 0 0 0 0 0 C4 0 0 0 1 0 0 0 0 C5 0 0 0 0 1 0 0 0 C6 0 0 0 0 0 1 0 0 C7 0 0 0 0 0 0 1 0 C8 0 0 0 0 0 0 0 1

圖 4 單位矩陣圖

B =

a

ij C1 C2 C3 C4 C5 C6 C7 C8 C1 1 0 0 1 0 0 1 1 C2 0 1 0 0 0 0 0 0 C3 1 0 1 0 0 1 0 0 C4 0 0 0 1 0 0 1 1 C5 1 0 0 0 1 0 0 0 C6 0 0 1 0 0 1 0 0 C7 0 0 0 0 0 0 1 1 C8 0 0 0 0 0 0 1 1

圖 5 要素關聯矩陣圖

表 1

布林數學運算

加法運算 乘法運算

0 + 0 = 0 0 * 0 = 0 1 + 0 = 1 1 * 0 = 0 0 + 1 = 1 0 * 1 = 0 1 + 1 = 1 1 * 1 = 1

4. 建構層級結構圖：從可達矩陣 R 所得到的有向圖，其中 (1)R 為可達集合(adjacency reachability set)：

R = {si | si



S，R(si, sj)=1 } (6) (2)A 為先行集合(adjacency antecedent set)：

A = {sj | sj



S，R(sj, si)=1 } (7) (3)若集合 S 中的 n 個要素滿足：R(si) ∩ A(si) = R(si)，s_iS

若滿足則可將 si 抽出為同一層(圖 7)。透過可達集合及先行集合，將可達矩陣中 的因素重新群組(圖 8)，並完成層級結構圖(圖 9)。

R =

a

ij C1 C2 C3 C4 C5 C6 C7 C8 C1 1 0 0 1 0 0 1 1 C2 0 1 0 0 0 0 0 0 C3 1 0 1 1 0 1 1 1 C4 0 0 0 1 0 0 1 1 C5 1 0 0 1 1 0 1 1 C6 1 0 1 1 0 1 1 1 C7 0 0 0 0 0 0 1 1 C8 0 0 0 0 0 0 1 1

圖 6 可達矩陣圖

Si R(Si) A(Si) R(Si)∩A(Si)

S1 1,4,7,8 1,3,5,6 1

S2 2 2 2

S3 1,3,4,6,7,8 3,6 3,6 S4 4,7,8 1,3,4,5,6 4 S5 1,4,5,7,8 5 5 S6 1,3,4,6,7,8 3,6 3,6 S7 7,8 1,3,4,5,6,7,8 7,8 S8 7,8 1,3,4,5,6,7,8 7,8 圖 7 可達集合及先行集合

R =

C2 C7 C8 C4 C1 C3 C6 C5

C2 1

C7 1 1

C8 1 1

C4 1 1 1

C1 1 1 1 1 C3 1 1 1 1 1 1 C6 1 1 1 1 1 1 C5 1 1 1 1 1

圖 8 群集化可達矩陣圖

圖 9 層級結構圖

5. 分析層級中之要素關係：依據群集化可達矩陣(圖 8)，分析位於各層級中之因素或 元件之關係，並繪製隸屬關係流程，以作為設計者在進行介面設計之分析依據。

在層級結構圖中（圖 9），位於最高層級中的因素 3、5、為主要的關鍵影響因素，

位於底層的因素 2、7、8，因受到來自於高層級中各項因素的影響，則呈現影響 後的狀態與結果。

第三節 元件互動影響分析

本階段依據層級架構圖，分析元件彼此之間詳細的相依關係，並繪製影響-相依 圖。再使用影響矩陣乘法分類法(MICMAC)，針對系統中的相關因素加以定義，以確 認因素彼此之間的關係，找出具有主要影響性的關鍵因素。經由分析各因素的互動關 係，進而研究整體系統的穩定程度和未來演變之可能性。

元件互動影響分析步驟，說明如下：

2 7 8

4 1

5 3 6

Level 01

030101_______________________________________

__

Level 02

030202_______________________________________

__

Level 03

03_________________________________________

Level 04

1. 繪製影響-相依圖：若令 t_ij (i,j=1,2,..., n) 為關鍵變數矩陣 T 中元素，則定義：

(1)影響度 (D-Value)：將陣列中的每一列數值加總









ⁿ

i ij

i

t i n

D

1

) ,..., 3 , 2 , 1

(

(8)

Di表示以元素i為原因而影響其他元素的總和，包含了直接及間接影響。

(2)相依度 (R-Value) : 將陣列中的每一行數值加總









ⁿ

i ij

j

t j n

R

1

) ,..., 3 , 2 , 1

(

(9)

R_j 表示以元素 j 為結果而被其他元素影響的總和。

依據可達矩陣進行 Di 與 Rj 之加總計算，製作成影響-相依分析表(表2)與的影 響-相依圖(圖10)。其中橫軸(X)表相依度，縱軸(Y)表影響度。

2. 元件互動影響分析：從設計的觀點探討一個系統或產品的組成，假若組成的元件

數量不少，彼此之間也互有影響性。則這些元件和與系統之間的互動關係，會呈 現三種關係：主動影響，被動影響和無關係(Bertalanfy, 1968)。針對在「影響-相 依圖」中的元件分佈狀態，利用影響矩陣乘法分類法進行主被動關係分析。依照 MICMAC方法，針對群聚分佈在影響-相依圖(圖11)上的因素進行分析。說明如下：

表 2

影響-相依分析表

a

ij C1 C2 C3 C4 C5 C6 C7 C8 D-Value C1 1 0 0 1 0 0 1 1 4 C2 0 1 0 0 0 0 0 0 1 C3 1 0 1 1 0 1 1 1 6 C4 0 0 0 1 0 0 1 1 3 C5 1 0 0 1 1 0 1 1 5 C6 1 0 1 1 0 1 1 1 6 C7 0 0 0 0 0 0 1 1 2 C8 0 0 0 0 0 0 1 1 2 R-Value 4 1 2 5 1 2 7 7

影響-相依性圖

0 1 2 3 4 5 6 7 8

0 1 2 3 4 5 6 7 8

相依性 影

響 性

C5

C1 C3, C6

C4

C7, C8

C2

圖 10 影響-相依圖

圖 11 MICMAC 因素分析

(1)傳遞性因素(relay variables)：位在圖中右上角，具有高影響性，高相依性的特 性。此類變數不僅將影響其他的變數，同時也容易受到其他變數的影響。基於 此特性，這類變數會使系統因外在環境變化而產生變革。因含有不穩定的特性，

屬於風險因素(stake factor)。

(2)影響性因素(influential variables)：位在圖中左上角，呈現高影響性，低相依性。

此類變數主導建構整個系統，系統中大部份是屬於此類變數。透過控制這類變 數，會影響系統的發展方向，也是建構系統的入口因素(input factor)。

(3)獨立性因素(independent variables)：位在圖中左下角，呈現影響性和相依性皆低 的特性。在系統中，由於此類變數因分佈接近原點，又被稱為「無關聯因素」

(disconnected variables)，表示系統整體的動態變化不受此類變數的影響。但若 此類變數的分佈接近高影響性區域，則表示在整體系統中，若注重這類變數將 可使系統的效能提高。

Stakes Input

Output Excluded

I. 傳遞性因素

Ⅱ. 影響性因素

Ⅲ. 調節性因素

Ⅲ. 獨立性因素 Ⅳ. 相依性因素

強 弱

強

相依性 影響性

(4)相依性因素(dependent variables)：位在圖中右下角，呈現低影響性，高相依性 的特性。此類變數對於影響性因素和傳遞性因素的變化非常敏感，是整個系統 的輸出因素(output factor)。因為可反映影響性因素的影響結果，故可作為評估 整體系統效能的指標因素。

(5)調節性因素(regulating variables)：位在圖中正中央位置，表示變數具備可調控 的特性。

3. 穩定度分析：Godet (1999)認為透過影響矩陣乘法分類方法的因素分析後，組成複 雜系統的各項因素，會呈現規律的排列。系統中的因素分佈若呈現 L 型(圖 12)，

即因素向第二與第四象限展延，則表示此系統呈現較為穩定的狀況。若因素由第 三象限向第一象限展延，呈現由左下至右上錐型分佈(圖 13)，則表示此系統處於 不穩定的變動狀態，可能在外在環境的變遷與時間遞移的因素下，造成系統的變 化或失控。

圖 12 穩定系統結構圖

∙ ∙

∙ ∙

∙ ∙ ∙

∙ ∙ ∙

∙

∙ ∙ ∙

∙ ∙

∙

∙ ∙

∙

∙ ∙

∙ ∙

∙ ∙ ∙

∙ ∙ ∙

∙ ∙

∙ ∙ ∙

∙ ∙ ∙

∙ ∙

∙ ∙ ∙ ∙

∙ ∙

∙ ∙ ∙

∙ ∙ ∙

∙ ∙

∙

∙ ∙ ∙

∙ ∙

∙ ∙ ∙

∙ ∙ ∙

∙ ∙ ∙ ∙ ∙

∙ ∙

∙ ∙ ∙ ∙

∙ ∙

相依性 影

響 性

圖 13 不穩定系統結構圖

第四節 發展整合使用者需求的設計策略

使用者對資訊系統的介面設計的操作觀點與設計者的設計觀點，常有差距存在。

為求能所縮減其中的差異，本分析模式依上述設計觀點作為彈性化設計之依據，透過 品質機能展開方法，調查資訊系統所提供之介面元件功能，對應至使用者操作需求之 滿意度。由於使用者並非專業的介面設計師，因此針對各介面元件所能提供之功能與 服務，亦有可能無法完全明暸。若使用者已知道元件所提供的功能資訊，則定為：顯 性。若使用者不知或不熟悉元件所提供的功能資訊，則為：隱性。

整合使用者操作需求與設計者之設計觀點的設計策略，探討如下：

1. 分佈在傳遞性因素區域的元件分析：分佈在此區域(第一象限)的元件特性為：高 影響程度，高相依程度。

(1)使用者的滿意度高：這類元件具備高變異性和高影響性，使用者明暸此類元件 所提供的功能，並且非常重視。由於使用者滿意度高，對目前的系統期望以創 新的模式升級至下一個世代，成為全新的系統。

(2)使用者的滿意度低：此類元件隱匿了高變異性與高影響性。由於使用者並非設

∙ ∙ ∙

∙

∙ ∙ ∙

∙

∙ ∙ ∙

∙ ∙

∙

∙

∙

∙

∙ ∙

∙

∙

∙

∙

∙

∙ ∙

∙

∙ ∙ ∙ ∙ ∙

∙

∙ ∙ ∙

∙ ∙

∙ ∙

∙

∙

∙ ∙

∙ ∙ ∙ ∙ ∙ ∙

∙

∙

∙

∙

∙ ∙ ∙

∙ ∙ ∙ ∙ ∙ ∙

∙

∙ ∙

∙

∙ ∙

∙

∙ ∙

∙

∙ ∙ ∙

∙

∙ ∙

相依性 影

響 性

∙ ∙ ∙

∙

∙ ∙ ∙

∙

∙ ∙

∙ ∙ ∙ ∙ ∙ ∙ ∙

∙

∙ ∙ ∙ ∙

∙ ∙ ∙ ∙

∙ ∙ ∙ ∙ ∙ ∙ ∙

∙ ∙ ∙ ∙ ∙

∙ ∙ ∙ ∙ ∙ ∙

∙ ∙

∙ ∙ ∙

∙ ∙ ∙ ∙ ∙ ∙

∙

計者，無法了解其重要性，故會忽略此元件所提供的功能，甚至不依照規定使 用這類元件。這將會引發整體系統所潛藏的風險，甚至造成系統的失控與毀損。

故設計者應告知使用者此類元件的重要性。

2. 分佈在影響性因素區域的元件分析：分佈在此區域(第二象限)的元件特性為：高 影響程度，低相依程度。

(1)使用者的滿意度高：這類元件因對其他元件，甚至整體系統主導性高，常為系 統整體效能發揮之關鍵，亦為使用者重視的焦點。設計者應將此類元件列為現 行系統品質與效能的關鍵重點。

(2)使用者的滿意度低：若此類元件未受到使用者重視，但仍具備高主導性。設計 者依然需要將其列為潛在的設計重點。

3. 分佈在獨立性因素區域的元件分析：分佈在此區域(第三象限)的元件特性為：低 影響程度，低相依程度。

(1)使用者的滿意度高：這類元件的主導性和相依性皆低，但受到使用者對此類元 件具有高滿意度，在設計上若能重視，將有助於提高使用者的滿意度。

(2)使用者的滿意度低：此類元件因所有特性皆低，且使用者滿意度亦低，甚至可 以忽略。基於設計成本的考量，可考慮捨棄。

4. 分佈在相依性因素區域的元件分析：分佈在此區域(第四象限)的元件特性為：低 影響程度，高相依程度。

(1)使用者的滿意度高：這類元件受到其他元件的高度影響，並受到使用者的重 視，容易展現在整體設計上的成效，可作為系統設計品質優劣的判斷指標。

(2)使用者的滿意度低：雖然使用者忽略或不在意此類元件，惟因具有高相依性，

可視為評估設計品質的次要判斷因素。

茲將上述設計策略整理成表 3

表 3

整合使用者需求的設計策略

象限 MICMAC

分類 屬性 主導性 相依性 顧客

滿意度 敘述

I 傳遞

顯性 H H H

使用者高度重視並具備系統創新的趨勢，

產生下一個世代的殺手級應用

隱性 H H L

使用者不了解此類元見具有隱藏的不穩定 風險因素， 設計師應告知使用者此類元件 的重要性

II 影響

顯性 H L H

使用者明顯注意的關鍵元件，具備焦點的 影響性

隱性 H L L

雖然使用者忽略此類元件，但因具有潛在 隱性關鍵影響，設計師仍應注意

III 獨立 顯性 L L H 具有可提升客戶滿意的加值性

隱性 L L L 基於成本考量，可捨棄此類元件

IV 相依

顯性 L H H

此類呈現明顯效果的指標性，可作為系統 設計品質優劣的指標

隱性 L H L

具潛在的被影響性，雖常被使用者忽略，

但仍可作為系統設計品質評估的次要因素

第四章 個案研究與分析

本研究提出由使用者需求分析、元件特性分析和元件互動影響分析的三階段整合 設計開發模式，除能滿足使用者操作的需求，並可協助介面設計師快速修正與調整設 計架構，提高設計效能。 透過實務案例，以說明本方法論之應用與效益。

第一節 研究案例描述

在網路普及的今日，網站郵件系統是日常生活中最常使用的雲端服務。網站郵件 系統通常具有以下特性(Jin, 2000)：

1. 資料儲存集中化：使用者只需上網，即可查閱所有保存於網站郵件系統中的歷史 信件。

2. 可信賴性：相較於個人電腦中的郵件系統，透過網際網路連結的網站郵件系統的 穩定性較佳。

3. 可使用性：屬於雲端服務的網站郵件系統，可讓使用者跨越空間的限制，在任可 連結網際網路之處，收發郵件。

4. 功能完整性和正確性：使用者透過網站郵件系統，可完成收發信件和顯示閱讀等 標準化的功能。

隨著網站開發技術的日新月異，使用者對於網站郵件系統所提供的服務，更多樣 化與多元化。網站郵件系統在功能上的設計也日趨複雜(Millen, 1999)。針對一般使用 者，網站郵件系統在使用者介面設計的重點：

1. 提供訊息瀏覽的功能

2. 提供閱讀、撰寫與搜尋郵件的功能

3. 提供郵件或檔案，上傳、下載和儲存的功能 4. 瀏覽行事曆的功能

5. 支援即時傳訊與影音多媒體功能 6. 結合行動通訊，提供訊息發送之功能 7. 提供使用者可自行定義使用者介面和功能

8. 提供管理者即時安全的控管機制

9. 提供可攜性服務，滿足企業行動辦公室之需求 10. 支援多國語言介面

針對使用者多樣化的操作需求，本研究希望能透過具有實際建置與設計網站郵件 系統經驗的設計人員，就其在設計層面上所面臨之問題，進行設計方法之分析與改 善。所採用之實務案例，為台灣北部某科技大學自行設計開發之網站郵件系統。該校 使用網站郵件系統的操作者有：學生、教師和行政人員。由於該系統與後端之校務行 政系統整合，針對不同使用者身份，提供差異化的功能服務。因此，網站郵件系統系 統所提供的功能和介面操作，亦有所差異。

就使用者介面設計層面而言，該校參與設計郵件系統介面設計的專家有三位：系 統設計師、介面設計師和研究使用者介面設計的教授。由於，該校網站郵件系統介面，

已有固定的設計模式存在。根據三位設計專家之意見，從系統所有組成的元件中，篩 選出 23 個最關鍵的操作的介面元件 (表 4)，作為本研究中主要的分析元件。相關元 件功能說明如下：

1. 框架(Frame)：網站資訊系統介面設計的基礎元件。所有其他介面元件都必頇在其 上建構。

2. 功能選單(Menu)：由超連結文字或超連結影像所構成的多項功能組合群組。

3. 瀏覽器列(Navigation bar or icon)：提供使用者常使用的功能(例如:上ㄧ頁、下一頁 或首頁)。

4. 單面板(single panel)：常用於網站郵件系統中，僅能顯現郵件大綱之元件。

5. 雙面板選擇器(two-panel selector)：常用於網站郵件系統中，可上下同時顯現郵件 大綱與詳細內容的元件。

6. 樹狀表格(Tree Table)：具備主功能與次要功能收合之元件，常與功能選單群組併 用。

7. 通訊錄(Address Box)：提供通訊名冊的功能。

8. 下拉式選單(Drop Down List)：當使用者點選此元件時，將會顯現預設的文字選 項，以供使用者點選。

9. 核取方塊(Check Box)：提供使用者勾選功能的元件。

10. 文字方塊(Text Box)：可輸入簡短文字的元件。

11. 按鍵(Button)：提供使用者啟動程式程序的元件。

12. 捲軸(Scroll Bar)：當顯示畫面超過螢幕可顯示範圍時，即會在視窗介面的右側或 下方出現的可移動操作按鈕。

13. 彈跳式訊息視窗(Pop Up MessageBox)：當提示重要訊息或因使用者操作錯誤，即 會另行開啟的視窗元件。

14. 超連結圖形 (Hyperlink graphic)：具備超連結的圖片。

15. 工具提示(Tool Tip)：當游標移至各項功能元件時，會顯示其說明。

16. 標籤(Tag)：用以區隔不同功能頁面的元件。

17. 搜尋欄位(Search field)：提供站內或網際搜尋的文字方塊與按鍵。

18. 標題(Header)：網站郵件系統的標題文字，通常具有超連結的功能，可以連回網站 郵件首頁。

19. 編輯區(Editor Zone)：提供撰寫郵件文字的元件。

20. 一般文字(Text)：不具備超連結功能的文字，常用以解說功能。

21. 超連結的文字(Hyper Text)：具備超連結文字，功能選單和瀏覽器列中的文字皆屬 於此種元件。

22. 廣告橫幅(Banner)：用以展示廣告的移動式影像或動畫。

23. 行事曆(Calender)：提供使用者簡易的行事曆功能。

表 4

網站郵件系統之介面元件

元件

C1 C2 C3 C4 C5 C6

名稱 ^框架

(Frame)

功能選單 (Menu)

瀏覽器列 (Navigation bar or icon)

單面板 (Single panel)

雙面板選擇器 (Two-panel selector)

樹狀表格 (Tree table)

元件 C7 C8 C9 C10 C11 C12

名稱 ^通訊錄

(Address Box)

下拉式選單 (Drop Down

List)

核取方塊 (Check Box)

文字方塊 (Text Box)

按鍵 (Button)

捲軸 (Scroll Bar)

元件 C13 C14 C15 C16 C17 C18

名稱

彈跳式訊息視窗 (Pop Up MessageBox)

超連結圖形 (Hyperlink

graphic)

工具提示 (Tool Tip)

標籤 (Tag)

搜尋欄位 (Search field)

標題 (Header)and)

元件 C19 C20 C21 C22 C23

名稱 編輯區(Editor Zone)

一般文字 (Text)

超連結文字 (Hyper Text)

廣告橫幅 (Banner)

行事曆 (Calender)

第二節 使用者需求分析

本研究依據使用者介面設計的八大黃金定律為基礎 (Shneiderman & Plaisant, 2005)，從三個班級九十二位同學中，篩選出每日至少使用網站郵件系統一次，每週 至少使用五次的同學，共計三十五位。就本網站郵件系統之介面操作需求，進行實際 調查。

針對每一項操作需求對應至相關的設計元件，填上偏好值。偏好的強弱程度依序 為：9：非常強， 5：強，3：普通和 1：弱，空白表示不相關。經過加權計算後，將 各項元件對映需求所得的偏好值加總。將加總後之值，依照使用者對各項設計元件認 定之滿意度加以分類：分為高滿意度(H)和低滿意度(L)。從表 5 顯示：C3，C4，C5，

C7，C13，C15，C16，C17，C19，C21，C23，為使用者認定具有高滿意度(高偏好 度)的設計元件。

表 5

使用者操作需求對應元件之 QFD 矩陣分析

User's Requirnent Weight

Component

C1 C2 C3 C4 C5 C6 C7 C8 C9 C10 C11 C12 C13 C14 C15 C16 C17 C18 C19 C20 C21 C22 C23

R1 網頁整體畫面設計的一致性 5 9 5 9 9 9 9 5 5 9 9 9 9 5 9 5 5 5

R2 滿足普遍的使用性 5 9 5 9 9 9 5 9 5 5 5 5 9 5 9 5 9 5 5 5

R3 操作訊息的回饋 3 5 9 5 5 5 9 9 5 9 9 9 9 1 5 5 1

R4 Step by step 的操作模式 1 5 5 5 5 5 5 9

R5 避免錯誤操作的設計 3 5 5 9 5 9 1 9 5 5 5 9 5 9 5 9 9 1 5 9

R6 操作的回復性 3 1 5 1 9 5 9 9 5 9

R7 易於操作性 3 5 9 5 9 1 5 1 1 5 5 5 5 9 9 1 5 5 5 1 5

R8 操作的提示功能 1 5 9 5 5 5 5 9 5 9 9 9 9 9 9 9 5 9 9 5 9

Total Value 105 108 200 143 196 51 142 68 54 102 91 74 123 36 141 121 185 61 188 68 131 23 140

Classify L L H H H L H L L L L L H L H H H L H L H L H

第三節 元件特性分析

在元件分析階段，使用詮釋結構模式，建立所有設計元件的層級結構，並分析各 元件之間彼此的隸屬關係。

1. 建立層級結構：

(1)建構關聯矩陣：將 23 個元件排列成 23 × 23 的結構分析矩陣，依據介面設計專 家針對每個元件所定義的互動性設計規範，進行元件彼此之間的關聯性分析。

專家依照自己的設計經驗判斷，橫列(row)上的元件對直行(column)上的元件具 有影響性，則註記「1」在對應的方格中。例如：C10 (文字方塊)與 C11(按鍵) 相互具有影響性，故在矩陣中座標(10，11)和(11，10)的方格中標註為「1」。(如 圖 14)

NO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Frame 1 1 1 1 1 1 1

Menu 2 1 1 1 1 1

Navigation bar or icon 3 1 1 1 1 1 1

single panel 4 1 1 1

two-panel selector 5 1 1 1

Tree Table 6 1 1 1

Address Box 7

Drop Down List 8 1

Check Box 9

Text Box 10 1

Button 11 1

Scroll Bar 12

Pop Up MessageBox 13 1 1 1 1

Hyperlink graphic 14 Tool Tip 15

Tag 16 1 1

Search field 17 1 1

Header 18 1

Editor Zone 19 Text 20 Hyper Text 21

Banner 22 1

Calender 23 1 1 1 1

圖 14 網站郵件系統介面元件之關聯矩陣

(2)建構可達矩陣：利用詮釋結構模式進行階層架構的建構作業，將原始的關聯矩 陣透過轉換為相鄰矩陣與可達矩陣(圖 15)。

NO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 D-Value

Frame 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 21

Menu 2 1 1 1 1 1 1 1 1 1 1 1 1 1 13

Navigation bar or icon

3 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 17

single panel 4 1 1 1 1 1 1 1 1 1 1 1 1 1 13

two-panel selector

5 1 1 1 1 4

Tree Table 6 1 1 1 1 4

Address Box 7 1 1

Drop Down List 8 1 1 1 1 1 1 1 1 1 1 1 1 1 1 14

Check Box 9 1 1

Text Box 10 1 1 2

Button 11 1 1 2

Scroll Bar 12 1 1

Pop Up MessageBox

13 1 1 1 1 1 1 1 1 1 1 1 1 1 13

Hyperlink graphic

14 1 1

Tool Tip 15 1 1

Tag 16 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 16

Search field 17 1 1 1 3

Header 18 1 1 2

Editor Zone 19 1 1 1 1 1 1 1 1 1 1 1 1 1 13

Text 20 1 1

Hyper Text 21 1 1

Banner 22 1 1 2

Calender 23 1 1 1 1 1 1 1 1 1 1 1 1 1 13

R-Value 1 9 2 9 4 10 11 3 5 12 12 11 9 4 11 2 1 1 9 11 11 2 9

圖 15 網站郵件系統介面元件之可達矩陣

(3)群集化可達矩陣：經由可達集合的處理(表 6)，並將具有關聯性的元件整理成 群集化可達矩陣(圖 16)。

表 6

相鄰集合與可達集合的處理

S

i

R(S

i

) A(S

i

) R(S

i

)∩A(S

i

)

S1 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,19,20,21,22,

23 1 1

S2 2,4,6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16,19,23 2,4,13,19,23 S3 2,3,4,5,6,7,8,9,10,11,12,13,15,19,20,21,23 1,3 3,

S4 2.4.6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16,19,23 2,4,13,19,23

S5 5,9,12,20 1,3,5,16 5

S6 6,7,15,21 1,2,3,4,6,8,13,16,19,23 6

S7 7 1,2,3,4,6,7,8,13,16,19,23 7

S8 2,4,6,7,8,10,11,12,13,15,19,20,21,23 1,3,8 8

S9 9 1,3,5,9,16 9

S10 10,11 1,2,3,4,8,10,11,13,16,17,19,23 10,11 S11 10,11 1,2,3,4,8,10,11,13,16,17,19,23 10,11

S12 12 1,2,3,4,5,8,12,13,16,19,23 12

S13 2,4,6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16,19,23 2,4,13,19,23

S14 14 1,14,18,22 14

S15 15 1,2,3,4,6,8,13,15,16,19,23 15

S16 2,4,5,6,7,9,10,11,12,13,15,16,19,20,21,23 1,16 16

S17 10,11,17 17 17

S18 14,18 18 18

S19 2,4,6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16,19,23 2,4,13,19,23

S20 20 1,2,3,4,5,8,13,16,19,20,23 20

S21 21 1,2,3,4,6,8,13,16,19,21,23 21

S22 14,22 1,22 22

S23 2,4,6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16.19,23 2,4,13,19,23