Keywords

1 Introduction

Since the development of computer technology, the earliest interface style– graphical icon appeared together with graphical computer Alto. Later, simple materialized icon style from Windows in Microsoft Corp appeared, and then in recent years, there are two main icon style exist, one is more realistic style such as skeuomorphism style and ultra realistic style, the other is abstract style such as flat style beginning with IOS7 interface, Metro style start with win8 computer system, and more simplified line style [1]. (Fig. 1. Development of icon style.) These different styles of icons have different characteristics in aesthetics, user’s emotion and usability.

Fig. 1.
figure 1

Development of icon style.

Full size image

Zhenglin analyzes the Win8 interface Metro, and summarizes the concept of modern interface design and the inspiration from Metro style [2]. Sheng discusses the characteristics and ideas of flat interface design from aesthetics perspective [3]. Feng discusses the advantages and problems of flat style [4]. Above all, research on interface style is mainly from aesthetic and emotional, former researchers mainly did qualitative analysis. There still not a quantitative analysis about different styles of icons. If we analysis this problem quantitatively, we can solve solve problem about users and interface more effectively and make interface design more rational. In this way we can make interface friendly, easy to use, and users operation to interface have higher efficiency and lesser mistakes.

2 Analysis of Icon Style

Previous studies have shown that there are two main mode when users searching for a target icon from many icons: parallel search and sequence search. Parallel search find target in the whole field of vision, the line of sight does not have a confirmed trajectory. This search method is used when the search target is easy to find, and this way has high efficiency. But in sequence search, users check icons one by one, search stops when the target is found. But sequence search can only be carried on in a limited vision field because human’s eye can only perceive details in a limited range, and this way of searching is influenced by the number and location of target (Fig. 2. Visual search method.) [5]. In addition, icons can be coded in many dimensions, such as color and shape. Experiments show that multi dimensions will lead to sequential search, and search time increases with the increase of coding dimension [5]. Different style of icons have different coding dimensions, for example, the line icons have the same color, so the only coding dimension is shape. But flat icons not only have shape dimension, it also have color dimension. And compared with the former, skeuomorphism style has more complex coding dimensions.

Fig. 2.
figure 2

Visual search method.

Full size image

From analysis above, it can be seen that different icon styles are in different complexity and coding dimension, which may lead to difference of search methods and efficiency. Eye movement experiments can record eye movement, fixation time, visit count, etc. These data can directly reflect users’ visual search process, and reveal the psychological processes behind them [6]. The experience can provide reasonable accordance to icon design. At present, eye movement technology has been applied to human-computer interaction such as interface evaluation, web design, etc [7]. Then we will carry out eye movement experiment, and study the impact of icon style on visual search.

3 Eye Movement Experiment About Icon Style

3.1 Design of Experiment

We extract four icon styles which are widely used and have obvious differences with others: line style, Metro style, flat style, and skeuomorphism style. And then we make pictures used in experiment, every picture includes nine icons. There are four groups and each group include the four styles of pictures like shown below (Fig. 3. One group pictures used in experiment.).

Fig. 3.
figure 3

One group pictures used in experiment

Full size image

Participants will asked to find the icon which has prescript meaning from each picture. There are many irrelevant factors in the experiment such as location, size, learning and memory. In order to avoid these factors affect the experimental results, experiment setting as fellow: the nine icons have the same size in every picture; The nine icons randomly arranged in three rows and three columns in the square area which size is 10 cm * 10 cm; To ensure participants do visual search in central visual field, the line of sight up and down no more than 5°, we limit the distance between the subject’s eyes and the screen is 60 cm; Throughout the experiment each icon will not repeat. Finally record experiment data as follows: total visit duration, time to first fixation in ROI, fixation duration, visit count, eye movement contrail and heat map.

3.2 Experimental Procedures

The participants are graduate students, men and women each half. All of the participants without color-blind or color weakness, normal or corrected to normal vision. Tobii eye tracker is used in the experiment. Subject sat in front of the computer in a comfortable position and be told not to move too much during the experiment. Then experiment start. Subject finds the target icon from each picture and press the space key to next question. The experiment formed to four group, and the experiment end when all 16 pictures shown completely.

3.3 Experimental Result

3.3.1 Total Visit Duration

Total visit duration reflects the degree of difficulty in completing the task, the shorter the total time, the higher the efficiency of the task. From the line graph of average total visit duration (Fig. 4), participants use the most time in skeuomorphism style. Which is obviously higher than the other three styles.

Fig. 4.
figure 4

Line graph of average total visit duration

Full size image

Do variance analysis about the total visit duration (Tables 1 and 2).

Table 1. Descriptive statistics of total visit duration.
Full size table
Table 2. ANOVA of total visit duration.
Full size table

As can be seen from the table, significance of icon style to total visit duration Sig = 0.003 < 0.05, which shows that the difference among four styles were significant.

3.3.2 Heat Map

Heat map reflects the concentrate area of fixation point. If there are many points in icons, we can conclude participant difficult to identify these icons. In other words, users need more time to understand its meaning, and difficult to complete visual search task. The line style icons and Metro style icons in the experiment comparatively have centralized heat map, they have less point in other icons. And flat style icons have the third level of fixation points. Finally, skeuomorphism style icons have the most dispersive points (Fig. 5. Heat map). Almost every icon in the picture has many fixation points, which indicating that participants need more time to identify its meaning.

Fig. 5.
figure 5

Heat map

Full size image

