A comprehensive evaluation method for multi-dimensional coding of information user interface graphics in light and dark modes

Abstract

The present invention discloses a comprehensive evaluation method for multi-dimensional coding of information user interface graphics under light and dark modes, the method comprising: extracting graphic features using a convolutional neural network; controlling an optical lighting simulation environment to match the light and dark mode of the information user interface; conducting an interface quality comprehensive evaluation experiment according to the environment, and quantifying the user's visual cognitive data results; and proposing a design application index according to the cognitive performance level, and constructing a graphic coding-cognitive performance multivariate linear regression model. The experimental device comprises: a terminal control module, an experimental test darkroom space, a lighting module, and a data acquisition module. The device and the method can effectively predict the quality of information user interface design, and realize graphic coding design evaluation, which can be applied to guide graphic coding and design fields.

Description

Technical Field

[0001] The present invention relates to the field of graphic information coding evaluation, and in particular to a comprehensive evaluation method for multi-dimensional coding of information user interface graphics in light and dark modes. Background Art

[0002] In recent years, smart electronic products are tending towards a rapid iteration development model, and the graphical user interface and standard icon library are also being updated accordingly. Graphics, as the smallest component unit in the graphical user interface, are widely used as a mechanism for control and information transmission. Effective graphic coding carries the important function of assisting users in perception and positioning, and is also the basic medium for realizing human-computer interaction. However, the existing graphic design mainly depends on the designer's purpose orientation and personal design concept, lacks systematic quantitative evaluation from the perspective of multi-dimensional information such as human psychological and physiological state, and lacks in-depth mining of the cognitive laws and actual demand changes of users in different states and environments, resulting in frequent problems such as graphic cognitive barriers and repeated searches during use, and unable to achieve good visual perception and usage experience.

[0003] Existing information user interface graphic evaluation uses psychological experimental methods such as eye tracking information and user subjective evaluation, but the specific use methods and devices ignore the importance of human factors research, and therefore cannot be directly applied to the design field. For example, patent applications with application numbers 201711117011.8 and 201710138172.9 focus on eye tracking information and user experience of advertising web pages, but lack exploration of user usage status and changes in human body function feedback mechanisms under different optical intensity environments, and cannot clarify whether the user's visual system, fundus function, and mental cognitive level will be affected at this time. Summary of the invention

[0004] The purpose of the present invention is to provide a comprehensive evaluation method for multi-dimensional coding of information user interface graphics in light and dark modes, which can solve one or more of the above-mentioned technical problems.

[0005] In order to achieve the above object, the technical solution proposed by the present invention is as follows:

[0006] A comprehensive evaluation method for multi-dimensional coding of information user interface graphics in light and dark modes, including

[0007] (1) Using CNN training to extract multi-dimensional coding features of graphics in information user interfaces to establish a classification data set;

[0008] (2) adjusting the optical lighting simulation environment conditions according to the light and dark mode of the user interface;

[0009] (3) Performing a comprehensive quality assessment of the user interface based on the environmental conditions in step (2) and quantifying the user's visual cognition data results;

[0010] (4) Based on the results of step (3), a design application index for graphic coding is proposed, and a graphic coding-cognitive performance multivariate linear regression model is constructed to predict and evaluate the quality of information user interface design.

[0011] Preferably, the CNN in step (1) extracts the multi-dimensional coding features of the graphics, and is based on different scenarios and specific tasks, and learns to identify the classification and discrimination features of the graphics through CNN model training, and extracts the graphic features as analysis and evaluation features according to the degree of correlation (most relevant).

[0012] By initializing the network weights, inputting a batch of existing data sets classified according to graphic color, style, semantics and other features, and forward propagating through the convolutional layer, pooling layer, and fully connected layer to obtain the output value, the error between the network output value and the target value is calculated, and the size of the error and the expected value is determined. When the error is greater than the expected value, the error is transmitted back to the network, and the errors of the fully connected layer, pooling layer, and convolution layer are calculated in turn, and the weights are updated according to the obtained error. When the error reaches a result equal to or less than the expected value, the training ends. Finally, according to the output results, the corresponding graphic multi-dimensional encoding feature type is screened out and used for subsequent interface quality evaluation.

[0013] Preferably, the specific process of step (2) is as follows:

[0014] (2.1) The light and dark modes of the user interface are obtained in the following way

