Evaluation method of virtual museum interface layout aesthetic with visual cognitive characteristics

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

Abstract

Abstract:

To address the lack of quantitative research on users′ visual cognitive characteristics in the evaluation of human-machine interface layout, an evaluation method for virtual museums′ interface layout aesthetics was presented, taking into account human visual cognitive characteristics. Firstly, symmetry, density, simplicity, order and dominance were selected as the evaluation indexes, and the abstract rectangular layout image was taken as the sample to evaluate the aesthetic of the interface layout. Secondly, the eye tracking technique was used to test the aesthetic of the interface layout, and the results of the users′ visual cognitive physiological data were obtained. Thirdly, based on the grey theory, an improved grey H-convex correlation model was constructed to quantify the mapping between users′ visual cognitive characteristics and the aesthetic of human-machine interface layout. Finally, the method was applied to the analysis of human-machine interface layout design in virtual museums, the validity of the evaluation method and its ability to judge the positive and negative correlation of the aesthetic index of man-machine layout were verified.

Key words: virtual museum, interface layout aesthetic, visual cognitive characteristics, grey H-convex incidence

CLC Number:

TP391

PEI Hui-ning, WEN Zhi-qiang, HUANG Xue-qin, TAN Zhao-yun, ZHANG Xin-xin. Evaluation method of virtual museum interface layout aesthetic with visual cognitive characteristics[J]. Journal of Graphics, 2023, 44(2): 389-398.

Figures/Tables 12

References 30

[1]	陈茜朦. 非物质文化遗产虚拟展览馆用户体验评价与量化模型研究[D]. 重庆: 重庆大学, 2019.
	CHEN Q M. Research on user experience evaluation and quantitative model of virtual exhibition hall of intangible cultural heritage[D]. Chongqing: Chongqing University, 2019. (in Chinese)
[2]	TRUNFIO M, CAMPANA S. A visitors′ experience model for mixed reality in the museum[J]. Current Issues in Tourism, 2020, 23(9): 1053-1058. DOI URL
[3]	LEOPARDI A, CECCACCI S, MENGONI M, et al. X-reality technologies for museums: a comparative evaluation based on presence and visitors experience through user studies[J]. Journal of Cultural Heritage, 2021, 47: 188-198. DOI URL
[4]	PAGANO A, ARMONE G, DE SANCTIS E. Virtual museums and audience studies: the case of "Keys To Rome″ exhibition[C]// 2015 Digital Heritage. New York: IEEE Press, 2015: 373-376.
[5]	王圣洁. 虚拟现实技术在博物馆展示设计中的应用研究[D]. 无锡: 江南大学, 2018.
	WANG S J. Research on the application of virtual reality in museum display design[D]. Wuxi: Jiangnan University, 2018. (in Chinese)
[6]	任英丽, 李鑫圆, 阳倩. VR虚拟博物馆交互体验设计研究[J]. 大众文艺, 2019(5): 121.
	REN Y L, LI X Y, YANG Q. Research on interactive experience design of virtual museum[J]. Popular Literature, 2019(5): 121. (in Chinese)
[7]	滕红, 王正东, 涂善东, 等. 过程系统中人机界面布局设计的实验研究[J]. 机械设计与研究, 2008, 24(5): 79-82, 87.
	TENG H, WANG Z D, TU S D, et al. Experimental study on layout designs for general interface in process plant for process plants[J]. Machine Design ＆ Research, 2008, 24(5): 79-82, 87. (in Chinese)
[8]	许永生, 李丽丽, 吴尤荻, 等. 基于注意力分配的高铁操纵台界面布局优化设计[J]. 西南交通大学学报, 2022, 57(2): 401-409.
	XU Y S, LI L L, WU Y D, et al. Optimization design of interface layout of high-speed railway control console based on attention distribution[J]. Journal of Southwest Jiaotong University, 2022, 57(2): 401-409. (in Chinese)
[9]	李晶, 郁舒兰, 刘玮. 基于眼动追踪的数控界面布局认知特性评价[J]. 计算机辅助设计与图形学学报, 2017, 29(7): 1334-1342.
	LI J, YU S L, LIU W. Cognitive characteristic evaluation of CNC interface layout based on eye-tracking[J]. Journal of Computer-Aided Design & Computer Graphics, 2017, 29(7): 1334-1342. (in Chinese)
