Research of Digital Interface Layout Design based on Eye-tracking

The aim of this paper is to improve the low service efficiency and unsmooth human-computer interaction caused by currently irrational layouts of digital interfaces for complex systems. Also, three common layout structures for digital interfaces are to be presented and five layout types appropriate for multilevel digital interfaces are to be summarized. Based on the eye tracking technology, an assessment was conducted in advantages and disadvantages of different layout types through subjects’ search efficiency. Based on data and results, this study constructed a matching model which is appropriate for multilevel digital interface layout and verified the fact that the task element is a significant and important aspect of layout design. A scientific experimental model of research on digital interfaces for complex systems is provided. Both data and conclusions of the eye movement experiment provide a reference for layout designs of interfaces for complex systems with different task characteristics.


INTRODUCTION
With the wide application of digital interfaces in complex systems, it has become increasingly urgent to design interfaces for complex systems.Interface layout is an integral part of the digital interface, and a good one will be helpful for users to acquire interface information rapidly and efficiently, carry out visual search and succeed in related operations, thereby strengthening users' positive cognition of the system.
Interface layout refers to an approach for rational layout of interface elements within a limited range, by which a messy interface and farraginous contents will be induced according to the need of the general layout, so as to carry out the interrelated organization and arrangement and hash out the relationship between interface elements and space, providing a smooth user experience for the user [1,2].The interface layout design is a process of multivariate coordination design and continuous iteration-feedback.Many specialists and scholars at home and abroad have conducted research on the web interface layout to improve user's interactive experience in browsing the web.Altaboli used correlation analysis to analyze subjective and objective measures in visual design of the web interface [3].Singh investigated AGA-based approach to improve web page aesthetics [4].Teng proposed three kinds of interfaces in the application context of the process plant based on the FBS methodology and the PCP [5].Wang indicated that stacked layout of the visual items allowed users to find the intended targets rapidly and form a direct and rapid approach to search route from the perspective of cognition [6].Zhao ap-plied the eye tracking technology to investigate differences between visual search efficiency and subjective satisfaction from various webpage layouts by analyzing webpage layout factors [7].Abovementioned scholars proposed some arguments, but no system partitioning and no further research has been made on layout types of interfaces for complex systems.However, their theories also suggest the significance in research on layouts of interfaces for complex systems.

EYE TRACKING TECHNOLOGY
The eye tracking technology can be used for investigation and assessment of digital interface layouts because it reveals spatial positions where users would pay attention to or be interested to subjects as well as the process of attention shift by tracking eye movement and pupil change.The eye tracking technology is more direct and efficient compared with traditional approaches.Research on physiological properties of eye movement can help us understand and find out how users acquire information from the interface and what the rule is.The line of sight in human is characterized by linearity, naturalness and bidirectionality [8].In the process of cognition, visual fixation is not merely an inherent physiological property, but also closely correlated with cognitive activities of the brain.When the brain is working, eyes will gaze.The gaze time of the eye increases as the think time extends.Therefore, the time when users' eyes fixated on the screen may roughly show how much time their cogni-

Mingwu Kang
Science and Technology on Electro-optic Control Laboratory, Luoyang, Henan, China ABSTRACT: The aim of this paper is to improve the low service efficiency and unsmooth human-computer interaction caused by currently irrational layouts of digital interfaces for complex systems.Also, three common layout structures for digital interfaces are to be presented and five layout types appropriate for multilevel digital interfaces are to be summarized.Based on the eye tracking technology, an assessment was conducted in advantages and disadvantages of different layout types through subjects' search efficiency.Based on data and results, this study constructed a matching model which is appropriate for multilevel digital interface layout and verified the fact that the task element is a significant and important aspect of layout design.A scientific experimental model of research on digital interfaces for complex systems is provided.Both data and conclusions of the eye movement experiment provide a reference for layout designs of interfaces for complex systems with different task characteristics.tive activities need when they use digital interfaces [9].
So far, the eye tracking technology is widely used in usability research, psychology, ergonomics, clinical research, aviation and transportation.For example, Cheng presented an approach to the eye tracking for mobile device based on human-machine interaction [10].Jin presented a vehicle human-computer interface layout design reasoning system and realized tight integration of this system with the 3D CAD platform [11].Wang proposed an interface evaluation method of fighter-driving display-control system based on the eye tracking technology [12].Weinreich carried out an empirical study of enterprise web and search engine interface [13].This shows that the eye tracking technology plays a significant role in research of human-computer interface.However, few researches have focused on layouts of interfaces for complex systems.