[0015] The CIELAB value corresponding to the graphic code for human eye recognition in bright mode or strong light intensity, dark mode or low light intensity is selected according to the color space and its related color difference formula, and the visual perception brightness of the interface system is adjusted to restore the real usage scenario of the information user interface;

[0016] (2.2) Adjust the optical lighting simulation environment conditions as follows

[0017] First, set up a test room, illuminate the lighting module and data acquisition module in the test room;

[0018] The test room is isolated from the natural light outside, achieving complete control of the optical lighting environment.

[0019] The lighting module includes LED three-color dimmer and mechanical track; the lighting module simulates the lighting environment of different light source directions; it realizes precise control of light source intensity and light source layout, provides a stable and uniform optical lighting environment that can be quantitatively controlled, and simulates the lighting characteristics of various optical lighting environments such as different time periods, different spatial relationships, and abnormal glare. LED three-color dimmers with different color temperatures and illuminations are used as controllable light sources to achieve light source settings of different intensities. The specific three-color dimmers are divided into white light with a color temperature of 6000K and an illumination of 30, 60, and 90lx, neutral light with a color temperature of 4000K and an illumination of 30, 60, and 90lx, and warm light with a color temperature of 3000K and an illumination of 30, 60, and 90lx. The combination of LED three-color dimmer and automatic slide rail can realize multi-directional lighting such as front light, side light (front side light, rear light metering, front side light), back light, and top light by changing the light source layout, simulating the lighting environment of different light source directions.

[0020] The data acquisition module includes CIE image brightness and colorimeter, ErgoLAB human-machine environment synchronization platform, E-Prime psychological and behavioral experimental platform, and uses telemetry eye tracking technology to collect multimodal physiological data, realizing the synchronous collection of multiple data.

[0021] In addition, it also includes a terminal control module, which includes the functions of implementing terminal host training to recognize graphic features and obtain classified data sets; connecting to the data acquisition module to obtain eye tracking physiological and behavioral measurement data; the computer display screen displays information user interface graphics and issues related functions of experimental control instructions; the keyboard and mouse are used as input devices to assist users in completing operation instructions; and the light source intensity and light source layout are accurately controlled to provide an optical lighting environment with stable and uniform lighting and quantitative controllable light.

[0022] Preferably, step (3) comprises the following steps:

[0023] (3.1) Establish physiological experiments to conduct comprehensive quality evaluation of user interfaces

[0024] The ergonomics method is used to evaluate the graphic coding quality of the information user interface, and the within-subject or between-subject design is adopted to complete the user cognitive behavior, physiological characteristics, task performance, and subjective measurement experiments.

[0025] (3.2) Data results of quantification step (3.1)

[0026] The quantitative cognitive performance and subjective score (SS) of the multi-dimensional coding of graphics are examined. Based on the reaction time (RT) and accuracy (ACC) output results of the acquired eye tracking data, the eye movement point position and speed, fixation point position and speed, fixation range, fixation trajectory, scanning path, and total fixation time of the user behavior are analyzed to determine whether the data results are within the range of ergonomic evaluation indicators.

[0027] Preferably, the design application index and graphic coding-cognitive performance multivariate linear regression model in step (4) includes the following steps to achieve:

[0028] (4.1) Based on the quantified subjective score (SS), reaction time (RT) and accuracy rate (ACC) results, the design application index of the information user interface is proposed: design application degree = accuracy rate (ACC) / reaction time (RT) + subjective score (SS);

[0029] (4.2) Construct a multiple linear regression model of graphic encoding and cognitive performance;

[0030] (4.2.1) Draw a scatter plot based on two or more independent variables that have significant effects on the results;

[0031] (4.2.2) Determine the function type of the empirical formula. Let the dependent variable be y and the k independent variables be x 1 ,x 2 ,…,x k ;

[0032] (4.2.3) The least squares method is used to obtain the normal equation system, which describes how the dependent variable y depends on the independent variable x. 1 ,x 2 ,…,x k , and the error term ε is called a multiple regression model; its general form can be expressed as shown in formula (1):

[0033] y=B 0 +B 1 x 1 +B 2 x 2 +…+B k x k +ε (1)

[0034] Among them, B 0 , B 1 , B 2 , …, B k is the parameter of the model; ε is the error term;

[0035] (4.2.4) Solve the system of equations, obtain the expression of the regression equation, and perform a significance test on the regression model;

