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

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

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

《設計學研究》 20卷1期 (2017/07) Pp. 1-22

https://doi.org/10.30105/JDS.201707_20(1).0001

摘要

數位社交平台興起，促使網頁資訊圖像的資訊圖像化受到諸多網路族群的熱愛，但其外觀背後的訊息能否為人們有效理解，成為一值得探究之議題，因此本文從網頁資訊圖像多樣視覺特徵的結構特性，將統計圖表、系統圖、示意圖、單行構成、多欄構成、文字敘述、複雜構成的七種「設計表現」類型，依其「視覺複雜度」劃分為高、中、低三個等級，並對相同複雜度等級的網頁資訊圖像，分別就其所屬之設計表現以七點式李克特量表進行理解度的評估。最後歸納出下述三點結論，以供後續研究及應用設計之參考：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.

並列關鍵字

Web Infographic ； Comprehension ； Design Type ； Complexity

參考文獻

Alex website (2014), 'Top 1,000,000 Sites', website: http://www.alexa.com/topsites (accessed: December 30, 2014)

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).(ACM Conference on Human Factors in Computing Systems (CHI 2010)).:

Biederman, I.(1987).Recognition-by-components: A theory of human image understanding.Psychological Review.94,115-147.

RAYNER, K.(Ed.)(1992).Eye Movement and Visual Cognition: Scene Perception and Reading.London:Spring-Verlag.

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.