本研究旨在探討網站資訊內容呈現方式的不同，對國中生再生能源知識理解之影響，並透過量表及眼動資料了解其受試者之使用經驗和使用情形。
    本研究分為兩個部分，第一部分主要將52位國中七年級學生分為實驗組及控制組，以了解資訊呈現差異對知識理解的影響。第二部分針對9位國中二年級學生進行資訊圖表式網站之使用者經驗調查。其研究結果發現：
（一）	資訊圖表式能源網站對於國中生能源知識理解有正面影響
（二）	國中生對於資訊圖表式能源網站之使用經驗屬正向
（三）	若資訊圖的設計相似度高，會造成學生忽略其後來大標題設計的存在
（四）	學生知識理解與網站使用經驗有關
    最後本研究依照訪談所獲得的建議，及根據研究結果提供未來教材設計或後續研究之建議

The purpose of this study was to explore the learning effectiveness of two groups after using a renewable energy website in order to see if different ways of presenting information causes different learning effectiveness results; and at the same time understand the usability of the websites. For learning effectiveness part, 52 junior high students were divided into two groups, the treatment group used a website which was created with infographic, and the control group used a formal word-based website.
     As for the usability part, 9 junior high students were invited to join the usability test of using the same website as the treatment group.
     The research findings are: (1) Infographic-based energy website had positive impacts on the understanding knowledge. (2) The user experience of using infographic-based website is positive. (3) When the design of the infographic is too similar, once the first design appears, the user tend to ignore the content of the following one. (4) Students’ knowledge understanding is related to their website experience.
     Finally, recommendations from the interviews, and suggestions based on the results of the study are provided for future learning material design and further research.

目次

第一章 緒論	1
第一節 研究背景與動機	1
第二節 研究目的與問題	4
第三節 名詞解釋	5
第四節 研究範圍與限制	7
第二章 文獻探討	8
第一節 網頁資訊圖像	8
第二節 使用者經驗	13
第三節 使用者介面	21
第四節 能源教育	25
第五節 眼動追蹤	30
第三章 研究設計與實施	34
第一節 研究對象與場域	34
第二節 研究工具	36
第三節 實施流程	45
第四節 資料蒐集與分析	47
第四章  研究結果與討論	49
第一節 資訊圖表式網站及以文字為基礎的網站對知識理解之影響	50
第二節 資訊圖表式網站及以文字為基礎的網站的使用經驗調查	53
第三節 焦點組的知識理解與使用者經驗調查	57
第五章 研究結論與建議	105
第一節 研究結論	105
第二節 研究建議	107
參考文獻	109
英文部分：	109
中文部分：	111
附錄一 能源知識理解前後測驗卷範例	114
附錄二 能源網站使用經驗問卷內容	115
	

 
		
表次

表2-1 設計表現類型之類目與說明	10
表2-2 資訊圖表分類與舉例說明	11
表2-3 良好資訊圖表設計法則	12
表2-4 創新網站表現手法及使用性	15
表2-5 由Nielsen提出的使用性評估方法	17
表2-6  20種使用者經驗研究方法	18
表2-7 能源分類	25
表2-8 能源資訊網站分類列表	26
表2-9 能源教育教材內涵	28
表3-1 題目雙向細目表	39
表3-2 刪減後QUIS量表內容	41
表3-3 原SUS量表與修改後內容對照	42
表3-4 滿意度問卷內容	43
表3-5 訪談大綱內容	43
表4-1 實驗組與控制組再生能源知識理解前後測成績摘要表	50
表4-2 知識理解前後測成績成對樣本 t 檢定摘要表	51
表4-3 知識理解共變數分析摘要表	52
表4-4  QUIS 互動滿意度分析摘要表	54
表4-5  SUS 易用性分數分析摘要表	55
表4-6自編滿意度分析摘要表	56
表4-7焦點組再生能源知識理解前後測成績摘要表	57
表4-8焦點組 QUIS 互動滿意度分析摘要表	58
表4-9焦點組 SUS 及自編滿意度分析摘要表	58
表4-10焦點組樣本資料表	59
表4-11 G2眼動資料	61
表4-12 G3眼動資料	66
表4-13 G4眼動資料	70
表4-14 G5眼動資料	73
表4-15 B1眼動資料	78
表4-16 B2眼動資料	83
表4-17 B3眼動資料	86
表4-18 B4眼動資料	90
表4-19 B5眼動資料	95
表4-20焦點組眼動資料統整表	99


