Method for Reducing Perceptual Deviation of Graphic Cross-Device Display Based on Physiological Experiment Analysis

Abstract

The present invention discloses a method for reducing the perceived deviation of graphic cross-device display based on physiological experiment analysis, including: (1) setting the scaling ratio between graphic switches on different resolution screens; (2) extracting the coding features of the graphic in visual interfaces with different scaling ratios; (3) constructing graphic feature materials at different scaling ratios to obtain objective equality values; (4) establishing a physiological response experiment; (5) analyzing the results to obtain cognitive performance data and calculating the user-perceived feature equality values at each independent variable level; (6) analyzing to obtain the perceived deviation amount; (7) establishing a multiple linear regression prediction model for cross-device graphic perception deviation; (8) applying the graphic feature perception deviation amount to cross-device adaptive layout. The present invention establishes a multiple linear regression prediction model for cross-device graphic perception deviation based on physiological experiments, and can provide convenient design guidance for designers by combining the design features of different task scenarios.

Description

Technical Field

[0001] The present invention relates to the technical field of graphics and images, and particularly relates to a method for reducing the perceived deviation of graphic cross-device display based on physiological experiment analysis. Background Art

[0002] Graphics are an important part of the user interface (UI), which can help users quickly locate certain functional components or divide the interface hierarchy. Cross-device display is used in various collaboration and development scenarios, where the graphics on the interface are usually displayed on screens with different resolutions. However, when the graphics are switched from one monitor to another, they are usually scaled to meet the requirements of cross-device display, and in this process, the size and position of the graphics change.

[0003] The commonly used graphic adaptation method is to proportionally adjust the size or the position arrangement of the graphics according to the size of the target screen. For example, by identifying the screen resolution to be adapted, only scale the graphic size proportionally, only adjust the spacing of the graphics, or adjust both the size and the spacing at the same time. This process is called the adaptive scaling of icons. However, according to relevant design experience and the theory of perceptual deviation, the above three adaptive methods will reduce the visual consistency of the graphics displayed on different screens, especially there may be deviations in the size or position characteristics of the graphics. For example, scaling the size of the graphics or changing the spacing may destroy the visual consistency of the icon layout and reduce the user's visual experience.

[0004] Related research has mainly focused on adapting to the encoding characteristics of technology and graphics themselves. For example, adaptive interfaces (C. Gutwin and C. Fedak. Interacting with big interfaces on small screens: a comparison of fisheye, zoom, and panning techniques. In Proceedings of Graphics Interface 2004, pp. 145–152. Citeseer, 2004.), as well as color (T.-J. Hsieh. Multiple roles of color information in the perception of icon-type images. Color Research & Application, 42(6): 740–752, 2017.), size (O.-H. Kwon, C. Muelder, K. Lee, and K.-L. Ma. A study of layout, rendering, and interaction methods for immersive graph visualization. IEEE transactions on visualization and computer graphics, 22(7): 1802–1815, 2016), shape (W. Liu, Y. Cao, and R. W. Proctor. How do app icon color and border shape influence visual search efficiency and user experience evidence from an eye-tracking study. International Journal of Industrial Ergonomics, 84: 103160, 2021.), and composition (Z. Shen, C. Xue, and H. Wang. “effects of users’ familiarity with the objects depicted in icons on the cognitive performance of icon identification”: Corrigendum. 2020.) and other graphic features. Some work has also focused on the effectiveness of graphics on different devices.For example, familiarity (Z. Shen, C. Xue, and H. Wang. “Effects of users’ familiarity with the objects depicted in icons on the cognitive performance of icon identification”: Corrigendum. 2020.), readability (H. Lin, W. Lin, W.-C. Tsai, Y.-Y. Cheng, and F.-G. Wu. Effect of the color tablet computer’s polarity and character size on legibility. In International Conference on Universal Access in Human-Computer Interaction, pp. 132–143. Springer, 2014.), complexity (H. Lin, Y.-C. Hsieh, and F.-G. Wu. A study on the relationships between different presentation modes of graphical icons and users’ attention. Computers in Human Behavior, 63: 218–228, 2016.), meaningfulness and comprehensibility (O.-H. Kwon, C. Muelder, K. Lee, and K.-L. Ma. A study of layout, rendering, and interaction methods for immersive graph visualization. IEEE transactions on visualization and computer graphics, 22(7): 1802–1815, 2016.), such as desktop displays, mobile displays, and virtual displays.In addition, perceptual biases have been found in various coding features, such as the length of lines (J. Guilford. A generalized psychophysical law. Psychological Review, 39(1):73, 1932.), the height of bars, the angle (M. Lu, J. Lanir, C. Wang, Y. Yao, W. Zhang, O. Deussen, and H. Huang. Modeling just noticeable differences in charts. IEEE Transactions on Visualization and Computer Graphics, 28(1):718–726, 2021.), and points. However, little attention has been paid to whether there are perceptual biases in icon coding features and the association between icon features and perceptual biases when using icons across devices.