[10]	WANG N, LIU S T. Research on virtual exhibition platform based on user experience[C]// 2010 IEEE 11th International Conference on Computer-Aided Industrial Design & Conceptual Design 1. New York: IEEE Press, 2010: 711-714.
[11]	ZOU N, GONG Q, ZHOU J P, et al. Value-based model of user interaction design for virtual museum[J]. CCF Transactions on Pervasive Computing and Interaction, 2021, 3(2): 112-128. DOI
[12]	KABASSI K, MARAVELAKIS E. Walkthrough evaluation of a VR museum for the physical environment[C]// The 6th International Conference on Information, Intelligence, Systems and Applications. New York: IEEE Press, 2015: 1-5.
[13]	徐琳, 陈强, 汪青. 色彩熵在图像质量评价中的应用[J]. 中国图象图形学报, 2015, 20(12): 1583-1592.
	XU L, CHEN Q, WANG Q. Application of color entropy to image quality assessment[J]. Journal of Image and Graphics, 2015, 20(12): 1583-1592. (in Chinese)
[14]	董天阳, 杨丽锦, 张鑫鹏. 用户多维感知的3D图像体验质量评价[J]. 中国图象图形学报, 2019, 24(5): 782-793.
	DONG T Y, YANG L J, ZHANG X P. 3D image experience quality evaluation method for users′ multi-dimensional perception[J]. Journal of Image and Graphics, 2019, 24(5): 782-793. (in Chinese)
[15]	HORBIŃSKI T, CYBULSKI P, MEDYŃSKA-GULIJ B. Graphic design and button placement for mobile map applications[J]. The Cartographic Journal, 2020, 57(3): 196-208. DOI URL
[16]	LAZARD A J, KING A J. Objective design to subjective evaluations: connecting visual complexity to aesthetic and usability assessments of eHealth[J]. International Journal of Human-Computer Interaction, 2020, 36(1): 95-104. DOI URL
[17]	DIANAT I, ADELI P, ASGARI JAFARABADI M, et al. User-centred web design, usability and user satisfaction: the case of online banking websites in Iran[J]. Applied Ergonomics, 2019, 81: 102892. DOI URL
[18]	PENGNATE S, SARATHY R, LEE J. The engagement of website initial aesthetic impressions: an experimental investigation[J]. International Journal of Human-Computer Interaction, 2019, 35(16): 1517-1531. DOI URL
[19]	NGO D C L, TEO L S, BYRNE J G. Modelling interface aesthetics[J]. Information Sciences, 2003, 152: 25-46. DOI URL
[20]	周蕾, 薛澄岐, 汤文成, 等. 界面元素布局设计的美度评价方法[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)
[21]	周爱民, 苏建宁, 阎树田, 等. 产品形态审美综合评价的非线性信息动力学模型[J]. 机械工程学报, 2018, 54(15): 150-159. DOI
	ZHOU A M, SU J N, YAN S T, et al. Nonlinear information dynamics model of synthetic evaluation on product form aesthetic[J]. Journal of Mechanical Engineering, 2018, 54(15): 150-159. (in Chinese) DOI
[22]	邓聚龙. 灰理论基础[M]. 武汉: 华中科技大学出版社, 2002: 63-170.
	DENG J L. Grey theory basis[M]. Wuhan: Huazhong University of Science and Technology Press, 2002: 63-170. (in Chinese)
[23]	潘平国, 陈勇明, 谢海英. 灰色H-凸关联度模型研究[J]. 统计与决策, 2016(9): 31-34.
	PAN P G, CHEN Y M, XIE H Y. Study on grey-convex correlation degree model[J]. Statistics ＆ Decision, 2016(9): 31-34. (in Chinese)
[24]	周蕾, 薛澄岐, 汤文成, 等. 产品信息界面的用户感性预测模型[J]. 计算机集成制造系统, 2014, 20(3): 544-554. DOI
	ZHOU L, XUE C Q, TANG W C, et al. User perceptual prediction model of product information interface[J]. Computer Integrated Manufacturing Systems, 2014, 20(3): 544-554. (in Chinese)
[25]	马文静. 网页常见布局类型及布局技术的分析[J]. 现代信息科技, 2018, 2(7): 103-104, 106.
	MA W J. Analysis of the common layout types and layout techniques of web pages[J]. Modern Information Technology, 2018, 2(7): 103-104, 106. (in Chinese)
[26]	张婷婷. 图形用户界面中影响用户认知的图标设计因素研究[D]. 上海: 上海交通大学, 2011.
	ZHANG T T. Effects of icon design factors on user recognition in graphical user interface[D]. Shanghai: Shanghai Jiao Tong University, 2011. (in Chinese)
[27]	邓丽, 余隋怀, 陈波. 基于Vague集的人机界面布局眼动追踪评价[J]. 工程设计学报, 2016, 23(3): 222-227.
	DENG L, YU S H, CHEN B. Eye tracking evaluation of human-machine interface layout based on Vague set[J]. Chinese Journal of Engineering Design, 2016, 23(3): 222-227. (in Chinese)
