Keywords

1 Introduction

With the increasing amount of information carried by the interface, the icon as a general visual information expression form an important part of the human-computer interface, such as a navigation marker in the navigation bar, an abstract representation of an object in the map interface and a function in in the software tool command column. However, due to the lack of systematic evaluation indicators, the icon design is likely to cause over abstract and complicated, which increases the visual search load of users. Therefore, it is necessary to make an objective assessment of the shape complexity of the icon and study its influence on the user’s visual search.

Recently, visual complexity research has attracted the attention of scholars in the computer field. Shape analysis containing polygon, image and other actual object is one of important application in this filed. But few people research on quantitative calculation of icon shape complexity, and verify it with behavioral experiments, for the main challenges followed:

  1. (a)

    Most icons’ shapes include plenty of contours which is more complex than a single closed polygon, so there is no standard measurable about visual cognition variable for the calculation like analyzing polygons.

  2. (b)

    Although many scholars have explained and measured the complexity of icons, few combined the visual cognition of the complexity of icons with the measure of the complexity of icons.

2 Background

The cognitive study on the shape complexity of two-dimensional icons belongs to visual complexity research in the field of cognitive science. Many different fields of scholars have studied the visual complexity of graphics from the aspects of visual cognition and cognitive computing.

Feldman et al. [1] suggested segments of negative curvature (i.e., concave segments) literally carry greater information than do corresponding regions of positive curvature (i.e., convex segments), and calculated the information volume of the closed contour based on the information entropy theory. Lim and Leek [2] believed that the curvature information calculation proposed by Feldman et al. is not suitable for the calculation of smooth curve contours and correct them.

But generally straight lines and curved lines exit in two-dimensional icon outlines, it is difficult to calculate the global information amount by using the curvature. In order to measure the complexity of icon or two-dimensional graphics, some researchers have applied different ways to quantify these objects.

Chen et al. [3] introduced three parameters of global distance entropy, local angle entropy and random traces to calculate the complexity of two-dimensional graphics. Dai et al. [4] selected the local angle entropy, global distance entropy, equivalent circle and adjacent distance to establish the icon complexity regression model which was used to estimate the complexity of the icon. However, they did not consider about the factor that the number of icon outlines has a significant impact on icon complexity.

In the aspect of visual cognition of graphics or icons, the visual complexity of two-dimensional icons is closely related to the way people visually recognize shapes [5]. The brain internally characterizes the shape of two-dimensional graphics by methods like principal component analysis. Meanwhile, the semantic system affects the processing of contour shapes [6].

McDougall et al. [7] defined the more the number or type of elements inside the icon, the higher the complexity of the icon for the complexity of the physical appearance of the icon. And proposed that reducing icon complexity should therefore become a priority in interface design, especially involve a strong search component.

Bertamini and Wagemans [8] concluded the convex contour is the main component of the two-dimensional contour, and the concave contour is the boundary point of each part of the two-dimensional contour, which consumes more attention and contains more information. The complexity of contours needs to be considered suitably as a factor when calculating icon shape complexity.

Wang et al. [9] explored the effect of the thickness and color of the icon on the user’s visual search, and found that the efficiency of searching concerning with the location and color, but they did not consider the relationship of shape complexity of icon.

However, few studies apply visual cognitive conclusions to compute icon complexity. This paper proposes an icon complexity calculation which combine the theory of visual cognition and complexity calculation of two-dimensional graphics.

3 Measure of Icon Shape Complexity

3.1 Icon Shape Complexity Definition

According to the research of visual cognition of two-dimensional graphics, we define the complexity of two-dimensional icon which consists of two aspects. The first one is the number of polygon contours of the icon shape, the greater the number of contours, the higher the visual complexity; the second one is the features of the icon’s contour, including the angle and the concavity.

It is obviously that human is more acceptable to certain angles, such as 90° and 180° or 0°. As shown in Fig. 1(a), obviously, the two polygons with the same number of angles but not the value of angles have different complexity, and the left one is simpler based on general cognition. So different angles with different amount of information result to different levels of complexity on visual cognition.

Fig. 1.
figure 1

(a) Two polygons with the same number of angles but not the value of angles. (b) Two polygons with same angle value of adjacent edges but not same concavity.