[0036] (4.2.5) The actual measurement data results are used as input and output target data to obtain the design application index and the graphic coding-cognitive performance multivariate linear regression model. It plays a guiding role in graphic coding and design. The model can also reflect the cognitive level of graphic information coding of the evaluation object from multiple perspectives such as optical environment and light and dark mode, and has good advancedness.

[0037] The technical effects of the present invention are:

[0038] 1) The present invention proposes a comprehensive evaluation method for multi-dimensional coding of information user interface graphics under light and dark modes. For the first time, it proposes to simulate the user's real usage scenario through light source environment and layout in the interface quality evaluation experiment to study the graphic coding evaluation problem under different light and dark modes.

[0039] 2) The present invention simultaneously uses the terminal control module training to extract graphic coding features and the multimodal data acquisition module to quantify and process data indicators, verifying that graphic coding is correlated with the cognitive performance of the information user interface, and providing designers with a decision-making basis for interface design.

[0040] 3) The design application degree proposed in the present invention and the constructed graphic coding-cognitive performance multivariate linear regression model can quickly and scientifically predict the visual perception effectiveness and user cognitive acceptance of the graphic interface, and is suitable for graphic coding, evaluation, modification and feedback of information user interfaces.

[0041] The present invention uses Convolutional Neural Networks (CNN) to extract graphic features; controls the optical lighting simulation environment to match the light and dark mode of the information user interface; conducts a comprehensive interface quality evaluation experiment based on the environment to quantify the user's visual cognitive data results; proposes a design application index based on the cognitive performance level, and constructs a graphic coding-cognitive performance multivariate linear regression model. It can not only effectively predict the quality of information user interface design, but also realize graphic coding design evaluation, and can be applied to guide graphic coding and design fields. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The drawings in the specification, which constitute a part of this application, are used to provide a further understanding of the present invention. The illustrative embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute improper limitations on the present invention.

[0043] In the attached picture:

[0044] Figure 1 It is a flow chart of the comprehensive evaluation method for multi-dimensional coding of information user interface graphics in light and dark modes of the present invention.

[0045] Figure 2 It is a diagram of the training process of using CNN to extract multi-dimensional coding features of graphics in the present invention.

[0046] Figure 3 It is a schematic diagram of the comprehensive evaluation device for multi-dimensional coding of information user interface graphics in light and dark modes of the present invention;

[0047] exist Figure 3The following figure marks are included: direct light 1, mechanical track 2, computer display screen 3, Tobii Pro Nano telemetry eye tracker 4, keyboard 5, terminal host 6, seat 7, experimental space 8, soundproof door 9, backlight 10, dark shed 11, top light 12.

[0048] Figure 4 It is a schematic diagram of a comprehensive evaluation device for multi-dimensional coding of information user interface graphics in light and dark modes according to the present invention.

[0049] Figure 5 It is a diagram of the method for constructing a graphic coding-cognitive performance multivariate linear regression model of the present invention. DETAILED DESCRIPTION

[0050] The present invention will be described in detail below with reference to the accompanying drawings and specific embodiments, wherein the illustrative embodiments and descriptions are only used to explain the present invention but are not intended to be improper limitations of the present invention.

[0051] It should be noted that, in the absence of conflict, the embodiments and features in the embodiments of the present application can be combined with each other. The present invention will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0052] like Figure 1 , is a diagram of a comprehensive evaluation method for multi-dimensional coding of information user interface graphics under light and dark modes of the present invention, comprising the following steps:

[0053] (1) Using CNN to extract multi-dimensional coding features of graphics in information user interface to establish classification data set;

[0054] The multi-dimensional coding features of graphics need to be extracted from the information user interface. In the process of graphics information coding tasks, the model is trained through Convolutional Neural Networks (CNN), and the classification method related to graphics features can be used. For example, hue, brightness, texture, highlight, shadow, shape and other features can be extracted as experimental variables. The training process is as follows Figure 2 As shown, first, the network weights are initialized. Secondly, the input is a batch of existing data sets classified according to graphic features, and the output value is obtained through forward propagation of the convolution layer, pooling layer, and fully connected layer. Subsequently, the error between the output value of the network and the target value is calculated, and the size of the error and the expected value is determined. When the error is greater than the expected value, the error is transmitted back to the network, and the errors of the fully connected layer, pooling layer, and convolution layer are calculated in turn, and the weights are updated according to the calculated error. When the error reaches a result equal to or less than the expected value, the training ends. Finally, according to the output results, the corresponding multi-dimensional coding feature type of the graphic is screened out and used for subsequent interface quality evaluation.

