臺灣博碩士論文加值系統

網頁發展至今二十餘年，市場已然成熟，但仍不乏見到許多對使用者不友善的網頁。漂亮的視覺設計搭配糟糕的操作性、在行動裝置上糟糕的呈現、缺乏適當的安排導致迷失。不同於藝術，好的設計不只是視覺和情緒上吸引力，更是要拿來使用的，缺乏以使用者為主體的設計，再好的視覺都難以達到傳達的目的。

本創作研究先以分析使用者閱讀網頁的模式，歸納出符合使用者習性的設計原則及易用性指標作為創作設計的基點，將設計回歸到以人為主體：是否能夠藉由定義問題和透過最佳的解法來解決人們的問題。並透過分析視覺動態元素在視覺傳達中給予使用者的幫助，將其與網頁設計作聯結，令使用者參與網頁本身，以此作為創作核心。希冀能透過此創作過程尋找視覺與體驗的平衡點，在大量同質性網頁設計模式的現況下找尋不同的可能性。最終使創作能反饋至設計原則的應用與可及性，及透過標準化帶來網站永續的經營。

The market of webpage design has become mature after twenty years of development, but there are still many websites that are unfriendly to the users. Some have beautiful visual design but come with bad usability, some have poor user experiences on mobile devices, some are lack of proper arrangement causing users to go astray. Unlike other forms of art, a good design should not only be visually and emotionally attracting, but also need to be suitable for use. Without a good user experience, any design will fail to meet its purpose to deliver messages from the designer, no matter how good the visual effect is.

This study of creation first analyzed the pattern of how user read a webpage, induced a principle of designing and an indicator of usability that is fit with the habit of users, to create the baseline for design which is user-oriented: Can we solve people's problem via defining question and crack them up with best solutions. The study also analyzed how dynamic visual elements help users in visual communications, link them with the webpage design, let the users participate in the webpage. The author used the result of this study as the core of designing, hope to find the balance between visual and user experience, trying to make a difference while many webpages are using the same way of designing.

中文摘要 i
英文摘要 ii
謝誌 iii
目錄 iv
表目錄 vii
圖目錄 viii
一、緒論 1
1.1 研究動機 1
1.2 研究目的 1
1.3 研究範圍與限制 2
1.4 研究方法與步驟 3
1.5 名詞釋義 3
1.6 研究流程 6
二、文獻探討 7
2.1 網頁的瀏覽模式 7
2.1.1 閱讀的行為模式 7
2.1.2 瀏覽的路徑分析 8
2.1.3 閱讀行為的改變 9
2.1.4 瀏覽裝置的改變 11
2.2 使用者體驗 14
2.2.1 網頁效能 14
2.2.2 瀏覽網頁產生的問題 17
2.2.3 沉浸設計 18
2.2.4 易用性與使用者體驗 19
2.2.5 行為的一致性 20
2.3 網頁設計指標 20
2.4 網頁設計的趨勢 23
2.4.1 極簡主義 23
2.4.2 極簡主義的元素 26
2.4.3 小結 28
三、創作元素分析與實驗 29
3.1 創作環境 29
3.1.1 創作媒介的選擇 29
3.1.2 運用的工具 31
3.2 動態呈現的分析 33
3.2.1 視差 34
3.2.2 細微動畫與互動 36
3.2.3 光箱 38
3.2.4 輸入介面的應用 39
3.3 實作實驗 41
四、實務創作 43
4.1 創作主題 43
4.2 創作背景 43
4.3 創作理念 44
4.4 創作說明 44
4.4.1 網頁架構 47
4.4.2 版面安排 47
4.4.3 跨裝置的呈現 48
4.5 創作解析 49
4.5.1 首頁選單 49
4.5.2 主題呈現 52
4.5.3 圖示的應用 56
4.5.4 細微動畫的應用 58
五、結論 61
5.1 創作研究的過程 61
5.2 隱私與體驗的爭戰 62
5.3 創作研究結論 63
5.4 研究建議與後續研究方向 65
參考文獻 66
附錄一 73
附錄二 75

