Evaluation Method for Virtual Museum Interface Integrating Layout Aesthetics and Visual Cognitive Characteristics Based on Improved Gray H-Convex Correlation Model

Abstract

A scientific method for evaluating the design of interfaces is proposed to address the unique characteristics and user needs of infrequent-contact public service interfaces. This method is significant for enhancing service efficiency and promoting the sustainable development of public services. Current interface evaluation methods are limited in scope and often fail to meet actual user needs. To address this, this study focuses on virtual museums, examining users’ aesthetic psychology and cognitive behavior in terms of layout aesthetics and visual cognitive characteristics, aiming to explore the relationship between the two. Interface layout aesthetic values and user visual cognitive measurements were obtained by using computational aesthetics methods and eye-tracking experiments. These served as input data for a new model. An improved gray H-convex correlation model utilizing the ICRITIC method is proposed to examine the mapping relationship between interface layout aesthetics and visual cognitive features. The results demonstrate that our new model achieves over 90% accuracy, outperforming existing models. For virtual museum interfaces, symmetry and dominance significantly influence user visual cognition, with the most notable correlations found between density and gaze shift frequency, simplicity and mean pupil diameter, and order and gaze shift frequency. Additionally, fixation duration, fixation count, and mean pupil diameter were inversely correlated with interface layout aesthetics, whereas gaze shift frequency and gaze time percentage were positively correlated.

1. Introduction

Culture provides sustainable spiritual support for the harmonious development of human society. Continuous research on culture is vital for preserving cultural diversity, transmitting cultural heritage, and promoting cultural innovation. Currently, the surge in internet technologies and digitization offers development opportunities for cultural sustainability [1]. Virtual museums, leveraging virtual reality technology to create interactive and open virtual environments, allow people to visit cultural relics across time and space, significantly contributing to cultural dissemination and preservation [2]. Based on digital technology, museums provide online cultural exhibition services to the public, increasing the accessibility of museums and significantly enhancing the public’s right to browse and learn about culture [3]. Some scholars have conducted research from the perspective of human perceptual characteristics, aiming to enhance the attractiveness and user experience of virtual museums. Using experimental testing methods, the impact of ambient lighting and color temperature in virtual museum environments on users’ visual perception preferences was explored, with the aim of enhancing visitors’ perceptual experiences, attracting more visitors to the museum, and expanding cultural dissemination [4,5]. Jeon et al. [6] established a multisensory interaction system by combining voice interaction and visual information interaction from the perspective of auditory and visual perception, aiming to enhance the emotional interaction experience in virtual museums. Volioti et al. [7] proposed an interactive learning experience system based on the visual, auditory, and tactile perceptual needs of visitors, aiming to engage virtual museum visitors in the transmission of cultural knowledge in an active and creative manner.

However, existing research on virtual museums often overlooks the importance of interactive interface design and evaluation methods, which greatly impacts the user experience. As a critical medium for accessing service facilities, the quality of interface design directly affects service quality and the sustainability of user engagement. From the perspective of user experience and interaction design, high-quality interface design could enhance user satisfaction and engagement, foster understanding and acceptance of museum content, attract more visitors, and promote the sustainable development of museums [8]. Therefore, establishing a scientific interface design evaluation method that meets user needs is crucial.

In addition, the virtual museum interface belongs to the category of infrequent-contact public service interfaces, which refers to operational interfaces that users do not frequently interact with, but need to use efficiently to complete specific tasks. This type of interface is widely employed in urban public service facilities such as hospitals, airports, railway stations, museums, shopping malls, and so on [9,10]. For these interfaces, designs that are visually aesthetically pleasing and align with human visual habits can enhance information recognition efficiency and user experience [11]. Therefore, it is crucial to develop scientific design evaluation methods specifically for those infrequently contacted interfaces.

However, research on evaluating the interface design of virtual museums is limited, with few studies considering both human aesthetic psychology and physiological behavior. There is even less quantitative research on the relationship between interface layout aesthetics and visual cognitive features. This study aims to bridge this gap by combining interface aesthetics with users’ visual cognitive characteristics and calculating their correlation. Using these correlations as design guidelines, designers can create virtual museum interfaces that better meet users’ aesthetic preferences and align with their visual cognitive habits. This approach allows users to feel more comfortable and natural when browsing and interacting, optimizes information communication, enhances interface aesthetics, improves user experience and satisfaction, and ultimately promotes the sustainability of public service interfaces.

Scholars have explored the technical optimization, interactive experience, and interface evaluation of virtual museums. However, there is a notable lack of evaluation research from the perspectives of both human aesthetic experience and visual behavioral habits. Furthermore, quantitative studies on the correlation between these two aspects are even scarcer. Leopardi et al. [12] focused on optimizing virtual museum systems using extended reality (XR) technology, aiming to enhance platform stability. Wolfgang et al. [13] utilized virtual reality to restore and expand exhibit content, thereby optimizing the user experience when viewing artwork. In terms of interactive experience optimization, Paul F. Marty et al. [14] advocated for a “user-centered” approach, emphasizing how users engage with virtual museums and their resources. Regarding the evaluation of virtual museum interfaces, Tanriverdi et al. [15] proposed a VRID design model for interactive interfaces, categorizing interface design into graphical elements, interactive feedback, and behavioral performance. Frojdman et al. [16] provided seven guidelines for interface design, focusing on layout positioning and interaction feedback, using methods such as heuristic evaluation, interviews, and usability testing. Nadia et al. [17] conducted a case study revealing that icon visual design significantly enhances user experience in navigating and searching for information.

The gray model effectively elucidates the mapping relationship between interface layout aesthetics and users’ visual cognitive features. Additionally, the gray H-convex correlation model offers significant advantages over other gray models [18]. We provide a comparative analysis in the subsequent sections. However, it is important to note that the gray H-convex correlation model has a limitation in that it ignores the influence of indicator weights. To address this, our study employs the ICRITIC (improved criteria importance through intercriteria correlation) method to optimize the model. The ICRITIC method is superior to the original CRITIC (criteria importance through intercriteria correlation) method due to its more reasonable weight acquisition process. Therefore, this paper proposes an improved gray H-convex correlation model based on the ICRITIC method to solve the correlation problem between aesthetic features and visual cognitive features of interface layouts, which represents a pioneering attempt in this area.

The remainder of this paper is arranged as follows. Section 2 reviews related studies on interface layout aesthetics and visual perception, delineates our motivation and methodology, and presents the overall framework of this study. In Section 3, we establish an evaluation index system for interface layout, focusing on both aesthetics and visual cognition. Section 4 details the construction of an improved gray H-convex correlation model to determine the mapping relationship between layout aesthetics and visual cognition. Section 5 validates our proposed method by applying it to virtual museum interfaces from various provinces in China, thereby assessing its suitability as a standard for future interface design. Finally, Section 6 summarizes the study’s findings, discusses its limitations, and proposes directions for future research.

2. Theoretical Background

2.1. Interface Layout Aesthetics

Currently, there are two primary methods for analyzing the aesthetics of interface layout: subjective human evaluation and objective formula calculation. In terms of subjective evaluation, scholars have extensively studied the influence of various interface design elements on user experience. For example, studies have focused on elements such as colors, images, and buttons [19,20,21], as well as the subjective perceptual influences of interface visual complexity, usefulness, and attractiveness [22,23,24]. In addition, with the continuous advancement in science and technology, researchers have proposed objective quantitative calculation methods for assessing interface aesthetics. Birkhoff [25] introduced computational aesthetics and proposed a mathematical formula for macroscopic aesthetics, M = O/C, where aesthetics is defined as the ratio of order (O) to complexity (C). Building upon this, Ngo et al. [26] developed mathematical formulae based on computational aesthetics to quantify the aesthetic elements of interface layout in interface design. However, the correlations between these indicators and their applicability to other interface domains remain unclear. Zhou et al. [27] presented an objective comprehensive evaluation model for interface style aesthetics using “vivacious aesthetics” as an example and considering interface design style as a key perspective.