[0055] (2) adjusting the optical lighting simulation environment conditions (including light source intensity and light source layout) according to the light and dark mode of the user interface;

[0056] (2.1) The light and dark modes of the user interface are obtained in the following way:

[0057] The CIELAB value corresponding to the graphic code for human eye recognition in bright mode or strong light intensity, dark mode or low light intensity is selected according to the color space and its related color difference formula. The CIELAB color difference expression is shown in formula (2). The visual perception brightness of the interface system is adjusted to restore the real usage scenario of the information user interface.

[0058]

[0059] (2.2) Adjust the optical lighting simulation environment conditions as follows:

[0060] The optical lighting simulation environment includes a test room (experimental test darkroom space), a lighting module, and a data acquisition module.

[0061] The experimental test darkroom space can isolate the experimental space from the external natural light and achieve complete control of the optical lighting environment.

[0062] The lighting module includes LED three-color dimmer and mechanical track; it can accurately control the light source intensity and layout, provide a stable and uniform optical lighting environment that can be quantitatively controlled, and simulate the lighting characteristics of various optical lighting environments such as different time periods, different spatial relationships, and abnormal glare. LED three-color dimmers with different color temperatures and illuminations are used as controllable light sources to achieve light source settings of different intensities. The specific three-color dimmers are divided into white light with a color temperature of 6000K and an illumination of 30, 60, and 90lx, neutral light with a color temperature of 4000K and an illumination of 30, 60, and 90lx, and warm light with a color temperature of 3000K and an illumination of 30, 60, and 90lx. The combination of LED three-color dimmer and automatic slide rail can achieve multi-directional lighting such as front light, side light (front side light, rear metering, front side light), back light, and top light by changing the light source layout, simulating lighting environments with different light source directions.

[0063] The data acquisition module includes CIE image brightness and colorimeter, ErgoLAB human-machine environment synchronization platform, E-Prime psychological and behavioral experimental platform, and uses telemetry eye tracking technology to collect multimodal physiological data, realizing the synchronous collection of multiple data.

[0064] In addition, it also includes a terminal control module, which includes the functions of implementing terminal host training to recognize graphic features and obtain classified data sets; connecting to the data acquisition module to obtain eye tracking physiological and behavioral measurement data; the computer display screen displays information user interface graphics and issues related functions of experimental control instructions; the keyboard and mouse are used as input devices to assist users in completing operation instructions; and the light source intensity and light source layout are accurately controlled to provide an optical lighting environment with stable and uniform lighting and quantitative controllable light.

[0065] like Figure 3 and Figure 4 Shown is a schematic diagram of the physiological experimental device;

[0066] The terminal control module S301 includes a terminal host 6 with a CPU frequency of 2.4 GHz, which is trained to recognize graphic features and obtain a classification data set; a data acquisition module is connected to obtain eye tracking physiological and behavioral measurement data; a computer display screen 3 has a resolution of 1920×1080px and a brightness of 90cd / m2, and displays information user interface graphics and issues related functions of experimental control instructions; a keyboard 5 is used as an input device to assist users in completing operation instructions; and the light source intensity and light source layout are accurately controlled to provide an optical lighting environment with stable and uniform lighting and quantitative controllable lighting.

[0067] The experimental test darkroom space S302 is an operating environment that meets professional human-factor interaction. The dark room 11 isolates the experimental space 8 from the natural light outside, achieving complete control of the light and dark mode of the optical lighting environment. At the same time, the soundproof door 9 eliminates interference factors such as noise, temperature and humidity. The ergonomically designed comfortable seat 7 has the function of adjusting the height and can relieve sitting fatigue, ensuring that the user's gaze distance and gaze angle meet the experimental requirements.

[0068] The lighting module S303, including the LED three-color variable light and the mechanical track 2, can accurately control the light source intensity and light source layout, and provide an optical lighting environment with stable and uniform lighting and quantitative controllable lighting.

[0069] The mechanical track 2 can adjust the three positions of X, Y and Z, and can also adjust the irradiation angle after positioning.

[0070] The three-color variable light is divided into white light with a color temperature of 6000K and an illumination of 30, 60, and 90lx, neutral light with a color temperature of 4000K and an illumination of 30, 60, and 90lx, and warm light with a color temperature of 3000K and an illumination of 30, 60, and 90lx. The combination of LED three-color variable light and automatic slide rail can achieve multi-directional lighting such as front light 1, side light (front side light, rear metering, front side light), back light 10, and top light 12 by changing the light source layout, simulating the lighting environment of different light source directions.