CLASSIFICATION OF MULTILEVEL INTER-FACE LAYOUTS
The position relationship of interface elements results in digital interface layout.An array of combination modes of multiple interface elements leads to different interface types.The reason why users use digital interfaces for complex systems is to fulfill specific performance tasks.The task complexity is considered as the most important factor influencing information access [14,15].Such complexity can be defined from different perspectives.Campbell described task complexity as three typologies: (a) a primarily psychological experience, (b) an interaction between task and person characteristics, and (c) a function of objective task characteristics [16].Navigation elements play a crucial role in guiding users to fulfill task operations; however, there are differences in layout type among different types of digital interfaces.Starting with the structures and positions of navigation elements and combining with common layout types of digital interfaces for complex systems, a matching relationship is constructed in various types of digital interfaces and layouts.For digital interface for single-level task, there are three common layout types: Types A, B (B1 and B2), and C (C1 and C2).As shown in Figure 1, the shadow area represents the position of a navigation element.
An interface for complex system tends to include multilevel digital interfaces due to large amounts of information.For such interfaces, layout changes caused by structures and positions of navigation elements become more complex, thus there will be more layout types, which evolve from five basic types into a total of 34 types.The layout type A is shown in Figure 2, with a total of 10 subtypes, in which numbers represent a high-to-low navigation element hierarchy.Various layout types are numbered to contribute to experimental data analysis.Studies by Farzan, Kammerer showed a significant difference in visual search efficiency between subjects in pages with different layouts [17,18].Based on the classification and generalization of layouts of digital interfaces for complex systems, the eye tracking technology was used to test the interface layout types; influence of position of interface element on interface layout was examined; advantages and disadvantages of different interface layouts were assessed by determining users' total fixation duration, numbers of fixation points and scanning paths when users executed the same task in different layouts.

Subjects
The information monitoring system administrators were experimental tasks' object user group.In order to be familiar with the system compared with administrators, subjects were required to learn the experiment task previously.There were a total of 30 subjects (6 doctoral students and 24 postgraduates aged 20 to 30 years with male-female ratio of 2:3) with normal vision or corrected visual acuity in this experiment.

Experimental procedures
Interfaces for experimental tasks were based on the complex information monitoring system.As shown in Figure 7, subjects were required to find following elements orderly in continuous presented interfaces: Monitoring Center, Monitoring Center Management, Application Monitoring and Application Ranking.Each subject had to press the space bar to respond to each element found, while the interface fed it back until the task termination after "Application Ranking" was found.Experiment was conducted on subjects in a randomly presented 34 (basic layout type) × 1 manner.A common digital resolution of 1024×768 was used in interfaces designed in this experiment.Interfaces were grayed in order to avoid interference from other factors.

Analysis of total number of fixation points on the interface
There Test for homogeneity of variance was conducted in the total number of fixation points using Levene's test, with a probability of 0.077 larger than the significance level of 0.05, which satisfied the prerequisite for analysis of variance (ANOVA).One-way ANOVA was conducted on these five sets of data.It is supposed that different types of interface layout have no significant effects on the number of fixation points, and the significance level was 0.05.The corresponding Results showed that the null hypothesis was rejected if F=5.643 and P<0.05.Thus, in the experimental task, different types of interface layout had significant effects on the number of fixation points.LSD was used to check the multiple comparison results among layouts.Data showing significant differences were listed in Table 2: It could be concluded that: a) The mean total numbers of fixation points of layout Type C1 was significantly less than those of other layout types with a significant difference; b) The mean total numbers of fixation points of layout Type C2 was significantly less than those of layouts Types A and B2 with a significant difference; c) There was no significant difference in mean total numbers of fixation points between layouts Types C1 and C2; d) There was no significant difference between layouts Type A and Type B; however, the average total numbers of fixation points of the former were relatively more.

Statistical analysis among 34 layout types
There were a total of 34 types of interface layout in the experimental task.Descriptive statistical analysis of total numbers of fixation points was listed in Table 3: Test for homogeneity of variance was conducted in these data using Levene's test with a probability of 0.052 larger than a significance level of 0.05, which satisfied the prerequisite for ANOVA.One-way ANOVA was conducted on these 34 sets of data.It is suppose that different types of interface layout have no significant effects on the number of fixation points, and the significance level was 0.05.The corresponding Results showed that the null hypothesis was rejected if F=3.801 and P<0.05.Thus, in the experimental task, different types of interface layout had significant effects on the number of fixation points.
In conclusion, among layouts Type A, total mean numbers of fixation points of layouts 1, 3, 5 and 9

Web of Conferences MATEC
were significantly less than those of layouts 4, 6, 7 and 10 with a significant difference; among layouts B1, total mean numbers of fixation points of layouts 101 and 103 were significantly less than that of layout 106 with a significant difference; among layouts Type B2, average total numbers of points of fixation of layouts 111 and 112 were significantly less than those of layouts 114 and 116 with a significant difference; among layouts Type C1, the average total number of fixation points of layout 205 was significantly less than that of layout 203 with a significant difference; among layouts Type C2, the average total number of fixation points of layout 211 was significantly less than those of layouts 213 and 215 with a significant difference.

Statistical analysis among five layout types
Descriptive statistical analysis of total fixation duration was listed in Table 4: Test for homogeneity of variance was conducted in total fixation duration by using Levene's test, with a probability of 0.0313 less than a significance level of 0.05, which did not satisfy the prerequisite for ANO-VA.One-way ANOVA was conducted on these five sets of data.Dunnett's T3 test was used to check multiple comparison results among layouts.Data showing a significant difference were listed in Table 5: It can be concluded that: a) The mean total fixation duration of layout Type C1 was significantly less than those of other layout types, with a significant difference; b) The mean total fixation duration of layout Type C2 was significantly less than those of layouts Types A and B2 with a significant difference; c) There was no significant difference in mean total fixation duration between layouts Types C1 and C2; d) There was no significant difference between layouts Type A and Type B. Meanwhile, it can be seen that these results were similar to those of total mean numbers of points of fixation of five layout types.