In summary, scholars have made progress in the research of interface aesthetics calculation, applying computational aesthetics principles to objectively and quantitatively determine overall interface aesthetics. However, direct comparative evaluations of aesthetic indicators often yield overly generalized and lacking diversity results. Users’ aesthetic needs are multifaceted, encompassing psychological, physiological, and other factors. Therefore, relying solely on counting formulae for calculation does not align with a user-centered research approach, resulting in discrepancies between calculated outcomes and actual user preferences. Instead, combining users’ physiological cognitive habits can improve evaluation accuracy. Consequently, we conducted a literature review focusing on the visual cognition domain.

2.2. Visual Cognition

Visual cognition refers to the process by which objective information from the outside world serves as a source of stimulation, transmitted to the brain through the optic nerve, and then processed by the brain [28]. When observing interface information, the eye is the primary organ for acquiring visual data. The physiological behavior of the human eye’s gaze during the processing of interactive interface information is closely related to brain cognition [29]. However, since human visual attention is limited, presenting virtual museum interface information in an unorganized manner may cause cognitive confusion for users. Eye-tracking technology enables the measurement of visual gaze focus, reflecting individual interest preferences and providing insights into cognitive performance during human–computer interactions. Consequently, scholars measure human visual cognitive characteristics through eye-tracking experiments. Montazem et al. [30] conducted eye movement experiments to analyze the impact of different information presentation methods on interface usability, noting particularly that novice users tend to favor simpler graphical interfaces. Zhi et al. [31] examined various train-driving interface layouts to study human visual cognitive load, search efficiency, and attention allocation through eye movement experiments. Salman et al. [32] conducted experimental measurements to evaluate health-care information system interfaces and proposed an optimization methodology for interface design that can serve as a valuable reference. Furthermore, Daniel et al. [33] analyzed the gaze trajectory, gaze point distribution, and gaze frequency of pilots using a cockpit instrument panel interface. Their goal was to reduce pilot operational errors by incorporating insights from eye movement experiments.

In summary, scholars have evaluated interface usability based on either interface layout aesthetics or visual cognitive features, but they have not attempted to combine the two. Relying solely on one evaluation dimension cannot fully capture user needs. Additionally, without distinguishing interface types, the evaluation method may not be applicable to infrequently contacted public service interfaces. To address this shortcoming, this study evaluates interface usability from the dimensions of interface layout aesthetics and users’ visual cognitive characteristics, quantitatively describing the mapping relationship between the two. This approach aims to propose a new methodology for the design and usability evaluation of public service interfaces, providing a guiding principle for designers in future interface design.

2.3. Research Motivation and Methodology

To improve the quality of interface design while considering users’ aesthetic psychology and physiological habits, this paper proposes an evaluation method for interface layout design. Given the current lack of distinction in interface types in the research, this study focuses on evaluating infrequently contacted public service interfaces, using virtual museum interfaces in various provinces of China as examples. Scholars have separately studied interface layout aesthetics and visual cognition, but there is a notable gap in research combining these two aspects. Therefore, another focus of this study is to evaluate interface quality by integrating interface layout aesthetics and visual cognitive features, elucidating their relevance. To address the aforementioned issues, we have introduced the methods applied in this study. This approach aims to provide a comprehensive evaluation methodology that can guide future interface design by aligning with both aesthetic and cognitive user needs.

The gray theory is named after the color. A system with completely clear information is called a white system, a system with completely unknown information is called a black system, and a system with partially known and partially unknown information is called a gray system [34]. In this study, the aesthetic value of the interface layout scheme (calculated through relevant formulae) and the user’s visual cognitive features (derived from eye movement experiments) belong to the white system, as they are known quantities. However, the mapping relationship between the two belongs to the black system, as it remains unknown and unmeasurable. Therefore, this paper employs the gray model to analyze the relationship between interface layout aesthetics and visual cognitive features. While the gray H-convex correlation model is adept at determining correlation issues, it has a defect in that it ignores the weight differences of the indicators, leading to lower accuracy in model results. To address this, an improved gray H-convex correlation model is proposed using the ICRITIC method to quantitatively study the correlation between interface layout aesthetics and visual cognitive features.

(1)

Gray H-convex correlation

Since Professor Deng proposed his correlation model [35], research on gray correlation analysis has advanced rapidly. Scholars have subsequently established a series of correlation models to further explore and refine this analytical approach, including the gray entropy correlation model [36], the gray B-type correlation model [37], and new gray absolute correlation model [38], etc. The aforementioned gray correlation algorithms have some shortcomings. For example, they are suitable only for cases of positive correlation among sequence factors and have a blind spot when processing oscillatory sequences. To address these limitations, Pan et al. [18] used the principles of span and arch height to express the convexity of folds at the transverse level and proposed a gray H-convex correlation model. This model effectively quantifies the degree of correlation between the factors of the series and distinguishes between positive and negative correlations. However, despite its ability to judge negative correlation problems between indicators, it overlooks differences in the weights of the indicators.

(2)

ICRITIC

The ICRITIC methodology was employed to compute the weight coefficients for every aesthetic evaluation criterion, aiming to enhance the optimization of the gray H-convex correlation mode. Traditional CRITIC approaches rely on standard deviation and correlation coefficients to assess the intensity of comparison and conflict [39,40]. Nonetheless, variations in indicator dimensions and magnitudes pose challenges, rendering standard deviation insufficient for accurately reflecting the comparative strength among indicators. Furthermore, it is worth noting that the correlation coefficient among indicators often exhibits a negative correlation. In other words, as the conflict between indicators intensifies, the correlation coefficient tends to decrease. Consequently, the ICRITIC method addresses this issue by incorporating two key approaches. Firstly, it evaluates the comparative strength of indicators through the introduction of the Gini coefficient [41]. Secondly, it treats the correlation coefficient within the conflict coefficient as an absolute value, effectively mitigating the influence of negative correlation coefficients.

2.4. Thesis Framework

The overarching framework of this study is delineated into three segments, as depicted in Figure 1. (1) Firstly, the initial segment entails the establishment of the evaluation criteria system pertaining to the interface layout of the virtual museum. (2) The second part is to obtain evaluation data based on the evaluation indicators determined in the first part. The data come from two sources. On the one hand, the aesthetic value of virtual museum interface samples is computed utilizing the quantitative layout aesthetic criteria calculation method. On the other hand, combining eye-tracking technology, various virtual museum interfaces serve as experimental stimulus images to procure user visual cognitive physiological measurement results. (3) In the third part, the ICRITIC method is deployed to refine the gray H-convex correlation model. The interface aesthetic values and user visual cognitive measurements obtained in the second phase are input into the model to ascertain the correlation between them. This correlation serves as the evaluation standard for the interface layout design of virtual museums.

3. Interface Layout Evaluation Criteria System

This study accounted for both the psychological and physiological factors of users, culminating in the establishment of an evaluation criteria system for virtual museum interface layout across two dimensions: aesthetics and visual cognition.