[0005] Therefore, the present invention intends to propose a method based on physiological experiments to measure the visual perception bias of graphics during cross-device display, and to predict the perception bias in various screen switching scenarios by constructing a prediction model, and apply it to reduce the perception bias of cross-device graphics. Summary of the Invention

[0006] The object of the present invention is to provide a method for reducing the perception bias of graphics cross-device display based on physiological experiment analysis, which can solve one or more of the above technical problems.

[0007] To achieve the above object, the technical solution proposed by the present invention is as follows:

[0008] A method for reducing the perception bias of graphics cross-device display based on physiological experiment analysis, comprising

[0009] (1) Setting the scaling ratio between different resolution screen switches of the graphics;

[0010] (2) Extracting the coding features of the graphics in visual interfaces with different scaling ratios;

[0011] (3) Constructing graphic feature materials at different scaling ratios based on steps (1) and (2) to obtain objective equality values;

[0012] (4) Establishing a physiological response experiment with the scaling ratio and graphic features in step (3) as independent variables;

[0013] (5) Analyzing the results of the physiological response experiment in step (4) to obtain cognitive performance data and calculating the user perception feature equality values at each independent variable level;

[0014] (6) Compare and analyze the objective equality values obtained in step (3) and the user-perceived feature equality values obtained in step (5) to obtain the perceived deviation amount;

[0015] (7) Establish a multiple linear regression prediction model for cross-device graphical perception deviation based on multiple groups of perceived deviation amounts in step (6);

[0016] (8) Apply the graphical feature perception deviation amount to cross-device adaptive layout based on the multiple linear regression prediction model in step (7).

[0017] Preferably: The scaling ratio between different resolution screens in step (1) is calculated according to the physical size, and the ratio result is used as the scaling ratio for graphical material production; among them, the graphical material includes two groups, one group is the control group interface graphics under the original screen, and the other group is the experimental group graphics scaled according to the ratio.

[0018] Preferably: The encoding features of the graphics extracted in step (2) are the graphics features related to the task scenario extracted as the analysis and evaluation features.

[0019] Preferably: The establishment of the physiological response experiment in step (4) includes the following steps:

[0020] (41) Recruit test subjects

[0021] The vision or corrected vision of the test subjects is normal, and there is no color blindness or color weakness;

[0022] (42) Pilot learning

[0023] The test subjects are familiar with the experimental materials and understand the experimental procedures;

[0024] (43) Pre-experiment

[0025] Run multiple groups of pre-experiments on the E-prime platform; multiple groups of pre-experiments respectively determine the material order, material presentation time, and material presentation background color;

[0026] (44) Formal experiment

[0027] Adopt the results obtained in the (43) pre-experiment; run on the E-prime platform. The test subjects are first required to read the picture and text materials on the test screen interface and conduct a graphical feature comparison experiment at each scaling ratio according to the task requirements prompted on the screen and record; among them, the double-interval forced choice method and the staircase method are comprehensively used in the comparison experiment.

[0028] Preferably: The data analysis indicators in step (5) are as follows:

[0029] (51) Cognitive performance data

[0030] During the process of step (44), the key operation conditions at each variable level are recorded, and the main effects and interaction effects of each independent variable are further obtained through the analysis of variance of the correct rate;

[0031] (52) Perceive option data