Full size image

As for concavity, we believe that the concave contour is a boundary point of different shapes in visual cognition, and the amount of information of it will be larger than the convex contour. The psychological validity of this informational analysis is supported by a host of empirical findings demonstrating the asymmetric way in which the visual system treats regions of positive and negative curvature [1]. For example, as shown in the picture Fig. 1(b), two polygons with same angle value of adjacent edges but not same concavity do not share same complexity towards human visual cognition, and the right one generally is more complicated.

3.2 Calculation Model of Icon Shape Complexity

Based on the Shannon entropy theory [10], we use local rotation angle entropy [1] formula to calculate the entropy value of each contour of icon and cumulative summation. As shown in the following formula, suppose \( \alpha \) is a collection of all possible events, \( p(\alpha ) \) is a collection the probability of occurrence of an event \( \alpha \), then the Shannon entropy of \( \alpha \) is defined as

$$ H\left( \alpha \right) = - p(\alpha )log[p(\alpha )] $$
(1)

In order to get local rotation angle entropy, we use the basic algorithm for detecting contours in OpenCV, which is the computer vision library, to detect contours and find icon outline feature points, then filter the feature point set to obtain a simplified icon outline feature point set. The following figure shows an example that the contours of the car icon after optimization which has five-layer outline drawn in different colors. The difference between this algorithm and other detection contour algorithms is that it is sensitive to the angle of the contour. When the contour is a horizontal or vertical line, the algorithm only remains the first and last two endpoints, therefore, it can more accurately detect the contour feature points of the polygon, and it is very useful for the calculation of the angle entropy value. Finally, we use the coordinate values of these contour points to calculate the rotation angle (Fig. 2).

Fig. 2.
figure 2

The size of the car icon used for contour detection is 300 × 300 pixels, and the color of the five feature points represents five contours which are detected by the algorithm. (Color figure online)

Full size image

Each contour point has a corresponding \( \alpha \), and set the rotation angle \( \alpha \) obey the probability distribution function as shown in formula 1, which is similar to the Von Mises probability distribution [1].

$$ p(\alpha ) = Aexp(B\sin \alpha ) $$
(2)

Where B is a centralized measure, the larger B is, the more concentrated the distribution is near the position measurement center; A is a constant term (depending on B); the \( \alpha \) value corresponding to counterclockwise rotation is positive, which means this point is a convex outline point. On the contrary, the \( \alpha \) value corresponding to clockwise rotation is negative, which means this point is a concave outline point. As shown in Fig. 3, the closer \( \alpha \) is to 90°, the larger \( p(\alpha ) \). Conversely, the closer to 0°, the smaller the value.

Fig. 3.
figure 3

The contour points with different concavities and convexities corresponding to negative and positive angles and the probability distribution of the rotation angle \( \alpha \).

Full size image

Therefore, the Shannon entropy corresponding to the rotation angle is \( H\left( \alpha \right) = p(\alpha )log[Aexp(B\sin \alpha )] \) Obviously, the probability distribution of the rotation angle of each point in the icon outline is independent. To get closer to the complexity definition in Sect. 3.1, we calculate the entropy values of the 90° and 0-degree rotation angles respectively, assign a lower entropy value to these points and assign a higher entropy weight of the concave contour points. Thus, the total rotation angle entropy of one of outline feature point set of icon is

