臺灣博碩士論文加值系統

隨著智慧型手機等行動裝置的普及以及行動上網通訊技術的成熟，全球對於網路的依賴性日益攀升，讓國內外業者紛紛搶進行動商務的無限商機潛能。在過往，網頁設計者只會以桌上型電腦與筆記型電腦的商務網站顯示解析度為設計考量，然而，隨著使用智慧型手機等行動裝置上網購物的行動商務的興起，網頁設計者不得不重新考量為智慧型手機等小型顯示畫面的行動裝置設計更合宜的網站內容。隨著｢不應該為載具客製化網頁版型｣的理論而誕生的｢響應式網頁設計(Responsive Web Design, RWD)｣網頁設計模式，讓網頁設計者在設計網站時僅需設計一個版型即可同時兼容各個裝置的顯示。因此，本論文以自製之響應式網路訂房網站畫面為實驗素材，透過眼動追蹤技術紀錄與分析受測者觀看RWD法則所設計的網頁內容時，其不同網頁物件排列方式的關注區域位置(Regions of Interest, ROIs)是否產生差異，藉此找出應用RWD技術所設計的行動商務網站應呈現何種方式的物件排列介面，較能符合使用者的視覺動線，讓使用者快速完成其瀏覽目的。本論文將依據RWD法則所設計的網頁選單圖示、選單導覽列、圖文訊息推播、以及圖文排列等方式加以驗證與探討。本論文研究發現：(1)受測者對不同位置的選單圖示畫面，其選單圖示關注區域位置的凝視時間、凝視次數皆無顯著差異，且凝視順位亦為相同，均為最後一個凝視區域；(2)受測者對不同呈現方式的選單導覽列畫面，其總凝視時間與選單導覽列關注區域位置的凝視時間皆有顯著差異，但在個別畫面中的選單導覽列，其凝視順位則為相同；(3)對圖、文推播的相異廣告訊息畫面，其總凝視時間與廣告訊息關注區域位置凝視時間皆有顯著差異，但在個別廣告訊息畫面中的廣告訊息關注區域位置，其凝視順位則為相同；(4)圖文排列位置相異的畫面，其總凝視時間無顯著差異，但在排列位置相異的畫面中，其各個關注區域位置的凝視順序皆不相同。

With the improvement of mobile communication, smartphones with internet feature have become necessary to daily life. Since people starts to rely on the network, it provides the business opportunities to expand the E-commerce development. In the past, website designer would only consider the display and context shown on desktop and laptop. Then the designer who recognizes to deal with the display on the smaller screen is needed because the population using small screen devices is increasing. Based on the ‘Not Customized Website Layout by its Capacity ‘theory’, Responsive Web Design (RWD) rules’ have been formed. The web designers do not need to worry the layout display on other devices anymore, construct one model layout can be used in many devices at the same time. Therefore, this study aims to use room reservation as our RWD subject. Through the record of the eye movement, when the users are viewing the web page by RWD rules design, we examine whether the item arrangements would influence the users’ regions of interest (ROIs). During the experiment, we are looking for how to apply RWD skill on item arrangement and let the user finish the page faster by the appropriate sight movement. This study will investigate and examine on the textures and pictures positions, website menu and its display according to RWD rules. This study has found that the menu icons in different positions and the participants’ regions of interest do not affect the fixation count and fixation time; the fixation sequence is the same too. However, when the way of presenting the web page is shown differently, there were significant differences on fixation count and time, but the fixation sequence still stays the same. The texture and picture push notifications and the advertising interest region have a significant difference on fixation time, but the fixation sequence on individual incentive is the same. Fixation time to the participants does not have much difference show on where the texture and pictures’ positions located, but there was a different fixation sequence on ROIs.

