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

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

許子凡(Tzu-Fan Hsu)

《設計學研究》 19卷2期 (2016/12) Pp. 1-26

https://doi.org/10.30105/JDS.201612_19(2).0001

摘要

隨著網誌與社群平台的興起，網頁資訊圖像受到諸多網路族群的熱愛，成功地吸引人們的目光焦點，因此本研究著眼於網頁資訊圖像多樣視覺特徵的結構特性，分別從「視覺複雜度」與「設計表現」類型兩個角度切入，前者係由：高視覺複雜度、低視覺複雜度兩個等級組成，後者則分為：統計圖表、系統圖、示意圖、單行構成、多欄構成、文字敘述、複雜構成等七種類型，並藉由眼動追蹤的「凝視次數」與「凝視時間」來對注目性表現進行評估。最後歸納出下述三點結論，以提供後續研究及應用設計之參考：1. 網頁資訊圖像的視覺複雜度與設計表現兩者有著高度關聯，不同複雜等級度所搭配的設計表現類型有著明顯差別，就注目性而言，低複雜度網頁資訊圖像的效果會優於高複雜度。2. 低複雜度的網頁資訊圖像設計表現類型中，系統圖與示意圖擁有較佳的注目性效果，統計圖表以數據展示為主的直敘方式，不若前兩者的圖像造形與敘事轉化手法來得具吸引力。3. 高複雜度的網頁資訊圖像在版面構成上，不同於低複雜度以單一畫面的做法，而是以分割組合的方式為主，多欄構成、單行構成兩種設計表現類型，在注目性表現上優於文字敘述與複雜構成兩者之效果。

關鍵字

網頁資訊圖像 ； 注目性 ； 設計表現 ； 複雜度

並列摘要

With the coming of blog and 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 attention 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 two levels of high complexity and low complexity. Moreover, ＂fixation account＂ and ＂fixation duration＂ were adopted as indicators of attention performance. Sequentially, a t-test and an one-way ANOVA were used to examine differences in attention performances of design types and complex levels respectively. Thus, the three conclusions were drawn as follows: 1. A high association existed between design type and complexity level. In terms of fixation account and duration, attention performances of low complexity were significantly better than those of high complexity. 2. Among design types of infographics with low complex, systematic charts and diagrams adapted visual appearance of graphic objects, which attracted more attentions than the way statistical graphs focused on the amount of data numbers. 3. The layout of high complex differed from each design type for arrangement of various visual elements. The attention performances of multiple cells and single column were better than descriptive text, and the complicated.

並列關鍵字

Web Infographic ； Attention ； Design Type ； Complexity

參考文獻

Wolfe, J. M. (1998), Visual search, in PASHLER, H. (Ed.), Attention, pp. 13-73, East Sussex: Psychology.

Alex website (2013), ‘Top 1,000,000 Sites’, website: http://www.alexa.com/topsites (accessed: December 31, 2013)

Bateman, S., Mandryk, R., Gutwin, C., Genest, A., McDine, D. and 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, pp.2573-2582.

Bolls, P. D., Lang, A. and Potter, R. F. (2001), The effects of message valence and listener arousal on attention, memory, and facial muscular responses to radio advertisements, Communication Research, 28(5), pp. 627-652.

Carroll, P. J., Young, J. R. and Guertin, M. S. (1992), Visual analysis of cartoons: A view from the far side, in RAYNER, K. (Ed.), Eye Movement and Visual Cognition: Scene Perception and Reading, pp. 444-461, London: Spring-Verlag.