$$ h\left( \alpha \right) = \left\{ {\begin{array}{*{20}c} {\sum\nolimits_{\alpha \in M} { - p(\alpha )(\ln A + B\sin \alpha ), 0 < \alpha < 90} } \\ {\sum\nolimits_{\alpha \in M} { - p\left( {min} \right)\left( {\ln B} \right),|\alpha | = 90,|\alpha | = 0} } \\ {\sum\nolimits_{\alpha \in M} { - C*p\left( { - \alpha } \right)\left( {\ln A + B\sin ( - \alpha )} \right), - 90 < \alpha < 0} } \\ \end{array} } \right. $$
(3)

Where M is one of outline feature point set of icon, α is the angle of rotation of a contour feature point in M, and \( p\left( \alpha \right) \) is the probability distribution in formula 2, let A = 1, B = −1, therefore \( p\left( {min} \right) = 1 \). C is the enhancement coefficient of the concave outline points. Generally, icons often contain multiple outlines, thus the final icon shape complexity is

$$ H^{\prime} \left( {\alpha_{ij} } \right) = \sum\nolimits_{i}^{n} {\sum\nolimits_{j}^{m} {h\left( {\alpha_{ij} } \right)/1000} } $$
(4)

Where m is one of outline feature point set of icon which is same as M of formula 3, n is outline feature point set of icon and \( m \in n \). The higher the value of the \( {\rm H}^{\prime} \), the higher the shape complexity.

In order to verify the validity of the formula, we selected randomly 70 two-dimensional icons as test samples, some of which are shown in the Fig. 4, and then used the formula to calculate the complexity of the sample icons. We recruited 25 testers to score the complexity of the icon using the dual comparison method, and then sort the icons by the scores of each icon. The orders of icon shape complexity calculated by the formula is consistent with the orders of the questionnaire scores, which indicates the formula is an effective method to quantify the shape complexity of icon.

4 Experimental Design

4.1 Experimental Purpose

In this paper, the experiment was designed to explore which level of shape complexity icon is best in visual search. Therefore, the eye tracking technology [11] is applied to the experiment to analyze the visual search behavior by eye movement path, the distribution of fixation points, the gaze time, reaction time and correct rate. These experimental results are important bases for analyzing the visual search performance of different icon shape complexity interfaces and the impact on visual search [12].

4.2 Method and Materials

Based on the calculation of icon shape complexity formula above, as shown in the Table 1, we divide the shape complexity of 45 icons (300 × 300 px) into five levels (H1 = [0.6,0.75], H2 = [0.45,0.6], H3 = [0.3,0.45], H4 = [0.15,0.3], H5 = [0,0.15]) and there is an icon sample corresponding to the complexity level in the each row of table. In order to eliminate the impact of semantics on the visual perception of icons, the same level of complexity icons own same semantics [13]. As shown in the Fig. 5, 9 numbered icons of the same complexity level are placed in a 3 × 3 matrix by random array algorithm, and subjects needs to search target icon in it. The searching process would be recorded by the eye tracker device.

Table 1. The five levels of 40 icons shape complexity
Full size table
Fig. 4.
figure 4

The results of calculated shape complexity of icon samples.

Full size image

In this experiment, 25 subjects were selected, all of whom were students aged from 23-year-old to 27-year-old (the ratio of male to female was 1:1). The subjects had computer experience, and the naked eyesight or corrected visual acuity was 1.0. Above, there is no history of mental illness.

The laboratory Tobii X2–30 eye tracker used in the experiment was fixed under the computer screen to capture the trajectory of both eyes. The subjects were experimented in a natural sitting position; there was no noise and low illumination (40 W fluorescent) during the experiment. Adjust the eye tracker according to the sitting posture of the subject. The eye of the subject is as flat as possible with the center of the screen. During the test, the distance from the eye to the screen is about 65–70 cm; the pixel of the computer display is 1028 × 1024, and the refresh rate is 75 Hz.

4.3 Experiment Procedure

Each experiment starts with one subject. After the subject sat in front of the screen in the laboratory, we need to adjust the distance between the eye movement equipment and the subject. Before the beginning of the formal, the eye movement equipment is calibrated and the participants complete a set of exercises. After one minute of rest, the formal experiment begins.

The target icon memory page displays a single icon in 2000 ms, then the search page displays the 3 × 3 array icons which have same complexity level like the target icon. In addition, the target icon is one of the 9 icons randomly placed in the array. There are five complexity levels of icons in the experiment. Subject need to remember the target icon first displayed, and automatically enter the search page. The subject searches for the target icon in 9 icons with the system timing. After finding the target icon, the subject presses the space bar to complete the search task, and the timing stops. If the subject did not find the target, click the right mouse button. If the participant does not click the space bar, the screen will continue to display this page and the system will continue to time. After a test is completed, the screen displays the next target icon until all visual search tasks are finished and five sets of target icons in different complexity levels appear in random order. As shown in Fig. 6, the total experiment process for one subject average cost 20 min.

Fig. 5.
figure 5

The 3 × 3 matrix of icons which share same level of complexity

Full size image

4.4 Experimental Result

The experimental results include behavioral data and eye movement data. The behavioral data contains reaction time and response accuracy, as shown in Table 2. The eye movement data mainly involves the AOI gaze time, the hot zone map and the number of eye hop paths. We use SPSS to do the analysis of variance, and use Tobi Studio to analyze eye movement data. The abnormal data caused by the factors are deleted, and the number of deletions is less than 2%. The following Table gives the behavioral data.

Table 2 Table 2.
Full size table

We perform ANOVA on the response time and accuracy, and the factor is the shape complexity level of the icon. For the correct rate, From the table, the complexity of H4 has the highest correct rate, but the accuracy rate of H1 and H5 rank in the last two. The results of the variance analysis of repeated measurements show that the complexity has obvious significant effect on the search performance, F = 2.103, p = 0.048, then further post-testing on complexity, the results indicate the complexity of H4 is significantly different from the complexity of H1, H2 and H5, the average p = 0.040. There is no obvious difference between the complexity of H4 and H3. About the response time, Subjects spent the least amount of time on the complexity of H4, and slightly higher than the complexity of H3, however, the complexity of H1 and H2 are time consuming for subjects. The results of ANOVA show that the complexity has enormous impact on the response time, F = 7.185, p = 0.001. Multiple comparison results indicate the complexity of H4 and H5 have significant difference with the complexity of H1 and H2, because the value of p between them less than 0.05. Obviously, the complexity of H4 has the highest search performance than the others. It can be concluded that when the shape complexity of the icon shape is reduced, the time of the visual search becomes shorter, but when it is as low as a certain degree, the correct rate of the search is significantly lowered.

We have selected representative experimental materials representing different complexity levels to analyze AOI gazing time, number of gazes, overall hot zone map and visual search path when analyzing eye movement data.

At each level of complexity, we select the corresponding search page and plot the area of interest to analyze the average time of the first gaze. As shown in Fig. 7, it reflects the difficulty of extracting information which means the longer the duration, the more difficult it is to get information from the display area. According to the chart above we can conclude that it is hard to extract the information from the search page as a result of the complexity of H1 is too complicated and the complexity of H5 is too abstract.

Fig. 6.
figure 6

Icon visual search experiment process example

Full size image

As shown in Fig. 8, the number of eye movements of the target icon of H1 is more than the target icon of H5, which means subjects could take less time to remember the features of icon’s shape when learning the target icon with low complexity levels. From the eye movement trajectory in Fig. 8(b) and (e), we can find the subject mainly performs visual search through remembering the shape feature, that is, the subjects’ search strategy [14] is basically the same. However, when searching for a simple shape, the subject’s gaze time will be shorter during the search, for example, as shown in the hot zone map of Fig. 8(c) and (f) below, the depth of color representing the length of gazing time of the low-complexity search page is significantly lighter than the others which indicates that subjects are easier to ignore simple information. Therefore, if the shapes of the icons in the search page are similar, the correct rate of visual search would be greatly reduced.

Fig. 7.
figure 7

Time to first fixation mean of entire search page

Full size image
Fig. 8.
figure 8

The eye movements and hot zone maps of target pages and search pages recorded by Tobi Studio

Full size image

5 Conclusion

In this paper, we proposed a quantitative evaluation method to measure the shape complexity of icon and divide them into different levels of complexity by the method, then designed an experiment to explore the effect of the level of shape complexity of icon on visual search. The experiment results indicate that visual search performance of icons is affected by the shape complexity significantly and the H3(0.3–0.45) or H4(0.15–0.3) shape complexity show the highest performance. Furthermore, based on the eye tracking technology, we analyzed the eye movement feature of subjects. These data reveal that it is more difficult to extract information from icons with too high or too low shape complexity.

The evaluation method of this paper provides a quantization scheme for icon shape analysis and classification application. In addition, the results of visual search experiment can help the designer to optimize the visual search of the interface icon, improve the icon shape design, and raise the visual search efficiency of the interface icon. Future work research mainly explores the influence of icon complexity of other dimensions on visual cognition, like color, texture and style.