簡易檢索 / 詳目顯示

研究生: 林政緯
Cheng-Wei Lin
論文名稱: 自適應式網頁之主選單設計
The evaluation of main menu for Responsive Web Design
指導教授: 林久翔
Chiuhsiang-Joe Lin
口試委員: 林承哲
Cheng-Jhe Lin
林瑞豐
none
學位類別: 碩士
Master
系所名稱: 管理學院 - 工業管理系
Department of Industrial Management
論文出版年: 2016
畢業學年度: 104
語文別: 英文
論文頁數: 58
中文關鍵詞: 主選單設計自適應式網頁設計準則
外文關鍵詞: Main menu design, Design guideline of Responsive Web Design (RWD)
相關次數: 點閱:391下載:0
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報

儘管過去的文獻,已經在網頁設計的主題上進行過廣泛的討論(Duyne, Landay & Hong, 2002; Leavitt, & Shneiderman, 2006; Nielsen, 1999),但是對於自適應式網頁設計的研究仍相對缺乏。自適應式網頁是一種新型態的網頁設計技術,一組程式即能提供在不同螢幕大小的裝置間,該技術易能透過偵測各裝置間的瀏覽器、裝置規格或樣式,提供最適合的內容與擺設給使用者。近期的研究對於處理使用者體驗與跨裝置間的設計也有愈高的趨勢(Levin, 2014),然而,過去研究對於自適應式網頁之主選單設計並沒有專注在其使用性上,甚至對於跨裝置間的設計都沒有提供一致性設計準則。有鑑於此,本研究主要目的為探討各裝置間的轉換問題,並加以應用於自適應式網頁之主選單設計以及準則的發展。本研究採用實驗法來驗證假設,透過20位受測者進行網頁操作與眼動測試,其中實驗包含情境(二水準)與網頁樣式(六水準)兩種因子。

研究發現情境因子在主觀評估(F = 6.546, p < 0.050)與操作時間(F = 11.812, p < 0.010)的衡量下有顯著的差異,且自適應式網頁選單樣式二擁有垂直佈置與單一點擊展開的特性,能提供較好的操作體驗於兩種情境水準中。故此可得知本研究對於跨裝置之影響以及自適應式網頁設計準則之初步發展有所貢獻。


Web design has been extensively investigated (Duyne, Landay & Hong, 2002; Leavitt, & Shneiderman, 2006; Nielsen, 1999). However, the Responsive Web Design (RWD) is relatively unexplored. The RWD was a web development approach that provides an optimal viewing and interaction experience based on browser, device, or feature detection. There has been an increasing interest in the relationship between user experience and multi-device (Levin, 2014). However, there was no previous study mentioned whether the usability of the main menu of RWD when users access the same website in a multi-device should be followed by some guidelines. Therefore, the aim of this study was to investigate the navigational problem of inexperienced multi-device user. This study focused on the main menu design of RWD and how the characteristics of scenario influence users or reorganize the elements, shuffle, and layout menu pages among devices as the complex part. This research adapted experimental method, 20 participants performed six eye tracking test in transition (laptop to mobile) and non- transition (only mobile) scenarios with six different RWD web menu designs.

The results show that the scenarios had statistically significant difference in the subjective assessments (F = 6.546, p < 0.050) and the completion time (F = 11.812, p < 0.010). This study found that the type 2 of web menu design was the best for both scenarios because it contains vertical and predictable menu design. The findings suggest the designers to continue improving the main menu design of RWD based on the result of subjective scores. The implication of this study is to provide a guideline in designing RWD main menu.

