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

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

10.30105/JDS.201612_19(2).0001

許子凡(Tzu-Fan Hsu)

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

設計學研究

19卷2期（2016 / 12 / 01）

1 - 26

繁體中文

隨著網誌與社群平台的興起，網頁資訊圖像受到諸多網路族群的熱愛，成功地吸引人們的目光焦點，因此本研究著眼於網頁資訊圖像多樣視覺特徵的結構特性，分別從「視覺複雜度」與「設計表現」類型兩個角度切入，前者係由：高視覺複雜度、低視覺複雜度兩個等級組成，後者則分為：統計圖表、系統圖、示意圖、單行構成、多欄構成、文字敘述、複雜構成等七種類型，並藉由眼動追蹤的「凝視次數」與「凝視時間」來對注目性表現進行評估。最後歸納出下述三點結論，以提供後續研究及應用設計之參考：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.

1. 唐大崙、張文瑜(2007)。利用眼球追蹤法探索傳播研究。中華傳播學刊，12(5)，165-211。
   連結：
2. 許子凡、楊朝明(2015)。網頁資訊圖像的表現形式與主題內容之關聯分析。設計學研究，18(1)，1-22。
   連結：
3. 楊清田、魏碩廷(2005)。平面圖形複雜度與面積錯視之關聯性研究─以不規則多邊形為例。藝術學報，77，13-23。
   連結：
4. 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)
5. Gaffney, G. (2000), 'What is Card Sorting?' website: http://www.infodesign.com.au/usabilityresources/design/cardsorting.asp (accessed: October 20, 2008)
6. Alex website (2013), 'Top 1,000,000 Sites', website: http://www.alexa.com/topsites (accessed: December 31, 2013)
7. Tullis, T. and Wood, L. (2004), 'How many users are enough for a card-sorting study? ' website: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.514.3907&rep=rep1&type=pdf (accessed: August 13, 2014).
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. Bolls, P. D.,Lang, A.,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),627-652.
10. Cowen, L.,Ball, L.J.,Delin, J.(2002).An eye-movement analysis of web-page usability.People and Computers XVI-Memorable yet Invisible: Proceedings of HCI 2002,London:
11. Davenport, T. H.,Beck, J. C.(2001).The Attention Economy: Understanding the New Currency of Business.Brighton:Harvard Business Review Press.
12. Fukushi, Y.(2005).The Best Informational Diagrams 2.Tokyo:PIE Books.
13. GHAOUI, C.(Ed.)(2005).Encyclopedia of Human Computer Interaction.Hershey:Idea Group.
14. Hauland, G.(2003).Measuring team situation awareness by means of eye movement data.Proceedings of HCI International 2003: Vol 3,Mahwah:
15. Irwin, D. E.(1992).Memory for position and identity across eye-movements.Journal of experimental psychology: Learning, memory, and cognition,18(2),307-317.
16. Just, M. A.,Carpenter, P. A.(1976).Eye fixations and cognitive processes.Cognitive Psychology,8(4),441-480.
17. Kim, M. S.,Cave, K. R.(1999).Top-down and bottom-up attentional control: On the nature of interference from a salient distractor.Perception & Psychophysics,61(6),1009-1023.
18. Kimura, H.(2010).Infographics.Tokyo:Seibundo Shinkosha Publishing.
19. Lang, A.,Dhillon, K.,Dong, Q.(1995).The effects of emotional arousal and valence on television viewers' cognitive capacity and memory.Journal of Broadcasting & Electronic Media,39(3),313-327.
20. Langton, S. R. H.,Watt, R. J.,Bruce, V.(2000).Do the eyes have it? Cues to the direction of social attention.Trends in cognitive sciences,4(2),50-59.
21. Lankow, J.,Ritchie, J.,Crooks, R.(2012).Infographics: The Power of Storytelling.Hoboken:John Wiley & Son, Inc..
22. Lester, P. M.(2011).Visual Communication: Images with Messages.Boston:Wadsworth.
23. Mello-Thoms, C.,Nodine, C. F.,Kundel, H. L.(2004).What attracts the eye to the location of missed and reported breast cancers?.Proceedings of the Eye Tracking Research and Applications Symposium 2002,New York:
24. Moon, P.,Spencer, D. E.(1994).Aesthetic measure applied to color harmony.Journal of the Optical Society of America,34(4),234-242.
25. Nielsen, J.(1997).Nielsen, J. (1997), 'How little do users read?' website: http://www.useit.com/alertbox/9710a.html (accessed: June 20, 2012)Nielsen, J. (1997), 'How little do users read?' website: http://www.useit.com/alertbox/9710a.html (accessed: June 20, 2012),未出版
26. Nishioka, F.(1992).Diagram Graphics: The Best in Graphs, Charts, Maps and Technical Illustration.Tokyo:PIE Books.
27. PASHLER, H.(Ed.)(1998).Attention.East Sussex:Psychology.
28. Pezdek, K.,Chen, H. C.(1982).Developmental differences in the role of detail in picture recognition memory.Journal of Experimental Child Psychology,33,207-215.
29. Pieters, R.,Wedel, M.(2004).Attention capture and transfer in advertising: Brand pictorial and text-size effects.Journal of Marketing,68,36-50.
30. Poole, A.,Ball, L. J.,Phillips, P.(2004).In search of salience: A response time and eye movement analysis of bookmark recognition.People and Computers XVIII-Design for Life: Proceedings of HCI 2004,London:
31. Pratkanis, A. R.,Aronson, E.(2001).Age of Propaganda: The Everyday Use and Abuse of Persuasion.New York:Owl Books.
32. Radach, R.,Vorstius, C.,Radach, K.(2001).Eye movements in the processing of advertisements: effects of pragmatic complexity.11th European Conference on eye movements,Turku, Finland:
33. Ravaja, N.(2004).Contributions of psychophysiology to media research: Review and recommendations.Media Psychology,6(2),43.
34. RAYNER, K.(Ed.)(1992).Eye Movement and Visual Cognition: Scene Perception and Reading.London:Spring-Verlag.
35. Smiciklas, M.(2012).The Power of Infographics: Using Pictures to Communicate and Connect with Your Audiences.Indianapolis:Que Publishing.
36. Smith, E. J.,Hajash, D. J.(1998).Informational Graphics in 30 Daily Newspapers.Journalism Quarterly,65(3),714-718.
37. Theeuwes, J.(1992).Perceptual selectivity for color and form.Perception & Psychophysics,51(6),599-606.
38. Ware, C.(2004).Information Visualization: Perception for Design.San Francisco:Morgan Kaufmann.
39. Wildbur, P.,Burke, M.(1998).Information Graphics-Innovative Solutions in Contemporary Design.London:Thames and Hudson.
40. WRIGHT, R. D.(Ed.)(1998).Visual attention.New York:Oxford University Press.
41. 林品章(1986)。商業設計：理論．基礎．實務。台北:藝術家出版。
42. 林菁(1994)。圖像複雜度與兒童的認知學習。嘉義師院學報，8，171-208。
43. 唐大崙、李天任、蔡政旻(2006)。以色彩喜好作業探索偏好與視線軌跡的關係。廣告學研究，25，55-79。
44. 孫皓瓊(2011)。圖形對話─什麼是訊息設計。北京:清華大學出版社。
45. 蕭坤安、伊彬(2002)。造形輪廓的複雜性認知探討。中華民國設計學會2002 年設計學術研究成果研討會論文集，台北:

1. (2023)。以文獻計量探討近半世紀之資訊圖像研究發展。設計學研究，26(2)，1-29。