[0071] The data acquisition module S304 includes CIE image brightness and colorimeter, ErgoLAB human-machine environment synchronization platform, E-Prime psychological and behavioral experimental platform, and uses Tobii Pro Nano telemetry eye tracker 4 to collect multimodal physiological data and realize the synchronous collection of multiple data.

[0072] (3) Conduct a comprehensive quality assessment of the user interface based on environmental conditions and quantify the user's visual cognition data results;

[0073] (3.1) Establish physiological experiments to conduct comprehensive quality assessment of user interfaces:

[0074] The ergonomics method is used to evaluate the graphic coding quality of the information user interface. The corresponding experimental materials are produced according to the different levels of the independent variables of the graphics. The number of stimuli presented in each group and the total number of trials are considered. The sampling method is determined according to the experimental purpose, and nxn or nxn intra-group or inter-group experiments are designed. It is ensured that the graphic materials shall not appear repeatedly during the entire experimental process. Additional variables such as demographic indicators (user gender, age, education level, interface usage experience, personal aesthetic preference), visual stimulation, environmental interference, etc. are controlled to complete experimental tasks such as user cognitive behavior, physiological characteristics, task performance, and subjective measurement.

[0075] (3.2) Quantify the data results of step (3.1);

[0076] Determine the dependent variables that affect the cognitive performance of information user interface, use SPSS and EXCEL tools to conduct inter-subject effect test and variance analysis on the variables, and obtain the mean value, standard error, degree of freedom df, mean square MS, F value, and significance p value of the graphic code based on the univariate linear model to determine whether the probability of occurrence of the proposed hypothesis is ≤5%.

[0077] The quantitative cognitive performance and subjective score (SS) of the multi-dimensional coding of graphics are examined. Based on the reaction time (RT) and accuracy (ACC) output results of the acquired eye tracking data, the eye movement point position and speed, fixation point position and speed, fixation range, fixation trajectory, scanning path, and total fixation time of the user behavior are analyzed to determine whether the data results are within the range of ergonomic evaluation indicators.

[0078] (4) Based on the cognitive performance level, a design application index is proposed for the graphic coding, and a graphic coding-cognitive performance multivariate linear regression model is constructed to predict and evaluate the quality of information user interface design.

[0079] (4.1) Based on the results of quantified subjective score (SS), reaction time (RT) and accuracy rate (ACC), the design application index of information user interface is proposed: design application degree = accuracy rate (ACC) / reaction time (RT) + subjective score (SS).

[0080] The degree of design application reflects the degree of user awareness of interface design in different light and dark modes, and can be used to guide graphic coding and application processes and evaluate the design feasibility of the interface.

[0081] (4.2) Constructing a multivariate linear regression model of graphic encoding and cognitive performance

[0082] Draw a scatter plot based on two or more independent variables that have a significant difference in the cognitive results;

[0083] Determine the function type of the empirical formula, assuming that the dependent variable is y and the k independent variables are x 1 ,x 2 ,…,x k ;

[0084] The least squares method is used to obtain the normal equation system, which describes how the dependent variable y depends on the independent variable x. 1 ,x 2 ,…,x k , and the error term ε is called a multiple regression model.

[0085] Its general form can be expressed as shown in formula (1):

[0086] y=B 0 +B 1 x 1 +B 2 x 2 +…+B k x k +ε (1)

[0087] Among them, B 0 , B 1 , B 2 , …, B k are the parameters of the model; ε is the error term.

[0088] Solve the system of equations to obtain the expression of the regression equation and perform a significance test on the regression model;

[0089] The actual measurement data results are used as input and output target data to obtain the design application index and the graphic coding-cognitive performance multivariate linear regression model, which plays a guiding role in graphic coding and design. The model can also reflect the cognitive level of graphic information coding of the evaluation object from multiple perspectives such as optical environment and light and dark mode, and has good advancedness.

[0090] In order to verify the feasibility of a comprehensive evaluation method and device for multi-dimensional coding of information user interface graphics in light and dark modes, representative semantic coding and color coding in multi-dimensional coding of graphics were used as specific examples. Experimental tests were carried out under different light environments, and actual eye tracking data were collected to analyze and calculate the design application degree to evaluate the interface quality.

