Effects of text visual density and interface color hue on digital health education for the elderly

doi:10.11996/JG.j.2095-302X.2024030613

Abstract

Abstract:

Digital health education has made great contributions to the enhancement of people's health literacy through its rich content and flexible education methods. However, due to the decline of cognitive ability and visual level, the elderly often encounter difficulties in identifying and understanding information during digital education. In this paper, the reading interface of the digital health education platform served as the research object to analyze the impact of interface visual design on the reading effect and cognitive load of the elderly. The independent variables in this study were text visual density (normal density, low density) and interface color hue (cold color and warm color), and the dependent variables were reading performance. The results of the 2×2 two-factor experiment indicated that: ① The reading comprehension effect under low text density was better than that under normal density; ② The reading comprehension effect with cold color was better than that with warm color; ③ There was a significant interaction between text visual density and interface color hue on reading time. Cold color resulted in shorter reading time when paired with normal density, while warm color led to shorter reading time when paired with low density. This study analyzed the interface design from the perspective of health education content communication, enriching the data on digital reading experience for the elderly. It discussed the effect and cross-relationship of text visual density and color hue in the interface, and provided specific design suggestions for enhancing the effectiveness of digital education for the elderly.

Key words: digital health education, elderly learning, interface visual design, text visual density, interface color hue

CLC Number:

TP391

PENG Cheng, YI Minzhe, WU Qun, YU Hangyong. Effects of text visual density and interface color hue on digital health education for the elderly[J]. Journal of Graphics, 2024, 45(3): 613-623.

Figures/Tables 13

References 35

[1]	WHITEHEAD D. Health promotion and health education: advancing the concepts[J]. Journal of Advanced Nursing, 2004, 47(3): 311-320. DOI PMID
[2]	LIU Y B, LIU L, LI Y F, et al. Relationship between health literacy, health-related behaviors and health status: a survey of elderly Chinese[J]. International Journal of Environmental Research and Public Health, 2015, 12(8): 9714-9725.
[3]	TUNG H H, LU T M, CHEN L K, et al. Health literacy impact on elderly patients with heart failure in Taiwan[J]. Journal of Clinical Gerontology and Geriatrics, 2014, 5(3): 72-76.
[4]	央视新闻. 中国新闻出版研究院发布第十九次全国国民阅读调查结果[EB/OL]. (2022-04-23) [2023-08-05]. https://news.cctv.com/2022/04/23/ARTII5aJcQuiRIfvF5CQ4RmM220423.shtml.
	CCTV NEWS. The Chinese Academy of Press and Publication released the results of its 19th national reading survey[EB/OL]. (2022-04-23) [2023-08-05]. https://news.cctv.com/2022/04/23/ARTII5aJcQuiRIfvF5CQ4RmM220423.shtml (in Chinese).
[5]	刘洋, 张旭. 终身学习背景下老年教育数字化转型研究[J]. 黑河学刊, 2023(4): 114-119.
	LIU Y, ZHANG X. Research on the digital transformation of elderly education under the background of lifelong learning[J]. Heihe Journal, 2023(4): 114-119 (in Chinese).
[6]	SMITH M C. The reading abilities and practices of older adults[J]. Educational Gerontology, 1993, 19(5): 417-432.
[7]	PATERSON K B, MCGOWAN V A, WARRINGTON K L, et al. Effects of normative aging on eye movements during reading[J]. Vision, 2020, 4(1): 7.
[8]	何灿群, 谭晓磊. 智慧养老背景下的老年人数字阅读界面设计研究综述[J]. 包装工程, 2020, 41(20): 57-68.
	HE C Q, TAN X L. Review on the interface design of digital reading for the elderly against the background of smart pension[J]. Packaging Engineering, 2020, 41(20): 57-68 (in Chinese).