第一章 緒論 1
1.1. 研究背景 1
1.2. 研究動機 6
1.3. 研究目的 8
1.4. 研究問題與假設 9
第二章 文獻探討 12
2.1. 響應式網頁設計(Responsive Web Design) 12
2.1.1. HTML標籤語言 12
2.1.2. CSS概說 17
2.1.3. CSS3 Media Queries 22
2.2. 圖與文的編排 26
2.3. 眼睛構造 27
2.3.1. 眼球的移動控制 28
2.3.2. 眼球移動的原因 30
2.4. 眼動追蹤技術簡介 32
2.4.1. 眼電圖法(Electro-Oculography，EOG) 32
2.4.2. 搜尋線圈法(Search Coil，SC) 33
2.4.3. Purkinje 影像追蹤法(Dual-Purkinje-Image，DPI) 33
2.4.4. 紅外線視訊系統法(Infra-Red Video System，IRVS) 34
2.4.5. 紅外線眼動圖法(Infra-Red Oculography，IROG) 35
2.5. 眼動行為與指標 36
2.5.1. 採用眼動追蹤技術的因由 41
2.5.2. 眼動追蹤於響應式網頁設計的應用 42
第三章 研究方法 44
3.1. 研究架構 45
3.2. 研究流程 45
3.2.1. 實驗前準備 47
3.2.2. 實驗前測 47
3.2.3. 正式施測 47
3.2.4. 分析驗證 48
3.3. 實驗流程 48
3.4. 研究對象 52
3.5. 研究工具 52
3.6. 研究材料 54
3.7. 數據收集與分析 58
第四章 結果與討論 59
4.1. 假設檢定 61
4.1.1. 選單圖示位置之假設檢定 61
4.1.2. 選單導覽列樣式假設檢定 68
4.1.3. 訊息推播之假設檢定 75
4.1.4. 圖文排列之假設檢定 82
4.2. 研究結果討論 87
第五章 結論與建議 98
5.1. 研究結論 98
5.1.1. 選單圖示位置 98
5.1.2. 選單導覽列樣式 99
5.1.3. 訊息推播 99
5.1.4. 圖文排列 100
5.2. 研究建議 101
5.3. 未來研究方向 102
文獻參考 103
附錄一 實驗試前說明簡報 115
附錄二 實驗試後問卷 119
附錄三 眼動儀硬體規格 121