Regarding aesthetic evaluation, designers frequently conduct their design work relying on personal subjective judgment, often lacking direct communication and understanding with users. This gap directly results in designs that deviate from users’ perceptions. Thus, it is imperative to delve into users’ perceptual image needs to enhance the rationality of interface aesthetic evaluation outcomes. A total of 7 experts with over 5 years of experience in human–computer interface design were selected alongside 20 interface design students (comprising the professional group) and 20 non-design students (constituting the non-professional group). Maintaining an equal gender distribution, the participants’ ages ranged from 20 to 35 years, all possessing normal vision with no visual impairments. Initially, the sample underwent imagery analysis by the professional group, then was subsequently adjudicated and augmented by the non-professional group. This process yielded 24 interface layout design imagery feature vocabularies exhibiting significant dissimilarity. Subsequently, these 24 sensory image words underwent classification via cluster analysis. Following parameter adjustment, they were categorized into seven groups, showcasing the most discernible effects. Thereafter, factor analysis was employed to extract factors possessing eigenvalues exceeding 1 and cumulative variance contributions surpassing 90%. These factors—symmetry, density, simplicity, order, and dominance—were subsequently designated as the final aesthetic evaluation criteria.

Concerning visual cognition evaluation, previous research has underscored the impact of interface element layout on users’ visual cognitive performance. Utilizing eye-tracking technology, changes in users’ gaze patterns when observing interface element layouts can be captured, providing valuable physiological data [42]. Presently, eye movement criteria with a mapping relationship to aesthetic criteria of interface layout include fixation duration, fixation count, mean pupil diameter, gaze shift frequency, and gaze time percentage [43,44,45,46,47]. Consequently, these criteria were selected to assess visual cognitive performance. The interface layout evaluation criteria system is depicted in Figure 2.

4. Model Construction

4.1. Modeling Framework

The model framework, depicted in Figure 3, is segmented into three distinct parts. Moreover, the significance of the symbols in the diagrams is elaborated upon in Section 4 and shall not be reiterated here.

(1)

Obtaining criteria data. Firstly, we computed aesthetic assessment values by amalgamating objective formulae with abstract rectangular samples [26]. Secondly, physiological measurements of visual cognition were acquired utilizing eye-tracking technology to collect pertinent eye movement indicator data. Let the set of aesthetic evaluation criteria be $\left\{C_{a1},C_{a2},C_{a3},C_{a4},C_{a5}\right\}$, and the set of eye movement criteria is $\left\{C_{e1},C_{e2},C_{e3},C_{e4},C_{e5}\right\}$.

(2)

Constructing a weighted indicator sequence matrix based on the ICRITIC. Utilizing the ICRITIC method for weight assignment to criteria, a weighted criteria sequence matrix is constructed, where $X_1$ denotes the data sequence of the first eye movement indicator under $N$ samples, $X_2$, $X_3$, $X_4$, $X_5$ and so on and $Y_1$ denotes the data sequence of the first aesthetic indicator under $N$ samples, $Y_2$, $Y_3$, $Y_4$, $Y_5$ and so on.

(3)

Gray H-convex correlation model. Optimizing the gray H-convex correlation model based on weighted indicator sequence matrices. Using the visual cognitive criteria sequence as the reference sequence, i.e., $Y=\left(Y_1,Y_2,Y_3,Y_4,Y_5\right)$, and using the layout aesthetic criteria sequence as the comparison sequence, i.e., $X=\left(X_1,X_2,X_3,X_4,X_5\right)$. The mapping relationship between layout aesthetics and visual cognitive features is clarified by calculating the correlation between the indicator data sequence curves, where ${\widehat{\gamma }}_{H\left(X_a,X_m\right)}\left(k\right)$ is denoted as the gray H-convexity coefficients of $X_a$ and $X_m$ at $t=k$, an ${\widehat{R}}_H\left(X_a,X_m\right)$ is denoted as the gray H-convex correlation degree between sequences $X_a$ and $X_m$. The meaning of the symbols in the diagrams is detailed in Section 4.2.3 and will not be repeated here.

Figure 3. Model framework.

Figure 3. Model framework.

4.2. Layout Aesthetics and Visual Cognitive Mapping Model

4.2.1. Collecting Data

Layout Aesthetic Evaluation Value

In this section, there are a total of five layout aesthetic indicators that require quantification: symmetry, density, simplicity, order, and dominance. The following elucidates the detailed methods and steps. Leveraging insights from the psychological proposition on the shape advantages of human cognitive processing, interface information and images are functionally partitioned and abstracted into rectangles, facilitating precise positioning of interface elements. Subsequently, a coordinate system for calculating the interface layout aesthetic criteria was established, depicted in Figure 4. Select four parameters for spatial positioning of interface elements, namely, rectangular $x$-coordinate, $y$-coordinate, total width $b$, and total height $h$. Among them, $x_{ij}$ and $y_{ij}$ represent the $x$ and $y$ coordinates of the layout element, while $b_{ij}$ and $h_{ij}$ represent width and height. The following are the specific meanings and calculations of the interface aesthetic indicator, with the aesthetic value set as an uninterrupted number in the interval [0, 1].

(1)

Symmetry $C_{a1}$

The symmetry in interface layout is calculated based on three main directions: vertical, horizontal, and diagonal symmetry. According to the literature [26], the symmetry is calculated as:

$$C_{a1}=1-{\displaystyle \frac{\left|s_{\mathrm{vertical}}\right|+\left|s_{\mathrm{h}\mathrm{o}\mathrm{r}\mathrm{i}\mathrm{z}\mathrm{o}\mathrm{n}\mathrm{t}\mathrm{a}\mathrm{l}}\right|+\left|s_{\mathrm{radial}}\right|}{3}}$$

(1)

where $S_{\mathrm{v}\mathrm{e}\mathrm{r}\mathrm{t}\mathrm{i}\mathrm{c}\mathrm{a}\mathrm{l}},S_{\mathrm{h}\mathrm{o}\mathrm{r}\mathrm{i}\mathrm{z}\mathrm{o}\mathrm{n}\mathrm{t}\mathrm{a}\mathrm{l}}$ and $S_{\mathrm{r}\mathrm{a}\mathrm{d}\mathrm{i}\mathrm{a}\mathrm{l}}$ denote vertical, horizontal and diagonal symmetry values, respectively,

$$S_{\mathrm{vertical}}={\displaystyle \frac{1}{12}}\left(\begin{array}{l}\left|{X^{\prime }}_{\mathrm{UL}}-{X^{\prime }}_{\mathrm{UR}}\right|+\left|{X^{\prime }}_{\mathrm{LL}}-{X^{\prime }}_{\mathrm{LR}}\right|+\left|{Y^{\prime }}_{\mathrm{UL}}-{Y^{\prime }}_{\mathrm{UR}}\right|+\left|{Y^{\prime }}_{\mathrm{LL}}-{Y^{\prime }}_{\mathrm{LR}}\right|+\left|{H^{\prime }}_{\mathrm{UL}}-{H^{\prime }}_{\mathrm{UR}}\right|+\left|{H^{\prime }}_{\mathrm{LL}}-{H^{\prime }}_{\mathrm{LR}}\right|\\ +\left|{B^{\prime }}_{\mathrm{UL}}-{B^{\prime }}_{\mathrm{UR}}\right|+\left|{B^{\prime }}_{\mathrm{LL}}-{B^{\prime }}_{\mathrm{LR}}\right|+\left|{{\theta }^{\prime }}_{\mathrm{UL}}-{{\theta }^{\prime }}_{\mathrm{UR}}\right|+\left|{{\theta }^{\prime }}_{\mathrm{LL}}-{{\theta }^{\prime }}_{\mathrm{LR}}\right|+\left|{R^{\prime }}_{\mathrm{UL}}-{R^{\prime }}_{\mathrm{UR}}\right|+\left|{R^{\prime }}_{\mathrm{LL}}-{R^{\prime }}_{\mathrm{LR}}\right|\end{array}\right)$$