[9]	LLINARES C, HIGUERA-TRUJILLO J L, SERRA J. Cold and warm coloured classrooms. Effects on students’ attention and memory measured through psychological and neurophysiological responses[J]. Building and Environment, 2021, 196: 107726.
[10]	ZHOU J L, MIAO X L, HE F J, et al. Effects of font style and font color in news text on user cognitive load in intelligent user interfaces[J]. IEEE Access, 2022, 10: 10719-10730.
[11]	ZHU S S, WANG X X, LI W J, et al. Impact of the density of the elements belonging to the quick access area of a smartphone app on the visual search efficiency and user experience of elderly people[J]. Displays, 2023, 76: 102363.
[12]	WELLER D. The effects of contrast and density on visual web search[EB/OL]. (2004-07-12) [2024-03-05]. https://researchinuserexperience.wordpress.com/2004/07/12/the-effects-of-contrast-and-density-on-visual-web-search/.
[13]	HUANG S M, LI W J, TUNG S C. A study of white space on traditional Chinese text-reading on smartphones[C]// 2018 IEEE International Conference on Applied System Invention. New York: IEEE Press, 2018: 540-543.
[14]	ZHU S S, SU X Y, DONG Y N. Effects of the font size and line spacing of simplified Chinese characters on smartphone readability[J]. Interacting with Computers, 2021, 33(2): 177-187.
[15]	ZORZI M, BARBIERO C, FACOETTI A, et al. Extra-large letter spacing improves reading in dyslexia[J]. Proceedings of the National Academy of Sciences of the United States of America, 2012, 109(28): 11455-11459. DOI PMID
[16]	PEREA M, PANADERO V, MORET-TATAY C, et al. The effects of inter-letter spacing in visual-word recognition: evidence with young normal readers and developmental dyslexics[J]. Learning and Instruction, 2012, 22(6): 420-430.
[17]	KORINTH S P, GERSTENBERGER K, FIEBACH C J. Wider letter-spacing facilitates word processing but impairs reading rates of fast readers[J]. Frontiers in Psychology, 2020, 11: 444. DOI PMID
[18]	GALLIUSSI J, PERONDI L, CHIA G, et al. Inter-letter spacing, inter-word spacing, and font with dyslexia-friendly features: testing text readability in people with and without dyslexia[J]. Annals of Dyslexia, 2020, 70(1): 141-152. DOI PMID
[19]	ORALOVA G, KUPERMAN V. Effects of spacing on sentence reading in Chinese[J]. Frontiers in Psychology, 2021, 12: 765335.
[20]	李貌, 许林涛. 网页设计中的色彩搭配研究[J]. 包装工程, 2016, 37(16): 177-180.
	LI M, XU L T. Color collocation in web design[J]. Packaging Engineering, 2016, 37(16): 177-180 (in Chinese).
[21]	WU C S, CHENG F F, YEN D C. The atmospheric factors of online storefront environment design: an empirical experiment in Taiwan[J]. Information and Management, 2008, 45(7): 493-498.
[22]	CHOI J, CHANG Y K, LEE K, et al. Effect of perceived warmth on positive judgment[J]. Journal of Consumer Marketing, 2016, 33(4): 235-244.
[23]	LIEW T W, TAN S M, GAN C L, et al. Colors and learner’s gender evoke different emotional and cognitive effects in multimedia learning[J]. Human Behavior and Emerging Technologies, 2022, 2022: 1235732.
[24]	SATTARZADE M H, TAHMASEBI BOROUJENI S. Does red background color enhance short-term memory or blue?[J]. International Journal of Motor Control and Learning, 2021, 3(3): 57-66.
[25]	BAILEY R J, GRIMM C M, DAVOLI C. The real effect of warm-cool colors[R]. St. Louis: Washington University in St. Louis, 2006.
[26]	XIA T S, SONG L, WANG T T, et al. Exploring the effect of red and blue on cognitive task performances[J]. Frontiers in Psychology, 2016, 7: 784. DOI PMID
[27]	HANADA M. Correspondence analysis of color-emotion associations[J]. Color Research & Application, 2018, 43(2): 224-237.
[28]	吴晓丹, 张晓亚, 岳殿民, 等. 性别差异下基于位置与颜色的界面显示效果研究[J]. 工业工程与管理, 2022, 27(6): 141-148.
	WU X D, ZHANG X Y, YUE D M, et al. Location and color effect on interface display under gender difference[J]. Industrial Engineering and Management, 2022, 27(6): 141-148 (in Chinese).
