| 研究生: |
王喻柔 Wang, Yu-Rou |
|---|---|
| 論文名稱: |
響應式網頁於跨裝置一致性之元素設計表現 Effects of RWD Website User Interface Elements on Cross-device Consistency |
| 指導教授: |
何俊亨
Ho, Cheng-Heng |
| 學位類別: |
碩士 Master |
| 系所名稱: |
規劃與設計學院 - 工業設計學系 Department of Industrial Design |
| 論文出版年: | 2019 |
| 畢業學年度: | 108 |
| 語文別: | 英文 |
| 論文頁數: | 114 |
| 中文關鍵詞: | 跨裝置一致性 、響應式網頁設計 、使用者介面 、使用者體驗 |
| 外文關鍵詞: | cross-device consistency, responsive web design, user interface, user experience |
| 相關次數: | 點閱:153 下載:40 |
| 分享至: |
| 查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報 |
隨著行動技術的發展,現代人相對於過去只使用單一裝置,更為習慣切換多種裝置瀏覽網頁,使用多裝置上網成為主流。因應多裝置的使用趨勢,由於響應式網頁設計在不同螢幕解析度上,可自動調整網頁在不同裝置上版面的編排,故被廣泛應用於跨裝置上以提供連貫的使用者體驗,為目前跨裝置設計的趨勢,而不同於傳統使用者體驗考慮的是使用者與產品互動的感受,跨平台的使用者體驗與多種裝置間的感知及互動有關,其中又以一致性為使用者在感知裝置間連結及快速適應裝置瀏覽的要素,故了解響應式網頁的元素於跨裝置一致性的設計表現,可供網頁設計師為跨裝置需求設計響應式網頁之參考依據。
本研究透過焦點團體搜集多裝置使用者在區塊式、磚牆式以及區塊式與磚牆式並用等3種響應式網頁上,對於跨裝置一致性之網頁元素及其設計表現的看法,探討響應式網頁上元素設計表現與跨裝置一致性的關係以及跨裝置一致性的使用者體驗,以歸結出在響應式網頁上,影響跨裝置一致性的元素設計表現,並將研究結果整理成表,以提供響應式網頁設計時元素設計表現之設計參考。
With the development of mobile technologies, modern people have become more accustomed to using multiple devices to browse the Web as compared to using a single device, as has been the case in the past. In response to the trend of using multiple devices, Responsive Web Design (RWD) has become the mainstream in cross-device design, which can be used to automatically adjust the layout of web pages at different screen resolutions. It is thus widely used across devices to provide a consistent user experience. Different from the traditional user experience that considers the user's interaction with the product, the cross-device user experience is related to the perception and interaction between multiple devices. To accomplish this, consistency is an important factor, as it helps users perceive the connection between devices and quickly adapt to browsing. Therefore, understanding the effects of designed RWD elements on cross-device consistency can provide web designers with a reference that can be used as a basis for designing and presenting RWD websites across devices.
The purpose of this research is to explore the user experience related to cross-device consistency and the relationship between cross-device consistency and the designs of elements on RWD websites. In this study, a focus group was used to collect multi-device users’ views on design elements contributing to cross-device consistency on three types of responsive web designs: block-based, brick-wall-based, and block-and-brick-wall-combined-based, so as to summarize the designs of website elements that affect cross-device consistency on RWD websites. The research results are presented in the form of a table to provide a reference for developing the presentation of design elements on RWD websites.
山崎大助. (2015). Responsive web design 自動調適型網頁程式設計 : 讓網頁在電腦/平板/手機完美展現: 旗標.
王孝仁. (2016). 探討響應式網站設計於跨裝置使用者經驗之研究. (碩士), 長庚大學, 桃園縣. Retrieved from https://hdl.handle.net/11296/3ckmg5
范瑞鈴. (2016). 「食物醫生」上班族健康飲食宜忌之響應式網站創作. (碩士), 國立雲林科技大學, 雲林縣. Retrieved from https://hdl.handle.net/11296/bvyd4b
許誌謙. (2017). 響應式網頁設計元素對使用者經驗影響之研究. (碩士), 國立臺中教育大學, 台中市. Retrieved from https://hdl.handle.net/11296/9azyhq
陳志杰. (1999). 使用者介面操作模式一致性之研究. (碩士), 國立雲林科技大學, 雲林縣. Retrieved from https://hdl.handle.net/11296/5a4zy3
創市際. (2019). 2018 年台灣網路使用概況回顧. Retrieved from https://www.ixresearch.com/reports/創市際雙週刊第一二七期-20190304
蘇子淵, & 何宏文. (2015). 跨平台網頁介面 RWD 對於網頁瀏覽之視覺傳達的影響. (19), 19-38.
Alben, L. (1996). Quality of experience: defining the criteria for effective interaction design. 3(3), 11-15.
Axelsson, A. (2012). Consistency in Web Design from a User Perspective.
Baturay, M. H., & Birtane, M. (2013). Responsive web design: a new type of design for web-based instructional content. 106, 2275-2279.
comScore. (2018). Global Digital Future in Focus 2018. Retrieved from https://www.comscore.com/Insights/Presentations-and-Whitepapers/2018/Global-Digital-Future-in-Focus-2018
Denis, C., & Karsenty, L. (2005). Inter‐Usability of Multi‐Device Systems – A Conceptual Framework. In (pp. 373-385).
Desmet, P., & Hekkert, P. (2007). Framework of product experience. 1(1), 57-66.
Doyle, M. (2011). Responsive Web Design Demystified. Retrieved from https://www.elated.com/responsive-web-design-demystified/
Ethan, M. (2010). Response Web Design.
Garrett, J. J. (2010). Elements of user experience, the: user-centered design for the web and beyond: Pearson Education.
Garrett, J. J. (2011). THE ELEMENTS OF USER EXPERIENCE.
Google. (2012, April 30). Responsive design – harnessing the power of media queries. Retrieved from https://webmasters.googleblog.com/2012/04/responsive-design-harnessing-power-of.html
Grudin, J. (1989). The case against user interface consistency. 32(10), 1164-1173.
Hassenzahl, M. (2008). User experience (UX): towards an experiential perspective on product quality. Paper presented at the Proceedings of the 20th Conference on l'Interaction Homme-Machine, Metz, France.
Hassenzahl, M., & Tractinsky, N. (2006). User experience-a research agenda. 25(2), 91-97.
Kadlec, T. (2012). Implementing Responsive Design: Building sites for an anywhere, everywhere web: New Riders.
Kellogg, W. A. (1987). Conceptual consistency in the user interface: Effects on user performance. In Human–Computer Interaction–INTERACT'87 (pp. 389-394): Elsevier.
Kellogg, W. A. (1989). The dimensions of consistency. 9-20.
Levin, M. (2014). Designing multi-device experiences: An ecosystem approach to user experiences across devices: " O'Reilly Media, Inc.".
Levin, M. (2015). Multi-Device 體驗設計:處理跨裝置使用者體驗的生態系統方法.
Majrashi, K., Hamilton, M., & Uitdenbogerd, A. L. (2016). Cross-platform cross-cultural user experience. Paper presented at the Proceedings of the 30th International BCS Human Computer Interaction Conference: Fusion!
Matsuo, T., Yang, W., & Shibata, N. (2018, 2018//). Consistency of Visual Information in Web Design - Focusing on Responsiveness of a University Website. Paper presented at the Advances in Communication of Design, Cham.
Nene, A. R. (2015). Responsive Web Design. International Journal Of Engineering And Computer Science, 4(3), 10772-10774.
Nielsen, J. (2002). Coordinating user interfaces for consistency: Morgan Kaufmann.
Norman, D., Miller, J., & Henderson, A. (1995). What You See, Some of What's in the Future, And How We Go About Doing It: HI at Apple Computer.
Norman, D. A. (1988). The psychology of everyday things (Vol. 5): Basic books New York.
Peterson, C. (2014). Learning responsive web design: a beginner's guide: " O'Reilly Media, Inc.".
Rauschenberger, M., Schrepp, M., Cota, M. P., Olschner, S., Thomaschewski, J. J. I. J. o. A. I., Multimedia., I., & 39-45. (2013). Efficient measurement of the user experience of interactive products. How to use the user experience questionnaire (ueq). example: spanish language version.
Rekhi, S. (2013, April 26). Square pegs and round holes: How to make e-learning more mobile responsive. Retrieved from https://saffroninteractive.com/square-pegs-and-round-holes/
Richter, K., Nichols, J., Gajos, K., & Seffah, A. (2006). The many faces of consistency in cross-platform design.
Schlatter, T., & Levinson, D. (2013). Chapter 1 - Consistency. In T. Schlatter & D. Levinson (Eds.), Visual Usability (pp. 3-31). Boston: Morgan Kaufmann.
Sharkie, C., & Fisher, A. (2013). Jump start responsive web design: SitePoint.
Tanaka, T., Eberts, R. E., & Salvendy, G. J. H. F. (1991). Consistency of human-computer interface design: Quantification and validation. 33(6), 653-676.
Thuring, M., & Mahlke, S. (2007). Usability, aesthetics and emotions in human–technology interaction. 42(4), 253-264.
Turan, B. O., & ŞAHİN, K. (2017). Responsive web design and comparative analysis of development frameworks. 7(1), 110-121.
Wäljas, M., Segerståhl, K., Väänänen, K., & Oinas-Kukkonen, H. (2010). Cross-platform service user experience: A field study and an initial framework.
Yang, S., Wang, Y., & Wei, J. (2014). Integration and consistency between web and mobile services (Vol. 114).