[0032] By analyzing the options of the test subjects, the selection probabilities of the experimental group and the control group at each independent variable level are obtained, and the equal values of the user perception characteristics of the experimental group and the control group are further obtained.

[0033] Preferably, the step (7) includes the following processes:

[0034] (71) Determine significant variables

[0035] In the analysis of variance results of the correct rate in step (51), the independent variable X with significant main effect is obtained, and this independent variable with significant effect

[0036] participates in the construction of a multiple linear regression model;

[0037] (72) Model establishment

[0038] The multiple linear regression model can be described as: JND = β 0 +β 1 x 1 +β 2 x 2 +...+β m x m +μ; where β is the regression coefficient, μ is the random effect of the performance difference of the test subjects, and X represents the significant variable determined in step (71);

[0039] Input the JND values and variable level data at different variable levels into SPSS for regression analysis, so as to construct a multiple linear regression prediction model for cross-device graphic perception deviation.

[0040] Preferably, in step (8), the model in step (7) is applied to the graphic scaling process across devices, and the application idea includes that the web page first detects the size of the adapted device, and the scaling size that reduces the perception deviation is the physical scaling value across devices minus the JND value under this cross-device scaling.

[0041] The technical effect of the present invention is:

[0042] In the present invention, a multiple linear regression prediction model for cross-device graphic perception deviation is established based on physiological experiments. Applying it to cross-device adaptive layout can provide convenient design guidance for designers by combining the design characteristics of different task scenarios. Description of the Drawings

[0043] The accompanying drawings forming a part of this application are used to provide a further understanding of the present invention. The schematic embodiments and descriptions thereof of the present invention are used to explain the present invention and do not constitute an improper limitation of the present invention.

[0044] In the drawings:

[0045] Figure 1 is a flowchart of a physiological experiment method for reducing the perceived deviation of graphic cross-device display of the present invention;

[0046] Figure 2 is a behavioral experiment process for graphic feature comparison of the present invention;

[0047] Figure 3 is a schematic diagram of a feature comparison process based on the two-interval forced choice method and the staircase method of the present invention;

[0048] Figure 4 is a method for analyzing perceived deviation experimental data based on physiological experiments of the present invention;

[0049] Figure 5 is a schematic diagram of a perceived deviation measurement method based on data fitting of the present invention;

[0050] Figure 6 is the experimental material of an example of the present invention;

[0051] Figure 7 is the scaling deviation situation of the verification experiment of the present invention. Detailed implementation manners

[0052] The present invention will be described in detail below in conjunction with the accompanying drawings and specific embodiments. The schematic embodiments and descriptions thereof are only used to explain the present invention and do not constitute an improper limitation of the present invention.

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

[0054] It should be noted that the terms used here are only for describing specific implementation manners and are not intended to limit the exemplary implementation manners according to this application. As used here, unless the context clearly indicates otherwise, the singular form is also intended to include the plural form. In addition, it should also be understood that when the terms "comprising" and / or "including" are used in this specification, they indicate the presence of features, steps, operations, devices, components, and / or combinations thereof.

[0055] A method for reducing the perceived deviation of graphic cross-device display based on physiological experiment analysis, including

[0056] (1) Set the scaling ratio of the graphic when switching between screens with different resolutions; the scaling ratio between screens with different resolutions in step (1) is calculated according to the physical size, and the ratio result is used as the scaling ratio for graphic material production; among them, the graphic material includes two groups, one is the control group interface graphic under the original screen, and the other is the experimental group graphic scaled according to the ratio.

[0057] (2) Extract the coding features of the graphic in visual interfaces with different scaling ratios; the extraction of the coding features of the graphic in step (2) is to extract the graphic features related to the task scenario as the analysis and evaluation features. Among them, according to the need, the graphic features most relevant to the task scenario are extracted as the analysis and evaluation features. A screening method related to task-design features is adopted. More specifically, by performing a task analysis on the target interface, focusing on the task with the highest weight, and sorting out the graphic features most associated with it. For example, for a task interface for cross-device display, the requirements for the positioning task are relatively high, so the graphic spacing and layout design features with a relatively high association should be extracted preferentially.

[0058] (3) Based on steps (1) and (2), construct graphic feature materials at different scaling ratios to obtain the Objective equivalent value (OEV).

