文本视觉密度与界面色调对老年人数字健康教育的影响研究

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

图学学报 ›› 2024, Vol. 45 ›› Issue (3): 613-623.DOI: 10.11996/JG.j.2095-302X.2024030613

文本视觉密度与界面色调对老年人数字健康教育的影响研究

彭程¹(), 易敏哲¹(), 吴群¹, 于航勇²

1.浙江理工大学艺术与设计学院，浙江杭州 310018
2.福州大学厦门工艺美术学院，福建厦门 361021

收稿日期:2023-11-02 接受日期:2024-03-18 出版日期:2024-06-30 发布日期:2024-06-12
通讯作者:易敏哲(1988-)，男，副教授，博士。主要研究方向为交互设计、图形图像处理和计算机视觉等。E-mail：minzhe@zstu.edu.cn
第一作者:彭程(1998-)，男，硕士研究生。主要研究方向为移动视觉信息交互设计。E-mail：pengpeng13123@foxmail.com
基金资助:
国家社会科学基金青年项目(23CSH014)

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

PENG Cheng¹(), YI Minzhe¹(), WU Qun¹, YU Hangyong²

1. School of Art and Design, Zhejiang Sci-Tech University, Hangzhou Zhejiang 310018, China
2. Xiamen Academy of Arts and Design, Fuzhou University, Xiamen Fujian 361021, China

Received:2023-11-02 Accepted:2024-03-18 Published:2024-06-30 Online:2024-06-12
First author：PENG Cheng (1998-), master student. His main research interest covers mobile visual information interaction design. E-mail：pengpeng13123@foxmail.com
Supported by:
The National Social Science Fund of China(23CSH014)

摘要/Abstract

摘要：

数字健康教育以丰富的内容和灵活的教育方式在提升百姓健康素养方面做出了巨大贡献，但由于老年群体认知能力和视觉水平的衰退，在接受数字教育时常面临信息难以识别、理解困难等问题。因此，以数字健康教育平台阅读界面为研究对象，分析了界面视觉设计对老年群体阅读效果和认知负荷的影响。研究中的自变量为文本视觉密度和界面色调，因变量为阅读绩效。2×2双因子实验结果表明：①低文本密度下的阅读理解效果优于标准密度；②冷色调的阅读理解效果优于暖色调；③文本视觉密度与界面色调在阅读时间上存在显著的交互作用。冷色调在标准密度下的阅读用时更少，而暖色调在低密度下的阅读用时更少。研究从健康教育内容传播的视角进行界面设计分析，丰富了老年数字阅读体验数据，探讨了文本视觉密度和色调在界面中的效果与交叉关系，为提升老年人数字教育效能提供了具体设计建议。

关键词: 数字健康教育, 老年人学习, 界面视觉设计, 文本视觉密度, 界面色调

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

中图分类号:

TP391

彭程, 易敏哲, 吴群, 于航勇. 文本视觉密度与界面色调对老年人数字健康教育的影响研究[J]. 图学学报, 2024, 45(3): 613-623.

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.

图/表 13

图1 研究假设

Fig. 1 Research hypothesis

图2 不同密度下的文本识别特征((a)标准密度；(b)低密度)

Fig. 2 Text recognition features at different density levels ((a) Standard density; (b) Low density)

图3 冷暖色调

Fig. 3 Warm and cold color hue

图4 研究路径

Fig. 4 Research process

表1 界面颜色分类

Table 1 Interface color classification

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

图5 界面具体颜色设定

Fig. 5 Interface specific color settings

图6 文本视觉密度特征((a)标准密度；(b)低密度)

Fig. 6 Text visual density features ((a) Normal density; (b) Low density)

图7 4种不同的界面设计组合((a)冷色调界面；(b)暖色调界面)

Fig. 7 4 different interface design combinations ((a) Cold color interface; (b) Warm color interface)

图8 被试者操作流程

Fig. 8 Subject operation process

表2 阅读时间的描述性统计和双向方差分析

Table 2 Descriptive statistics and two-way ANOVA for the reading time

视觉密度	冷色调		暖色调		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