(2)

$$S_{\mathrm{h}\mathrm{o}\mathrm{r}\mathrm{i}\mathrm{z}\mathrm{o}\mathrm{n}\mathrm{t}\mathrm{a}\mathrm{l}}={\displaystyle \frac{1}{12}}\left(\begin{array}{l}\left|{X^{\prime }}_{\mathrm{UL}}-{X^{\prime }}_{\mathrm{LL}}\right|+\left|{X^{\prime }}_{\mathrm{UR}}-{X^{\prime }}_{\mathrm{LR}}\right|+\left|{Y^{\prime }}_{\mathrm{UL}}-{Y^{\prime }}_{\mathrm{LL}}\right|+\left|{Y^{\prime }}_{\mathrm{UR}}-{Y^{\prime }}_{\mathrm{LR}}\right|+\left|{H^{\prime }}_{\mathrm{UL}}-{H^{\prime }}_{\mathrm{LL}}\right|+\left|{H^{\prime }}_{\mathrm{UR}}-{H^{\prime }}_{\mathrm{LR}}\right|\\ +\left|{B^{\prime }}_{\mathrm{UL}}-{B^{\prime }}_{\mathrm{LL}}\right|+\left|{B^{\prime }}_{\mathrm{UR}}-{B^{\prime }}_{\mathrm{LR}}\right|+\left|{{\theta }^{\prime }}_{\mathrm{UL}}-{{\theta }^{\prime }}_{\mathrm{LL}}\right|+\left|{{\theta }^{\prime }}_{\mathrm{UR}}-{{\theta }^{\prime }}_{\mathrm{LR}}\right|+\left|{R^{\prime }}_{\mathrm{UL}}-{R^{\prime }}_{\mathrm{LL}}\right|+\left|{R^{\prime }}_{\mathrm{UR}}-{R^{\prime }}_{\mathrm{LR}}\right|\end{array}\right)$$

(3)

$$S_{\mathrm{radial}}={\displaystyle \frac{1}{12}}\left(\begin{array}{l}\left|{X^{\prime }}_{\mathrm{UL}}-{X^{\prime }}_{\mathrm{LR}}\right|+\left|{X^{\prime }}_{\mathrm{UR}}-{X^{\prime }}_{\mathrm{LL}}\right|+\left|{Y^{\prime }}_{\mathrm{UL}}-{Y^{\prime }}_{\mathrm{LR}}\right|+\left|{Y^{\prime }}_{\mathrm{UR}}-{Y^{\prime }}_{\mathrm{LL}}\right|+\left|{H^{\prime }}_{\mathrm{UL}}-{H^{\prime }}_{\mathrm{LR}}\right|+\left|{H^{\prime }}_{\mathrm{UR}}-{H^{\prime }}_{\mathrm{LL}}\right|\\ +\left|{B^{\prime }}_{\mathrm{UL}}-{B^{\prime }}_{\mathrm{LR}}\right|+\left|{B^{\prime }}_{\mathrm{UR}}-{B^{\prime }}_{\mathrm{LL}}\right|+\left|{{\theta }^{\prime }}_{\mathrm{UL}}-{{\theta }^{\prime }}_{\mathrm{LR}}\right|+\left|{{\theta }^{\prime }}_{\mathrm{UR}}-{{\theta }^{\prime }}_{\mathrm{LL}}\right|+\left|{R^{\prime }}_{\mathrm{UL}}-{R^{\prime }}_{\mathrm{LR}}\right|+\left|{R^{\prime }}_{\mathrm{UR}}-{R^{\prime }}_{\mathrm{LL}}\right|\end{array}\right)$$

(4)

where ${X^{\prime }}_j,{Y^{\prime }}_j,{H^{\prime }}_j,{B^{\prime }}_j,{{\theta }^{\prime }}_j$ and ${R^{\prime }}_j$ are the dimensionless values of $X_j,Y_j,H_j,B_j,{\theta }_j$ and $R_j$ after the canonical treatment, respectively, and:

$$X_j={\displaystyle \sum _i^{n_j}\left|x_{ij}-x_c\right|},j=\mathrm{UL},\mathrm{UR},\mathrm{LL},\mathrm{LR}$$

(5)

$$Y_j={\displaystyle \sum _i^{n_j}\left|y_{ij}-y_c\right|}$$

(6)

$$H_j={\displaystyle \sum _i^{n_j}{h}_{ij}},B_j={\displaystyle \sum _i^{n_j}{b}_i},{\theta }_j={\displaystyle \sum _i^{n_j}\left|\frac{y_{ij}-y_c}{x_{ij}-x_c}\right|}$$

(7)

$$R_j={\displaystyle \sum _i^{n_j}\sqrt{{\left(x_{ij}-x_c\right)}^2+{\left(y_{ij}-y_c\right)}^2}}$$

(8)

$${G^{\prime }}_i={\displaystyle \frac{o_i-\underset{1\le j\le n}{\min \left\{o_j\right\}}}{\underset{1\le j\le n}{\max \left\{o_j\right\}}-\underset{1\le j\le n}{\min \left\{o_j\right\}}}},G=X,Y,H,B,\theta ,R.$$

(9)

where $UL,UR,LL$ and $LR$ denote upper left, upper right, lower left and lower right, respectively, $\left(x_{ij},y_{ij}\right)$ are the coordinates of the center of element $i$ in quadrant $j$, and $\left(x_c,y_c\right)$ are the coordinates of the center of the interface. $b_{ij}$ and $h_{ij}$ are the width and height of the object, respectively, and $n_j$ refers to the total number of objects on the quadrant.

(2)

Density $C_{a2}$

Density in interface design refers to the arrangement and spacing of elements, determining the degree of tightness or looseness. The calculation involves assessing the difference between the actual and optimal interfacial densities. According to the density calculation formula [26], the influencing factor is the ratio of the area of all elements to the interface area.

(3)

Simplicity $C_{a3}$

Simplicity refers to the level of alignment and integration of interface elements, with the goal of reducing cognitive load on the user interface layout. According to the simplicity calculation formula [26], the factors that influence simplicity include the number of alignment points for elements in the vertical and horizontal directions of the interface, as well as the total number of interface elements.

(4)

Order $C_{a4}$

An interface layout that conforms to the reading habits and gaze trajectory of the human eye can effectively guide the user’s browsing order. According to the order degree calculation formula [26], the influencing factors are the area of elements in the upper-left, upper-right, lower-left, and lower-right regions of the interface and the weight of each region.

(5)

Dominance $C_{a5}$

There is a significant dominance of interface information, with the human eye first navigating the upper-left region of the interface, followed by the upper right, lower left, and lower right. According to the dominance calculation formula [26], the influencing factor is the difference in element area between the optimal interface and the upper-left, upper-right, lower-left, and lower-right areas of the interface.

Visual Cognitive Measurement Values

Acquiring user visual cognitive physiological measurements involves conducting eye movement experiments. This entails introducing the experimental equipment, environment, and subjects.

(1)