[0059] (4) Establish a physiological response experiment with the scaling ratio and graphic features in step (3) as independent variables; the specific process is as follows:

[0060] (41) Recruit test subjects

[0061] The vision or corrected vision of the test subjects is normal, without color blindness or color weakness; exclude the perception errors caused by individual vision factors. The number of test subjects is required to be more than 28 to increase the accuracy of the experiment. Before the experiment, collect the basic information of the test subjects, including age, gender, major, and vision level, etc., and the test subjects sign the experiment informed consent form.

[0062] (42) Pilot learning

[0063] The test subjects are familiar with the experimental materials and understand the experimental process;

[0064] Determine whether to conduct pilot learning for the test subjects according to the specific experimental tasks and experimental materials. Specifically: for experiments with complex experimental processes, experimental material samples that need to be explained, and pilot learning that will not affect the user's perception behavior, pilot learning is necessary, which is beneficial to helping the test subjects quickly understand the experiment and avoid misoperations during the experiment, especially the relevant learning of experimental materials and experimental operations; for tasks with simple tasks and intuitive measurement of the test subjects' perception, pilot learning may induce the test subjects' perception behavior, and this link should be avoided.

[0065] (43) Preliminary experiment

[0066] Run multiple groups of preliminary experiments on the E-prime platform; the laboratory should be a professional human-computer interaction laboratory (meeting experimental conditions such as lighting, noise, temperature, and humidity).

[0067] For multiple groups of preliminary experiments, determine the material order, material presentation time, and material presentation background color respectively; for the determination of the material order, it appears sequentially or simultaneously. Since this invention mainly uses comparative experiments, the order of material presentation affects the perception process of the test subjects. In this part, mainly by organizing 10 test subjects, a comparative experiment of two material presentation methods is carried out. Finally, the subjective feelings are scored by using the Likert scale method of 5-point scoring, and the scoring index with high task priority is selected as the selected material presentation order for use in the formal experiment of step (44). In addition, the presentation positions of the experimental group materials and the control group materials are mainly designed specifically by the experimental designer, mainly including left-right arrangement, up-down arrangement, cross arrangement, etc.

[0068] The preliminary experiment on the material presentation time mainly adopts a single experimental task, such as the search for a single graphic feature. Similarly, 10 test subjects are invited to record the reaction time of the test subjects to the task, and the mean value of the reaction time is processed to determine the presentation time of the graphic material. The presentation time of some general materials can also be directly consulted from the general specifications in this field. For example, the "blank screen" ( Figure 3 shown) used to clear the visual residue of the test subject's retina adopts a presentation time of 500 ms.

[0069] The preliminary experiment on the material presentation background color is to place the graphic material on backgrounds with different gray values. Similarly, 10 test subjects are invited to conduct subjective experience scoring. The purpose of this step is to exclude interference factors such as the contrast and hue between the experimental material and the background color. The gray values are divided into ten levels (10%, 20%, 30%... 100%), and the Likert scale is also used for scoring. Finally, the gray value with the highest score is selected as the material background color for the formal experiment in step (5). Black, white, and gray are not considered colors, and their fusion with other colors is also relatively good. Therefore, gray is often used as the background color for material presentation.

[0070] (44) Formal experiment

[0071] Adopt the results obtained from the preliminary experiment in (43); it can further clarify the experimental details of specific steps.

[0072] Also running on the E-prime platform, the test subjects are first required to read the picture and text materials on the test screen interface, and conduct a graphic feature comparison experiment at each scaling ratio according to the task requirements prompted on the screen. Compare the graphic features of the control group and the experimental group designed in step (3), compare the strength of the features, and make corresponding key operations on the keyboard according to the requirements. The computer automatically records the results of the key operations. Among them, the double-interval forced choice method and the staircase method are comprehensively used in the comparison experiment; the forced choice experiment requires the test subjects to make a choice between the graphic features of the control group and the experimental group according to the task requirements, and the features of the experimental group have a stepped (staircase method) increase or decrease in feature intensity. The double interval means that the graphic features of the experimental group need to be compared with the control group according to the increasing interval and the decreasing interval respectively; during this process, the icon features of the control group remain unchanged.