摘要 IV ABSTRACT V ACKNOWLEDGEMENTS VI CONTENTS VII LIST OF FIGURES VI LIST OF TABLES VII CHAPTER 1 INTRODUCTION 1 1.1 Background and motivation 1 1.2. Study Objective 3 1.3. Study Hypothesis 3 CHAPTER 2 LITERATURE REVIEW 5 2.1. Responsive web design 5 2.2. Menu design types and features 6 2.3. Eye tracking in web design 7 CHAPTER 3 METHOD 9 3.1. Participants 9 3.2. Apparatus and Tools 9 3.3. Experimental Design 12 3.4. Experimental Procedure, Tasks, and Stimuli 13 CHAPTER 4 RESULTS 16 4.1. Multivariate analysis 16 4.2. Univariate analysis 18 CHAPTER 5 DISCUSSION 30 5.1. Objective 1 32 5.2. Objective 2 32 5.3. Objective 3 33 CHAPTER 6 CONCLUSIONS 36 6.1. Conclusions 36 6.2. Limitations 36 6.3. Future Research 36 REFERENCES 37 APPENDIX I - System Usability Scale questionnaire (SUS) 42 APPENDIX II – The diagram of RWD prototypes 45

Bangor, A., Kortum, P., & Miller, J. (2009). Determining what individual SUS scores mean: Adding an adjective rating scale. Journal of usability studies, 4(3), 114-123.
Baturay, M. H., & Birtane, M. (2013). Responsive web design: A new type of design for web-based instructional content. Procedia-Social and Behavioral Sciences, 106, 2275-2279.
Bernard, M., & Hamblin, C. (2003). Cascading versus indexed menu design.Usability News, 5(1).
Brooke, J. (1996). SUS-A quick and dirty usability scale. Usability evaluation in industry, 189(194), 4-7.
Card, S. K., Moran, T. P., & Newell, A. (1980). Computer text-editing: An information-processing analysis of a routine cognitive skill. Cognitive psychology, 12(1), 32-74.
Czerwinski, M. P., & Larson, K. (2002). Cognition and the Web: moving from theory to Web design (pp. 147-165). Erlbaum: NJ.
Davidson, M. L. (1972). Univariate versus multivariate tests in repeated-measures experiments. Psychological Bulletin, 77(6), 446.
Duyne, D. K. V., Landay, J., & Hong, J. I. (2002). The design of sites: patterns, principles, and processes for crafting a customer-centered Web experience. Addison-Wesley Longman Publishing Co., Inc..
Ehmke, C., & Wilson, S. (2007, September). Identifying web usability problems from eye-tracking data. In Proceedings of the 21st British HCI Group Annual Conference on People and Computers: HCI... but not as we know it-Volume 1(pp. 119-128). British Computer Society.
Farkas, D. K., & Farkas, J. B. (2000). Guidelines for designing web navigation.Technical communication, 47(3), 341-358.
Gardner, B. S. (2011). Responsive web design: Enriching the user experience.Sigma Journal: Inside the Digital Ecosystem, 11(1), 13-19.
Goldberg, J. H., & Kotval, X. P. (1999). Computer interface evaluation using eye movements: methods and constructs. International Journal of Industrial Ergonomics, 24(6), 631-645.
Goldberg, J. H. (2014). Measuring Software Screen Complexity: Relating Eye Tracking, Emotional Valence, and Subjective Ratings. International Journal of Human-Computer Interaction, 30(7), 518-532.
Gutwin, C., & Fedak, C. (2004, May). Interacting with big interfaces on small screens: a comparison of fisheye, zoom, and panning techniques. InProceedings of Graphics Interface 2004 (pp. 145-152). Canadian Human-Computer Communications Society.
Hakala, T., Lehikoinen, J., & Aaltonen, A. (2005, September). Spatial interactive visualization on small screen. In Proceedings of the 7th international conference on Human computer interaction with mobile devices & services (pp. 137-144). ACM.
Harb, E., Kapellari, P., Luong, S., & Spot, N. (2011). Responsive Web Design.
Hochheiser, H., & Shneiderman, B. (2000). Performance benefits of simultaneous over sequential menus as task complexity increases. International Journal of Human-Computer Interaction, 12(2), 173-192.
Holmqvist, K., Nyström, M., Andersson, R., Dewhurst, R., Jarodzka, H., & Van de Weijer, J. (2011). Eye tracking: A comprehensive guide to methods and measures. Oxford University Press.
Hornbæk, K., & Hertzum, M. (2007). Untangling the usability of fisheye menus.ACM Transactions on Computer-Human Interaction (TOCHI), 14(2), 6.
Hornof, A. J., & Halverson, T. (2003, April). Cognitive strategies and eye movements for searching hierarchical computer displays. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 249-256). ACM.
Jacob, R. J., & Karn, K. S. (2003). Eye tracking in human-computer interaction and usability research: Ready to deliver the promises. Mind, 2(3), 4.
Jones, M., Marsden, G., Mohd-Nasir, N., Boone, K., & Buchanan, G. (1999). Improving Web interaction on small displays. Computer Networks, 31(11), 1129-1137.
Kalbach, J., & Bosenick, T. (2006). Web page layout: A comparison between left-and right-justified site navigation menus. Journal of Digital Information, 4(1).
Kane, S. K., Karlson, A. K., Meyers, B. R., Johns, P., Jacobs, A., & Smith, G. (2009). Exploring cross-device web use on PCs and mobile devices. In Human-Computer Interaction–INTERACT 2009 (pp. 722-735). Springer Berlin Heidelberg.
Kim, K., Jacko, J., & Salvendy, G. (2011). Menu design for computers and cell phones: Review and reappraisal. Intl. Journal of Human–Computer Interaction,27(4), 383-404.
Kingsburg, J. R., & Andre, A. D. (2004, September). A Comparison of Three-Level Web Menu Navigation Structures. In Proceedings of the Human Factors and Ergonomics Society Annual Meeting (Vol. 48, No. 13, pp. 1513-1517). SAGE Publications.
Leavitt, M. O., & Shneiderman, B. (2006). Research-based web design & usability guidelines. US Department of Health and Human Services.
Levin, M. (2014). Designing Multi-device Experiences: An Ecosystem Approach to User Experiences Across Devices. " O'Reilly Media, Inc.".
Marcotte, E. (2011). Responsive web design. Editions Eyrolles.
Nielsen, J. (1999). Designing web usability: The practice of simplicity. New Riders Publishing.
Niemelä, M., & Saarinen, J. (2000). Visual search for grouped versus ungrouped icons in a computer interface. Human Factors: The Journal of the Human Factors and Ergonomics Society, 42(4), 630-635.
Peterson, C. (2014). Learning Responsive Web Design: A Beginner's Guide. " O'Reilly Media, Inc.".
Piolat, A., Roussey, J. Y., & Thunin, O. (1997). Effects of screen presentation on text reading and revising. International Journal of Human-Computer Studies,47(4), 565-589.
Podjarny, G. (2014). Guy’s pod - RWD Ratio in Top 100,000 websites refined. Technical report, Guy’s pod.
Salvucci, D. D., & Goldberg, J. H. (2000, November). Identifying fixations and saccades in eye-tracking protocols. In Proceedings of the 2000 symposium on Eye tracking research & applications (pp. 71-78). ACM.
Schade, A. (2014). Responsive web design (RWD) and user experience.Nielsen Nor.
Schwarz, E., Beldie, I. P., & Pastoor, S. (1983). RESEARCH NOTE A Comparison of Paging and Scrolling for Changing Screen Contents by Inexperienced Users. Human Factors: The Journal of the Human Factors and Ergonomics Society, 25(3), 279-282.
Strandvall, T. (2009). Eye tracking in human-computer interaction and usability research. In Human-Computer Interaction–INTERACT 2009 (pp. 936-937). Springer Berlin Heidelberg.
Smith, M. (2014). With the use of ‘Responsive Web Design’techniques, is it truly possible to create a website that caters for all devices?. Discovery, Invention & Application, (1).
Watters, C., Duffy, J., & Duffy, K. (2003). Using large tables on small display devices. International Journal of Human-Computer Studies, 58(1), 21-37.
Yang, Y. L. (2015). Developing of an Usability Checklist for Responsive Web Design Websites.
Zaphiris, P. G. (2000, July). Depth vs Breath in the Arrangement of Web Links. In Proceedings of the Human Factors and Ergonomics Society Annual Meeting(Vol. 44, No. 4, pp. 453-456). SAGE Publications.

無法下載圖示 全文公開日期 2021/02/05 (校內網路)
全文公開日期 本全文未授權公開 (校外網路)
全文公開日期 本全文未授權公開 (國家圖書館:臺灣博碩士論文系統)
QR CODE