Experimental Equipment: The Tobii X120 eye tracker (Tobii, Danderyd Municipality, Sweden) (with a sampling frequency of 120 Hz and an accuracy of approximately 0.4°) and a 23.8-inch Dell desktop presentation monitor (Dell, Round Rock, TX, USA) (with a resolution of 1920 × 1080 px, operating at 60 Hz) were chosen. ErgoLAB software (ErgoLAB v3.12) was employed to develop, execute, and collect experimental stimulation programs, while SPSS software (v.29) was utilized for experimental data processing and analysis. All potential interfering factors (such as noise, external light sources, odors, temperature, etc.) were minimized during the experiment. The experimental setting encompassed a laboratory space covering approximately 42 square meters, indoors, with shading treatments applied.

(2)

Experimental Subjects: The study enlisted 6 professionals (comprising the professional group) with over 3 years of experience in human–machine interface design, alongside 32 non-designers, none of whom had prior involvement in similar experiments. Among the non-professional group, there were 16 males and 16 females aged 20–32 years, with an average age of 25 years (standard deviation = 0.843). The day before the experiment, participants were reminded to ensure adequate sleep and to avoid being excessively tired or excited. Prior to the formal experiment, all participants underwent vision chart and color vision tests to ensure normal vision in both eyes and no visual impairments. Additionally, participants completed and signed a consent form approved by the university review board, ensuring that they fully understood the experiment’s content and the associated ethical and legal guidelines.

4.2.2. Criteria Weights

The conventional gray H-convex correlation algorithm overlooks indicator weights when delineating the similarity process of data sequence curves. This section employs the ICRITC method to ascertain criteria weights, formulate criteria-weighted data sequences, and enhance the optimization of model data input.

Step 1. Create a sample data matrix. Setting the number of samples as $m$ and the number of aesthetic indicators as $n$, and the sample data matrix used for interface evaluation is:

$$Z={\left[r_{ij}\right]}_{m\times n}$$

(10)

Step 2. Standardize data. The data need to be pre-standardized in order to eliminate differences in the scale and positive and negative attributes of the indicators.

Positive criteria are calculated as:

$$t_{ij}={\displaystyle \frac{x_{ij}-\min \left\{x_{ij}\right\}}{\max \left\{x_{ij}\right\}-\min \left\{x_{ij}\right\}}}$$

(11)

Negative criteria are calculated as:

$$t_{ij}=\frac{\max \left\{x_{ij}\right\}-x_{ij}}{\max \left\{x_{ij}\right\}-\min \left\{x_{ij}\right\}}$$

(12)

Step 3. Calculate the correlation coefficient. The correlation coefficient between the $i$ and $j$ criteria was calculated as:

$$r_{ij}={\displaystyle \frac{{\displaystyle \sum _{h=1}^n\left(t_{hj}-{\overline{t}}_i\right)\left(t_{hj}-{\overline{t}}_j\right)}}{\sqrt{{\displaystyle \sum _{h=1}^n{\left(t_{hi}-{\overline{t}}_i\right)}^2}}\sqrt{{\displaystyle \sum _{h=1}^n{\left(t_{hj}-{\overline{t}}_j\right)}^2}}}}$$

(13)

where $t_{hi}$ and $t_{hj}$ are the values of the $i$th and $j$th indicators in the $h$th evaluation sample, and ${\overline{t}}_i$ and ${\overline{t}}_j$ are the mean values of the $i$th and $j$th criteria in all samples.

Step 4. Calculation of the Gini coefficient between criteria:

$${\delta }_i={\displaystyle \frac{{\displaystyle \sum _{j=1}^n{\displaystyle \sum _{k=1}^n\left|t_{ij}-t_{ih}\right|}}}{2n{\displaystyle \sum _{j=1}^n{t}_{ij}}}}$$

(14)

where ${\delta }_i$ is the Gini coefficient for the $i$th criteria and ${\delta }_i\in [0,1]$.

Step 5. Calculate the conflict factor. To address the issue of positive and negative correlations between criteria, the correlation coefficients are taken as absolute values. The formula for this calculation is:

$$v_i={\displaystyle \sum _{j=1}^n\left(1-\left|r_{ij}\right|\right)}$$

(15)

Step 6. Calculation of the informativeness of the criteria:

$$C_i={\delta }_i{v}_i$$

(16)

Step 7. Calculation of criteria weighting:

$$W_i^g=C_i/{\displaystyle \sum _{i=1}^n{C}_i}$$

(17)

4.2.3. Improved Gray H-Convex Correlation

This section calculates the similarity between two lines by calculating the H-convexity between them, that is, calculating the correlation between layout aesthetics lines and visual cognitive lines.

Definition 1. 

As shown in Figure 5, there is an arbitrary line $DEF$, where segment $DF$ represents the span and the perpendicular $HE$ from vertex $E$ to span $DF$ represents the arch height.

Definition 2. 

As shown in Figure 5, the ratio of the arch height $HE$ to span $DF$ is the H-convexity of the folding lines $DEF$, represented by $d_{H-convex}={\displaystyle \frac{HE}{DF}}$.

(1)

Calculate H-convexity

As shown in Figure 6, based on $x(k)$, $x(k+1)$, and $x(k+2)$ in the standardized criteria series $X$ plotting the fold, $DEF$ spans $DF=\sqrt{{\left(k+2-k\right)}^2+{\left[x\left(k+2\right)-x(k)\right]}^2}=\sqrt{4+{\left[x\left(k+2\right)-x(k)\right]}^2}$. For easy calculation of values, the value of $GE$ is used instead of the arch height $HE$. $GE=x(k+1)-{\displaystyle \frac{x(k)+x(k+2)}{2}}$, then the H-convexity value of the sequence $X$ at $t=k+1$ is recorded as ${\widehat{d}}_H(X,k+1)$:

$${\widehat{d}}_H(X,k+1)={\displaystyle \frac{x(k+1)-\frac{x(k)+x(k+2)}{2}}{\sqrt{4+{\left[x(k+2)-x(k)\right]}^2}}}$$

(18)

(2)

Calculate the gray H-convex correlation coefficient

In this step, the aesthetic indicator weights obtained earlier are brought into the indicator data series. Let the aesthetic evaluation indicator be $M$ and the object be $N$. $x_m^n$ is the evaluation value for the $m\mathrm{th}$ $\left(m=a,b,\cdots ,M\right)$ indicator and the $n\mathrm{th}$$\left(n=1,2,\cdots ,N\right)$ object. The weighted standardized data series of the $m\mathrm{th}$ indicator can be represented as $X_a={\omega }_a\left(x_a^1,x_a^2,\cdots ,x_a^N\right),$ $X_b={\omega }_b\left(x_b^1,x_b^2,\cdots ,x_b^N\right),\cdots ,$$X_M={\omega }_M\left(x_M^1,x_M^2,\cdots ,x_M^N\right)$. Then, the gray H-convexity coefficients of $X_a$ and $X_m$ at $t=k$ are:

$${\widehat{\gamma }}_{H\left(X_a,X_m\right)}\left(k\right)=\mathrm{sgn}\left({\widehat{d}}_H\left(X_a,k\right),{\widehat{d}}_H\left(X_m,k\right)\right){\displaystyle \frac{1}{1+\left|\left|{\widehat{d}}_H\left(X_a,k\right)\right|-\left|{\widehat{d}}_H\left(X_m,k\right)\right|\right|}}$$

(19)

where ${\widehat{d}}_H\left(X_a,k\right)$, ${\widehat{d}}_H\left(X_m,k\right)$ is the H-convexity of the sequence $X_a$ and $X_m$ at $t=k$, $k=2,\cdots ,n-1$, and $\mathrm{sgn}(\cdot )$ represents the sign function.

