新聞網頁留白量對青壯兩代使用者的影響

The Effect of White Space in News Web Pages on Young and Middle-Aged Users

劉育君(Yu-Chun Liu)；柯志祥(Chih-Hsiang Ko)

留白 ； 使用性 ； 美感 ； 價值感 ； White Space ； Usability ； Aesthetics ； Perceived Value

設計學報

23卷4期（2018 / 12 / 01）

1 - 20

繁體中文

各種視覺設計元素，如字體大小、色彩、對比、欄數、間距、版面排列、字體、圖片大小、刺激物數量、資訊量多寡、情境等，皆有可能影響網頁瀏覽績效與使用性。這些元素構成的大量資訊，會對使用者造成負擔，且各族群因生、心理的限制，可接受的資訊承載量不盡相同。與各種視覺設計相對應的元素為留白，故本研究旨在探討使用者對不同網頁留白量的使用性、美感與價值感的偏好，以四種新聞網頁為測試樣本，分別為45%留白量寬間距、55%留白量寬間距、45%留白量窄間距、55%留白量窄間距，招募16至30歲的青年與46至60歲的壯年使用者進行研究，同時收集使用者背景包含學歷等基本資料等；排除真實網頁文字、圖片內容等干擾視覺感受的因子，以實驗法進行網頁留白量的偏好測試。研究結果顯示，壯年使用者評比45%留白量寬間距總分最高，青年使用者評比55%留白量寬間距總分最高。本研究以留白比例為設計變項，期望設計師未來設計網頁時，不再受限於多樣設計元素之間的平衡與調整，其結果可優化對目標族群的網頁設計原則，提供一個便於評估網頁使用性、美感與價值感的方法，並在未來發展以人工智慧為基礎的自動化設計。

Web browsing performance and usability could be influenced by various visual design elements such as font sizes, colors, contrast, columns, spacing, layout, font styles, image sizes, stimuli, information load, context, and so on. This mass information derived from these elements might be a burden to users who have different information loads due to dissimilar physical and psychological limitations. This study regarded white space as a complimentary visual design element. The purposes of this study were to explore user preferences of usability, aesthetics and perceived value to different amounts of white space in web pages. The experimental samples were a set of four news web pages with 55% white space and wide spacing, 55% white space and narrow spacing, 45% white space and wide spacing, 45% white space and narrow spacing. Two groups of young and middle-aged participants aged between 16-30 and 46-60 years were recruited for this study to collect the participants’ preference data and their background information. This study used an experiment to explore user preferences to the amount of white space in web pages by excluding factors such as real text and images that could interfere with visual perception. The result revealed that the web page with 45% white space and wide spacing was evaluated with the highest score by the middle-aged users, and the web page with 55% white space and wide spacing was evaluated with the highest score by the young users. This study used the percentage of white space as a design variable. It is hoped that in the future designing of web pages, designers will not be confined to the balance and adjustment of multiple design elements. The result could optimize design principles of web pages for target user groups and provide a convenient method to evaluate the usability, aesthetics and perceived value of web pages. It could also be used in the future for artificial intelligence based design automation.

1. 王郁青、岳修平(2014)。人力網站線上表單長度設計對使用者偏好的影響。圖書資訊學刊，12(1)，109-134。
   連結：
2. 王藍亭、盧伊君(2010)。書籍編排之視覺圖像呈現研究：以國小六年級自然科教科書為例。中華印刷科技年報，2010，578-587。
   連結：
3. 呂佳珍、黃國樑、沈宇哲(2017)。多媒體資訊站介面設計對高齡者使用性的影響。設計學報，22(2)，49-66。
   連結：
4. 鄭月秀、藍穎筑(2012)。以三分法解構網頁編排設計研究。設計學研究，15(2)，103-131。
   連結：