【1】 International Organization for Standardization （2009）. “Ergonomics of human
system interaction - Part 210: Human-centered design for interactive systems
（formerly known as 13407）”ISO F±DIS 9241-210:2009.
【2】 翟本瑞（2001）。＂網路閱讀與行為模式改變的社會學考察（初探）＂。
網路社會學通訊期刊，14 期。
【3】 J. Nielsen. （2008, May）. How Little Do Users Read?. Retrieved July 24, 2018,
from: https://www.nngroup.com/articles/how-little-do-users-read/
【4】 J. Nielsen. （1997, October）. How Users Read on the Web. Retrieved July
24, 2018, from: https://www.nngroup.com/articles/how-users-read-on-the-web/
【5】 G. McGovern. （2008, October）. Block reading: how we read on the Web.
Retrieved July 27, 2018, from: http://gerrymcgovern.com/block-reading-howwe-
read-on-the-web/
【6】 唐大論，莊賢智，“新聞圖文左右空間配置對視線影響之初探”，銘傳大
學設計國際學術研討會，2004 年11 月，第3 頁。
【7】 J. Nielsen. （2000, May）. Eyetracking study of web reader. Retrieved November
17, 2017, from: https://www.nngroup.com/articles/eyetracking-study-of-webreaders/
【8】 J. Nielsen. （2007, June）. Change vs. Stability in Web Usability Guidelines.
Retrieved July 17, 2018, from: https://www.nngroup.com/articles/usabilityguidelines-
change/
【9】 T. Fessenden. （2018, April）. Scrolling and Attention. Retrieved July 17, 2018,
from: https://www.nngroup.com/articles/scrolling-and-attention/
67
【10】 J. Nielsen. （1997, December）. Changes in Web Usability Since 1994. Retrieved
July 20, 2018, from: https://www.nngroup.com/articles/changes-in-webusability-
since-1994/
【11】 Clicktale. （2007, October）. Clicktale scrolling research report V2.0 – Part 1:
visibility and scroll reach. Retrieved July 17, 2018, from: http://bit.ly/2v0Z3O6
【12】 J. Nielsen. （2010, March）. Scrolling and Attention （Original Research Study）.
Retrieved July 28, 2018 from: https://www.nngroup.com/articles/scrolling-andattention-
original-research/
【13】 J. Nielsen. （2018, April）. Scrolling and Attention. Retrieved July 28, 2018
from: https://www.nngroup.com/articles/scrolling-and-attention/
【14】 C. Steven. （2003, March）. Progressive Enhancement and the Future of Web
Design. Retrieved January 8, 2016, from:
http://hesketh.com/publications/progressive_enhancement_and_the_future_of_
web_design.html
【15】 C. Buckler. （2009, September）. Progressive Enhancement and Graceful
Degradation: an Overview. Retrieved October 13, 2017, from:
https://www.sitepoint.com/progressive-enhancement-graceful-degradationbasics/
【16】 M. Ethan. （2010, May）. Responsive Web Design:A List Apart. Retrieved
October 13, 2016, from: http://alistapart.com/article/responsive-web-design
【17】 蘇子淵，何宏文（2015）。＂跨平台網頁介面RWD 對於網頁瀏覽之視覺
傳達的影響＂，商業設計學報，19 期，第22-23 頁。
【18】 A. Gustafson. ADAPTIVE WEB DESIGN: Crafting Rich Experiences with
Progressive Enhancement. Tennessee:Easy Readers, U.S.A., 2011.
68
【19】 Kelvin. （2013, August） Responsive Web Design （RWD） 和 Adaptive Web
Design （AWD）. Retrieved January 8, 2017, from: http://bit.ly/2MdFTyq
【20】 J. Preece, D. Benyon & G. Davies. A Guide to Usability-Human Factors in
Computing, Addison-Wesley Longman Publishing Co., Inc., Boston, MA, 1993.
【21】 R. Singer. （2015, January）, What UI really is （and how UX confuses matters）.
Retrieved December 24, 2016, from: https://medium.com/@rjs/what-ui-reallyis-
and-how-ux-confuses-matters-8b848cafaa88#.nk5pv7b1d
【22】 P. Walton & S. Panicker, （2017, May）, Web Performance: Leveraging the
Metrics that Most Affect User Experience （Google I/O '17）. Retrieved July
17, 2018, from: https://youtu.be/6Ljq-Jn-EgU
【23】 黎佩芬、賴建都 。＂網路重度使用者對網頁訊息認知與瀏模式之研究－以
台灣購物網站商品訊息呈現為例＂，《電子商務學報》，第十三卷，第三
期，2011 年09 月，第519 頁。
【24】 D. Jakes, S. Pennington, M. E., & H. A. Knodle. “Using the internet to promote
inquiry based learning”. MIS Quarterly, Vol. 28, No. 2, 2006, pp. 15-35.
【25】 劉純芳。”全球資訊網使用者瀏覽行為分析”，碩士論文，輔仁大學，2000。
【26】 Bawden, D., Holtham, C., and Courtenay, N. “Perspectives on information
overload,” Aslib Proceedings, vol. 51, No.8, 1999, pp. 249-255.
【27】 J. Conklin. “Hypertext: An Introduction and Survey”. IEEE Computer,Vol. 20,
Issue. 9, September 1987, pp. 17-41.
【28】 M. Nelson. We have the information you want, but getting it will cost you: Being
held hostage by information overload.” Crossroads - Special issue on the Internet,
Vol. 1, Issue. 1, September 1, 1994, pp. 11-15.
【29】 The Usability Professionals’ Association. （2006）, UPA 2005 member and
salary survey. Retrieved January 2, 2017, from:
69
http://www.usabilityprofessionals.org/usability_resources/surveys/2005_upa_s
alary_survey.pdf
【30】 M. Csikszentmihalyi. “Beyond Boredom and Anxiety”, Jossey-Bass, San
Francisco, 1975.
【31】 M. Csikszentmihalyi, “ Flow: The psychology of optimal experience. ” ,
Harper & Row, New York, 1990.
【32】 D. Johnson, & J. Wiles, “Effective affective user interface design in games,”
Journal of Ergonomics, 46, October 2003, pp. 1332-1345.
【33】 M. Csikszentmihalyi. （ 2004, February ） , Flow, the secret to happiness.
Retrieved July 24, 2018, from:
https://www.ted.com/talks/mihaly_csikszentmihalyi_on_flow
【34】 D.L. Hoffman, & T. Novak, （1996）, “Marketing in hypermedia computermediated
environments: conceptual foundations’”, Journal of Marketing, Vol.
60, No. 3, July 1996 pp. 50-68.
【35】 A. King. （2008）, Flow in Web Design. Retrieved July 29, 2018, from:
http://www.websiteoptimization.com/speed/2/2opt.pdf
【36】 T. van Gorp. （2008, August）, Design for Emotion and Flow. Retrieved July
29, 2018, from: http://boxesandarrows.com/design-for-emotion-and-flow/
【37】 T. Baekdal. （2006, June）, The Battle Between Usability and User-Experience.
Retrieved August 02, 2018, from: https://www.baekdal.com/thoughts/usabiltyvs-
user-experience-battle/
【38】 D. Chisnell （2010, June）, Beyond Frustration: Three levels of happy design.
Retrieved August 02, 2018, from: http://uxmag.com/articles/beyond-frustrationthree-
levels-of-happy-design
【39】 K. Sierra （2005, March）, Can you have too much ease-of-use?. Retrieved
August 03, 2018, from:
http://headrush.typepad.com/creating_passionate_users/2005/03/can_you_have
_to_1.html
【40】 N. Shedroff （2010）, Meaningful Innovation Relies on INteraction and Service
Design. Retrieved August 03, 2018, from: https://vimeo.com/9659499
【41】 T. Fessenden. （2018, March）, The Principle of Commitment and Behavioral
Consistency. Retrieved August 05, 2018, from:
https://www.nngroup.com/articles/commitment-consistency-ux/
【42】 R.B. Cialdini，Influence: Science and Practice, Allyn and Bacon, 2008.
【43】 J. Nielsen. Usability Engineering. AP Professional, U.S.A, 1993.
【44】 莊伯仲，”台灣政黨網站設計：啟發式評估法之觀點”資訊社會研究， 第12
期，2017 年1 月，第251 頁。
【45】 工業策進會創新應用服務研究所，（2015，July），資策會FIND（2015H1）
Retrieved October 13, 2016, from:
https://www.iii.org.tw/Press/NewsDtl.aspx?nsp_sqno=1560&fm_sqno=14
【46】 遠見雜誌（2013, October），遠見民調：台灣民眾網路行為調查Retrieved
October 13, 2016, from: https://www.gvm.com.tw/article.html?id=24904
【47】 Google Firebase Analytics. （2016, July）, Google Asia Smartphone Apps
Research. Retrieved October 20, 2016, from:
https://www.thinkwithgoogle.com/intl/en-apac/trends-and-insights/mobileapps-
in-apac-2016-report/
【48】 S. Jobs, （2010, April）,Thoughts on Flash. Retrieved July 29, 2017, from:
https://www.apple.com/hotnews/thoughts-on-flash/
【49】 S. Diller, N. Shedroff & D. Rhea. Making Meaning: How Successful Businesses
Deliver Meaningful Customer Experiences, New Riders Press, U.S.A, 2015.
【50】 D.A. Norman. Living With Complexity. Mit Pr, U.S.A., 2010.
【51】 Shandy Tsai, （2017, October）, 2017 網頁設計流行趨勢Web Design Trend.
Retrieved July 15, 2018, from: http://bit.ly/2LmYYyA
【52】 J. Nielsen, （2011, January）, Top 10 Mistakes in Web Design. Retrieved July
27, 2018, from: https://www.nngroup.com/articles/top-10-mistakes-web-design/
【53】 A. Qayyum, （2014）, 5 reasons why parallax scrolling is bad for your website.
Retrieved July 15, 2018, from: http://bit.ly/2LlJrzd
【54】 W3Techs.com. （2017, January）, Usage of JavaScript libraries for websites.
Retrieved January 8, 2017, from:
https://w3techs.com/technologies/overview/javascript_library/all。
【55】 J. Harris, （2005, November）, The Importance Of Labels. Retrieved August 4,
2018, from:
https://blogs.msdn.microsoft.com/jensenh/2005/11/01/the-importance-oflabels/
【56】 P. Høgenhaug, （2011, May） , Usability in Icons. Retrieved August 4, 2017
from: http://stiern.com/articles/usability/usability-in-icons/
【57】 J. Spool, （2006, February）, Orbitz Can’t Get A Date. . Retrieved August 4,
2017, from: https://www1.uie.com/brainsparks/2006/02/20/orbitz-cant-get-adate/
【58】 DanzicoLiz, （2010, March）, An active silence. Retrieved July 28, 2018, from:
http://bobulate.com/post/428787471/an-active-silence
【59】 R. Walker, （2003）, The Guts of a New Machine. Retrieved July 28, 2018, from:
https://www.nytimes.com/2003/11/30/magazine/the-guts-of-a-newmachine.
html
【60】 S. Felix, （2012, September）, This Is How Facebook Is Tracking Your Internet
Activity. Retrieved July 28, 2018, from: https://www.businessinsider.com/this-ishow-
facebook-is-tracking-your-internet-activity-2012-9?op=1
【61】 J. Nielsen, （2006, March） Growing a Business Website: Fix the Basics First.
Retrieved July 28, 2018, from: https://www.nngroup.com/articles/designpriorities/