$$\mathrm{sgn}\left(x\right)=\{\begin{array}{c}1,\\ 0,\\ -1,\end{array}\begin{array}{c}\\ \\ \end{array}\begin{array}{c}\\ \\ \end{array}\begin{array}{c}x>0\\ x=0\\ x<0\end{array}$$

(20)

(3)

Calculate the gray H-convex correlation degree.

The gray H-convex correlation degree between sequences $X_a$ and $X_m$ is denoted by ${\widehat{R}}_H\left(X_a,X_m\right)$, abbreviated as ${\widehat{R}}_H\left(a,m\right)$. The calculation method is:

$${\widehat{R}}_H\left(X_a,X_m\right)={\displaystyle \frac{1}{n-2}}{\displaystyle \sum _{k=2}^{n-1}{\widehat{\gamma }}_{H\left(X_a,X_m\right)}}\left(k\right)$$

(21)

Figure 6. Calculation of H-convexity for concave (right) and convex (left) polylines.

Figure 6. Calculation of H-convexity for concave (right) and convex (left) polylines.

5. Application

5.1. Evaluation Samples

There were 127 different interface layout samples gathered from the Chinese virtual museum website platform, and the KJ (affinity diagram) method was employed to distill 6 representative samples, depicted in Figure 7. These interface layout samples possess a uniform aspect ratio and abstract functional partitioning into the smallest rectangle capable of encompassing their internal elements. The layout of virtual museum interfaces predominantly follows a POP- or cover-type format, akin to promotional posters. Typically, these interfaces feature an image with local cultural characteristics as the design theme, occupying the central area of the interface and boasting the largest area. Functional element icons are positioned around the interface, with smaller areas. Consequently, the abstracted interface layout image is centralized within the largest rectangle, with smaller rectangles representing functional icons positioned around it. To eliminate the interference of color and font style on the experimental results, all sample stimulus images were converted to black and white and the text areas were blurred. The contrast ratio between the icons and the interface background was set to 4.5:1, and the brightness of all interfaces was standardized.

During eye movement experimental testing, prior studies commonly utilized the abstract rectangular layout interface depicted in Figure 8 as the experimental sample. However, this approach may result in subjects struggling to accurately follow the layout content of the real interface. To enhance the precision of experimental tests, this study re-optimized some of the experimental samples. As illustrated in Figure 9, the real interface was merged with the abstracted rectangular interface while reducing the transparency of the rectangle. This adjustment enabled subjects to vaguely perceive the real interface, facilitating a more intuitive identification of the interface layout. Furthermore, it facilitated a quick connection with real interface content, thereby aiding in the reduction of experimental errors.

5.2. Evaluation Data

5.2.1. Layout Aesthetic Evaluation Data

Based on calculations in the literature [21], the layout aesthetic rating value of the samples in Figure 8 is solved, and the results are shown in

Table 1. Aesthetic evaluation data. Calculated from the aesthetic measures of the interface layout in Figure 8 (in terms of symmetry, density, simplicity, order, and dominance).

Samples	${\mathit{C}}_{\mathit{a}1}$	${\mathit{C}}_{\mathit{a}2}$	${\mathit{C}}_{\mathit{a}3}$	${\mathit{C}}_{\mathit{a}4}$	${\mathit{C}}_{\mathit{a}4}$
${\mathrm{A}}^{\prime }$	0.94	0.99	1.00	0.88	0.84
${\mathrm{B}}^{\prime }$	0.93	0.78	0.82	0.75	0.81
${\mathrm{C}}^{\prime }$	0.91	0.76	0.75	0.75	0.78
${\mathrm{D}}^{\prime }$	0.44	0.69	0.65	0.50	0.72
${\mathrm{E}}^{\prime }$	0.32	0.72	0.70	0.50	0.67
${\mathrm{F}}^{\prime }$	0.52	0.85	0.75	0.63	0.73

. Samples ${\mathrm{A}}^{\prime }$, ${\mathrm{B}}^{\prime }$, and ${\mathrm{C}}^{\prime }$ have the best symmetry (all aesthetic values > 0.9), sample ${\mathrm{E}}^{\prime }$ has the worst symmetry (aesthetic value < 0.4), sample ${\mathrm{A}}^{\prime }$ has the best densities (aesthetic value of 0.99) and ${\mathrm{D}}^{\prime }$ has the worst densities (aesthetic value of 0.69). Sample ${\mathrm{A}}^{\prime }$ has the most advantage in terms of simplicity (aesthetic value of 1.00), while sample ${\mathrm{D}}^{\prime }$ has the worst simplicity (aesthetic value of 0.65).

5.2.2. Eye Movement Experimental Data

The experimental samples are depicted in Figure 7 and Figure 9, featuring six distinct layout forms, each accompanied by two stimulus images: an interface with transparent abstract rectangles and a real interface. The presentation format is as follows: initially, interfaces with transparent abstract rectangles are displayed, followed by the corresponding real interfaces. The six groups of layout interfaces are presented randomly.

During the experiment, subjects are tasked with performing an image search task, wherein they must swiftly locate and accurately click on a navigation map icon while the real interface is playing. The presentation time for the real interface images is limited to 9000 milliseconds. If participants find the target before 9000 milliseconds, they can freely press the space bar to proceed to the next image. Each image is displayed only once. The experimental process and tasks are delineated in Figure 10.

The experimental measurement data of fixation duration, fixation count, mean pupil diameter, gaze shift frequency and gaze time percentage were obtained using ErgoLAB software. Due to one participant wearing contact lenses, the eye-tracking device was unable to perform precise calibration, resulting in significant data deviation. Consequently, this set of experimental data was excluded. Ultimately, the data results from 37 participants were compiled, including 6 interface experts and 31 non-professionals. The statistical results are presented in

Table 2. Experimental measurement data. Figure 7 was used as the experimental stimulus image to obtain the subjects’ visual cognitive results (in terms of fixation duration, fixation count, mean pupil diameter, gaze shift frequency, and gaze time percentage).

Samples	${\mathit{C}}_{\mathit{e}1}$	${\mathit{C}}_{\mathit{e}2}$	${\mathit{C}}_{\mathit{e}3}$	${\mathit{C}}_{\mathit{e}4}$	${\mathit{C}}_{\mathit{e}5}$
A	2527	7.00	3.00	68.9	70.43
B	2963	10.30	3.02	60.5	71.27
C	3751	14.40	3.04	60.1	65.48
D	5460	20.60	3.06	45.8	56.55
E	6628	17.20	3.05	45.2	49.69
F	5062	10.80	3.04	57.0	59.33
F-value	3.526	9.506	20.089	4.178	5.506
p-value	0.035	0.001	0.022	0.012	0.043

. Additionally, an analysis of variance (ANOVA) and tests were conducted on five eye movement indicators. The results showed fixation duration (F = 3.126, p < 0.05), fixation count (F = 9.506, p < 0.05), mean pupil diameter (F = 20.089, p < 0.05), gaze shift frequency (F = 4.178, p < 0.05), and gaze time percentage (F = 5.506, p < 0.05). Therefore, the layout of interface elements has a significant impact on eye-tracking metrics.

5.2.3. Weighted Normalized Data

Firstly, in order to eliminate the dimension and positive and negative attribute differences of each criterion, the data in Table 1 and Table 2 undergo a pre-standardization process. Secondly, the weights for each aesthetic evaluation criteria are calculated, with the outcomes present in

Table 3. Weighting of the aesthetic criteria.

Criteria	${\mathit{C}}_{\mathit{a}1}$	${\mathit{C}}_{\mathit{a}2}$	${\mathit{C}}_{\mathit{a}3}$	${\mathit{C}}_{\mathit{a}4}$	${\mathit{C}}_{\mathit{a}5}$
Weight	0.38	0.15	0.10	0.27	0.11

.

5.3. Results and Analysis

To calculate the correlation coefficients between visual cognitive features and layout aesthetics, a sequence of system characteristic behaviors in terms of fixation duration $C_{e1}$, fixation count $C_{e2}$, mean pupil diameter $C_{e3}$, gaze shift frequency $C_{e4}$ and gaze time percentage $C_{e5}$ for the six interface scenarios, denoted by $Y=\left(Y_1,Y_2,Y_3,Y_4,Y_5\right)$ is analyzed, with symmetry $C_{a1}$, density $C_{a2}$, simplicity $C_{a3}$, order $C_{a4}$ and dominance $C_{a5}$ as comparison sequences, denoted by $X=\left(X_1,X_2,X_3,X_4,X_5\right)$. The calculation results are shown in

Table 4. The correlation between visual cognitive and layout aesthetics. $X$ represents the set of aesthetic measure sequences, and $Y$ represents the set of eye movement measure sequences.

	${\mathit{X}}_1$	${\mathit{X}}_2$	${\mathit{X}}_3$	${\mathit{X}}_4$	${\mathit{X}}_5$
$Y_1$	−0.9394	−0.4928	−0.4976	−0.4617	−0.9831
$Y_2$	−0.9300	−0.5001	−0.4819	−0.4769	−0.9353
$Y_3$	−0.7124	−0.4937	−0.5077	0.4586	−0.4997
$Y_4$	0.9720	0.9382	0.4504	0.9808	0.4779
$Y_5$	0.9155	0.4764	0.0178	0.4213	0.9710

.

(1)

Correlations between fixation duration and layout aesthetics

As shown in

Table 5. Comparison of results from different models, taking the calculation of the correlation between fixation duration and interface layout aesthetics as an example.

Model	${\mathit{C}}_{\mathit{e}1}-{\mathit{C}}_{\mathit{a}1}$	${\mathit{C}}_{\mathit{e}1}-{\mathit{C}}_{\mathit{a}2}$	${\mathit{C}}_{\mathit{e}1}-{\mathit{C}}_{\mathit{a}3}$	${\mathit{C}}_{\mathit{e}1}-{\mathit{C}}_{\mathit{a}4}$	${\mathit{C}}_{\mathit{e}1}-{\mathit{C}}_{\mathit{a}5}$
Gray correlation	0.6959	0.6058	0.3800	0.3542	0.4591
New gray absolute correlation	−0.7511	−0.3119	−0.3048	0.0489	−0.7379
Gray H-convex correlation	−0.7016	−0.4138	−0.3599	−0.2024	−0.8546
Improved gray H-convex correlation	−0.9394	−0.4928	−0.4976	−0.4617	−0.9831

, the correlation between fixation duration and layout aesthetics is ranked ${\widehat{R}}_H\left(1,5\right)$ $>{\widehat{R}}_H\left(1,1\right)$ $>{\widehat{R}}_H\left(1,3\right)$ $>{\widehat{R}}_H\left(1,2\right)$ $>{\widehat{R}}_H\left(1,4\right)$, and all were negatively correlated. It can be seen that $C_{a5}$ and $C_{a1}$ are the main influence criteria and $C_{a3}$, $C_{a2}$, and $C_{a4}$ are the secondary criteria. That is, dominance, symmetry, and fixation duration were more highly correlated, simplicity was second, and density and order were less so. Dominance exerts the most significant impact on fixation duration, underscoring the presence of dominance in the presentation of interface information layout. Consequently, interface design should adhere to users’ visual patterns and prioritize the importance of information for differentiated layout of interface elements. This approach enhances readers’ reading efficiency and engagement. Moreover, symmetry in the interface layout should not be disregarded. Users prioritize the overall balance of information within the interface, seeking symmetry in the distribution of horizontal and vertical elements. Imbalanced layouts are liable to impact users’ visual experience and requirements adversely.

(2)

Correlations between the fixation count and layout aesthetics

The correlations were calculated as ${\widehat{R}}_H\left(2,1\right)$ = −0.9300, ${\widehat{R}}_H\left(2,2\right)$ = −0.5001, ${\widehat{R}}_H\left(2,3\right)$ = −0.4819, ${\widehat{R}}_H\left(2,4\right)$ = −0.4769, and ${\widehat{R}}_H\left(2,5\right)$ = −0.9353. Sorting based on the magnitude of the correlation between the two sequences revealed ${\widehat{R}}_H\left(2,5\right)$ $>{\widehat{R}}_H\left(2,1\right)$ $>{\widehat{R}}_H\left(2,2\right)$ $>{\widehat{R}}_H\left(2,3\right)$ $>{\widehat{R}}_H\left(2,4\right)$. Indeed, symmetry and dominance exhibit a stronger correlation with fixation count, whereas simplicity, order, and density demonstrate comparatively lower correlations. This suggests that in interface design, the layout information should be harmonized and consistent, adhering to specific user line-of-sight guidance principles. Such an approach serves to mitigate visual load and enhance reading speed and overall user experience.

(3)

Correlations between mean pupil diameter and layout aesthetics

The correlations were calculated as ${\widehat{R}}_H\left(3,1\right)$ = −0.7124, ${\widehat{R}}_H\left(3,2\right)$ = −0.4937, ${\widehat{R}}_H\left(3,3\right)$ = −0.5077, ${\widehat{R}}_H\left(3,4\right)$ = −0.4586, and ${\widehat{R}}_H\left(3,5\right)$ = −0.4997. Sorting based on the magnitude of the correlation between the two sequences revealed ${\widehat{R}}_H\left(3,1\right)$ $>{\widehat{R}}_H\left(3,3\right)$ $>{\widehat{R}}_H\left(3,5\right)$ $>{\widehat{R}}_H\left(3,2\right)$ $>{\widehat{R}}_H\left(3,4\right)$. Indeed, symmetry and simplicity exhibit the strongest correlation with mean pupil diameter, with dominance following closely behind, while density and order demonstrate relatively lower correlations. The notable correlation between simplicity and mean pupil diameter suggests that greater alignment and integration of layout information contribute to a more transparent and comprehensible interface. This in turn aids in reducing visual load and information search time, thereby enhancing overall user experience.

(4)

Correlations between gaze shift frequency and layout aesthetics

The correlations were calculated as ${\widehat{R}}_H\left(4,1\right)$ = 0.9720, ${\widehat{R}}_H\left(4,2\right)$ = 0.9382, ${\widehat{R}}_H\left(4,3\right)$ = 0.4504, ${\widehat{R}}_H\left(4,4\right)$ = 0.9808, and ${\widehat{R}}_H\left(4,5\right)$ = 0.4779. Sorting based on the magnitude of the correlation between the two sequences revealed ${\widehat{R}}_H\left(4,4\right)$ $>{\widehat{R}}_H\left(4,1\right)$ $>{\widehat{R}}_H\left(4,2\right)$ $>{\widehat{R}}_H\left(4,5\right)$ $>{\widehat{R}}_H\left(4,3\right)$. Correlations among order, symmetry, density, and frequency of gaze shifts are notably strong, whereas dominance, simplicity, and gaze shift frequency exhibit relatively low correlations. The interface layout adheres to optimal visual principles and reading habits, effectively guiding the eye’s scanning pattern. Moreover, interface density significantly influences gaze shift frequency, necessitating designers to adhere to standardized design principles and judiciously regulate the spacing between interface elements.

(5)

Correlations between gaze time percentage and layout aesthetics

Correlations are obtained by calculating ${\widehat{R}}_H\left(5,1\right)$ = 0.9155, ${\widehat{R}}_H\left(5,2\right)$ = 0.4764, ${\widehat{R}}_H\left(5,3\right)$ = 0.0178, ${\widehat{R}}_H\left(5,4\right)$ = 0.4213, ${\widehat{R}}_H\left(5,5\right)$ = 0.9710, all positive correlations. This is based on the size of the correlation ordering: ${\widehat{R}}_H\left(5,5\right)$ $>{\widehat{R}}_H\left(5,1\right)$ $>{\widehat{R}}_H\left(5,2\right)$ $>{\widehat{R}}_H\left(5,4\right)$ $>{\widehat{R}}_H\left(5,3\right)$. Indeed, the percentage of gaze time exhibits the strongest correlation with dominance and symmetry, followed by density and order, while demonstrating the weakest correlation with simplicity. These results are consistent with the trends identified in the analyses of fixation duration and mean pupil diameter discussed previously.

5.4. Model Testing and Comparison

5.4.1. Effect Comparison

To assess the efficacy of the gray H-convex correlation model utilizing the ICRITIC method, identical data preprocessing techniques were employed. The gray correlation [30], novel gray absolute correlation [33], and gray H-convex correlation [13] were chosen for comparative analysis with the approach outlined in this study. The statistical outcomes are delineated in Table 5. Owing to constraints in space, only the correlation findings between fixation duration and layout aesthetics are provided.

In Table 5, the results from the three models, aside from the gray correlation model, generally demonstrate a consistent pattern, highlighting the strongest correlation between gaze duration and symmetry and dominance. This substantiates the effectiveness of the model proposed in this paper. However, there are notable discrepancies, as follows.

• The gray correlation model yields positive results even in cases of negative correlation between indicators, failing to align with the actual scenario, which is highly consistent with the findings of Zhou et al. [48].
• The new gray absolute correlation model lacks stability in accurately reflecting positive and negative correlations among indicators, exemplified by a correlation coefficient of 0.0489 between fixation duration and order, still indicating a positive correlation. This conclusion corroborates the findings of Zhou et al. [48], demonstrating that the model lacks the capability to determine negative correlations between variables.
• The original gray H-convex correlation model indicates that the highest negative correlation between fixation duration and dominance was 0.8546, followed by symmetry at 0.7016. This is consistent with the ranking outcomes of the enhanced gray H-convex correlation model.
• In the improved model, the correlation between fixation duration and simplicity surpasses that of density, contrary to the results of the original gray H-convex correlation model. This discrepancy may stem from the improved model’s integration of differential indicator characteristics and their impact on the system, thereby influencing the final outcome.

Additionally, by employing the interface layout scheme as the X-axis, a line graph is constructed to illustrate the fluctuations in user visual cognitive attributes and layout aesthetics. As depicted in Figure 11, it is discernible that the line pattern of fixation duration closely resembles that of symmetry and dominance, exhibiting an inverse correlation. The fixation count aligns more closely with the folded graph shape of symmetry and dominance, also showcasing an inverse relationship, similar to the findings of other scholars [49]. Meanwhile, the mean pupil diameter bears the closest resemblance to the shape of symmetry and simplicity, demonstrating an inverse correlation. Conversely, gaze shift frequency exhibits the closest association with order and symmetry, indicating a positive correlation. Likewise, gaze time percentage closely corresponds to symmetry and dominance, with a positive correlation. Yang et al. [50] found that gaze time percentage also affects pupil diameter. In summary, the line graphs depict outcomes congruent with the model calculations. Consequently, the enhanced model proves to be feasible and possesses considerable application value.

5.4.2. Performance Comparison

To further ascertain the efficacy of the model, identical test samples were utilized to compare the accuracy and computational efficiency of four models. In Figure 12, it is evident that the enhanced gray H-convex correlation method exhibits superior accuracy compared to the other three methods, achieving an accuracy rate exceeding 90%. However, owing to its intricate calculation steps, the running time was slightly prolonged, surpassing 0.8 min. Conversely, the other three methods feature straightforward calculation procedures, completing within a model time of less than 0.5 min.

6. Conclusions

The research aimed to propose an evaluation method for public service interfaces to enhance users’ engagement with the interface and the efficiency of acquiring interface information. This endeavor seeks to contribute to the establishment of a sustainable digital cultural social service system, fostering cultural dissemination and preservation, and facilitating sustainable cultural development. Through an analysis of users’ aesthetic preferences and cognitive principles, a mapping model between the two is formulated and utilized to calculate their correlation, thereby furnishing theoretical and methodological guidance for designers and enterprises engaged in interface design. Addressing the limitations of the original gray H-convex correlation model, which overlooks the issue of indicator weighting, this study presents an improved model, leveraging the ICRITIC method for the first time. It is demonstrated that the enhanced model offers superior accuracy and performance compared to other gray models. Consequently, this research entails both theoretical and practical innovations. The key findings of the study are outlined as follows.

(1)

This paper employs the enhanced gray H-convex correlation model, enabling precise identification of positive and negative correlations between interface layout aesthetics and visual cognition. The findings demonstrate that the accuracy of the enhanced model exceeds 90%. Nevertheless, the computational complexity of the model leads to a moderate increase in running time. Efforts will be directed towards addressing this limitation through further optimization in future endeavors.

(2)

A notable correlation exists between interface layout aesthetics and user visual cognition. Specifically, the correlations between fixation duration and fixation count are the most pronounced (0.9831 and 0.9353, respectively), which is highly consistent with the findings of Li et al. [51]. However, this study differs by explicitly calculating the degree of their correlation. Moreover, the correlation between mean pupil diameter and symmetry exhibits the highest value (0.7124), which is consistent with the findings of Wei et al. [52]. Simultaneously, we found that the correlation between gaze shift frequency and order is notably strong (0.9808), while the correlation between fixation time percentage and dominance is the highest (0.9710). The inverse relationship between fixation duration, fixation count, and mean pupil diameter with interface layout aesthetics is consistent with the findings of Munsters et al. [53]. Notably, this study found that gaze shift frequency and gaze time percentage are positively correlated with interface layout aesthetics. These findings underscore the importance for designers to prioritize factors such as dominance, symmetry, and order of interface layout in designing interfaces for infrequently accessed public services like virtual museums. Furthermore, attention should be directed towards understanding user cognitive and physiological tendencies, as well as aesthetic inclinations, to enhance user experience and interaction efficiency.

(3)

Nevertheless, the evaluation samples utilized in this paper exclusively encompass 2D static layout interfaces, thereby overlooking the undeniable influence of dynamic interface layout designs on user visual cognition. In forthcoming research, we intend to incorporate immersive 3D dynamic interactive interfaces as samples to undertake a comparative study of the impact of dynamic versus static interfaces on user aesthetics and cognition. Moreover, while this study predominantly centers on interface layout, it is imperative to acknowledge that interface color schemes, icons, and interaction frameworks, as well as user emotions and personalities, constitute pivotal factors influencing interface design. Consequently, future endeavors will be directed towards addressing these overlooked limitations, thereby contributing to a more comprehensive understanding of interface design considerations.