5. Arnold, E. C.(1969).Modern newspaper design.New York, NY:Harper & Row.
6. Auger, C.,Leduc, E.,Labbé, D.,Guay, C.,Fillion, B.,Bottari, C.,Swaine, B.(2014).Mobile applications for participation at the shopping mall: Content analysis and usability for persons with physical disabilities and communication or cognitive limitations.International Journal of nvironmental Research and Public Health,11(12),12777-12794.
7. Babin, L. A.,Burns, A. C.(1998).A modified scale for the measurement of communication‐ Evoked mental imagery.Psychology & Marketing,15(3),261-278.
8. Berghel, H.(1997).Cyberspace 2000: Dealing with information overload.Communications of the ACM,40(2),19-24.
9. Berlyne, D. E.(1963).Complexity and incongruity variables as determinants of exploratory choice and evaluative ratings.Canadian Journal of Psychology,17(3),274-290.
10. Berlyne, D. E.(1974).Studies in the new experimental aesthetics: Steps toward an objective psychology of aesthetic appreciation.Washington, DC:Hemisphere.
11. Bi, L.,Fan, X.,Liu, Y.(2011).Effects of symmetry and number of compositional elements on Chinese users' aesthetic ratings of interfaces: Experimental and modeling investigations.International Journal of Human-Computer Interaction,27(3),245-259.
12. Biggs, S. F.,Bedard, J. C.,Gaber, B. G.,Linsmeier, T. J.(1985).The effects of task size and similarity on the decision behavior of bank loan officers.Management Science,31(8),970-987.
13. Boulton, M. (2007, January 9). Whitespace. Retrieved from http://alistapart.com/article/whitespace
14. Brooke, J.(1986).System usability scale (SUS): A quick-and-dirty method of system evaluation.Reading:Digital Equipment.
15. Constantinos, K. C.,Konstantinos, K.(2012).Web aesthetics and usability: An empirical study of the effects of white space.International Journal of E-Business Research,8(1),35-53.
16. Dabholkar, P. A.,Thorpe, D. I.,Rentz, J. O.(1995).A measure of service quality for retail stores: Scale development and validation.Journal of the Academy of Marketing Science,24(1),3-16.
17. Davidson, A. W.,Bar-Yam, Y.(2006).Environmental complexity: Information for human-environment well-being.Unifying themes in complex systems,Berlin:
18. Easton, C.(2013).An examination of the Internet's development as a disabling environment in the context of the social model of disability and anti-discrimination legislation in the UK and USA.Universal Access in the Information Society,12(1),105-114.
19. Eysenck, H. J.(1968).An experimental study of aesthetic preference for polygonal figures.The Journal of General Psychology,79(1),3-17.
20. Fechner, G. T. (1876). Vorschule der aesthetic. Leipzig: Breitkopf & Härtel.
21. Garcia, M. R.(1987).Contemporary newspaper design: A structural approach.Englewood Cliffs, NJ:Prentice-Hall.
22. Geissler, G. L.,Zinkhan, G. M.,Watson, R. T.(2006).The influence of home page complexity on consumer attention, attitudes, and purchase.International Journal of Advertising,35(2),69-80.
23. Gray, D. B.,Hollingsworth, H. H.,Stark, S.,Morgan, K. A.(2008).A subjective measure of environmental facilitators and barriers to participation for people with mobility limitations.Disability and Rehabilitation,30(6),434-457.
24. Grobelny, J.,Karwowski, W.,Drury, C.(2005).Usability of graphical icons in the design of human-computer interfaces.International Journal of Human-Computer Interaction,18(2),167-182.
25. Hoffmann, R.,Krauss, K.(2004).A critical evaluation of literature on visual aesthetics for the web.Proceedings of the 2004 Annual Research Conference of the South African Institute of Computer Scientists and Information Technologists on IT Research in Developing Countries,New York, NY:
26. Hunt, H. K.(1977).CS/D: Overview and future research directions.Conceptualization and measurement of consumer satisfaction and dissatisfaction,Cambridge, MA:
27. ISO(2010).Ergonomics of human-system interaction, Part 210: Human-centered design for interactive systems.Geneva:International Organization for Standardization.
28. Jia, Y.,Huang, Y.(2015).How negative space on shopping websites influences users' purchase behavior.Proceedings of the International Conference on Chemical, Material and Food Engineering 2015,Beijing:
29. Karvonen, K.(2000).The beauty of simplicity.Proceedings on the 2000 Conference on Universal Usability,New York, NY:
30. Kim, H.(2015).A study on usability improvement of smart phone banking considering elderly users: Focusing on usability test targeting elderly for money transfer procedure of Busan bank smart phone banking app.Journal of Digital Design,15(1),123-132.
31. King, W. R.,He, J.(2006).A meta-analysis of the technology acceptance model.Information & Management,43(6),740-755.
32. Lavie, T.,Tractinsky, N.(2004).Assessing dimensions of perceived visual aesthetics of web sites.International Journal of Human-Computer Studies,60(3),269-298.
33. Lindgaard, G.,Fernandes, G.,Dudek, C.,Brown, J.(2006).Attention web designers: You have 50 milliseconds to make a good first impression.Behavior & Information Technology,25(2),115-126.
34. Maria, J. S. (2006, January 5). Under the loupe #1: White space. Retrieved from http://v3.jasonsantamaria.com/archive//2006/01/05/under_the_loupe_1_white_space.php
35. Michailidou, E.(2005).Manchester,University of Manchester.
36. Monaco, E.(2011).Issues related to accessibility and usability in furthering the implementation of e-governance.Proceedings of the 3rd International Conference on Education and New Learning Technologies,Valencia:
37. Morris, I. (2015, February 16). White space: A perfect option for improving usability in web designs. Retrieved from http://usabilitygeek.com/white-spaces-improving-usability-web-designs/
38. Moshagen, M.,Thielsch, M. T.(2010).Facets of visual aesthetics.International Journal of Human-Computer Studies,68(10),689-709.
39. Mowday, R. T.,Steers, R. M.,Porter, L. W.(1979).The measurement of organizational commitment.Journal of Vocational Behavior,14(2),224-247.
40. Nielsen, J.(2000).Designing web usability: The practice of simplicity.Indianapolis, IN:New Riders.
41. Nielsen, J.(1994).Usability engineering.San Diego, CA:Academic Press.
42. Oakley, N. S.,Daudert, B.(2015).Establishing best practices to improve usefulness and usability of web interfaces providing atmospheric data.Bulletin of the American Meteorological Society,97(2),263-274.
43. Oliver, R. L.(1981).Measurement and evaluation of satisfaction processes in retail settings.Journal of Retailing,57(3),25-48.
44. Pracejus, J. W.,Olsen, G. D.,O'Guinn, T. C.(2006).How nothing became something: White space, rhetoric, history, and meaning.Journal of Consumer Research,33(1),82-90.
45. Radach, R.(Ed.),Hyona, J.(Ed.),Deubel, H.(Ed.)(2003).The mind's eye: Cognitive and applied aspects of eye movement.Amsterdam:Elsevier.
46. Robins, D.,Holmes, J.(2008).Aesthetics and credibility in web site design.Information Processing & Management,44(1),386-399.
47. Roudaki, A.,Kong, J.,Zhang, K.(2016).Specification and discovery of web patterns: A graph grammar approach.Information Sciences,328,528-545.
48. Rumpradit, C.,Donnell, M. L.(1999).Navigational cues on user interface design to produce better information seeking on the World Wide Web.Proceedings of the 32nd Annual Hawaii International Conference on System Sciences,Los Alamitos, CA:
49. Salvendy, G.(Ed.)(2012).Handbook of human factors and ergonomics.Hoboken, NJ:Wiley.
50. Schenker, M. (2014, July 23). How to make whitespace work on the web. Retrieved from https://www.webdesignerdepot.com/2014/07/how-to-make-whitespace-work-on-the-web/
51. Schwarz, E.,Beldie, I. P.,Pastoor, S.(1983).A comparison of paging and scrolling for changing screen contents by inexperienced users.Human Factors,25(3),279-282.
52. Sheth, J. N.,Newman, B. I.,Gross, B. L.(1991).Why we buy what we buy: A theory of consumption values.Journal of Business Research,22(2),159-170.
53. Sheth, J. N.,Newman, B. I.,Gross, B. L.(1991).Consumption values and market choices: Theory and applications.Cincinnati, OH:South-Western Publishing.
54. Song, G.(2007).Analysis of web page complexity through visual segmentation.Proceedings of the 12th International Conference on Human-Computer Interaction: Applications and Services,Berlin:
55. Sweeney, J. C.,Soutar, G. N.(2001).Consumer perceived value: The development of a multiple item scale.Journal of Retailing,77(2),203-220.
56. Torrente, J.,Freire, M.,Moreno-Ger, P.,Fernández-Manjón, B.(2015).Evaluation of semi-automatically generated accessible interfaces for educational games.Computers & Education,83(4),103-117.
57. Tractinsky, N.,Cokhavi, A.,Kirschenbaum, M.,Sharfi, T.(2006).Evaluating the consistency of immediate aesthetic perceptions of web pages.International Journal of Human-Computer Studies,64(11),1071-1083.
58. Tschichold, J. (1928). Die neue Typographie: Ein Handbuch für zeitgemäß Schaffende. Berlin: Verlag.
59. Tuch, A. N.,Bargas-Avila, J. A.,Opwis, K.(2010).Symmetry and aesthetics in website design: It's a man's business.Computers in Human Behavior,26(6),1831-1837.
60. Tuch, A. N.,Bargas-Avila, J. A.,Opwis, K.,Wilhelm, F. H.(2009).Visual complexity of websites: Effects on users' experience, physiology, performance, and memory.International Journal of Human-Computer Studies,67(9),703-715.
61. Uxmyths. (2013, May 23). The myth of user experience design # 28: The white space is a wasted space. Retrieved from http://www.hpx.tw/archives/10634
62. Warr, P.(1990).The measurement of well-being and other aspects of mental health.Journal of Occupational Psychology,63(3),193-210.
63. Wu, L.,Zhu, Z.,Cao, H.,Li, B.(2016).Influence of information overload on operator's user experience of human-machine interface in LED manufacturing systems.Cognition, Technology & Work,18(1),161-173.
64. 周歡(2013)。網頁設計留白。小作家選刊，5，254。
65. 原研哉(2012)。白。新北市=New Taipei City:木馬文化=Trojan Culture。
66. 班寧秋、張娜、曾嶽(2015)。遊戲色彩基礎。重慶市=Chongqing:西南師範大學出版社=Southwest China Normal University Press。
67. 張統宣(2011)。虛與實的和諧：論網頁設計留白。價值工程，234，148-149。
68. 楊佳玉(2015)。淺談國畫中的留白。藝術研究，1，26-27。
69. 葉明義、莊芳瑛(2001)。平面廣告留白效果之探索性研究。臺大管理論叢，21(1)，295-314。
70. 管倖生、林彥呈(2009)。以感性工學程序建構網頁設計系統之研究。設計學報，7(1)，59-74。
71. 臺灣網路資訊中心（2015）。2015 年臺灣寬頻網路使用調查報告。臺北市：財團法人臺灣網路資訊中心。Taiwan Network Information Center. (2015). Users survey report of 2015 Taiwan broadband network. Taipei: Taiwan Network Information Center. [in Chinese, semantic translation]
72. 趙紅梅(2012)。闡述網頁留自的可用性和藝術性的功能。科技論壇，13，223。
73. 蔡子瑋(2009)。新竹市= Hsinchu City，國立交通大學=National Chiao Tung University。
74. 蘇宇庭、詹峻陽(2016)。揭露！2016 網路服務流量100 強。數位時代，262，76-77。

1. 戴綾儀,葉燕芬,陳世真,翁新惠(2020)。探討電腦螢幕介面運用不同色彩對比對低視力病人閱讀成效之影響。醫務管理期刊，21(3)，181-195。
2. 周軒逸,呂姿穎(2022)。競選廣告美學對選民的候選人知覺、態度與投票意願之影響。管理學報，39(2)，203-234。