[0091] (1) The steps for carrying out the graphic semantic coding example are as follows:

[0092] Firstly, CNN (Convolutional Neural Networks, CNN) is used to extract the graphic semantic coding features in the information user interface. The experiment is carried out using specific icons as an example. The texture, highlight, shadow, shape, and color features of the icons are classified and judged. According to the output results, the two forms of icon semantic coding, flat and skeuomorphic, are obtained.

[0093] Secondly, the CIELAB values ​​corresponding to the graphic codes for human eye recognition in bright mode or strong light intensity, dark mode or low light intensity are selected according to the color space and its related color difference formula. The expert group's research results show that the CIELAB value under bright mode conditions should be (100, 0.01, -0.01), and the value under dark mode conditions should be (5.46, 0, 0). Adjust the visual perception brightness of the interface system to restore the real usage scenario of the information user interface.

[0094] Then, LED three-color variable light with different color temperature and illumination is used as the light source, and the light and dark modes are set to white light with color temperature of 6000K and illumination of 30, 60, and 90lx, and warm light with color temperature of 3000K and illumination of 30, 60, and 90lx. The combination of LED variable light and automatic slide rail can achieve multi-directional lighting such as front light, side light (front side light, rear metering, front side light), back light, and top light by changing the layout of light source, simulating the lighting environment of different light source directions.

[0095] Furthermore, according to the semantic encoding characteristics of information user interface icons, a quality assessment experiment was completed. The null hypothesis H0 was proposed: the semantic complexity of icons in different light and dark modes (flat icons, skeuomorphic icons) has no effect on the visual search efficiency of information user interfaces, and the alternative hypothesis H1: the semantic complexity of icons in different light and dark modes (flat icons, skeuomorphic icons) has an impact on the visual search efficiency of information user interfaces. A 2x2 within-subject design visual search experiment was adopted, with 4 stimulus levels, each presented 20 times, for a total of 80 trials. Considering the influence of user preferences and demographic indicators on icon semantic encoding, 5 questions were set for the subject background survey and interface usage experience related scale, and 7 questions were set for each of the 5 groups of flat and 5 groups of skeuomorphic related rating scales involving the semantic degree of icons, for a total of 75 questions.

[0096] 20 experimental subjects were recruited, and the material presentation method was set to randomly distribute 9 icons in each group in a 3x3 nine-square grid in the screen area. The 9 icons in each group of experiments were the same size, and the size of each icon was set to 48x48 pixels, the radius of the corners was 10 pixels, and the icon foreground accounted for 40% of the area. The best presentation time for experimental materials was 1500ms, and the appropriate presentation time for an empty screen was 800ms. The black "+" fixation point indicated the role of warning attention. Formal experiments were carried out after debugging the equipment and familiarizing themselves with the environment.

[0097] Finally, the quantitative experimental results and data analysis are shown in Table 1. The main effect of light and dark mode reaction time under different icon semantic encodings (F=74.746, P=0.000, p<0.001) reached a significant level, and the other icon semantic encoding variables and the interaction between the two did not show a significant effect.

[0098] Table 1 Main effects of icon semantic encoding in different light and dark modes on reaction time and accuracy

[0099]

[0100] Note: *p<0.05, **p<0.01, ***p<0.001.

[0101] Combined with the average description of the reaction time of icon semantic encoding in different light and dark modes in Table 2, compared with the icon search efficiency in dark mode, the average icon recognition reaction time in light mode is lower, which reflects that the visual search difficulty of icons in light mode environment is smaller, the search efficiency is better, and the cognitive performance is better than that in dark mode environment.

[0102] Table 2 Description of the average reaction time of icon semantic encoding in different light and dark modes

[0103]

[0104] The main effect results of the quantification of subjective evaluation using the Likert scale method are shown in Table 3. The different semantic levels of icons lead to significant differences in dependent variables such as user preference (F=5.508, P=0.026, p<0.05), semantic complexity (F=9.825, P=0.004, p<0.01), concreteness (F=7.5768, P=0.010, p<0.01), and familiarity (F=18.900, P=0.000, p<0.001), which to some extent affect users' visual cognitive perception of icon encoding.

[0105] Table 3 Main effects of subjective quantification of icon semantic encoding

[0106]

[0107] Note: *p<0.05, **p<0.01, ***p<0.001.

[0108] According to the subjective quantitative average values ​​of icon semantic coding in Table 4, it is reflected that abstract flat icons are easier to understand semantically, more familiar to users, and more in line with user preferences than skeuomorphic icons.