Statistical analysis among 34 layout types
Statistical analysis of total fixation durations of 34 layout types was listed in Table 6: Test for homogeneity of variance was conducted in these data using Levene's test with a probability of 0.056 larger than a significance level of 0.05, which satisfied the prerequisite for ANOVA.One-way ANOVA was conducted on these 34 sets of data.It is supposed that different types of interface layout have no significant effects on total fixation duration, and the significance level is 0.05.Results showed that the null hypothesis was rejected if F=3.476 and P<0.05.Thus, in the search task, different types of interface layout had significant effects on total fixation duration.
In conclusion, among layouts Type A, mean total fixation durations of layouts 5 and 9 were significantly shorter than those of layouts 4, 7 and 10, with a significant difference; among layouts Type B1, mean total fixation durations of layouts 101 and 103 were significantly shorter than that of layout 106, with a significant difference; among layouts Type B2, mean total fixation durations of layouts 111 and 112 were significantly shorter than those of layouts 114 and 116 with a significant difference.However, there was no significant difference among layouts 112, 113 and 115.By pairwise comparison of all Type C1 layouts, there was no significant difference; among Type C2 layouts, the mean total fixation duration of layout 211 was significantly shorter than those of layouts 213 and 216 with a significant difference.

Analysis of scanning paths
An analysis was conducted of scanning paths when subjects performed the experimental task, and the following characteristics were found as follows: a) Overall fixation points of layouts Type C were relatively concentrated; layouts 205, 213, 215 and 216 showed longer scanning distances and unsmooth paths.The scanning path of layout 215 was illustrated in Figure 8.There was little difference among other layouts Type C with shorter scanning distances.Figure 9 showed the scanning path of layout 201, which was a typical scanning path of layout Type C.

Analysis of experimental results
The results could be seen from data analysis of numbers of fixation points, fixation durations and scanning paths of interfaces that: a) For multi-task interface, layouts Type C are superior in whole; no significant difference is noted among the layouts Type C1 and Type C2. b) As a whole, layouts 5, 9, 101, 111, 201, 202, 204, 211, 212 and 214 are superior, whereas layouts 6, 7, 106, 116, 205, 213, 215 and 216 are inferior.Meanwhile, it can be concluded that, for either superior or inferior interface, there is certain correlation between layouts on the left and right, and further suggesting that the structures of navigation elements have great influence on subjects' interface information acquisition in the multilevel digital interface, and that introduction becomes more important as task complexity changes.This also verifies the effectiveness of starting with task characteristics in classification of digital interface layouts.A matching model which is appropriate for multilevel digital interface layout is constructed by analysis of data and results.Also, the fact that the task element is a significant and important aspect of layout design is verified.Subdivision of layout types of multilevel digital interfaces provides a scientific experimental model for research on digital interfaces for complex systems, while conclusions of the eye movement experiment provide a reference for layout designs of interfaces for complex systems with different task characteristics.However, influencing factors of interface layouts are highly complex.Therefore, this article presents a design method only based on the structural classification and element characteristics.Designs of color, character and space are also important aspects influencing on interface layout and user's information acquisition.Further research would be made into these influencing factors.
Keywords: eye-tracking experiment; layout of interface; human computer interaction interface DOI: 10.1051/ C Owned by the authors, published by EDP Sciences, 2015

Figure 1 .Figure 2 .
Figure 1.Layout types of single-level digital interfaces

Figure 3 .
Figure 3. Layout Type B1 of multilevel digital interface

Figure 7 .
Figure 7. Schematic diagram of application interface for experimental task

Figure 8 Figure 9
Figure 8 Schematic diagram of scanning path of layout 215

Figure 10
Figure 10 Schematic diagram of scanning path of layout 1

Figure 11
Figure 11 Schematic diagram of scanning path of layout 113 to the task characteristics of digital interfaces for complex systems, layout structures of multilevel digital interfaces can be subdivided into 34 types.b) Interface elements can be classified as navigation elements and task elements.Based on characteristics of structures and positions of navigation elements, matching relations can be constructed between different types of digital interfaces and layouts by the principle of human visual perception and characteristics of line of sight.c) Based on the eye tracking technology, advantages and disadvantages of different types of layout are assessed by the searching efficiency of subject-performed task.

Table 2
Multiple comparison analysis of total numbers of fixation points among five interface layout types *.The mean difference is significant at the 0.05 level.

Table 3
Descriptive statistical analysis of mean total numbers of fixation points of 34 interface layout types

Table 4 .
Descriptive statistical analysis of average total fixation durations of five interface layout types

Table 5 .
Multiple comparison analysis of average total fixation durations among five interface layout types *.The mean difference is significant at the 0.05 level.

Table 6 .
Descriptive statistical analysis of mean total fixation durations of 34 interface layout types