[0073] (5) Analyze the results of the physiological response experiment in step (4) to obtain cognitive performance data and calculate the user perception feature equality values at each independent variable level;

[0074] (51) Cognitive performance data

[0075] During the process of step (44), the key operation situations at each variable level are recorded. Among them, the E-prime experimental program can export the correct rate data of the task; through the analysis of variance of the correct rate, the main effects and interaction effects of each independent variable are further obtained;

[0076] (52) Perceptual choice item data

[0077] Through the analysis of the choice items of the test subjects, the selection probabilities of the experimental group and the control group at each independent variable level are obtained, and further the user perception feature equality values of the experimental group and the control group are obtained. Specifically as follows: Use the Matlab tool to construct a Gaussian fitting curve, with the horizontal axis being the graphic feature and the vertical axis being the ratio of the experimental group to the control group. By locating the 0.5 probability on the vertical axis (as Figure 4 shown), calculate the graphic feature value corresponding to the horizontal axis, and this feature value is the user-perceived equality value of the features of the experimental group and the control group (the subjective equivalent value, abbreviated as SEV).

[0078] (6) Compare and analyze the objective equality value obtained in step (3) and the user perception feature equality value obtained in step (5) to obtain the perceptual deviation amount; "SEV - OEV" is the perceptual deviation of this graphic feature at this scaling ratio.

[0079] (7) Establish a multiple linear regression prediction model for cross-device graphic perception deviation based on the multiple groups of perceptual deviation amounts in step (6); thereby predict the cross-device graphic perception deviation and obtain the perceptual deviation amounts in various situations;

[0080] Step (7) includes the following processes:

[0081] (71) Determination of significant variables

[0082] In the analysis of variance results of the correct rate in step (51), the independent variable X with a significant main effect is obtained, and this independent variable with a significant effect participates in the construction of a multiple linear regression model;

[0083] (72) Model establishment

[0084] The multiple linear regression model can be described as: JND = β 0 + β 1 x 1 + β 2 x 2 +... + β m x m + μ; where β is the regression coefficient, μ is the random effect of the performance difference of the test object, and X represents the significant variable determined in step (71);

[0085] Input the JND values and variable level data under different variable levels into SPSS for regression analysis, so as to construct a multiple linear regression prediction model for cross-device graphical perception deviation.

[0086] (8) Apply the graphical feature perception deviation amount to cross-device adaptive layout based on the multiple linear regression prediction model in step (7). More specifically, in the process of applying the model in step (7) to cross-device graphical scaling, the application idea includes that the web page first detects the size of the adapted device, and the scaling size that reduces the perception deviation is the physical scaling value of the cross-device minus the JND value under the cross-device scaling.

[0087] To verify the rationality of this method, the present invention conducts two experiments to verify the perception deviation of cross-device display using the common "graph - icon" in the interface as an example.

[0088] Set three screen switching ratios. In Figure 7 Example 1, extract the outer contour shape of the icon as the main design feature and use it as the independent variable to explore the perception deviation of the icon spacing during the cross-device process. In Figure 7 Example 2, extract the icon composition feature and polarity feature (the contrast feature between the icon graph and the background color) and use them as the independent variables to explore the perception deviation of the icon size during the cross-device process.

[0089] (1) Extract and design experimental materials

[0090] First, the icon switching process on three types of resolution screens was simulated. The three screens were a 1080P resolution screen (1920*1080 pixels), a 2K resolution screen (2560*1440 pixels), and a 4K resolution screen (3840*2160 pixels). The scaling ratios of their physical sizes were measured to be approximately 1.3, 1.5, and 2 times respectively.

[0091] In Figure 7 Example 1 of Figure 6 -c), the shapes of the selected icons (circles and rounded rectangles) were the main design features ( Figure 6 -a). Then, using the visual information interface as the experimental material, three screen switching ratios (1.3, 1.5, 2 times) and the icon outer contour shapes (circles and rounded rectangles) were set as independent variables to explore the influence of different switching scaling ratios on the test subjects' perception of icon spacing. The pre-experiment determined multiple experimental details. So the icons were set against a 40% gray background, and each experimental group with a screen switching scaling ratio had seven icon spacing scaling ratios, namely 73%, 81%, 90%, 100%, 111%, 123%, and 137% (represented by level -3 to level 3 respectively) to simulate the spacing changes of the icons. The "Wallet" icon of the iOS system was selected as the experimental material, and the outer contours of circles and rounded rectangles were redrawn. The control group and experimental group icons were presented on the left and right sides of the interface, as shown in