[0109] Table 4 Description of the subjective quantitative average value of icon semantic encoding

[0110]

[0111]

[0112] (2) The steps for carrying out the graphic color coding example are as follows:

[0113] First, the color coding features of graphics in the information user interface are extracted, and the experiment is carried out using specific icons as an example. Experimental materials are produced according to the different color brightness combinations and hue changes of icons.

[0114] Secondly, LED three-color dimmer lights with different color temperatures and illuminations are used as light sources. The white light with a color temperature of 6000K and illuminations of 30, 60, and 90lx are set in light and dark modes respectively. The combination of LED dimmer lights and automatic slide rails is used to change the light source layout to achieve multi-directional lighting such as front light, side light (front side light, rear metering, front side light), back light, and top light, simulating lighting environments with different light source directions.

[0115] The original hypothesis H0 is proposed: Different icon color coding (brightness, hue) has no effect on the visual search efficiency of the information user interface, and the alternative hypothesis H1 is proposed: Different icon color coding (brightness, hue) has an effect on the visual search efficiency of the information user interface. According to the interface design specification guidelines proposed by Apple, IBM and other companies, the color coding of graphics is divided into brightness and hue. The background colors in the graphics mainly use seven hues: red, magenta, purple, blue, cyan, blue-green, and green; the gradient mode presented by the background color mainly uses two brightnesses of a single hue to match, and the brightness here is generally 30-60. Combined with the gradient color rule that the color level difference is not more than two, the background gradient brightness combination is 30 and 40, 30 and 50, 40 and 50, 40 and 60, and 50 and 60; the background linear gradient direction includes two situations from top to bottom and from bottom to top. The experiment followed the advice of the expert panel and examined and selected the most commonly used graphic color encoding method, which was to set a gradient background consisting of two brightness levels (brightness 30 and 50, brightness 40 and 60) and three hues (green, purple, and blue) as independent variables, and control the linear gradient direction to be from top to bottom.

[0116] The CIELAB color difference calculation formula was used to test the color difference between the foreground and background colors of the icons. To ensure that the color difference was greater than 20ΔE76 when the foreground elements and background colors were contrasted, the colors were selected and combined according to Table 5. A 2x3 completely randomized within-group experiment was designed, with each group of color stimuli presented 5 times, for a total of 30 trials.

[0117] Table 5 Icon color coding related parameters

[0118]

[0119]

[0120] Finally, the quantified experimental results and data analysis are as follows:

[0121] In terms of accuracy of icon color coding, there is only a significant interaction between the two variables of brightness and hue (F=5.936, P=0.003, p<0.01) (as shown in Table 6), and the other characteristic variables have no significant effect.

[0122] Table 6 Main effects of icon color coding on reaction time and accuracy

[0123]

[0124] Note: *p<0.05, **p<0.01, ***p<0.001

[0125] By post hoc testing the interaction between lightness and hue, the average interaction effect of icon color coding was obtained (as shown in Table 7). By calculating the design application value, it is concluded that in information interface design, it is recommended to use a background gradient combination of blue lightness 30 and 50, green lightness 40 and 60, and purple lightness 40 and 60 as the color coding of icons.

[0126] Table 7 Mean description of icon color coding in reaction time and accuracy

[0127]

[0128]

[0129] according to Figure 5 The method shown in the figure is used to construct a multiple linear regression model of graphic encoding and cognitive performance. Since this experiment only obtained the result of significant difference in the interaction between the two independent variables, and the number of significant dependent variables was insufficient, the fitting step of the multiple linear regression model is omitted here.

[0130] The following conclusions were drawn from the above experiment:

[0131] (1) The change in light and dark patterns of multidimensional information encoding in icons under different optical environments is an important factor affecting visual cognitive performance in information user interfaces and is an issue that needs to be considered in the graphic design and encoding process.

[0132] (2) There is a significant difference in reaction time between the semantic encoding of icons in light mode and dark mode. Compared with the icon search efficiency in dark mode, the average icon recognition reaction time in light mode is lower, which reflects that the visual search difficulty of icons in light mode is lower, the search efficiency is better, and the cognitive performance is better than that in dark mode, thus affecting the design application degree.

[0133] (3) In information interface design, there is a significant interaction between the brightness and hue of icon color coding. It is recommended to use a background gradient combination of blue brightness 30 and 50, green brightness 40 and 60, and purple brightness 40 and 60 as the color coding of the icon.