圖次

圖2-1 網站的使用者經驗元素	14
圖3-1 研究場域示意圖	35
圖3-2 焦點組研究場域示意圖	35
圖3-3 網站架構圖	36
圖3-4 文字網站（以水力發電為例）	37
圖3-5 資訊圖式網站（以水力發電為例）	38
圖3-6 熱區圖注視次數與顏色示意圖	44
圖3-7 知識理解測驗流程圖	45
圖3-8 使用者經驗評估流程圖	45
圖4-1  SUS分數與其他評分量表比較圖	55
圖4-2 資訊圖式再生能源網站進入個單元網頁前選單	100

英文部分：
Bangor, A., Kortum, P., & Miller, J. (2009). Determining what individual SUS scores mean: Adding an adjective rating scale. Journal of Usability Studies, 4, 114-123.
Barnum, C. (2008). Usability testing of e-learning easy, effective, affordable. elearn Magazine. Retrieved from http://elearning.acm.org
Benyon, D., Turner, P., & Turner, S. (2005). Designing interactive systems: people, activities, contexts, technologies (人機介面：互動式系統設計)，郭學武譯。台北市：碁峰資訊。
Brooke, J. (1996). SUS—A quick and dirty usability scale. Usability Evaluation in Industry, 189, 4-7.
Cairo, A. (2013). The Functional Art: An introduction to information graphics and visualization. USA: New Riders.
Clark, R. and Mayer, R. (2003). E-Learning and the science of instruction: Proven guidelines for consumers and designers of multimedia learning. San Francisco, Pfeiffer.
Elobaid, M., Lodhi, A., & Khan, A. (2013). Usability testing of multilingual educational websites. Life Science Journal, (10)2, 2445-2450.
Finke, T., Manger, S., & Fichtel, S. (2012). Informotion: Animated infographics. Eberl Print, Immenstadt Im Allgäu: Gestalten, Berlin.
Garrett, J. (2003). Elements of user experience: User-centered design for the web. New Riders.
Jordan, P. W., Thomas, B., Weerdmeester, B. A., & McClelland, A. L. (Eds.) Usability evaluation in industry. London: Taylor and Francis.
Lankow, J., Ritchie, J., & Crooks, R. (2012). Infographics: The power of visual storytelling. USA: John Wiley & Sons, Inc.
Nielsen, J. (1993). Usability Engineering. San Francisco: Morgan Kaufmann.
Nielsen, J. (2007). Do government agencies and non-profits get ROI from usability?. Nielsen Norman Group. Retrieved from http://www.nngroup.com/articles/government-non-profits-usability-roi/
Nielsen, J. (2012). Usability 101: Introduction to usability. Nielsen Norman Group. Retrieved from http://www.nngroup.com/articles/usability-101-introduction-to-usability/
Norman, D. (2004). Emotional Designs: Why we love (or hate) everyday things. New York: Basic Books.
Ramakrisnan, P., Jaafar, A., Razak, F. H., & Ramba, D. A. (2012). Evaluation of user interface esign for Learning Management System (LMS): Investigating Students Eye Tracking Pattern and Experiences. Procedia - Social and Behavioral Sciences, 67, 527-537.
Rayner, K. (1998). Eye movements in reading and information processing: 20 years of research. Psychological Bulletin, 124(3), 372-422.
Rohrer, C. (2014). When to use which user experience research methods. Retrieved from https://www.nngroup.com/articles/which-ux-research-methods/
Sari, A., Suryoputro, M., Rochman, Y., Ulandari, S.,& Puspawardhani, E. (2015). Usability analysis of laboratory website design to improve learning process. Procedia Manufacturing, 3, 5504-5511.
Schaffer, E., & Lahiri, A. (2013). Institutionalization of UX: A Step-by-Step Guide to a User Experience Practice. 2nd ed. US: Addison-Wesley Professional.
Sharma, C., & Dubey, S. K. (2014). Analysis of eye tracking techniques in usability and HCI perspective. 2014 International Conference on Computing for Sustainable Global Development (INDIACom).
Shneiderman, B., & Plaisant, C. (2005). Designing the User Interface. Boston: Pearson.
Smiciklas, M. (2012). The Power of Infographics: Using pictures to communicate and connect with your audiences. USA: Pearson Education, Inc.