图9 文本密度和色调在阅读时间的交互效果

Fig. 9 Interaction effect of text density and color hue on reading time

表3 阅读理解的描述性统计和双向方差分析

Table 3 Descriptive statistics and two-way ANOVA for the reading comprehension

视觉密度	冷色调		暖色调		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

表4 认知负荷的描述性统计和双向方差分析

Table 4 Descriptive statistics and two-way ANOVA for the cognitive load

认知负荷	冷色调		暖色调		M		文本密度	色调	文本密度×色调
认知负荷	M	SD	M	SD	M	SD	p	p	p
标准密度	2.653	0.903	3.347	0.680	3.000	0.858	0.077	0.096	0.244
低密度	2.500	0.982	2.625	0.742	2.563	0.854
M	2.576	0.926	2.986	0.788

参考文献 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.

文本视觉密度与界面色调对老年人数字健康教育的影响研究

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

RichHTML

PDF (PC)

可视化

摘要/Abstract

引用本文

使用本文

图/表 13

参考文献 35

相关文章 15

编辑推荐

Metrics

本文评价

[1]	黄昱喆, 王旭鹏, 陈文会, 周中泽, 赵嘉鑫, 王芸倩. 面向足底压力优化的全接触矫形鞋垫设计[J]. 图学学报, 2024, 45(4): 868-878.
[2]	王枫红, 陈岱琳, 高紫婷, 文兆铖. HUD道路引导空间位置对新手驾驶人的影响[J]. 图学学报, 2024, 45(4): 856-867.
[3]	邹亚坤, 陈贤川, 谭毅, 林永枫, 张亚飞. 基于BIM和三维激光扫描的桁架几何质量自动化检测研究[J]. 图学学报, 2024, 45(4): 845-855.
[4]	张冀, 崔文帅, 张荣华, 王文彬, 李亚琦. 基于关键视图的文本驱动3D场景编辑方法[J]. 图学学报, 2024, 45(4): 834-844.
[5]	侯文军, 郭雨阳, 李桐. 大型公共场所全息地图信息交互应用研究[J]. 图学学报, 2024, 45(4): 827-833.
[6]	朱宝旭, 刘漫丹, 张雯婷, 谢立志. 高分辨率人脸纹理图全流程生成方法[J]. 图学学报, 2024, 45(4): 814-826.
[7]	龚辰晨, 曹力, 张腾腾, 吴奕泽. 面向建筑彩绘纹样的高质量贴图重构方法[J]. 图学学报, 2024, 45(4): 804-813.
[8]	梁成武, 杨杰, 胡伟, 蒋松琪, 钱其扬, 侯宁. 基于时间动态帧选择与时空图卷积的可解释骨架行为识别[J]. 图学学报, 2024, 45(4): 791-803.
[9]	赵磊, 李栋, 房建东, 曹琪. 面向交通标志的改进YOLO目标检测算法[J]. 图学学报, 2024, 45(4): 779-790.
[10]	武兵, 田莹. 基于注意力机制的多尺度道路损伤检测算法研究[J]. 图学学报, 2024, 45(4): 770-778.
[11]	李松洋, 王雪婷, 陈相龙, 陈恩庆. 基于骨骼点动态时域滤波的人体动作识别[J]. 图学学报, 2024, 45(4): 760-769.
[12]	宫永超, 沈旭昆. 一种用于互惠目标检测与实例分割的深层架构[J]. 图学学报, 2024, 45(4): 745-759.
[13]	曾志超, 徐玥, 王景玉, 叶元龙, 黄志开, 王欢. 基于SOE-YOLO轻量化的水面目标检测算法[J]. 图学学报, 2024, 45(4): 736-744.
[14]	牛为华, 郭迅. 基于改进YOLOv8的船舰遥感图像旋转目标检测算法[J]. 图学学报, 2024, 45(4): 726-735.
[15]	胡欣, 常娅姝, 秦皓, 肖剑, 程鸿亮. 基于改进YOLOv8和GMM图像点集匹配的双目测距方法[J]. 图学学报, 2024, 45(4): 714-725.