從設計表現類型與視覺複雜度探討網頁資訊圖像之理解性

Evaluating the Effects of Design Type and Complexity on Comprehension Performances of Web Infographics

10.30105/JDS.201707_20(1).0001

許子凡(Tzu-Fan Hsu)；楊朝明(Chao-Ming Yang)；王聖文(Sheng-Wen Wang)

網頁資訊圖像 ； 注目性 ； 設計表現 ； 複雜度 ； Web Infographic ； Comprehension ； Design Type ； Complexity

設計學研究

20卷1期（2017 / 07 / 01）

1 - 22

繁體中文

數位社交平台興起，促使網頁資訊圖像的資訊圖像化受到諸多網路族群的熱愛，但其外觀背後的訊息能否為人們有效理解，成為一值得探究之議題，因此本文從網頁資訊圖像多樣視覺特徵的結構特性，將統計圖表、系統圖、示意圖、單行構成、多欄構成、文字敘述、複雜構成的七種「設計表現」類型，依其「視覺複雜度」劃分為高、中、低三個等級，並對相同複雜度等級的網頁資訊圖像，分別就其所屬之設計表現以七點式李克特量表進行理解度的評估。最後歸納出下述三點結論，以供後續研究及應用設計之參考：1. 網頁資訊圖像的複雜度提升會導致閱讀理解性的降低，因此高複雜度的設計表現類型，即複雜構成所傳達之訊息內容最不易為人們理解。2. 中複雜度的網頁資訊圖像適用於視覺元素或訊息內容較多的情境需求，所屬設計表現類型在理解性上，以多欄構成的整體表現最佳，單行構成的版面型態有助於內容元素的掌握，文字敘述的標題則為其理解之重要輔助。3. 低複雜度的網頁資訊圖像中，以系統圖的理解性最為優異，而統計圖表與示意圖在規劃時，宜突顯數據後的主題意涵與視覺元素間的組織關聯，以讓人們更能有效理解。

With a upsurge of social media, web infographic becomes a popularity to convey visual information and attract attention. This study aimed to evaluate performance of web infographic through people's comprehension based on two aspects of ＂design type＂ and ＂complexity level＂. The former consisted of seven categories: statistical graphs, systematic charts, diagrams, single column, multiple cells, descriptive text, and the complicated. The latter was divided into three levels of high, middle, and low complexity. Moreover, a 7-point linkert scale was used to measure comprehension performance. Sequentially, an one-way ANOVA were adopted to examine differences in comprehension performances among design types and complex levels respectively. Thus, the three conclusions were drawn as follows: 1. Rising complexity of web infographic led to decline in comprehension. The complicated of high complexity level was the lowest score in comprehension performance among all design types. 2. The infographics of middle complexity level were applied on high demands of visual elements and information amounts. Among design types of middle complexity level, multiple cells scored the best comprehension performance. The visual elements in single column layout were recognized efficiently. The topic played an important role in comprehension of descriptive text 3. Systematic charts in low complexity level had the best comprehension performance among all design types. For diagrams and statistical graphs, the meaning behind visual appearance and the association among visual elements, respectively, were the key points for improving comprehension of web infographics.

1. 許子凡、楊朝明(2015)。網頁資訊圖像的表現形式與主題內容之關聯分析。設計學研究，18(1)，1-22。
   連結：
2. 楊清田、魏碩廷(2005)。平面圖形複雜度與面積錯視之關聯性研究─以不規則多邊形為例。藝術學報，77，13-23。
   連結：
3. 楊朝明、周郁軒(2013)。不同認知需求層級與雙關修辭品質對於平面廣告記憶的影響。設計學報，18(1)，1-24。
   連結：