中文部分：
Re-lab團隊（2017）。人人都能上手的資訊圖表設計術。時報文化出版，台北市。
木村博之（2012）。設計的邏輯:INFOGRAPHICS深入人心的視覺法則（楊宗訓譯）。旗標出版，台北市。
李世忠(1993)。使用者介面的探討。視聽教育雙月刊，35(1)，19-57。
邱敏棋、蔡子瑋（2012）。旅遊網站視覺設計要素之重要性探討。國立臺中技術學院學報，(16)，23-36。
林君玲（2014）。網站之使用者介面設計探討與創作-以音樂平台為例（碩士論文）。國立臺灣師範大學，台北市。
施博瀚（2015）。資訊圖表設計之研究與應用-以天主教輔仁大學應用美術碩士班招生文宣為例（碩士論文）。天主教輔仁大學，新北市。
徐昊杲、施秀青（2014）。國民中小學能源教育之推動經驗與成果。技術及職業教育學報，5(3)，99-128。
孫春在、林珊如、袁賢銘、王淑玲、王岱伊、高宜敏、…林志鴻（2017）。數位學習者之眼—應用眼動技術於數位學習研究。國立交通大學出版社，新竹市。
許子凡（2016）。從視覺複雜度與設計表現類型探討網頁資訊圖像之注目性。設計學研究，19(2)，1-26。
許子凡、楊朝明、王聖文（2017）。從設計表現類型與視覺複雜度探討網頁資訊圖像之理解性。設計學研究，20(1)，1-22。
許峻誠。(2011)。數位典藏藝術類網站頁面之使用者經驗研究。藝術教育研究，22，79-103。
陳坤淼（2000）。電腦多媒體使用者介面設計探討。高速計算世界，8（2），36-45
陳彥寧（2014）。多媒體介面設計—以能源資訊網站為例（碩士論文）。國立清華大學，新竹市。
陳麗月、陳碩祈、林曉雯（2016）。國小四年級學生STS進行綠色能源課程學習成效之研究。科學教育，(2)，3-30。
張莉青（2002）。網站成線與網站信任感知關係研究（碩士論文）。國立政治大學，台北市。
廖哲緯、曾治乾（2013）。能源教育課程對於國中學生能源認知、能源態度、環境敏感度及能源行為之影響。健康促進暨衛生教育雜誌，(35)，45-59。
劉子晏（2015）。數位學習平台使用性評估之研究-以教育部數位學習服務平台為例（碩士論文）。淡江大學，新北市。
蔡厚輝（2014）。以使用性評估陸客導覽學習系統建置之研究（碩士論文）。國立高雄第一科技大學，高雄市。
蔡福興（2013）。促進能源教育的線上井字棋遊戲系統建置與成效初探。數位學習科技期刊，5(3)，39-57。
戴元峰、吳騏、薛義誠（2013）。「科技訊息分群圖譜」導入政府決策支援系統之應用。公共行政學報，(44)，113-160。
鍾金明（2016）。綠色能源科技第三版。新北市：新文京開發。
魏澤群（2005）。使用者最大-從優使性 (Usability) 出發的網站設計原則。網奕資訊科技，台北市。
魏澤群（2007）。優使性2.0 (Usability2.0) -網站經驗設計與使用者研究。網奕資訊科技，台北市。
蘇盈雅、張若菡（2013）。設計公司網站之創新手法及使用性評估。設計研究學報，(6)，67-79。
羅旭君（2017）。應用眼動追蹤技術探討多媒體呈現方式對國小高年級數學科認知負荷與學習策略之探究---以展開圖為例（碩士論文）。國立清華大學，新竹市。
羅威（2015）。公共圖書館青少年網站建置需求與評估之研究（碩士論文）。國立中興大學。台中市。
櫻田潤（2014）。不懂設計，也能做出令人驚豔的資訊圖表（陳嫻若譯）。台 北：聯經出版事業股份有限公司。