[29]	XIANG Y X, ZHAO M Y, HONG X B. Effect of color on vocabulary memory: based on serial position effect[J]. Advances in Psychology, 2020, 10(7): 905-912.
[30]	周蕾, 薛澄岐, 汤文成, 等. 界面元素布局设计的美度评价方法[J]. 计算机辅助设计与图形学学报, 2013, 25(5): 758-766.
	ZHOU L, XUE C Q, TANG W C, et al. Aesthetic evaluation method of interface elements layout design[J]. Journal of Computer-Aided Design & Computer Graphics, 2013, 25(5): 758-766 (in Chinese).
[31]	中国疾病预防控制中心. 警惕中风的信号[EB/OL]. (2018- 12-14) [2023-08-05]. https://www.chinacdc.cn/jkzt/mxfcrjbhsh/jcysj/201812/t20181214_198232.html.
	Chinese Center for Disease Control and Prevention. Watch for signs of stroke[EB/OL]. (2018-12-14) [2023-08-05]. https://www.chinacdc.cn/jkzt/mxfcrjbhsh/jcysj/201812/t20181214198232.html (in Chinese).
[32]	中国疾病预防控制中心. 我国每4个成人就有1个高血压！[EB/OL]. (2021-03-15) [2023-08-05]. https://www.chinacdc.cn/jkzt/mxfcrjbhsh/jcysj/202103/t20210315_224668.html.
	Chinese Center for Disease Control and Prevention. Every 4 adults in our country have 1 hypertension！[EB/OL]. (2021-03-15) [2023-08-05]. https://www.chinacdc.cn/jkzt/mxfcrjbhsh/jcysj/202103/t20210315_224668.html (in Chinese).
[33]	全民健康生活方式行动国家行动办公室. 第25个全国高血压日, 共同践行健康生活方式: 限盐减重多运动, 戒烟戒酒心态平[EB/OL]. (2022-10-08) [2023-08-05]. https://www.chinacdc.cn/jkzt/mxfcrjbhsh/jcysj/202210/t20221008_261458.html.
	National Action Office for Healthy Lifestyles for All. On the 25th National Hypertension Day, jointly practice a healthy lifestyle: limiting salt, reducing weight, exercising more, quitting smoking and drinking, calming down[EB/OL]. (2022-10-08) [2023-08-05]. https://www.chinacdc.cn/jkzt/mxfcrjbhsh/jcysj/202210/t20221008_261458.html (in Chinese).
[34]	DZIUBA S, CIERNIAK-EMERYCH A, MICHALSKI G, et al. The use of the Internet by older adults in Poland[J]. Universal Access in the Information Society, 2021, 20(1): 171-178.
[35]	AL-AYASH A, KANE R T, SMITH D, et al. The influence of color on student emotion, heart rate, and performance in learning environments[J]. Color Research & Application, 2016, 41(2): 196-205.

颜色类型	颜色位置	颜色特征
主题色	导航栏、标题栏和图标	高饱和度、高明度
辅助色	标题栏、关键词和标注	中饱和度、高明度
背景色	界面背景	低饱和度、高明度

颜色类型	颜色位置	颜色特征
主题色	导航栏、标题栏和图标	高饱和度、高明度
辅助色	标题栏、关键词和标注	中饱和度、高明度
背景色	界面背景	低饱和度、高明度

视觉密度	冷色调		暖色调		M		文本密度	色调	文本密度×色调
视觉密度	M	SD	M	SD	M	SD	p	p	p
标准密度	253.750	100.597	272.417	76.704	263.083	88.003	0.398	0.104	0.017*
低密度	330.167	85.613	235.250	44.890	282.708	82.580
M	291.958	99.341	253.833	64.327

视觉密度	冷色调		暖色调		M		文本密度	色调	文本密度×色调
视觉密度	M	SD	M	SD	M	SD	p	p	p
标准密度	253.750	100.597	272.417	76.704	263.083	88.003	0.398	0.104	0.017*
低密度	330.167	85.613	235.250	44.890	282.708	82.580
M	291.958	99.341	253.833	64.327

视觉密度	冷色调		暖色调		M		文本密度	色调	文本密度×色调
视觉密度	M	SD	M	SD	M	SD	p	p	p
标准密度	3.667	1.303	2.583	0.996	3.125	1.262	0.046*	0.027*	0.496
低密度	4.167	1.337	3.583	1.379	3.875	1.361
M	3.917	1.316	3.083	1.283