[0134] In summary, the semantic coding and color coding of icons in the light and dark modes of this experiment can directly affect the search efficiency of stimulus targets in the information user interface, and also reflect the close relationship between the light environment and the multi-dimensional coding of graphics and cognitive performance. Therefore, this method can not only effectively predict the quality of information user interface design, but also realize the evaluation of graphic coding design.

[0135] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A comprehensive evaluation method for multi-dimensional coding of information user interface graphics in light and dark modes, characterized by: The method includes: (1) using CNN training to extract multi-dimensional coding features of graphics in information user interfaces to establish a classification data set; (2) adjusting the optical lighting simulation environment conditions according to the light and dark mode of the user interface; (3) Conduct a comprehensive quality assessment of the user interface based on the environmental conditions in step (2) and quantify the user's visual cognitive data results; step (3) includes the following steps: (3.1) Establish a physiological experiment to conduct a comprehensive quality assessment of the user interface, use ergonomics methods to evaluate the quality of information user interface graphic coding, adopt within-subject or between-subject design, and complete user cognitive behavior, physiological characteristics, task performance, and subjective measurement experiments; (3.2) Quantify the data results of step (3.1) Examine the quantitative cognitive performance and subjective score of the multi-dimensional coding of the graphic, output the results based on the reaction time and accuracy of the acquired eye tracking data, analyze the eye movement point position and speed, gaze point position and speed, gaze range, gaze trajectory, scanning path, and total gaze time of the user behavior, and determine whether the data results are within the range of ergonomics evaluation indicators; (4) According to the result of step (3), a design application index is proposed for the graphic coding, and a graphic coding-cognitive performance multiple linear regression model is constructed to predict and evaluate the design quality of the information user interface; the design application index and the graphic coding-cognitive performance multiple linear regression model in step (4) are implemented by the following steps: (4.1) According to the quantitative subjective score, reaction time and accuracy results, a design application index for the information user interface is proposed: design application degree = accuracy / reaction time + subjective score; (4.2) a graphic coding-cognitive performance multiple linear regression model is constructed; (4.2.1) Draw a scatter plot based on two or more independent variables that have significant effects on the results; (4.2.2) Determine the function type of the empirical formula, assuming that the dependent variable is y and the k independent variables are x 1 , x 2 , …, xk ; (4.2.3) Obtain the normal equations by the least squares method. The equations that describe how the dependent variable y depends on the independent variables x 1 , x 2 , …, xk , and the error term ε are called multiple regression models; Its general form can be expressed as shown in formula (1): y = B0 + B1x1 + B2x2 +… + Bkxk +ε (1); where B0, B1, B2, …, Bk are the parameters of the model; ε is the error term; (4.2.4) Solve the system of equations to obtain the expression of the regression equation, and perform a significance test on the regression model; (4.2.5) Use the actual measurement data results as input and output target data to obtain the design application index and graphic coding-cognitive performance multivariate linear regression model.

2. The comprehensive evaluation method for multi-dimensional coding of information user interface graphics in light and dark modes according to claim 1 is characterized in that: The CNN in step (1) extracts the multi-dimensional coding features of the graphics. It is based on different scenarios and specific tasks. The CNN model is trained to learn and recognize the classification and discrimination features of the graphics, and the graphic features are extracted as analysis and evaluation features according to the degree of correlation.

3. The comprehensive evaluation method for multi-dimensional coding of information user interface graphics in light and dark modes according to claim 1 is characterized in that: The specific process of step (2) is as follows: (2.1) The light and dark modes of the user interface are obtained in the following way The CIELAB value corresponding to the graphic code for human eye recognition in bright mode or strong light intensity, dark mode or low light intensity is selected according to the color space and its related color difference formula, and the visual perception brightness of the interface system is adjusted to restore the real usage scenario of the information user interface; (2.2) Adjust the optical lighting simulation environment conditions as follows First, set up a test room, illuminate the lighting module and data acquisition module in the test room; The test room is isolated from the natural light. The lighting module includes LED three-color variable light and mechanical track; the lighting module simulates the lighting environment of different light source directions; The data acquisition module includes CIE image brightness and colorimeter, ErgoLAB human-computer environment synchronization platform, E-Prime psychological and behavioral experimental platform, and uses telemetry eye tracking technology to collect multimodal physiological data.

Images