中文部分
山崎大助(2014)。Responsive Web Design自動調適行網頁程式設計。台北市：旗標。
王又亭(2011)。以眼球追蹤方法初探高中生教科書之圖文閱讀歷程與概念理解(未出版之碩士論文)。國立臺灣師範大學，台北市。
王尹軒(2004)。什麼是智慧手機？ iThome。取自2017年3月3日，http://www.myhome.net.tw/2016_01/p02.htm。
王任輝(2015)。電子商務網站RWD介面設計法則之使用者經驗及眼動行為研究(未出版之碩士論文)。國立中山大學，高雄市。
朱瀅(2002)。實驗心理學。台北：五南圖書出版股份有限公司。
林美杏、游琇雯(2013)，以眼球追蹤技術在科學圖文閱讀之實徵研究回顧。特殊教育與輔助科技半年刊，009，pp.15-20。
林畯宇(2016)。以信任為基礎之行動商務營運模式探討(未出版之碩士論文)。國立高雄第一科技大學，高雄市。
武星曄(2008)。平面廣告版面編排設計對眼動軌跡影響之研究(未出版之碩士論文)。銘傳大學，台北市。
柴惠敏(2005)。獨立t檢定的概念。取自2017年3月2日， http://www.pt.ntu.edu.tw/hmchai/SAS/SAScontinuous/SASttest.htm。
財政部(2017)。電子商務簡介。取自2017年3月4日，https://www.etax.nat.gov.tw/etwmain/web/ETW118W/CON/675/6817430380880522488
財團法人台灣網路資訊中心(2016)。2016 年台灣無線網路使用調查。取自2017年1月20日，http://www.myhome.net.tw/2016_01/p02.htm。
財團法人台灣網路資訊中心(2016)。TWNIC 2016年6月「寬頻網路使用調查 」報告。取自2017年1月20日，http://www.twnic.net.tw/download/200307/200307index.shtml。
陳學志、賴惠德、邱發忠(2010)。眼球追蹤技術在學習與教育上的應用。教育科學研究期刊，55(4)，39-68。
陳晉玄(2003)，消費者對產品識別之視覺認知研究-以汽車造形為例(未出版之碩士論文)。國立臺北科技大學，台北市。
陳贋淳(2011)。不同景觀空間型態視覺反應與心理認知之研究(未出版之碩士論文)。逢甲大學，台中市。
國家發展委員會(2015)。104年持有手機民眾數位機會調查報告。取自2017年1月20日，http://ws.ndc.gov.tw/Download.ashx?u=LzAwMS9hZG1pbmlzdHJhdG9yLzEwL2NrZmlsZS9kYTc4ZGNiYS03N2RkLTQ2NmEtYWRiMS03ZTRhMjVjMDgwYzcucGRm&n=MTA076aO5oyB5pyJ5omL5qmf5rCR55y%2B76Wp5L2N5qmf5pyD6Kq%2F5p%2Bl5aCx5ZGKLnBkZg%3D%3D。
許孟琪、陶振超 (2010)。看你想看的廣告！探討處理模式對廣告效果的影響。傳播研究的在地知識與全球實踐：從東看、往南走。中華傳播學會。
許誌謙(2017)。響應式網頁設計元素對使用者經驗影響之研究(未出版之碩士論文)。國立臺中教育大學，台北市。
莊雅筑(2012)。運用眼球追蹤法輔助國小六年級學生不同形式科學文本閱讀效益之研究(未出版之碩士論文)。國立臺中教育大學，台中市。
普保羅(2004)。圖文編排與多媒體介面運用之研究(未出版之碩士論文)。國立臺灣師範大學，台北市。
黃堯琮(2011)。利用眼球追蹤技術探討科學圖文閱讀歷程與概念理解之關係(未出版之碩士論文)。國立臺灣師範大學，台北市。
游恆山(譯)(1996)。(原作者：Mullen, B., & Johnson) 消費者行為心理學。台北：五南圖書出版股份有限公司。
楊東昱 (2007)。CSS3 HTML XHTML精緻範例辭典。台北市：旗標。
楊東昱 (2012)。HTML5 CSS3 精緻範例辭典。台北市：旗標。
楊雅淳(2001)。從使用者中心探討影視娛樂網頁介面設計原則-以電影公司網頁介面為例(未出版之碩士論文)。銘傳大學，台北市。
翟本瑞(2001)。網路閱讀與行為模式改變的社會學考察(初探)。網路社會學通訊期刊，14。
鄭月秀、藍穎筑(2012)。以三分法解構網頁編排設計研究。設計學研究，15(2)，103-131。
維基百科(2017)。HTML。取自2017年3月2日，https://zh.wikipedia.org/wiki/HTML。
維基百科(2017)。HTML5。取自2017年3月2日，https://zh.wikipedia.org/wiki/HTML5。
維基百科(2017)。StatCounter。取自2017年3月2日，https://zh.wikipedia.org/wiki/StatCounter。
維基百科(2017)。文件物件模型。取自2017年3月2日，https://zh.wikipedia.org/wiki/%E6%96%87%E6%A1%A3%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8B。
維基百科(2017)。行動商務。取自2017年3月2日，https://zh.wikipedia.org/wiki/%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA
維基百科(2017)。回應式網頁設計。取自2017年2月20日， https://zh.wikipedia.org/zh-tw/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1。
維基百科(2017)。陰極射線管。取自2017年3月2日，https://zh.wikipedia.org/wiki/%E9%98%B4%E6%9E%81%E5%B0%84%E7%BA%BF%E7%AE%A1。
維基百科(2017)。液晶顯示器。取自2017年3月2日，https://zh.wikipedia.org/wiki/%E6%B6%B2%E6%99%B6%E6%98%BE%E7%A4%BA%E5%99%A8。
維基百科(2017)。智慧型手機。取自2017年3月2日，https://zh.wikipedia.org/wiki/%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA
維基百科(2017)。電子商務。取自2017年3月2日，https://zh.wikipedia.org/wiki/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1
維基百科(2017)。應用程式介面。取自2017年3月2日，https://zh.wikipedia.org/wiki/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3。
劉仁沛(2013)。啤酒與學生氏t檢定。科學發展，vol. 487，pp. 68-70。
劉嘉茹、侯依伶(2011)。以眼動追蹤技術探討先備知識對科學圖形理解的影響。教育心理學報，43，227-250。
謝坤哲(2008)。網頁圖文數量與位置配置對於成年人與青少年的偏好與眼球運動之影響-以購物網站為例(未出版之碩士論文)。國立臺灣師範大學，台北市。
顏志龍、鄭中平 (2016)。給論文寫作者的統計指南：傻瓜也會跑統計。台北市：五南。

 
英文部分
Abrams, R. A., Meyer, D. E. & Kornblum, S. (1989). Speed and accuracy of saccadic eye movements: Characteristics of impulse variability in the oculomotor system. Journal of Experimental Psychology: Human Perception and Performance,15(3),529-543.
Adobe TV (2012), Dreamweaver CS6 for responsive design, Retrieved from http://tv.adobe.com/watch/creative-week-how-tos/dreamweaver-cs6-for-responsive-design/.
Amaodt. S. & Wang, S. (2008). Welcome to Your Brain (Vol. First Edition edition). USA: Bloomsbury.
Carpenter, R. H. S. (1988). Movements of the Eyes (2nd ed.). London: Pion Ltd.
Chaudhuri, A. (1990). Modulation of the Motion Aftereffect by Selective Attention. Nature, 344, 60-62.
Dirksen, C. J., Kroeger, A., & Nicosia, F.M. (1977) Advertising principles, problems, and cases.5th ed., Georgetown, Richard D. Irwin, Inc., pp280-290
Doyle, M. (2012). Responsive Web Design Demystified. Retrieved fromttp://www.elated.com/articles/responsive-web-design-demystified/.
Duchowski, A. T. (2007). Eye tracking methodology: Theory and practice (2nd ed.). New York: Springer.
Ehmke, C., & Wilson, S. (2007). Identifying web usability problems from eye-tracking data. Paper presented at the British Computer Society Conference on Human-Computer Interaction (BCS-HCI).
Google Blog (2012), Responsive design–harnessing the power of media queries, Retrieved from http://googlewebmastercentral.blogspot.jp/2012/04/responsive-design-harnessing-power-of.html.
Google Blog (2012), Mobile Websites vs. responsive design: What’s the right solution for your business? Retrieved from http://googlemobileads.blogspot.tw/2012/07/mobile-websites-vs-responsive-design.html.
Gregory, L. R. (1997). Eye and Brain: The Psychology of Seeing. Hillsdale, NJ: Princeton University Press.
Haber, R. & Hershenson, M. (1973). The psychology of visual perception. New York: Holt, Rinehart & Winston.
Hannus, M., & Hyönä, J. (1999). Utilization of illustrations during learning of science textbook passages among lowand high-ability children. Contemporary Educational Psychology, 24, 95-123.
Hegarty, M. (1992). Mental animation: Inferring motion from static displays of mechanical systems. Journal of Experimental Psychology: Learning, Memory, and Cognition, 18, 1084-1102.
Hegarty, M., & Just, M. A. (1993). Constructing mental models of machines from text and diagrams. Journal of Memory and Language, 32, 717-742.
Henderson, J. M., Dixon, P., Petersen, A., Twilley, L. C., & Ferreira, E (1995). Evidence for the use of phonological representations during transsaccadic word recognition. Journal of Experimental Psychology: Human Perception and Performance, 21, 82-97.
Henderson, J. M., & Hollingworth, A. (1999). High-level scene perception. Annual Review of Psychology, 50(1), 243-271.
Huey, E. B. (1908). The psychology and pedagogy of reading. Macmillan.
Hyönä, J. (2010). The use of eye movements in the study of multimedia learning. Learning and Instruction, 20, 172–176.
Inhoff, A. W., & Rayner, K. (1986). Parafoveal word processing during eye fixations in reading, Effects of word frequency. Perception & Psychophysics, 40 (6), 431-439.
Javal, L. E. (1906). Physiologie de la lecture et de l'écriture. Paris: F.Alcan.
Just, M. A., & Carpenter, P. A. (1976). Eye fixations and cognitive processes. Cognitive Psychology, 8, 441-480.
Just, M. A., & Carpenter, P. A. (1980). A theory of reading: From eye fixations to comprehension. Psychological Review, 87, pp.329-354.
Just, M. A., & Carpenter, P. A. (1984). Using eye fixations to study reading comprehension. In D. E. Kieras & M. A. Just (Eds.), New Methods in Reading Comprehension Research, 151-182. Hillsdale, NJ: Erlbaum.
Kaakinen, J. K., Hyönä, J., & Keenan, J.M. (2002). Perspective effects on on-line text processing Discourse Processes, 33, pp.159–173.
Kandel, E. R., James, H. S., & Thomas, M. J. (2000). Princeples of Neural Science. New York: McGraw-Hill.
Kean, M., & Lambert, A. (2003). Orienting of visual attention based on peripheral information. In H. Deubel (Ed.), The mind's eye: cognitive and applied aspects of eye movement research (pp. 27-47).
Krauzlis, R. J. (2005). The control of voluntary eye movements: New perspectives. The Neuroscientist, 11(2), 124-137.
Liversedge, S. P., & Underwood, G. (1998). Foveal processing load and landing position effects in reading. In G. Underwood (Ed.), Eye guidance in reading and scene perception. Amsterdam: Elsevier Science.
Loftus, G. R., & Mackworth, N. H. (1978). Cognitive Determinants of Fixation Location During Picture Viewing. Journal of Experimental Psychology: Human Perception and Performance, 4(4), 565-572.
Marcotte, E. (2010), Responsive web design, Retrieved from http://alistapart.com/article/responsive-web-design.
Marcotte, E. (2012), Rolling up our responsive sleeves, Retrieved from http://aneventapart.com/news/post/marcotte2012RWD.
Matin, E. (1974). Saccadic suppression: A review and analysis. Psychological Bulletin, 81(12), 899-917.
McConkie, G. W., & Rayner, K. (1975). The span of the effective stimulus during a fixation in reading. Perception & Psychophysics, 17, 578-586.
McConkie, G. W., Kerr, E. W., Reddix, M. D., & Zola, D. (1988). Eye movement control during reading: I. The location of initial eye fixations in words. Vision Research, 28(10), 1107-1118.
MDN (2017), Using media queries, Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries.
Nelson, R.P. (1977) The Design of Advertising. Dubuque William c. Brown Company.
Newman, M. and Landay, J. (2000). Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice. New York, ACM Press.
Pollatsek, A. & Rayner, K. (1982). Eye movement control in reading: The role of word boundaries. Journal of Experimental Psychology: Human Perception and Performance, 8, 817-33.
Poole, A., & Ball, L. J. (2005). Eye tracking in human-computer interaction and usability research: Current status and future prospects. In C. Ghaoui (Ed.), Encyclopedia of human computer interaction (pp. 211-219).
Posner, M. I., Snyder, C. R. R., & Davidson, B. J. (1980). Attention and the Detection of Signals. Journal of Experimental Psychology: General, 109(2), 160-174.
Potter MC, Wyble B, Hagmann CE, McCourt ES (2014). Detecting meaning in RSVP at 13 ms per picture. Attention, Perception, & Psychophysics, 76, 270-279.
Rayner, K., & Morrison, R. M. (1981). Eye movements and identifying words in parafoveal vision. Bulletin of the Psychonomic Society, 17(1), 135-138.
Rayner, K. (1998). Eye movements in reading and information processing: 20 years of research. Psychological Bulletin, 124(3), 372-422.
Rayner, K., Well, A. D., Pollatsek, A., & Bertera, J. H. (1982). The availability of useful information to the right of fixation in reading. Perception & Psychophysics, 31, 537-550.
Rayner, K., Fischer, M. H., & Pollatsek, A. (1998). Unspaced text interferes with both word identification and eye movement control. Vision Research, 38, 1129-144.
Rayner, K. (1979). Eye guidance in reading: Fixation locations within words. Perception, 8(1), 21-30.
StatCounter(2016)。Mobile and tablet internet usage exceeds desktop for first time worldwide。Retrieved from http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide.
Stover, M., & Zink, S. D. (1996). World Wide Web home page design: patterns and anomalies of higher education library home pages. Reference Service Review,24(3), 7-20.
Student (1907), On the Error of Counting with A Aemacytometer, Biometrika, vol. 5, pp. 351-360, February 1, 1907 1907.
Student (1908), Probable Error of a Correlation Coefficient, Biometrika, vol. 6, pp. 302-310, September 1, 1908 1908.
Theeuwes, J., Kramer, A. F., & Atchley, P. (1999). Attentional Effects on Preattentive Vision: Spatial Precues Affect the Detection of Simple Features. Journal of Experimental Psychology: Human Perception and Performance, 25(2), 341-347.
Tsal, Y. (1994). Effects of Attention on Perception of Features and Figural Organization. Perception, 23(4), 441-452.
Van Essen, D. C., Anderson, C. H., & Felleman, D. J. (1992). Information processing in the primate visual system: An integrated systems perspective. Science, 255(5043), 419-423.
Vonk, W., Radach, R. & van Rijn, H. (2000). Eye guidance and the saliency of word beginnings in Reading Text. In A. Kennedy, R. Radach, D. Heller & J. Pynte (Eds.), Reading as a perceptual process. Amsterdam: Elsevier Science.
Warren, R., Diller, D. E. and Sutton, J. L. (2005). Simulating scenarios for research on culture and cognition using a commercial role‐play game. Proceedings of the 37th conference on Winter simulation, Dec 04-07, 2005, Orlando, Florida.
W3C (2016), Media types, Retrieved from https://www.w3.org/TR/2016/WD-CSS22-20160412/media.html.
W3C (2012), Media Queries, Retrieved from ttps://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/.
White, S. J. (2008). Eye movement control during reading: Effects of word frequency and orthographic familiarity. Journal of Experimental Psychology: Human Perception and Performance, 34(1), 205-223.
Wolverton, G. S., & Zola, D. (1983). The temporal characteristics of visual information extraction during reading. In K. Rayner (Ed.), Eye movements in reading: Perceptual and language processes. Academic Press.
Yarbus, A. L. (1967). Eye Movements and Vision. Plenum Press, New York.
Yang, J., Wang, S., Chen, H.-S., & Rayner, K. (2009). The time course of semantic and syntactic processing in Chinese sentence comprehension: Evidence from eye movements. Memory & Cognition, 37(8), 1164-1176.
Yeh, S., Chen I., De Valois, K. K., & De Valois, R. L. (1996). Figural aftereffects and spatial attention. Journal of Experimental Psychology: Human Perception & Performance, 22(2), 446-460.
Young, L. R., & Sheena, D. (1975). Survey of eye movement recording methods. Behavior Research Methods and Instrumentation, 7(5), 397-429.
Zaccara, G., Baldini, S., Gangemi, P. F., Messori, A., Parigi A. & Nencioni, C. (1991). A new method for analyzing smooth-pursuit eye movements. The Italian Journal of Neurological Sciences, 12.
Zigmond, M. J., Bloom, F. E., Landis, S. C., Roberts, J. L., & Squire, L. R. (1999). Fundamental Neuroscience. San Diego: Academic Press.