碩 士 論 文
數位學習系統之設計原則研究-以故宮為例
A Study of Design Guideline on e-Learning
Based on the
Example of National Palace Museum
研 究 生 / 陳俊瑋
指導教授 / 張恬君 博士
A Study of Design Guideline on e-Learning
Based on the
Example of National Palace Museum
研 究 生：陳俊瑋 Student：Chun-Wei Chen
指導教授：張恬君 Advisor：Dr.Tien-Chun Chang
國 立 交 通 大 學
應 用 藝 術 研 究 所
碩 士 論 文
A Thesis
Submitted to Institute of Applies Arts
National Chiao Tung University
in partial Fulfillment of the Requirements
for the Degree of Master of Arts
in Design
June 2006
Hsinchu, Taiwan, Republic of China
數位學習系統之設計原則研究-以故宮為例
A Study of Design Guidelines on e-Learning
Based on the
Example of National Palace Museum
研究生：陳俊瑋 指導教授：張恬君 博士 國立交通大學應用藝術研究所視覺傳達設計組
摘 要
數位學習是新科技的傳輸媒介，對新興學習而言，「介面」是最直接面對學習者的部分， 互動是學習與討論的重要管道；因為學習者使用數位教材時無法感受背後所執行的複雜程 式。介面設計好壞與否，攸關學習者對數位媒體的使用性，並間接影響學習者的學習熱情及 效果。 本研究主要針對「國立故宮博物院」現行數位學習系統進行介面使用性評估，擬請焦點 小組之專家針對篩選出的代表性數位學習系統，分別進行線上操作瀏覽，並於瀏覽過後依其 個人專長和認知，進行介面使用性評比並提出看法。問卷調查部份將綜合結構與非結構兩種 方式進行問卷設計，以集群分析法（cluster analysis）將問卷所有評估項目之相似性概念予以 群聚化，再運用迴歸分析（regression
analysis）對一般受測者（生手組）與經驗受測者（熟 手組）之操作差異作一描述。另外針對實地瀏覽受測後，將進行一般受測者與經驗受測者訪 談，以便找出更多使用性的問題，以作為數位學習系統未來規劃與設計之重要參考依據。關 於數位學習，將重新設計過後的數位學習系統，請受測者再次進行介面使用性評估，研究結 果將與原版系統研究進行對照比較。 本研究之具體結果提出評估數位學習系統之準則如下：（1）單位易識性（2）色彩合適 性（3）風格一致性（4）內文清晰性（5）提高服務性（6）字體閱讀性（7）按鈕清晰性（8） 編排易讀性（9）按鈕表現性（10）降低錯誤率（11）選項清晰度（12）操作調整性（13） 介面輔助性（14）地理提示性（15）資訊明確化。依其提出之準則予以重新設計系統驗證後， 原版與新版的比較有顯著的差異，然而一般使用者與經驗使用者亦在整體的平均值均有提升 的佳境，證明本研究應用之設計原則所量測出來的結果有達到改善介面的問題。 關鍵詞：數位學習、設計原則、介面設計、使用性Based on the
Example of National Palace Museum
Abstract
E-learning is a new medium of modern technology. As a new method of learning and acquisition of knowledge, the getaway of medium appears to be the most direct way to face the learners. A gateway must highlight the significant interaction of learning and discussion with the users . Since learners can’t comprehend the complicated programming system working behind the gateway, the visual effect and function of gateway become the primary concern for its users. In a sense, the getaway of a medium can affect the users’ learning attitude and enthusiasm when they get access to a digital medium.
This research mainly aims at evaluating the usability and practicability of the gateway of nowadays digital e-learning system in National palace Museum. This research also aims at selecting some of the most representative digitalized learning systems that are required to display their online surfing functions. After displaying their surfing capacity, some selected witnesses are invited to offer their opinions of the functionality of displayed gateways based on their own profession and knowledge. The designed questionnaire for this research is based on the combined structural and non-structural methods. The cluster analysis will be applied to evaluate all the question items in the questionnaire so as to cluster all the similar concepts of the question items. Then, the regression analysis will be applied to describe the operating differences between the inexperienced users and experienced users. After these users are evaluated based on their operating skill and technique, interviews will be conducted separately for inexperienced users and experienced users so as to find more problems of usability for the gateways. There findings will become important references for future digitalized learning plan and design. As far as the digitalized learning is concerned, the newly designed
digitalized learning system will be processed for the selected testers to re-evaluate its gateway usability and functionality. The findings of this newly designed system will be compared with the original version of the system.
The research proposes that the selective items for evaluating the digitalized learning system can be based on the following aspects: (1) The Unit legibility (2) The Color Applicability (3) The Style Constancy (4) The Text Visibility (5) The Advanced Service (6) The Text Intelligibility (7) The Button Visibility (8) The Arrangement Intelligibility (9) The Visual display of the Button. (10)The Accuracy (11) The Item Visibility (12) The Operating adjustability (13) The Gateway Function (14) The informative ability (15) The Clarity of Information. After being redesigned and verified based on these standards, the original and newly versions of digitalized learning systems differ from each other significantly. And the inexperienced users and experienced users are proven to demonstrate better adjustability towards the new version of digitalized learning system. This finding proves that the assumed items proposed by this research to enhance the digitalized learning system can change the gateway for the better significantly.
流水兩年，論文付梓前夕，心中有著太多感激。回首這條路，最先感謝指導教授－ 所長 張恬君博士，在親切的笑語，時而玩笑的威脅下指導我研究，奇蹟似地完成了這本論文， 倍感悸動；張老師民主化的教導，導正學生研究的觀念與態度、過程初生的啟發與提攜、引領學 生得以逐步踏入研究的軌道上；平日的慰問與叮嚀，一切資源來自於身體，好好愛惜資源；「不 要急，心情保持平和最重要」，這句話與這一切都滿溢於學生心中。在學業完成的這一刻，千言 萬語不知如何表達心中的無限感恩，師恩浩瀚，永銘於心，在此由衷的向應藝的娘說聲謝謝。 感謝 莊明振博士在學生研究期間，修讀設計研究課程之方法啟迪與統計觀念的建立，以及 口試時整篇論文指點迷津與逐字審閱訂正之辛勞，和善的面容與細膩且豐富的學養，以及嚴謹扎 實的研究態度，使得學生在設計研究上，樹立無形又重要的信心支柱，老師的認真與本領著實令 人崇拜，後學欲表達此境心中真正對莊老師的永遠印象與感謝：除了景仰，還有帥。 亦特別感謝口試委員國立新竹教育大學數位學習科技研究所所長 王鼎銘博士，撥冗對本文 的詳細批閱與愷切指導，口試時傾囊相授、鞭辟入裡的寶貴建言，使得論文結構更加完整。另外， 研究期間修習 鄧怡莘博士於使用者研究解析問題與深入的探討，同時提升學生的設計思考觀 念，發現許多研究上未能注意的缺失，並瞭解運用方法的要領。以及感謝 陳一平博士，讓學生 在心理與生理方面的知識茅塞頓開、雲開見月的豁然。當然還要感謝 賴雯淑博士在於學生修習 教育學程中專業課程的教導，在此一併感謝、感恩。 此外，在論文研究過程中，不論是博班學長 明勳(Vic)、俊智、智祥、偉民與學姊子瑋及雲 科大學長承勳於研究上的指導與幫助，或是在無數個身心俱疲、晨昏相處的 IAA92 思葶、宗慶、 清雲、逸原、上瑜、秀娟、訓誌、嵩季、招財、健文、尼克、子晴、逸珮同窗的相互扶持與激勵， 是論文行進的最大動力；真實的情感，互相照料，適時協助，點滴於心，感懷之意，不需言詮； 此外，研究室學弟妹們在實驗上的兩肋插刀、拔刀相助，讓我說聲：「北鼻，謝謝你們！」 最後，在論文完成的二十六歲這一年，太多要感謝的人，一直以來總是默默付出而從不求回 報的父母親給予我完全的信任、鼓勵，也感謝大哥、大嫂、二哥、二嫂、三哥在精神上的支持， 使得我能專心於研究課業上，還有高雄的漢洲叔叔與玄武堂的同輩設計夥伴，願將此喜悅與之分 享；研究所時光飛也似地到了尾聲，兩年來的學習、設計與研究，幸運能有應藝所如此多采多姿 的大家園，賜予滿滿的收穫與感動，讓我滿載而歸! 謹以此對愛護我的師長、家人、朋友，獻上最大的謝意。 謹誌 中華民國九十五年六月 於新竹國立交通大學 應用藝術研究所
中文摘要 ………...………...……Ⅰ
英文摘要 ………...………...……Ⅱ
誌謝 ………...………...……Ⅲ
目錄 ……….….Ⅳ
圖目錄 ………..…Ⅶ
表目錄 ………..…Ⅸ
第一章 緒論
1.1 研究背景與動機……….………….……
1 1.2 研究問題與目的……….………….……
2 1.3 研究範圍與限制……….………….……
3 1.3.1 研究範圍……….……
3 1.3.2 研究限制……….……
3 1.4 名詞譯義……….……
4 1.5 研究架構與流程……….……….……
5第二章 相關理論與文獻探討
2.1 數位學習……….…
6 2.1.1 數位學習定義………...………
6 2.1.2 數位學習、線上學習、遠距教學………..……
8 2.1.3 數位學習發展現況………
9 2.1.4 分享式內容物件模型（SCORM）標準的探討……….…
11 2.1.5 數位學習相關研究………...……
14 2.2 數位學習介面設計理論……….……
15 2.2.1 介面設計定義與演進……….……
15 2.2.2 人機介面 & 人機互動………..…
15 2.2.3 圖形使用者介面………
17 2.2.4 使用者為中心的設計……….…
18 2.2.5 介面設計的設計原則……….……
19 2.2.6 專家與生手相關研究……….……
24 2.2.7 介面設計相關研究………
252.3.1 介面使用性評估
………..……
26 2.3.2 使用性定義………...…
27 2.3.3 使用性評估效標………
29 2.3.4 使用性評估之方法………
33 2.3.5 介面使用性相關研究………
36 2.4 小結………..…
37第三章 研究方法與步驟
3.1 研究設計流程………...………
39 3.2 研究設計-第一階段………...……
40 3.2.1 相關樣本蒐集與分析………
40 3.2.2 實驗樣本的選擇………
44 3.2.3 研究設備與受測者………....……
45 3.3 研究設計-第二階段……….…..…
47 3.3.1 介面設計構面………...……
47 3.3.2 問卷內容設計………...……
49 3.3.3 典型工作設定………...……
50 3.3.4 第二階段資料整理與分析……….…
51 3.4 研究設計-第三階段………...…
52 3.4.1 一般受測者與經驗受測者個別訪談……….….…
55 3.4.2 重新設計建立………...……
53 3.4.3 評估新版設計步驟………
53第四章 研究結果分析與討論
4.1 階段一：最終研究樣本……….………
54 4.1.1 選擇代表性實驗樣本……….…...……
54 4.1.2 問卷內容……….…..…
56 4.2 階段二：評估結果與分析……….………
60 4.2.1 T 檢定結果與分析……….……
60 4.2.2 集群分析結果………
61 1. 集群之命名……….………
61 2. 集群樹狀圖……….………
62 3. 相似概念之評估要點集群………...………
644.3 階段三：相異背景訪談結果與分析
……….……
105 4.3.1 相異背景受測者對操作認知之比較……….…
105 4.3.2 訪談的主要問題………...…...…
105 4.3.3 相異背景操作的認知差異………...……
106 4.4 原版（施測版本）與新版（比較版本）系統驗證………
129 4.4.1 原版系統與新版系統之全體 t 檢定………...…..…
129 4.4.2 原版系統與新版系統之生手組 t 檢定……….…....…
130 4.4.3 原版系統與新版系統之熟手組 t 檢定………...…..…
131第五章 結論與建議
5.1 研究成果與結論………...…
132 5.1.1 評估量表的建立與建議………...…
132 5.1.2 相異背景使用者操作差異………...…
133 5.1.3 原版系統的評估與建議………...…
134 5.1.4 新版系統的評估操作之結果………
136 5.2 後續研究建議………..…
137參考文獻
………...……
138圖 1-1 研究架構與關係
………...……….…………
3 圖 1-2 研究架構與流程圖……….………
5 圖 2-1 數位學習之演進圖……….…………
8 圖 2-2 數位學習發展類型………...…………
10 圖 2-3 SCORM 組成與內涵……….………
11 圖 2-4 SCORM 架構圖………
12 圖 2-5 SCORM 之三層次教材關係………..…………...……
13 圖 2-6 人機互動………..………...…
16 圖 2-7 各學科建構 HCI 之領域………..…….……...…
17 圖 2-8 以使用者為中心之設計週期……….…………...
18 圖 2-9 設計模式、使用者模式及系統印象……….….…….…
18 圖 2-10 使用性評估效標………..…….…...…
29 圖 2-11 標準學習曲率………..……….…...…
30 圖 3-1 研究設計流程圖………...………...……
39 圖 3-2 國立故宮博物院入口頁………...…
40 圖 3-3 國立故宮博物院數位學習系統……….…………...…
40 圖 3-4 國立台灣美術館入口頁………...…
42 圖 3-5 國立台灣美術館數位學習系統……….…………...…
42 圖 3-6 台北市立美術館入口頁………...…
43 圖 3-7 台北市立美術館數位學習系統……….………...……
43 圖 3-8 認知導引法檢核圖表………...…
44 圖 3-9 實驗環境示意圖………...………...…
45 圖 3-10 故宮 e 學園之介面設計構面分解圖Ⅰ………..…..….…
47 圖 3-11 故宮 e 學園之介面設計構面分解圖Ⅱ……….………..…..……
48 圖 3-12 問卷設計之方法………...……...……
49 圖 4-1 選擇代表性之樣本對象………...…
56 圖 4-2 集群樹狀圖………...…...…
63 圖 4-3 故宮 e 學園單位易識性之分佈範圍………
106 圖 4-4 故宮 e 學園色彩合適性之分佈範圍………
108 圖 4-5 故宮 e 學園風格一致性之分佈範圍………
111 圖 4-6 故宮 e 學園內文清晰性之分佈範圍………
113 圖 4-7 故宮 e 學園提高服務性與介面輔助性之分佈範圍………..…
116圖 4-9 故宮 e 學園按鈕、選項清晰度與表現性之分佈範圍
………
120圖 4-10 故宮 e 學園編排易讀性之分佈範圍
………
122圖 4-11 故宮 e 學園操作調整性之分佈範圍
………
123圖 4-12 故宮 e 學園資訊明確化之分佈範圍
………
127表 2-1 數位學習之內涵
………
7 表 2-2 Jakob Nielsen 介面設計評估原則………...….…
19 表 2-3 Norman 介面設計評估原則………..…
22 表 2-4 IBM 介面設計評估原則……….….…
22 表 2-5 Jakob Nielsen 介面使用性評估原則……….…
23 表 2-6 Apple 等人介面設計評估原則……….……
23 表 2-7 專家學者對使用性之定義……….…...…
27 表 2-8 Nielsen 之使用性評估方法類型………
33 表 3-1 故宮 e 學園之介面設計構面示意表Ⅰ………..…
48 表 3-2 故宮 e 學園之介面設計構面示意表Ⅱ………..…
48 表 4-1 認知導引法檢核積分表……….…...…
55 表 4-2 問卷內容設計………...……
57 表 4-3 獨立樣本統計量………...…
60 表 4-4 獨立樣本檢定………..…
60 表 4-5 單位易識性之評估要點………...…
64 表 4-6 色彩合適性之評估要點………...……
64 表 4-7 風格一致性之評估要點………...……
64 表 4-8 內文清晰性之評估要點………...……
65 表 4-9 提高服務性之評估要點………...…
65 表 4-10 字體閱讀性之評估要點……..………...
66 表 4-11 按鈕清晰度之評估要點………
66 表 4-12 編排易讀性之評估要點………...
66 表 4-13 按鈕表現性之評估要點………...…
67 表 4-14 降低錯誤率之評估要點………...…
67 表 4-15 選項清晰度之評估要點………...…
67 表 4-16 操作調整性之評估要點………...…
67 表 4-17 介面輔助性之評估要點………...……
68 表 4-18 地理提示性之評估要點………...……
68 表 4-19 資訊明確化之評估要點………...…
68 表 4-20 生手組單位易識性之迴歸分析結果……….………
69 表 4-21 熟手組單位易識性之迴歸分析結果……….………
69 表 4-22 熟手組色彩合適性之迴歸分析結果……….……
71表 4-24 生手組風格一致性之迴歸分析結果
……….………
73 表 4-25 熟手組風格一致性之迴歸分析結果……….………
73 表 4-26 生手組內文清晰性之迴歸分析結果……….………
75 表 4-27 熟手組內文清晰性之迴歸分析結果……….………
75 表 4-28 生手組提高服務性之迴歸分析結果……….……
78 表 4-29 熟手組提高服務性之迴歸分析結果……….………
78 表 4-30 生手組字體閱讀性之迴歸分析結果……….………
80 表 4-31 熟手組字體閱讀性之迴歸分析結果……….………
81 表 4-32 生手組按鈕清晰度之迴歸分析結果……….………
84 表 4-33 熟手組按鈕清晰度之迴歸分析結果……….………
84 表 4-34 生手組編排易讀性之迴歸分析結果……….……
86 表 4-35 熟手組編排易讀性之迴歸分析結果……….……
86 表 4-36 生手組按鈕表現性之迴歸分析結果……….……
88 表 4-37 熟手組按鈕表現性之迴歸分析結果……….……
88 表 4-38 生手組降低錯誤率之迴歸分析結果……….……
90 表 4-39 熟手組降低錯誤率之迴歸分析結果……….……
90 表 4-40 生手組選項清晰度之迴歸分析結果……….……
92 表 4-41 熟手組選項清晰度之迴歸分析結果……….……
92 表 4-42 生手組操作調整性之迴歸分析結果……….………
94 表 4-43 熟手組操作調整性之迴歸分析結果……….………
94 表 4-44 生手組介面輔助性之迴歸分析結果……….………
96 表 4-45 熟手組介面輔助性之迴歸分析結果……….………
96 表 4-46 生手組按鈕易用性之迴歸分析結果………..…...…
98 表 4-47 熟手組按鈕易用性之迴歸分析結果………...…
98 表 4-48 生手組資訊明確化之迴歸分析結果………...…
100 表 4-49 熟手組資訊明確化之迴歸分析結果………...…
100 表 4-50 生手組與熟手組建議設計方針………...……
102 表 4-51 生手組對應單位易識性………..……
103 表 4-52 訪談之對象………
105 表 4-53 訪談受訪者對單位易識性內容摘記………...…………
107 表 4-54 單位易識性之改善方針………..……
107 表 4-55 訪談受訪者對色彩合適性內容摘記………...……
109 表 4-56 色彩合適性之改善方針………..………
109 表 4-57 訪談受訪者對風格一致性內容摘記表 4-59 訪談受訪者對內文清晰性內容摘記
………...…
114 表 4-60 內文清晰性之改善方針………..……
114 表 4-61 訪談受訪者對提高服務性與介面輔助性之內容摘記………..……
116 表 4-62 提高服務性與介面輔助性之改善方針………
116 表 4-63 訪談受訪者對字體閱讀性內容摘記………...…
118 表 4-64 字體閱讀性之改善方針………..……
118 表 4-65 訪談受訪者對按鈕、選項清晰度與表現性的內容摘記………
120 表 4-66 按鈕、選項清晰度與表現性之改善方針……….……
120 表 4-67 訪談受訪者對編排易讀性內容摘記………...…
122 表 4-68 編排易讀性之改善方針………..……
122 表 4-69 訪談受訪者對操作調整性內容摘記………...…
124 表 4-70 操作調整性之改善方針………..……
124 表 4-71 訪談受訪者對資訊明確化內容摘記………...…
128 表 4-72 資訊明確化之改善方針………..……
128 表 4-73 全體之獨立樣本統計量………..…
129 表 4-74 全體之獨立樣本檢定……….…
129 表 4-75 生手組之獨立樣本統計量………...…...
130 表 4-76 生手組之獨立樣本檢定………..……
130 表 4-77 熟手組之獨立樣本統計量………..…
131 表 4-78 熟手組之獨立樣本檢定………..…
131 表 5-1 建立數位學習介面之評估準則表………...…
133第一章 緒 論
1.1 研究背景與動機
數位學習風氣之盛行，因為擁有任何時間（anytime）、任何地點（anywhere）的 學習特質；藉由網路（internet）、通訊（communication）與多媒體（multimedia）的應 用，使得教育單位與企業機構在知識的傳遞與培育，都逐漸以「超連結網路教學模式」 取代過去實體環境的教育方式。除了學習環境的改造，近年來網路平台的功能趨近於 完整性與富彈性，因此，資訊內容的呈現更應當著重在人機互動的介面上。網路時代 下的數位科技已成為社會經濟發展最主要的動力（王鼎銘，民89）。尤其邁入知識經 濟（knowledge-based economy）時代，學習者更需要藉著各種不同形式的學習得以提昇 本身的競爭力；如此，教育性質之博物館數位學習亦是其中一環，1990 年代中期，博 物館開始透過全球資訊網將有關博物館參觀資訊、館藏、展覽等訊息能隨時取得與利 用，並作為大眾參觀博物館前，搜尋參訪資訊的最佳輔助工具。 在視覺傳達設計上，廣義地將網路上獲取資訊，視為學習的行為，則數位學習環 境的設計是值得探索的主題，亦是本研究主要動機。目前國際間提供製作網路多媒體 教材之工具五花八門，且多數由不同的背景所設計出來之教材格式也常不盡相同，且 易造成數位化教材不易重複使用、教學資源不易共享等問題。因此欲整合運用各種不 同的教材與學習管理平台（Learning Management System, LMS），仍有許多困難。若互動是學習與討論的重要管道，那麼「介面」是最直接面對學習者的部分；介 面設計好壞與否，更攸關學習者對數位媒體的使用性，並間接影響學習者的學習熱情 與滿意度。因此，無論花多久時間作了分析工作或是訂立教學目標，倘若數位化教材 沒有提供良好的使用介面讓學習者操作自如，便很難引起學習者興趣。 因此，基於以上幾點，本研究將以數位學習系統之介面使用性問題為主要研究議 題，經由文獻探討及受測者操作介面之互動關係，產出介面最適化的設計原則。
1.2 研究問題與目的
網路既然成為知識經濟時代下新科技的傳輸媒介，但並不是為了取代所有的傳統 教學模式，而是懂得運用資訊科技融入教學模式。依靠電腦多媒體提供了強大的互動 能力，同時可以結合文字、圖像、動畫、影片及聲音等多重媒體，非常適合人類學習 藝術作品所引發的各種感官和知性的活動，因此，博物館亦開始結合資訊科技，展現 文物與藝術。標準是資訊共享的必備元件，網路是一個共享世界，它提供多種模式讓 機構或計畫賴以建立，並提供組織資訊的規格，以便系統的讀取、儲存、索引、檢索、 乃至與其他系統間的溝通。「分享式內容元件參考模式」（Sharable Content Object Reference Model, SCORM）正是近年來被國際間肯定與提倡的數位學習標準。然而我們知道不同經驗的使用者在介面操作的認知模式是不同的；另一方面，學 習是進步的過程，對於數位學習介面具有不同使用經驗的使用者，勢必對於介面具有 不同的需求，因此，本研究提出以下問題，作為研究問題核心的根據： (1) 數位學習系統標準的新趨勢（SCORM），是否容易讓使用者使用？ (2) 相異使用經驗對數位學習系統於操作認知上是否有差異？其使用差異究竟為何？ 影響程度又為何？ (3) 兼顧使用經驗差異的數位學習介面通用設計原則為何？ 「博物館數位學習」，近來被視為科技與藝術結合的最佳詮釋。因此本研究目的在 瞭解博物館施行SCORM 模型概況及其使用性的問題，經評估後提供介面最適化相關 建議，以作為數位學習系統未來規劃與設計之重要參考依據。茲將具體目的列述如下： (1) 瞭解一般使用者與經驗使用者對數位學習系統使用經驗之差異； (2) 整理 SCORM 平台的要素評估準則，並建立評估量表； (3) 將評估量表予以概念化，以利瞭解相異背景對準則之影響程度的次序關係； (4) 藉由系統原版、新版的評估比較，歸納整理出適合於數位學習之介面準則； (5) 提供博物館數位學習教學介面平台與設計師日後課程介面設計能有所依循之原則。
e-Learning Interface Usability
1.3 研究範圍與限制
基於時間與人力的考量，本研究的範圍與限制如下：1.3.1 研究範圍：
以數位學習系統為主要研究之對象，著眼於介面設計與使用性之間的探討。因環 境介面是影響學習情緒的重要因子。因此本研究針對介面的要素組成與重要程度加以 探討，其餘諸如傳統學習與數位學習的差異或資訊科技融入教學對學習者的心理反應 等相關教育問題等將不在本研究範圍內。1.3.2 研究限制：
由於國內數位學習系統仍依附在單位網站架構的其中選項，亦由於國內外研究探 討網頁介面設計甚多，包含歡迎頁、入口頁等，為避免重複與充數，本研究針對已正 式發佈課程之數位學習介面加以探討，其入口頁、次頁等介面將不予討論。 國內數位學習系統分作「公司企業行號」、「教育單位」之別，亦因數位學習之定義甚 廣，分作線上學習、光碟學習等，若對於一併討論之，深恐不專研，然限於人力與時 間，故本研究僅針對「國內教育單位」之「線上學習」為蒐集樣本的對象。 綜合上述，本研究之範圍與限制可歸納以下幾點： (1) 以「國內線上模式-博物館數位學習系統」之操作介面為主要研究對象。 (2) 為控制實驗之變因，本研究僅針對整體操作介面的使用性與視覺傳達設計介面的相 關設計構成要素部份，其餘諸如學習系統之電腦程式或是技術層面問題均予以排除。 (3) 為避免一般受測者與經驗受測者評估時模糊研究焦點，因此以正式進入學習環境之 介面設計加以探討之。 圖1-1. 研究架構與關係1.4 名詞譯義
1.4.1 數位學習
（e-Learning
）美國教育訓練發展協會（American Society of Training and Education）定義數位學習 是藉由電子化科技來傳達教學內容或學習經驗，電子化科技包含從電腦訓練、光碟， 到各種網路應用等。ASTD 更詳細的定義是：「電子化學習是學習者應用數位媒介學習 的過程，數位媒介包括網際網路、企業網路、電腦、衛星廣播、錄音帶、錄影帶、互 動是電視及光碟等。應用的範圍包括網路化學習、電腦化學習、虛擬教室及數位合作。」
1.4.2 分享式內容元件參考模式
（SCORM
） 關於線上教育的規範、標準，美國政府與國防部所成立的 ADL（Advanced Distributed Learning）組織曾制定了 SCORM，SCORM 完整名稱為 Sharable Content Object Reference Model，即「分享式內容元件參考模式」。其主要內容以網際網路作基礎，透過一個教 材共用以及共享的機制來建立，藉此縮短教材、講義的開發時間、開發成本，並促成 各種教材能在各平台之間流通，以降低整體教育成本。1.4.3 使用性
（usability
） 依 Nielsen（1993）在「使用性工程」一書中之定義如下：「使用性」是指使用者在 使用產品或系統時所產生的種種問題而言，使用性只是系統的一小部份。而Shackel （1991）提及「使用性」的理想定義是盡量於人性功能項目中簡易、效率的使用，藉 此提供特別的訓練給特殊的使用者。使用性的四個操作定義：效率性、學習性、適應 性、態度，所有要素都是可量測的，且系統應該經過上列四者的評估。Preece（1993） 提及「使用性」的意義就是促進人機互動的目標，可以讓使用者安全地、實際地、有 效率地和愉快地執行作業。也就是一個系統能被特定使用者有效與滿意使用的程度， 且使用者能運用其在特定環境完成特定目的。1.5 研究架構與流程
圖1-2. 研究架構與流程圖 第一章 緒論 階段二.研究設計(原系統) 研究背景與動機 研究問題與目的 研究範圍與限制 第二章 相關理論與文獻探討 數位學習現況 數位學習介面設計 使用性評估方法 第五章 結論與建議 第三章 研究方法與步驟 階段一.研究設計(原系統) 階段三.研究設計(新系統) 文獻探討(實驗樣本萃取) 認知導引(實驗樣本萃取) 受測者之選取 相異背景使用者操作瀏覽 相異背景問卷調查施測 問卷之集群分析與迴歸分析 一般、經驗使用者訪談 綜合問卷與訪談結果分析 新版系統設計原則建立 第四章 研究結果分析討論 T 檢定與集群分析 迴歸分析 原版與新版系統評估 訪談資料分析 最終樣本萃取第二章
相關理論與文獻探討
本研究應用使用性工程之分析與評估手法，針對博物館數位學習系統之使用性與介面構 成要素，探討操作介面中相關構成因素的重要影響構面，進而選取適合於數位學習之介面功 能。並應用介面設計之原則，以瞭解好的使用性介面有哪些設計要素的構成原則，進而獲取 能提高數位學習之學習成效。本章依據「數位學習」、「數位學習介面設計」、「使用性評估方 法」、「相關研究」等四個部份來加以探討。2.1 數位學習
2.1.1 數位學習定義
數位學習具備隨時隨地的高取得特性，尤其符合現代社會快速變遷的模式，擺脫 傳統教學空間、時間的限制，營造一個自主的、個人的學習空間。目前已有多位專家 學者針對「數位學習」作許多深入的著述，本文將簡要介紹其基本概念。 Rosenberg（2001）認為數位學習是利用網際網路技術，傳遞一系列各式各樣的數 位內容，在增加知識與提高績效，它須具備有三個基本要件： (1) 網路化：由於網路化使得能及時更新、儲存擷取、發送傳達、分享教學或資訊。 (2) 應用電腦網路技術：利用電腦及網路技術將數位學習課程傳遞給予終端使用者。 (3) 學習的方式改變：集中於最廣泛的學習視界超越傳統訓練典範的解決方案。數位學習英譯為e-Learning，這個名詞是由美國 Jay Cross 於 1999 年最先提出。 e-Learning 的「e」主要是指 electronic（電子化)，也可代表 exploration（探索)、experience （體驗)、engagement（參與)、excitement（興奮)、empowerment（活力化)、ease of use （容易操作)以及 effective（效率)，都是 e-Learning 的精神。美國教育訓練發展協會 （American Society of Training and Education, ASTD）定義數位學習是藉由電子化科技來 傳達教學內容或學習經驗，電子化科技包含從電腦訓練、光碟，到各種網路應用等。
更詳細的定義是：「電子化學習是學習者應用數位媒介學習的過程，數位媒介包括網際 網路、企業網路、電腦、衛星廣播、錄音帶、錄影帶、互動是電視及光碟等。應用的 範圍包括網路化學習、電腦化學習、虛擬教室及數位合作（謅景平，民92）。所以「數 位學習（e-Learning）也就是包括了上述各項特質的電子化學習，透過網際網路傳遞全 部或部份學習內容之數位化學習活動為範疇。」然而本研究整理相關學者對e-Learning 定義與內涵，如表2-1。 吳天方，樊學良，與張柏紳（民92），綜合 Jackson（2002）、Stockley（2002）、 Taylor（2001）、Rosenberg（2001）、Wilson & Waller（2001）等人對於 e-Learning 的
定義，提出：「因探討觀點不同，e-Learning 可以解釋為以數位傳送資訊為基礎的『數 位學習』、並強調藉由網路科技的『線上學習』及以電子發明輔助學生的『電子化學習』。」 （蘇怡如等人，民93）。數位學習所代表的並不只是網路加上學習而已，其中更包括 了多樣性的內容傳遞形式，學習經驗的管理、網路互連的學習社群、以及網路內容的 提供者與專家。也就是說，學習內容（learning content）的導入與發展也將成為數位學 習推動重要關鍵的一環。 作者 數位學習定義 本研究摘要 Jackson（2002） 科技強化了學習，並傳遞、分享課程， 而非傳統的學習。 強調「科技」、 「分享」、與「非 傳統」。 Stockley（2002） 以電子化技術（行動電話、CD-ROM、 DVD、線上課程、遠距教學）提供教育 或學習的元素，傳遞學習或學習方案。 強調「多種連結 的載具」。 Taylor（2001） 使用電腦傳遞/管理，訊息或訓練/學習。 方式包含了網際網路、內部網路、 CD-ROM、e-mail 或其他電子化媒體。 強調「應用媒 體」。 Rosenberg（2001） 成形於網路科技，藉其傳遞資訊，以強 化知識的學習成果。 強調「學習新模 組」。 Wilson&Waller（2001） 源自 1970 年代的 CAI，以互動為基礎， 結合數位傳送服務有效幫助學習。 強調「互動式學 習」。 表2-1. 數位學習之內涵
CAI 電腦輔助學習 Online-Learning 線上學習 e-Learning 數位學習
2.1.2 數位學習、線上學習、遠距教學
人們學習的趨勢正在改變，學習模式正從「書本式」、「課堂式」轉變為「網路式」 或「數位式」或者「超連結式」；回顧歷史來看，電腦輔助教學（Computer-Based Training, CBT），早在九 О 年代初期前就已經展開，但主要的角色定位屬於輔助性質，意即將 傳統平面化而循序式的教材，改為數位化、超連結式的資料規格。在此，我們較常見 的名詞電腦輔助學習（Computer Assist Instruction, CAI），國內早期在網路上可取得的 CAI 工具程式，大抵是基於 DOS、Window3.1 作業環境的老舊程式。新一代 CAI 軟體已應用Flash 之類的網路技術，但教材缺乏交換性，整體來說，就算有心人士想要接續 發展，猶如整理斷簡殘篇來造就文史館，困難度頗高。 1995 年網際網路（internet）出現後，帶動了線上學習（online learning）的發展。 線上學習顧名思義就是在網路上學習，也稱作 web-based learning。這和「數位學習」 及時常聽到的「遠距教學」有何分別呢？「線上學習」除了課程內容，還包括很重要 的互動活動，也就是線上助教和學生社群的互動，如討論、聊天、解答、協助學習等。 「數位學習」則包含了「線上學習」，並加上虛擬教室（virtual classroom）及數位合作 （digital collaboration），意指學員間能同步即時合作（謅景平，民 92）。
而「遠距教學」的定義有許多種，在此引用Greville Rumble 在 The American Journal of Distance Education 中提出的遠距教學所具備的 4 個要點：（1）需有教師、學生與課
程；（2）教師和學生在不同的地點，但也可結合面對面教學的教育形式；（3）學習者
和教育單位是分開的；（4）學習者沒有教師的監督，評量與輔導藉由雙向溝通達成 。 （陳萌智，民93）。遠距教學的基本定義是「師生是相隔離的」，早期利用函授、廣播、 電視或教學軟體達到傳授學問的目的。就國內而言，民國七十五年空中大學首開先例， 以書籍與電視為媒介進行遠距教學（薛煌仕，民92）。近來，由於教育界普遍將網路 應用在遠距教學的情境，因此網路教學也可視為遠距教學的一種。但是網路教學也並 非一定是師生相隔的狀態，網路學習也適用於教師學生面對面的傳統教室情境中，如 同現今我們在國中小學階段推展的網路學習方式，所以網路學習也有一部分不等同於 遠距教學（周倩等人，民93）。因此，線上學習及數位學習都屬遠距教育的一種。 從 1960 年起，人類把電腦科技應用在教育訓練上，1995 年網際網路出現後，大家 更覺得透過網路進行教育訓練是可行的方式，因此極力鼓吹網路化學習，透過網際網 路來進行學習，其最重要的網路教學模式其中包括同步視訊教學（synchronous）及非 同步線上課程（asynchronous）兩類（黃翊軒等人，民 92 ）。同步教學（synchronous）： 最常見的方式是即時群播，它是透過通訊網路，將教學視訊由一主播端傳至收播端， 教師在主播端傳送出教學訊息，學習者在收播端收訊，相隔兩地教學者與學習者可以 互通訊息，因此所需的器材較複雜，導致花費也較昂貴。非同步教學（asynchronous）： 將學習內容以長時間放置在教學網站上，使用者不受時間與地點的限制，隨時可上網 學習獲取新知，不僅花費較低且限制較少，因此漸漸成為數位學習的主流。
2.1.3 數位學習發展現況
伴隨著知識經濟的時代來臨，自從2003 年起，我國「數位學習國家型科技計畫」 啟動之後，國內的相關研究逐漸以數位學習系統的名稱來涵蓋網路平台的相關教學功 能、課程的網頁內容設計和教學呈現等。國科會亦針對數位學習提出「網路教學系統 平台與內容標準化」計畫，主要研究內容包括網路教學系統及平台的建置、教材編輯 與共享、學習評量與學習行為分析等議題（http://tpcs.cis.nctu.edu.tw）。此計劃之目的 即是為了整合國內已建置完成的網路教學系統與未來所開發的系統，希望兩者都能兼 顧到網路教材的共享與流通的標準，以助於依據教材標準製作的教學教材都在不同平 台流通與共享（邱繽瑩，民92）。經濟部工業局亦具體以「產業學習網建置獎勵計畫」Internet Internet Intranet Intranet 鼓勵國內產業、企業界投資導入數位學習的應用，因此不僅在數位學習需求市場引起 廣泛的迴響，在數位學習供給市場亦有許多廠商將公司內部的人力資源配置在爭取政 府的獎勵案上，從推廣數位學習廣泛應用的觀點來看，政策的確帶動了國內普遍對數 位學習的重視程度。 目前國際間極需運用網路教學系統平台與內容標準化技術來建構學習教材共享的 機制。從2002 年國科會「數位學習國家型科技計畫」（http://elnp.ncu.edu.tw/）構想的 提出，到經濟部工業局配合該計畫特別擬定「數位學習產業推動與發展計畫」 （http://www.elearn.org.tw/default.aspx），都是希望規劃建置具「示範型的數位學習應 用」，以加緊標準性數位學習內容開發的腳步。 然而對大型教育性取向的數位博物館來說，僅靠製作光碟（CD-ROM）來推廣其 文物及教育資源是不夠的，加上製作光碟（CD-ROM）的成本較高，非所有小型博物 館可以負擔的，網路才是無遠弗屆界的工具。因此，在網路上，超越了本身地理上空 間的限制，成為一個有各種藝術主題的「文物百貨中心」且兼具強大搜尋力的「文物 資訊檔案庫」。博物館為散佈世界的廣大觀眾，製作精緻豐富且生動活潑的線上展覽與 教育資源，換句話說，將其豐富的藏品轉化為有系統組織、有主題包裝，針對一般大 眾或學校師生而設計的多元化形式的大資料庫。因此，博物館之數位學習將是未來網 路時代的重要趨勢，並讓全民教育、終身教育的目標，有機會更加具體落實。 網路數位教材不同於傳統的書本與黑板，他們具有更多元的呈現方式，包括視、 聽覺的重要訊息，以及數位教材的立即更新性與可下載使用的特性等（周倩等人，民 93）。因此，有研究指出網路學習並非以單一科技為基礎的訓練，例如也可以 CD-ROM 等，由此可知，網路教學應包括各種多媒體教材的開發與建置，如圖2-2。 圖 2-2. 數位學習發展類型
Book1 The SCORM Overview Book2 The SCORM Content Aggregation Model Book3 The SCORM Run Time Environment + + + SCORM
Sharable Content Object Reference Model
+
2.1.4 分享式內容物件模型
（SCORM
）標準的探討
為了提高教材資源的可再用性，並希望在教學模式、學習活動及教學評量各方面， 都能在不同的學習平台達到相同的教學效果，所以國際間正積極推動如美國政府與國 防部分散式學習主導計畫（Advanced Distributed Learning Initiative）組織，主導推動電 子學習元件國際標準－SCORM（Sharable Content Object Reference Model），即「分享
式內容元件參考模式」。依照此一國際標準，符合標準化的課程教材就可以在不同的學
習管理平台上共享與交換。目的在於提供可再用與分享的課程元件撰寫準則（邱繽瑩， 民92）。
SCORM 將 e-Learning 系統上的教材視為元件，透過 API（Application Program Interface）來操作與分享這些教材元件，目的是讓網路上不同的學習管理系統，可以分 享所開發設計的學習教材，達到重複使用的目的，使得混亂的數位學習平台與模式， 終於有了統一的規格書。如圖2-3 所示，將教材中的學習物件拆開後，可重新予以組裝 成為新的課程，為了此目的需規範共同的規格使得學習物件能順利組裝串接。 圖 2-3. SCORM 組成與內涵 簡單說就是一個規範數位學習的標準，SCORM 的標準不外分為兩大部分, 一部分 關於教材（content）, 一部分關於平台（LMS），其最終目的是透過建立「教材重複使
用與共享機制」，使各教材在不同的 LMS 中能夠重複使用，減少教材之開發時間與成 本。而SCORM 標準強調下列幾點特性：（蔡俊彥，民 92） (1) 可重複使用性（reusability）：在不同的工具下，學習內容要易於更改、重複使用。 (2) 取得容易性（accessibility）：要能在不同系統平台都能被搜尋到學習元件。 (3) 互相通用性（interoperability）：教材要能跨平台使用。 (4) 恆久耐用性（durability）：當系統軟體改變時，不需重新修改程式或教材。 (5) 可適性（adaptable）：要根據學習者的情形調整學習內容。 (6) 可負擔性（affordable）：要以最節省的成本方式建立教材。 其特性用以確保教材在不同訓練系統之間可以相通共容，且可在不同的工具中進 行重新編輯，而各種已經完成的數位教材不會因為標準或是科技的進步無法使用。 SCORM 用途能根據學習者過去的學習紀錄與技能分析，給予適當的內容，使因材施教 的理念將因學習標準制定，而逐一實現。所有的教學材料都將可被妥善的重複使用， 並且會依照每位學生的個別差異，提供個人化及客製化的多樣教材呈現。透過建立「教 材重複使用與共享之機制」來減少教材之開發時間與成本，使各教材在不同的LMS 中
能夠重複使用，流通自如。SCORM 標準中，主要定義了兩個架構「Content Aggregation Model, CAM」和「Run-time Environment, RTE」（王學誠，民 91）。如圖 2-4。
CAM 分成兩大部分，一是對教材共享的定義，另一是對教材包裹（content packaging）的定義。在 SCORM 中，可分享的教材是由三個層次所組成的，分別為共 有教材資產（asset）、共享教材物件（SCO）及整合教材（content aggregation）。而整 個課程則是透過教材包裹機制，將這三個層次的教材，配搭meta data 來描述。這三個 層次的內容分別是：（黃仁竑，民92），如圖 2-5。 圖 2-5. SCORM 之三層次教材關係 （資料來源：ADL, 2001） (1) 教材資產：是最基本的電子教材資源，像是各種多媒體檔案及網頁，如 text， images，sound，webpage 等。加上 asset meta-data 來描述後，便可方便在網路 上搜尋和挖掘。
(2) 共享教材物件：是可以被教學平台所管理及追蹤的最小教材單位，可以包含一
個以上的asset。為了被重複使用（reusable），一個 SCO 最好是具有一特定教
學目標的教學單位。一個SCO 也是有其 meta data 來描述其內容。
(3) 教材包裹：content aggregation 利用 content structure 來將一些 asset，SCO 組合
成一個較大的教材資源，例如書的一章或一個課程。在content structure 中，可
以使用metadata 來描述這些 asset 或 SCO 的展現順序。一個教學平台必須依 content structure 所定義的順序來展現教材（黃仁竑，民 92）。
2.1.5 數位學習相關研究
1、黃昭文，1996，《藝術類多媒體新表現形式之設計與創作-以故宮藏玉多媒體光碟為 例》，運用QuickTime VR 的技術使玉器具動態旋轉功能，以提供一種虛擬玉器把 玩的觀賞方式，主要就玉的知識層面而言，一件玉器包含了歷史意義、傳說、巧作、 材質等多方面知識，將這些知識以非線性的建構方式重新呈現。 2、吳安芩，2002，《網際網路虛擬教室中學習情境之設計研究》，其建議：一、虛擬 教室教學網站設計應涵蓋教育理念並營造學習情境。二、虛擬教室設計者可將教育 理念透過視覺化設計來表現。三、虛擬教室設計者可利用虛擬教師角色營造更佳之 學習情境。 3、王坤德，2003，《數位學習教材機制的設計與管理研究》，主要提出個人化的數位多 媒體教材學習架構及設計規範（Learning Content Management System: LCMS)，並依 據此架構進行系統實作，預期使得學習者依據系統分類規則與 SCORM 標準、指引 搜尋到學習課程及學習路徑，使得網上學習能易於使用及貼近需求，進而建立個人 知識擷取和績效提昇的目的。 4、李春雄，2004，《混合式數位學習模式學習歷程及成效之分析》，探討「數位學習 系統」的學習歷程與學習成效之關係來建立「線性迴歸分析」模式，讓授課老師可 以根據線性迴歸模式來分析學習者在進行數位學習時的學習狀況，以瞭解學生在線 上學習的閱讀教材時間、線上評量、同儕互動、上傳作業及合作學習等學習歷程的 記錄，發現如下： 一、學習者「線上繳交的作業成績」，在整個學習歷程中所佔 的係數最高。 二、學習者「閱讀教材時間」在學習歷程中為次重要。 三、學習者 「互動次數」與「學習成效」發現，雖然本研究結果關係低度相關，可能原因在混 合式學習模式中，學習者與同儕及老師平常互動較為頻繁，所以並沒有較顯著的關 係。 四、混合式學習模式中「上線次數」與「學習成效」並沒有反應出任何顯著 關係。 5、楊惠合，2004，《以科技接受模型探討數位學習滿意度之研究》，將從學習者的認 知與態度出發，探討數位學習系統與學習者彼此間的關係，運用科技接受模型 （Technology Acceptance Model, TAM）理論，並加入學習動機等教育理論，建立評 估數位學習滿意度之研究架構，以探討學習者在數位學習系統中，影響學習滿意度 的關鍵因素。2.2 數位學習介面設計理論
2.2.1 介面設計定義與演進
以「介面」來說，從人的觀點來看，使用者介面就是一個系統，介面遵循著「控 制→回饋」的簡單模式。其功能可以使系統展現能力，彈性與可使用性上的特色，亦 即系統與使用者之間的互動能力（鄭有訓，民92）。介面設計是教學設計在設計階段 工作項目之一，主要是指數位教材所呈現出之感官的風格、操作的導覽，以及互動的 模式。因此，舉凡設計數位教材與學習者之間交流的所有資訊內容，包含：文字、圖 像、動畫、影像、聲音等不同的媒體元素，皆屬於介面設計的範疇。而從全球資訊網 路來看，網站設計應有以下六項條件：1、介面（interface）；2、內容（content）；3、 互動（interactivity）；4、速度（speed）；5、簡化（simplicity）；6、清晰（clarity） （張恬君，民89）。本研究廣泛的定義，介面設計是設計使數位教材內容與學習者發 生關連的方法。2.2.2 人機介面 & 人機互動
使用者與電腦機器之間資訊交互往來的一個介面通路與環境，稱為人機介面 （Human-Computer Interface，HCI），又稱 MMI（Man-Machine Interface），由於人機 之間的來往溝通非常強調使用者導向（user-oriented）與使用者中心（user-centered）， 因此又稱為使用者介面（User-Interface；UI）（李青蓉等，民 87）。人機介面，是專注於發展及設計理想的使用者介面的學科。ACM Special Interest Group on Human-Computer Interaction 於 1992 年對 HCI 下一個定義：人-電腦互動是一 種評估、設計與應用原則，重點在於給人類所使用的互動電腦系統與其相關現象的研 究。即與人們所使用之互動式電腦系統相關的的原則，包括設計、評價和導入，主要
研究環繞著使用者周圍的現象，如圖2-6。當中所包含的四個構成要素為：使用者（人
及相關情境（應用領域、社會組織或工作、人機配合或適應），電腦系統（電腦繪圖…）。 無論是使用者、使用情境、發展過程、亦或電腦系統都可能會影響使用者與介面之溝 通。從資訊的領域來看，通常指的是人與電腦間的資訊傳遞方式。 人機互動在研究、應用的理論、方法等各方面，綜合了多種學科與技術。人機互 動從各種學科上應用其技術及專長，也藉由其它學科形成人機互動的根基。這些領域 包含人體工學（資訊設備的設計、工作平台和工作環境設計），人因工程（作業分析、 為預防使用錯誤而設計），認知心理學（資訊處理模式、使用者認知研究），軟體工 程（系統分析、系統架構），資訊科學（圖像介面、軟體工具）等。如圖2-7 所示，廣 泛的各學科專長領域建構出人機互動的領域。 不同的環境和不同的使用者產生不同的需求，人機互動在各式資訊系統中扮演重 要的角色。在網頁上的使用者經驗變得比其他產品的使用者經驗都還要來的重要，網 頁是一個自助式產品，沒有操作手冊給使用者事先閱讀，沒有客戶可以帶領你瀏覽網 頁，只有使用者一個人獨自面對整個網頁，靠著使用者的機智以及經驗來領導（Garrett, 2002）。
2.2.3 圖形使用者介面
圖形使用者介面（Graphic User Interface, GUI），以圖形的方式顯示使用者在螢幕 上看到的一切。最早出現在70 年代的 The Xerox Star Information Systems，由美國全錄 公司的Palo Alto 研究中心所發展（方裕民，民 92）。Levin 及 Anglin 等人（1987）歸 納出圖像具有提供表徵、裝飾內容、知識的轉移、資料的組織與詮釋意義五種不同的 功能。根據Paivio（1990）的理論，人的記憶系統主要由語言系統（verbal system）與 意象系統（imagery system）共同組成，意象處理較文字處理直接，也較能引起注意、 有助記憶。圖形使用介面（GUI）具有以下構成元素： 1、 視窗（windows）：將螢幕劃分為不同的區域。 2、 圖像（icons）：用以代表物件，圖像可以在螢幕上被任意的移動。 3、 功能表（menu）：顯示可供選擇、使用的功能選項。
4、 滑鼠（mouse，或指標裝置 pointing device）：用以在螢幕顯示區域操作物件的裝置。
2.2.4 使用者為中心的設計
以使用者為中心的設計方法之發展週期如圖 2-8 所示。初期的設計主要著重在於收 集與綜合關於使用者的需求，即使用者的經驗、能力等資訊。而獲取這些資訊的方法 可藉由：需求（requirement）分析、任務（task）分析及使用性（usability）測試等研究 方法（Jenny, 1993）。 而 Norman 則站在認知心理學的角度將心理模式分為三類，說明設計模式是表現設 計師對產品的概念，使用者模式是使用者透過操作產品所發展出來的心理模式，系統 印象（system image）即意指產品意象，包括該系統的操作說明書、標示名稱和文件等， 如圖2-9 所示。理想上，設計者希望使用者模式和設計模式一致，可是設計者並未與使 用者直接溝通，兩者間的所有溝通完全藉由系統本身在溝通。因此，系統印象即格外 重要，因為設計者必須確定該產品各方面都與使用者心理模式一致，如果系統影像不 能傳達清楚或者有誤，那麼使用者將會得到一個錯誤的心理模式（Norman, 1988）。 圖2-8. 以使用者為中心的設計週期 圖2-9. 設計模式、使用者模式及系統印象2.2.5 介面設計的設計原則
（1） Jakob Nielsen 提出的介面設計原則
Jakob Nielsen（2002）所提之 24 項評估原則（guideline）與 105 條（checklist） 評估項目 準確傳達網站設計的意圖 1、清楚而適當的在網頁明顯的版面位置呈現公司名稱與標誌 2、涵蓋一段簡單明確的副標來說明網站或公司性質 3、突顯該網站對使用者而言有哪些服務上的價值，以及相較於競爭同業的優越性為何 4、適度的強調突顯高優先的工作項目，以提供使用者在網頁上明確的起始方向 5、清楚界定出網站上的官方首頁 6、僅讓公司的主網頁出現連結其他網站的功能 7、清楚的設計出與其它附屬頁面有所區隔的網站首頁 公司資訊的傳達 8、整合企業資訊，如聯絡我們、投資者相關訊息、新聞中心、人力資源於明顯的區域 9、確定首頁包含關於我們這部份的連結，這是用來讓使用者粗略地瞭解整個公司，並可再連結到公司 產品、服務、公司評價、商業主張與管理團隊等其他相關資料的細節 10、如果需要發佈公司相關的新聞報導，那麼請在首頁加上新聞中心或新聞室的連結 11、呈現出一致的面貌，因為網站不僅僅只是網站，更是公司對外的其中一個窗口 12、將聯絡我們的連結致於首頁中，並且將它連結到有關公司所有連絡訊息的網頁 13、假如您提供建議與回饋機制，須特別說明這些訊息的目的 14、別讓公司內部資料顯示於對外公開網站中 15、如果您的網站有收集任何瀏覽者資訊，就必須在首頁上提供隱私權的連結 16、如果網站不能清楚的顯示營利來源，就必須說明該網站如何創造利潤 內文的書寫 17、使用會引起消費者注意的語言，段落標示與項目分類是根據消費者的需求而非公司 18、避免重覆的內文 19、為了讓使用者易於瞭解您的語義，別使用過於艱澀的成語或行銷術語 20、注意大小寫及風格的一致性 21、如果內文本身已可清楚傳達訊息時，不須在頁面增加說明區域 22、避免只有一個項目的分類選項存在 23、讓長串單字或成語排在同一列，避免換行狀況的發生，以減少瀏覽時的困擾與誤解 24、在需要瀏覽者配合填寫的項目，使用肯定式的語氣，例如請輸入程式名稱 25、在任何縮寫或簡寫之後，緊接著列出全名 26、避免使用驚嘆號等符號 27、在版面中儘量減少大寫字的使用 28、避免使用空格或逗號做不當的強調 經由範例來說明內文 29、採用範例來說明網站內容，會比僅用文字描述效果更好 30、每個範例，請務必連結到它詳細的說明頁面，勿連結到分類頁面，而範例只是其中的一個選項 31、在重點範例旁，提供一個延伸分類的連結 32、確定首頁內能明顯地區分出通往範例的連結跟頁面中其他一般分類的連結的不同 表2-2. Jakob Nielsen 介面設計評估原則
檔案資料庫與內文搜尋 33、讓舊有的資料訊息，更容易被瀏覽者查詢獲取 連結 34、突顯連結的差異性並使人容易瀏覽 35、別使用一般性稱呼，例如 Click Here 做為連結字 36、不要在分類說明後使用通俗性用語，如 More…採用顏色區別以顯示出已點選和未點選的連結狀態 37、在網頁中不要使用 Link 來表示連結點，要用顯示出加註底線與藍色字體的連結來表示 38、如果連結後是指向另一個網站的網頁或其他應用程式，例如 PDF 檔或開啟聲音 導覽 39、將主導覽區至於比較明顯的地方，最好能緊鄰網頁主要內容 40、將導覽區中類似的項目放在一起 41、對於類似的連結，不要提供多個導覽區 42、在首頁上，不要使用連結首頁的功能 43、導覽區的分類選項中，不要使用捏造的文字。分類要能讓使用者立刻分辨出彼此的差異，因此當 瀏覽者無法瞭解您所使用的專門用語時也就不能區別各個分類 44、如果您的網站有提供購物車的功能，那麼請將其連結置於首頁 45、只有在導覽區中使用圖示可以協助使用者立即看出項目所屬的分類時，才使用圖示 圖像與動畫 46、採用圖像來加強內文說明而非僅用來裝飾首頁 47、如果圖示或照片無法清楚表示所代表之內容，可加以標示並說明 48、將照片與圖表編排成適當比例呈現於螢幕中 49、避免浮水印式的圖像 50、在首頁中，不要只為引人注意某一項便採用動畫效果 51、不要將網頁上重要的項目製成動畫效果，例如商標標題或主要標題 52、不要強迫瀏覽者觀看你的動畫，也就是說不要把它設為預設值 圖形設計 53、過度設計的文字會降低文字的重要性，所以網頁上的文字大小、顏色等字型樣式都必須加以限制 54、使用對比強的文字與背景顏色，讓字體儘可能的清楚。 55、避免 800*600 螢幕解析度的網頁出現水平捲動 56、最重要的網頁要素應該要在最普遍的視窗大小 57、採用不固定的版型設計，如此首頁的大小才會隨螢幕解析度的大小作調整 58、審慎地使用商標 使用者介面工具集 59、不要在不希望瀏覽者點選的頁面使用工具集 60、避免在首頁使用多個文字輸入方塊，尤網頁上方的部份，因瀏覽者會在此處尋找搜尋功能的傾向 61、謹慎的使用下拉式選單，特別是當選項本身無法充分說明時 視窗標題 62、使用一些帶有資訊的字眼作為視窗標題的起始，通常為公司的名稱 63、無須將最上層的網域名稱像是 .com 也放在視窗標題裡 64、無需把 Homepage 也放在視窗標題裡，這種做法毫無意義 65、視窗標題應該包含對此網站的簡述 66、視窗標題不能太長，最好不要超過七或八個字 網址 67、在商業網站首頁的網址部份應該採用國家中最上層的網域 68、任何不是在美國而是在某個國家架設的網站，請使用那個國家最上層的網域 69、如果可以的話，多註冊幾個不同的網域名稱，像是不同的拼法、縮寫的網站名稱 70、如果有多個不同拼法的網域名稱，請選擇一個當作正式對外公告的官方網站 頭條提要與新聞稿
71、標題要能簡單扼要地說明內文，並且儘可能地用最少的字傳達最多的資訊 72、特別為首頁上的頭條提要與新聞撰寫並編輯摘要 73、使用可點選的標題連結到完整的內容，而不是用一大串的文章摘要來連結 74、如果所有首頁上的內容都是最近一個星期內的消息，那麼我們就可以不用把每篇文章的更新日期 都標示出來，除非該篇報導是需要常常更新的即時頭條 彈出視窗 75、當瀏覽者輸入您的主要網址或是按下網站上的連結時，便引導他們到真正的首頁 76、避免使用彈出視窗 77、除非網站有許多語言的版本，並且沒有單一的優勢語言，否則別使用下拉式選單來讓使用者選擇 廣告 78、把和公司無關的廣告放在網頁的周圍 79、盡量使外部的廣告相對於首頁的核心內容來得小且不引人注意 80、廣告置首頁上方標準橫幅廣告區域以外的地方，請說明這是廣告，以免瀏覽者誤以為是網站內容 81、避免以廣告常用的方式來呈現網站內容 歡迎詞 82、不要在首頁顯示出類似歡迎光臨的字眼，可以考慮改用標題來表示 技術問題與緊急事件的處理 83、如果網站或是網站重要部分無法正常運作時，請在首頁上清楚地告知相關訊息 84、重要的網站內容必須事先做好應變措施，以免遭遇緊急事故 讚美 85、勿浪費空間去誇讚搜尋引擎的功能、設計公司的功力或是網站背後所使用的技術 86、仔細思考是否要把所得過的獎項在網站中呈現 網頁重新載入與重新整理 87、不要為了顯示最新資訊就強迫使用者自動更新首頁 88、重新整理網頁時，只要更新像是新聞這類確實需要即時更新的部分即可 既有客戶服務 89、如果在您首頁的某個部份，一旦知道瀏覽者的相關資料便會提供既有客戶服務的資訊，那麼不要 對於初次來到網站的瀏覽者也提供這項功能，而讓這個區域呈現替代的內容 90、不要提供可修改首頁的基本使用者介面外觀的設定功能，例如色彩組合 收集顧客資料 91、不要直接提供一個登錄註冊的連結於首頁中，而應該是先告訴瀏覽者註冊後有什麼好處 92、再詢問瀏覽者電子郵件位址之前，先解釋並時常告訴瀏覽者的好處 組成社群 93、如果您有提供瀏覽者聊天室或相關討論區，不要只是單純地連結到聊天室或討論區 94、在商用網站上，不要提供留言板的功能 日期和時間 95、只有會時間改變的資訊，才需顯示日期和時間，例如新聞、現場聊天室等 96、告訴瀏覽者最後更新內容的時間，而不是目前電腦所顯示的時間 97、不論你參考哪個時區的時間，請加以標示出來 98、使用標準的縮寫，像是 p.m.或是 P.M.，不要將所縮寫過於簡化，例如 p. 99、拼出月份或使用其縮寫而非數字 股票報價與數量顯示 100、顯示升降的百分比，而非僅指出股價的揚昇或降低 101、拼出股票縮寫的全名，除非縮寫名稱已是大家所熟悉，例如 IBM 102、當顯示的數字超過五位數以上時，請使用千位數分隔符號 103、當顯示多欄數字時，請將小數點對齊 104、當顯示的數字超過五位數以上時，請使用千位數分隔符號 105、當顯示多欄數字時，請將小數點對齊
（2） Norman 提出的介面設計原則 Norman（1988）提出了以使用者為中心設計（user-center design）的七個原則： 1、善用真實世界的訊息與使用者本身具有的知識 2、將操作盡量簡化 3、使系統運作的訊息看得到，藉以消除操作與評估間的差距 4、將操作的功能以使用者能夠理解的方式安排 5、善用自然限制與人為操作限制，避免錯誤的操作 6、容錯設計 （3） IBM 提出的介面設計原則 在開發數位教材時，IBM 知識工廠的教材開發團隊在設計階段，主要會參考一套由多 位知名教育學、哲學及心理學等等人類行為分析專家制定的十七項介面設計基本原 則，以作為實際進行數位教材設計規劃及細部安排時的參考依據（蔡秀勤，民93）。 歸納如下： 1、美感（aesthetics）：堅守數位教材整體的美感，介面設計應注意學習者的視覺舒適感受 2、清晰的（clarity）：明確的訊息與指引，避免學習者難以解讀，如按鈕上的訊息須標示清楚 3、協調適合性（compatibility）：設計良好的學習結構和流程，指引學習者確定在網頁中的位置 4、易理解的（comprehensibility）：設計學習者能夠很容易理解的圖像和背景，並保持操作數位教材 5、一致性的（consistency）：舉凡功能列位置、視窗操作方式，與色彩圖片等，都需做一致性的規範 6、可控制的（control）：給予學習者可以放大、縮小、開啟，或關閉等可掌控教材畫面的動作 7、直接性（directness）：提供直接的操作方式，透過取代訊息或移動訊息等直接動作進行互動 8、提高閱讀效能性（efficiency）：減低捲動軸與長小寬大的閱讀面積設計。 9、熟悉的（familiarity）：運用學習者熟悉的介面隱喻，學習者會從以往的經驗找尋解讀新事物線索 10、具彈性的（flexibility）：靈活針對不同學習者需求的設計，例如設計符合不同螢幕解析度的介面 11、原諒性（forgiveness）：原諒學習者因過失操作的犯錯，如設計登入學習者身份與密碼錯誤的回饋 12、可預測性（predictability）：提供可預測的反應圖像及動作，否則會造成學習者無所適從不確定感 13、再生性（recovery）：給予適當的補救機會，當學習者發生使用數位教材困難時，有給予支援資源 14、有回饋性（responsiveness）：提供明確的學習進展標示，表示目前已學習完成或未完成的章節 15、簡明易懂的（simplicity）：設計簡單的介面環境，畫面設計單純化，減輕學習者的記憶負擔 16、透明化的（transparency）：除去技術問題造成學習者的額外負擔 17、交換性的（tradeoffs）：斟酌違背現實條件下應選擇的決定，如時間、成本與人力發生衝突或限制 表2-3. Norman 介面設計評估原則 表2-4. IBM 介面設計評估原則