Eye movement contrail is the moving path of the line of sight [8]. It links every fixation point. The size of each fixation point is the length of the fixation time(the larger the area of the point, the longer the fixation time). From the tendency of eye movement contrail in each picture, we draw the contrail trend picture (Table 3. Eye movement contrail trend).

Table 3. Eye movement contrail trend.
Full size table
Table 4. Descriptive statistics of time to first fixation in ROI.
Full size table

3.3.3 Eye Movement Contrail

First we can conclude characteristics from Table 3, there are less contrail in line style and Metro style. The skeuomorphism style has the most contrail. Second, from the eye tracking record we can see there are some difference about visual search method. People are likely to use parallel search in line style and Metro style pictures. Fixation point ordered in random. But people are likely to use sequence search in other two style pictures for its fixation points equally distribution and the shorter saccade distance.

3.3.4 Time to First Fixation in ROI

The Region of Interest (ROI) in this experiment is a rectangular area of the target icon. We recorded time to first fixation in ROI, and spanning line graph of average time (Fig 6). Time to first fixation in ROI in the Metro style is the shortest, which has significant differences between other three groups (Tables 5).

Fig. 6.
figure 6

Line graph of time to first fixation in ROI

Full size image
Table 5. ANOVA of time to first fixation in ROI.
Full size table

Then data were analyzed using variance analysis. Result there was no different between every icon style(Sig = 0.292 > 0.05). So icon style do not have big influence in time to first fixation in ROI.

3.3.5 Fixation Duration

Fixation duration is amount of time of all fixation in one ROI. The longer the fixation time in an icon, the more time subjects need to identify the meaning of the icon. In other words, the icon is more difficult to be identified. So the length of fixation duration can reflects difficulty degree of icons to be identified. From the line graph of average fixation duration we can see (Fig. 7. Line graph of fixation duration.), the skeuomorphism style icon have the highest fixation duration degree, and line icon and Metro icon have the lowest degree. This means people need pay more attention to identify the meaning of skeuomorphism icons (Tables 6 and 7).

Fig. 7.
figure 7

Line graph of fixation duration.

Full size image
Table 6. Descriptive statistics of fixation duration.
Full size table
Table 7. ANOVA of fixation duration.
Full size table

The variance analysis were used to analyze fixation duration (Table 4), the difference among all kinds of style were significant (Sig = 0.025 < 0.05).

Participants may repeat to visit the same icon in many times. If an icon is not clear enough to express its meaning, participants may not recognize the target icon in first fixation, then they would access the icon in second time or more. Visit count can also reflect the difficulty of participants identify the icon. From the line graph below we can recognize that Metro style corresponds to the least visit count (Fig. 8. Line graph of visit count). The line style and the flat style a little more than Metro style. However, skeuomorphism style, far more than the other three style, corresponds to the most visit count (Tables 8 and 9).

Fig. 8.
figure 8

Line graph of visit count.

Full size image
Table 8. Descriptive statistics of visit count.
Full size table
Table 9. ANOVA of visit count.
Full size table

3.3.6 Visit Count

Then through variance analysis we can reach that the difference among all kinds of style were significant (Sig = 0.041 < 0.05).

3.4 Analysis

First, In the experiment of the four icon style, line style icons and Metro style icons compared to the other two styles, have more single coding dimension. Participants tend to use parallel search to find target icons in this two kinds of icon style. From eye movement record it can be seen that visual search in skeuomorphism style icons, participants are more likely to use sequence search. Parallel search is carried out in the whole visual field, but sequence search can only be carried out in a limited range of vision [9]. Parallel search has higher effectiveness than sequence search, which lead to difference of search efficiency [10].

Second, there are some rules in human visual behavior: when human looking at a picture, they will first note the contour shape of the picture, and then pay attention to the details. Line style icon and Metro style icon are both abstract contour of objects in real world, so they are easy to be recognized in first glance. But skeuomorphism style icons have the most complicated color and shape, so they are difficult to be identified.

Third, heat map of skeuomorphism style icons is most disperse. There are many fixation points in every icons, which indicates that participants need carefully identified each icon in the experiment. And from previous data we know that there also the most visit counts in this icon style. According to the theory in visual search [11], people’s attention will smothered to return to the area previous pay attention to. So, if participants did not recognize the target icon in first fixation, they will need more time to return to it [12].

Finally, studies have found that people will need more fixation time when deal with difficult information [13, 14]. Different styles of icons have different complexity, so the difficulty of information processing is different which lead to difference of fixation time [15]. From experiment data we can see there is no obvious difference between line style and Metro style in fixation time, but they both have obvious difference with skeuomorphism style.

In this experiment, we consider the only element icon style, there are many other interface design element we can study in this method. We can get a series of conclusions in this way, so as to provide more theoretical basis for touch screen interface design.

4 Conclusion

  1. (1)

    Through the eye movement experiment of different icon style and the analysis of visual search, we can see that icon style can make a big difference to user’s visual search;

  2. (2)

    User’s total visit duration, fixation duration and visit count change with icon style. The more complicated the icons, the lower search efficiency. Visual search efficiency is higher in simple icon style, and the lowest in skeuomorphism style;

  3. (3)

    In simple icon style like line style and Metro style, users are more likely to use parallel search. But the complex icon style skeuomorphism style lead users use sequence search;

  4. (4)

    Through the eye movement experiment, we can analyse difference of visual search in different icon style and help to improve visual search efficiency in human-computer interaction, then make the interaction more smooth.