[28]	王坚浩, 王龙, 张亮, 等. 灰色群组聚类和改进CRITIC赋权的供应商选择VIKOR多属性决策[EB/OL]. [2021-11-02]. https://kns.cnki.net/kcms/detail/detail.aspx?dbcode=CAPJ&dbname=CAPJLAST&filename=XTYD20211101003&uniplatform=NZKPT&v=eV6a0WLq41o77kb9LQufyGzSh2n6D9Su7Mi2EVgyNcHem7Kq3Ctb9wDOq9SzUxtP.
	WANG J H, WANG L, ZHANG L, et al. Supplier selection vikor Multi-attribute decision making of grey group clustering and improved critic weighting[EB/OL]. [2021-11-02]. https://kns.cnki.net/kcms/detail/detail.aspx?dbcode=CAPJ&dbname=CAPJLAST&filename=XTYD20211101003&uniplatform=NZKPT&v=eV6a0WLq41o77kb9LQufyGzSh2n6D9Su7Mi2EVgyNcHem7Kq3Ctb9wDOq9SzUxtP.
[29]	DING X C, WANG J, LAHIJANIAN M, et al. Temporal logic motion control using actor-critic methods[J]. 2012 IEEE International Conference on Robotics and Automation, 2012: 4687-4692.
[30]	LIU Z G, FAN W L, HU P. Multi-attribute node importance evaluation method based on Gini-coefficient in complex power grids[J]. IET Generation, Transmission and Distribution, 2016, 10(9): 2027-2034. DOI URL

布局方案	对称度	密集度	简洁度	次序度	优势度
A	0.94	0.99	1.00	0.88	0.84
B	0.93	0.78	0.82	0.75	0.81
C	0.91	0.76	0.75	0.75	0.78
D	0.44	0.69	0.65	0.50	0.72
E	0.32	0.72	0.70	0.50	0.67
F	0.52	0.85	0.75	0.63	0.73

布局方案	对称度	密集度	简洁度	次序度	优势度
A	0.94	0.99	1.00	0.88	0.84
B	0.93	0.78	0.82	0.75	0.81
C	0.91	0.76	0.75	0.75	0.78
D	0.44	0.69	0.65	0.50	0.72
E	0.32	0.72	0.70	0.50	0.67
F	0.52	0.85	0.75	0.63	0.73

布局方案	注视长(ms)	注视次数 (N)	平均瞳孔直径 (mm)	注视转移频率 (%)	注视时间百分比(%)
A	2 527	7.00	3.00	68.9	70.43
B	2 963	10.30	3.02	60.5	71.27
C	3 751	14.40	3.04	60.1	65.48
D	5 460	20.60	3.06	45.8	56.55
E	6 628	17.20	3.05	45.2	49.69
F	5 062	10.80	3.04	57.0	59.33

布局方案	注视长(ms)	注视次数 (N)	平均瞳孔直径 (mm)	注视转移频率 (%)	注视时间百分比(%)
A	2 527	7.00	3.00	68.9	70.43
B	2 963	10.30	3.02	60.5	71.27
C	3 751	14.40	3.04	60.1	65.48
D	5 460	20.60	3.06	45.8	56.55
E	6 628	17.20	3.05	45.2	49.69
F	5 062	10.80	3.04	57.0	59.33

界面布局方案	注视时长 Y₁ (ms)	注视次数 Y₂ (N)	平均瞳孔直径Y₃ (mm)	注视转移频率Y₄ (%)	注视百分比 Y₅ (%)	对称度 X₁	密集度 X₂	简洁度 X₃	次序度 X₄	优势度 X₅
V₁	1.000 0	1.000 0	1.000 0	1.000 0	0.961 1	1.000 0	1.000 0	1.000 0	1.000 0	1.000 0
V₂	0.893 7	0.757 4	0.666 7	0.645 6	1.000 0	0.983 9	0.300 0	0.485 7	0.657 9	0.823 6
V₃	0.701 5	0.455 9	0.333 4	0.628 7	0.731 7	0.949 9	0.233 3	0.285 7	0.657 9	0.647 1
V₄	0.284 8	0.000 0	0.000 0	0. 025 3	0.317 9	0.193 5	0.000 0	0.000 0	0.000 0	0.294 1
V₅	0.000 0	0.250 0	0.166 7	0.000 0	0.000 0	0.000 0	0.100 0	0.142 9	0.000 0	0.000 0
V₆	0.381 9	0.720 6	0.333 4	0.497 9	0.446 7	0.322 6	0.533 4	0.285 7	0.342 1	0.353 0