[0092] In Figure 7 Example 2 of Figure 6 -c), the Chrome browser icon was selected, and two design features, namely icon composition and icon polarity, were mainly studied ( Figure 6 -b). Icon composition was divided into planar and linear. Specifically, planar icons generated icons by means of block graphics, while linear icons were mainly composed of lines. Another icon coding feature was polarity, that is, positive polarity and negative polarity. The former referred to black numbers on a white background, while the latter referred to white numbers on a black background. The presentation method of the icons was that the control group icons were displayed in the center of the interface, and the experimental group icons were displayed on both sides (as shown in

[0093] (2) Recruit test subjects

[0094] Thirty participants were recruited in this study, including 15 males (Mage = 25.2, Sage = 1.69) and 15 females (Mage = 24.3, Sage = 3.05). The ages ranged from 20 to 34 years old. All participants had normal or corrected-to-normal vision, without color blindness or color weakness. They belonged to student and working groups with different disciplines, including design, calligraphy, engineering, and psychology; and their demographic data, including gender, age, and occupation, were recorded. The lighting conditions in the room were normal and the experiment was conducted under a 40W fluorescent lamp. The distance between the subjects' eyes and the screen was approximately 66 cm, and the viewing angle was 14.26°. And by adjusting the position and height of the experimental monitor, it was ensured that the eyes were level with the center of the screen. With the help of E-Prime (a software for behavioral research work), the experimental program was written. A Dell laptop with a CPU frequency of 2.4 GHz was used to run the program. The stimuli were presented on a 15.6-inch screen with a resolution of 1920x1080 pixels, a brightness of 90 cd / m2, and a refresh rate of 60 hz.

[0095] (3) Conduct the experiment

[0096] In the formal experiment, first, an experimental guide appeared on the screen to explain the experimental procedure, task details, and experimental operations. Second, the experiment staff described in detail the characteristics of each variable and showed the participants picture samples of each variable prepared for about 2 minutes. The instructor could test the participants' understanding of the icon characteristics by interviewing the test subjects. Finally, the experimental process and the interactive interface were explained to the test subjects. The experimental process was as Figure 2 shown. In particular, the experimental instructions appeared; the participants could press the "space" button to enter the practice experiment. In the practice and formal experiments, a blank screen was presented first for 500 ms and then disappeared. After the appearance of the "+" for 1000 ms, in Instance 1, the control group was displayed on the left or right side of the screen for 1200 ms and then disappeared. After that, the experimental icons (1.3, 1.5, or 2 times enlarged) were presented on the right or left side. Subsequently, the subjects made choices based on their subjective feelings. Multiple trials were conducted based on the two-interval forced-choice and staircase methods. In the experiment, the icon spacings with different levels of variable characteristics were studied, and the task question was "Which side of the icon spacing seems larger. If you choose the left side, press the 'F' key on the keyboard, otherwise press the 'J' key." In Instance 2, the experimental group icons appeared on both sides of the screen, while the nuclear test group icons were located in the center of the screen, and the task question was "Which of the left and right icons has a graph size more similar to the one in the middle" and feedback was given through the "F" and "J" keys on the keyboard.

[0097] In each experiment, the order of the pre-staircase and post-staircase for each group followed the ABBA balancing method, as Figure 3As shown. The experiment was divided into 18 sequences, with a total of 540 trials in one round, including 3 (3 adaptively scaled icons) × 30 sequence trials × 6 (Example 1 (2 icon boundaries), Example 2 (2 icon compositions × 2 icon polarities) in Figure 7 . After completing 30 trials of an experiment, the subjects rested for 2 minutes and then continued with the next sequence. After one round of the experiment, the subjects needed to fill out a subjective questionnaire and then have a short interview to understand the feelings and problems encountered by the subjects during the experiment. The complete experiment took approximately 85 minutes to complete.

[0098] (4) Experimental results

[0099] (4.1) Results of perceptual deviation of icon spacing and size

[0100] At a scaling level of 1.3, the average deviation of the rounded rectangle icon was -8.92 pixels, and that of the circular icon was -7.15 pixels. In addition, the dispersion degree of the circular border was greater than that of the square border. The specific results are shown in the following figure. A positive value of the deviation means that the perceived value of the test object in terms of spacing size is greater than the physical value, and a negative value means that the perceived size is smaller. Compared with the scaling levels of 1.3 and 2, the users' perception of spacing performed better at a scaling level of 1.5. The three figures illustrate that the average deviation of the circular border is smaller than that of the square border. In addition, from the scaling level of 1.5, the range of the deviation is also small. The results of the perceptual deviation of icon size are shown. We can find that in the negative icons, the average deviation of the line features is smaller than that of the plane features. For example, Figure 4 and Figure 7 show that the influence of the line * negative polarity (deviation: 0.8 pixel) on size perception is smaller than that of the plane x negative polarity (deviation: 1.5 pixels). Comparing the different polarities of the line icons at three icon scalings, Figure 4 , 5 and 6 describe that the biases of the negative polarity (biases: 0.8, 0.4, 1.1 pixels) are closer to the physical scaling value (bias: 0 pixel) than the biases of the positive polarity (biases: 1.5, 3.0, 3.1 pixels). While in the plane icons, the deviation of the polarity is found to be the opposite, that is, the deviation of the plane * positive polarity is much smaller.

[0101] (4.2) Results of analysis of variance of correct rate

[0102] The shape of the icon border has no obvious effect on the perception of spacing. We conducted a t-test to examine the significance test between subjective accuracy and the characteristics of independent variables. To express the details of the significance levels of different variables, the last column of the following table shows the P-value, which is a parameter used to determine the results of hypothesis testing. In this experiment, P < 0.05 was set to indicate that various characteristics are significant. We can find that the level of icon adaptive scaling (F = 4.974, P = 0.007 < 0.05, η2 = 0.891) has a significant effect on the perceptual accuracy of judgment. However, there is no obvious difference in terms of accuracy and border shape (F = 2.873, P = 0.057 > 0.05, η2 = 0.530). For the influence of the interaction effect, an interaction was found between icon adaptive scaling and border shape. Icon border (F = 4.395, P = 0.012 < 0.05, η2 = 0.787), border shape * spacing scaling (F = 17.820, P = 0.000 < 0.05, η2 = 3.190), and icon adaptive scaling x spacing scaling (F = 10.972, P = 0.000 < 0.05, η2 = 1.964).

[0103] Polarity (F = 4.219, P = 0.040 < 0.05, η2 = 0.707) and icon size scaling (F = 37.526, P = 0.000 < 0.05, η2 = 6.285) are significant, which means that each level of the independent variable has an impact on subjective perception. The interaction effects of the characteristics of two independent variables are listed according to the P-value, such as polarity * icon composition (F = 6.967, P = 0.008 < 0.05, η2 = 1.167), polarity × size (F = 110.333, P = 0.000 < 0.05, η2 = 18.478), and icon composition * size ratio (F = 110.333, P = 0.000 < 0.05, η2 = 18.478). Icon composition * size ratio (F = 19.749, P = 0.000 < 0.05, η2 = 3.308).

[0104]

[0105] We can verify through objective results that:

[0106] First, during the process of using icons across devices, there are biases in the perception of spacing and size characteristics.

[0107] Second, there is no obvious difference between spacing perception and the shape of the icon border.

[0108] Third, in terms of the perception of icon size, there is no statistically significant difference in the composition of the icon, while the perception effect of polarity is significant, that is, within a certain range of icon adaptation ratios, changing the polarity can correct the bias.

[0109] The present invention verifies that there are deviations in feature perception during the process of graphic cross-device conversion, and establishes a physiological measurement method for perception deviation by combining design features and visual perception theory. Applying it to the adaptive process of different devices can effectively improve the visual consistency of graphic display.

[0110] Meanwhile, the prediction model for perception deviation of graphic cross-device display proposed by the present invention is applicable to cross-device conversion of various information interfaces, and combines design features of different task scenarios, which can provide convenient design guidance for designers.

[0111] The above are only the preferred embodiments of the present invention and are not intended to limit the present invention. For those skilled in the art, the present invention may have various changes and modifications. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

Claims

1. Method for reducing perceived deviation of graphic cross-device display based on physiological experiment analysis, Characterized in that: Including (1) Set the scaling ratio between different resolution screen switches of the graphic; (2) Extract the coding features of the graphic in visual interfaces with different scaling ratios; (3) Based on steps (1) and (2), construct graphic feature materials at different scaling ratios to obtain objective equality values; (4) Establish a physiological response experiment with the scaling ratio and graphic features in step (3) as independent variables; (5) Analyze the results of the physiological response experiment in step (4) to obtain cognitive performance data and calculate the user perceived feature equality values at each independent variable level; (6) Compare and analyze the objective equality values obtained in step (3) and the user perceived feature equality values obtained in step (5) to obtain the perceived deviation amount; (7) Establish a multiple linear regression prediction model of cross-device graphic perception deviation based on multiple groups of perceived deviation amounts in step (6); (8) Apply the graphic feature perception deviation amount to cross-device adaptive layout based on the multiple linear regression prediction model in step (7).

2. The method for reducing perceived deviation of graphic cross-device display based on physiological experiment analysis according to claim 1, Characterized in that: The scaling ratio between different resolution screens in step (1) is calculated according to the physical size, and the ratio result is used as the scaling ratio for graphic material production; among them, the graphic materials include two groups, one group is the control group interface graphics under the original screen, and the other group is the experimental group graphics scaled according to the ratio.

3. The method for reducing perceived deviation of graphic cross-device display based on physiological experiment analysis according to claim 1, Characterized in that: Extracting the coding features of the graphic in step (2) is to extract the graphic features related to the task scenario as the analysis and evaluation features.

4. The method for reducing perceived deviation of graphic cross-device display based on physiological experiment analysis according to claim 1, Characterized in that: The establishment of the physiological response experiment in step (4) includes the following steps: (41) Recruit test subjects The test subjects have normal vision or corrected vision, and are color-blind or color-weakness-free; (42) Pilot learning The test subjects are familiar with the experimental materials and understand the experimental process; (43) Pre-experiment Run multiple groups of pre-experiments on the E-prime platform; multiple groups of pre-experiments respectively measure the material order, material presentation time, and material presentation background color; (44) Formal experiment Adopt the results obtained in the pre-experiment in (43); run on the E-prime platform. The test subjects are first required to read the picture and text materials on the test screen interface, and conduct graphic feature comparison experiments at each scaling ratio according to the task requirements prompted on the screen and record; among them, the double-interval forced choice method and the staircase method are comprehensively used in the comparison experiment.

5. The method for reducing perceived deviation of graphic cross-device display based on physiological experiment analysis according to claim 4, Characterized in that: The data analysis indicators in step (5) are as follows: (51) Cognitive performance data During step (44), the key operation conditions at each variable level are recorded, and the main effects and interaction effects of each independent variable are further obtained through the analysis of variance of the correct rate. (52) Perceived option data By analyzing the options of the test subjects, the selection probabilities of the experimental group and the control group at each independent variable level are obtained, and the equal values of the user perception characteristics of the experimental group and the control group are further obtained.

6. The method for reducing the perceived deviation of graphic cross-device display based on physiological experiment analysis according to claim 5, characterized in that: the step (7) includes the following processes: (71) Determination of significant variables In the analysis of variance result of the correct rate in step (51), the independent variables with significant main effects are obtained, and the independent variables with significant effects participate in the construction of the multiple linear regression model. (72) Model establishment The multiple linear regression model can be described as: JND = β 0 + β 1 x 1 + β 2 x 2 +... + β m x m + μ; where β is the regression coefficient, μ is the random effect of the performance difference of the test object, and X represents the significant variable determined in step (71); Input the JND values and variable level data at different variable levels into SPSS for regression analysis, so as to construct a multiple linear regression prediction model for the perceived deviation of cross-device graphics.

Images