4. Russell, M. C. and Chaparro, B. S. (2001), 'Exploring effects of speed and font size with RSVP', website: http://psychology.wichita.edu/Hci/projects/HFES_RSVP_FONT.pdf (accessed: November 12, 2013)
5. Alex website (2014), 'Top 1,000,000 Sites', website: http://www.alexa.com/topsites (accessed: December 30, 2014)
6. Sicheritz, K. (2000), 'Applying the rapid serial visual presentation technique to small screens', website: http://stp.lingfil.uu.se/~matsd/thesis/arch/2000-011.pdf (accessed: November 13, 2013)
7. Stone, L. (2009), 'Beyond Simple Multi-tasking: Continuous Partial Attention', website: http://lindastone.net/2009/11/30/beyond-simple-multi-tasking-continuous-partial-attention/(accessed: July 24, 2012)
8. Bateman, S.,Mandryk, R.,Gutwin, C.,Genest, A.,McDine, D.,Brooks, C.(2010).Useful Junk? The Effects of Visual Embellishment on Comprehension and Memorability of Charts.ACM Conference on Human Factors in Computing Systems (CHI 2010),Atlanta, GA, USA:
9. Biederman, I.(1987).Recognition-by-components: A theory of human image understanding.Psychological Review,94,115-147.
10. Chan, A. H. S.,Lee, P. S. K.(2005).Effect of display factors on Chinese reading times, comprehension scores and preference.Behaviour and Information Technology,24(2),81-91.
11. Chien, Y. H.,Chen, C. H.,Wei, W. L.(2008).Effects of dynamic display, presentation method, speed, and task type on reading comprehension of wristwatch screens.Displays,29(5),471-477.
12. Dillon, A.(1992).Reading from paper versus screens: A critical review of the empirical literature.Ergonomics,35(10),1297-1326.
13. Foster, J. J.(1994).Evaluating the effectiveness of public information symbols.Information Design Journal,7(3),183-202.
14. Fukushi, Y.(2005).The Best Informational Diagrams.Tokyo:PIE Books.
15. Gagné, E. D.,Yekovich, C. W.,Yekovich, F. R.(1993).The Cognitive Psychology of School Learning.New York:Harper Collins College Publishers.
16. Gillan, D. J.,Richman, E. H.(1994).Minimalism and the Syntax of Graphs.Human Factors,36(4),619-644.
17. Hockley, W. E.(2009).The picture superiority effect in associative recognition.Memory and Cognition,36,1351-1359.
18. Holsti, O. R.(1969).Content Analysis for the Social Sciences and Humanities.MA:Addison-Wesley Pub..
19. Kassarjian, H. H.,Kassarjian, W. H.(1988).The impact of regulation on advertising: A content analysis.Journal of Consumer Policy,11,269-285.
20. Kimura, H.(2010).Infographics.Tokyo:Seibundo Shinkosha Publishing.
21. Lankow, J.,Ritchie, J.,Crooks, R.(2012).Infographics: The Power of Storytelling.Hoboken:John Wiley & Son, Inc..
22. Liu, Y. C.(2005).A simulated study on the effects of information volume on traffic signs, viewing strategies and sign familiarity upon driver's visual search performance.International Journal of Industrial Ergonomics,35,1147-1158.
23. Moon, P.,Spencer, D. E.(1994).Aesthetic measure applied to color harmony.Journal of the Optical Society of America,34(4),234-242.
24. Nishioka, F.(1992).Diagram Graphics: The Best in Graphs, Charts, Maps and Technical Illustration.Tokyo:PIE Books.
25. Panofsky, E.(1955).Meaning in the Visual Arts: Papers in and on Art History.New York:Doubleday & Company, Inc..
26. PASHLER, H.(Ed.)(1998).Attention.East Sussex:Psychology.
27. Pratkanis, A. R.,Aronson, E.(2001).Age of Propaganda: The Everyday Use and Abuse of Persuasion.New York:Owl Books.
28. RAYNER, K.(Ed.)(1992).Eye Movement and Visual Cognition: Scene Perception and Reading.London:Spring-Verlag.
29. Schonlau, M.,Peters, E.(2008).,未出版
30. Smiciklas, M.(2012).The Power of Infographics: Using Pictures to Communicate and Connect with Your Audiences.Indianapolis:Que Publishing.
31. Smith, E. J.,Hajash D. J.(1998).Informational Graphics in 30 Daily Newspapers.Journalism Quarterly,65(3),714 -718.
32. Wang, A. H.,Chen, C. H.(2003).Effects of screen type, Chinese typography, text/background color combination, speed, and jump length for VDT leading display on users' reading performance.International Journal of Industrial Ergonomics,31(4),249-261.
33. Wang, A. H.,Kan, Y. F.(2004).Effects of display type, speed, and text/background colour-combination of dynamic display on user' comprehension for dual task in reading static and dynamic display information.International Journal of Advanced Manufacturing Technology,23(1-2),133-138.
34. Ware, C.(2004).Information Visualization: Perception for Design.San Francisco:Morgan Kaufmann.
35. Wildbur, P.,Burke, M.(1998).Information Graphics-Innovative Solutions in Contemporary Design.London:Thames and Hudson.
36. Zwaga H. J. G.,Boersema, T.(1983).Evaluation of a set of graphic symbols.Applied Ergonomics,14(1),43-54.
37. ZWAGA, H. J. G.(Ed.),BOERSEMA, T.(Ed.),HOONHOUT, H. C. M.(Ed.)(1999).Visual Information for Everyday Use- Design and Research Perspectives.London:Taylor & Francis.
38. 王石番(1991)。傳播內容分析法：理論與實證。台北:幼獅文化。
39. 林品章(1986)。商業設計：理論．基礎．實務。台北:藝術家出版。
40. 林榮泰(1993)。評估圖像符號方法的研究。明志工專學報，25，201-207。
41. 孫皓瓊(2011)。圖形對話─什麼是訊息設計。北京:清華大學出版社。
42. 張春與(2001)。教育心理學─三化取向的理論與實踐。東華書局。
43. 黃琬玲(2010)。碩士論文(碩士論文)。屏東教育大學。
44. 蕭坤安、伊彬(2002)。造形輪廓的複雜性認知探討。中華民國設計學會2002 年設計學術研究成果研討會論文集，台北:

1. 許子凡,林演慶(2020)。表現形式與性別對資訊圖像偏好與注目性之影響。藝術教育研究，40，1-37。
2. 蘇文仲(2022)。商業資訊圖表之設計認知模式研究。中華印刷科技年報，2022，262-275。