Abstract
Color is an important property of visualizations especially in the comprehension of complex line charts while chart size measured as distance between data points, is significant when dealing with numerous data points that are used for comparison. Multiple time-series line (MTSL) graphs are a common tool in visual representation of data but only a few studies explored the effect of visual properties on its comprehension. This study evaluated the effect of color properties (saturation and lightness), and vertical distance (chart height) in the comprehension of multiple time-series line graphs. It was posited that color palettes with higher saturation levels and charts with higher vertical distance improve comprehension. Comprehension was measured in terms of accuracy and response time using a discrimination task that required participants to find which time series possessed the highest value at a point. Six sets of multi-hued palettes with varying lightness and saturation were developed using colors equidistant in the color wheel. Two levels of chart heights were used to evaluate vertical distance. A total of ninety-two (92) subjects took part in the experiment. Results showed that when color saturation alone was considered, the highest saturation level was established to have the best user performance. Nevertheless, when the interaction of saturation with lightness was factored in the study, findings show that when colors with high level of lightness are used, they should have lower saturation levels and vice versa. This implies that there should be a balance between lightness and saturation when using colors in data visualizations. Vertical distance did not have a significant effect on comprehension, but a larger size generally resulted in better performance.
This is a preview of subscription content, log in via an institution to check access.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
References
O’Connor, Z.: Colour, contrast and gestalt theories of perception: the impact in contemporary visual communications design. Color Res. Appl. 40, 85–92 (2015)
Glazer, N.: Challenges with graph interpretation: a review of the literature. Stud. Sci. Educ. 47, 183–210 (2011)
Cleveland, W.S., McGill, R.: The many faces of a scatterplot. J. Am. Stat. Assoc. 7, 807–822 (1984)
Heer, J., Kong, N., Agrawala, M.: Sizing the Horizon: the effects of chart size and layering on the graphical perception of time series visualizations. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 1303–1312 (2009)
Heer, J., Agrawala, M.: Multi-scale Banking to 45 degrees. IEEE Trans. Visual Comput. Graph. 12, 701–708 (2006)
Stone, M.: Choosing Colors for Data Visualization. Business Intelligence Network 2 (2006)
Chinjen, K., Estoista, N., Wu, J.: The Effect of Aesthetic Visual Properties on the Comprehension of Data Visualizations. Thesis. De La Salle University, Manila, Philippines (2018)
Ware, C.: Information Visualization: Perception for Design, 2nd edn. Morgan Kaufmann, San Francisco (2004)
Curcio, F.R.: Comprehension of mathematical relationships expressed in graphs. J. Res. Math. Educ. 18, 382–393 (1987)
Heer, J., Bostock, M.: Crowdsourcing graphical perception: using mechanical turk to assess visualization design. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 203–212 (2010)
Wilms, L., Oberfeld, D.: Color and emotion: effects of hue, saturation, and brightness. Psychol. Res. 82, 896–914 (2018)
Seckler, M., Opwis, K., Tuch, A.N.: Linking objective design factors with subjective aesthetics: an experimental study on how structure and color of websites affect the facets of users’ visual aesthetic perception. Comput. Hum. Behav. 49, 375–389 (2015)
Lotto, R.B., Purves, D.: The effects of color on brightness. Nat. Neurosci. 2, 1010–1014 (1999)
Camgöz, N., Yener, C., Güvenç, D.: Effects of Hue, Saturation, and Brightness on Preference. Color Research & Application: Endorsed by Inter‐Society Color Council, The Colour Group (Great Britain), Canadian Society for Color, Color Science Association of Japan, Dutch Society for the Study of Color, The Swedish Colour Centre Foundation, Colour Society of Australia. Centre Français de la Couleur. 27, 199–207 (2002)
Qian, J., Zhang, K., Wang, K., Li, J., Lei, Q.: Saturation and Brightness modulate the Effect of Depth on Visual Working Memory. J. Vision 18, 1–12 (2018)
Camgöz, N., Yener, C., Güvenç, D.: Effects of Hue, Saturation, and Brightness: Part 2: Attention. Color Research & Application: Endorsed by Inter‐Society Color Council, The Colour Group (Great Britain), Canadian Society for Color, Color Science Association of Japan, Dutch Society for the Study of Color, The Swedish Colour Centre Foundation, Colour Society of Australia, Centre Français de la Couleur. 29, 20–28 (2004)
Mount, G.E., Case, H.W., Sanderson, J.W., Brenner, R.: Distance judgment of colored objects. J. Gen. Psychol. 55, 207–214 (1956)
Bradley, S: Why Luminance is the Key Component of Color (2014), http://vanseodesign.com/web-design/color-luminance/
Agoston, G.A.: Color Theory and its Application in Art and Design. Springer, Heidelberg (2013)
Shi, Y., Tu, Y., Wang, L., Gao, X.: P-33: effects of luminance, contrast and saturation of HDR QLED display on visual system based on eye movement. In: SID Symposium Digest of Technical Papers, vol. 50, pp. 1358–1361 (2019)
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2021 The Editor(s) (if applicable) and The Author(s), under exclusive license to Springer Nature Switzerland AG
About this paper
Cite this paper
Seva, R., Ebora, N.A., Manucom, R.M., Sorongon, L.E. (2021). The Effect of Chart Height and Color Saturation and Lightness to Graph Comprehension. In: Ayaz, H., Asgher, U. (eds) Advances in Neuroergonomics and Cognitive Engineering. AHFE 2020. Advances in Intelligent Systems and Computing, vol 1201. Springer, Cham. https://doi.org/10.1007/978-3-030-51041-1_39
Download citation
DOI: https://doi.org/10.1007/978-3-030-51041-1_39
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-030-51040-4
Online ISBN: 978-3-030-51041-1
eBook Packages: Intelligent Technologies and RoboticsIntelligent Technologies and Robotics (R0)