Keywords

1 Introduction

With the rapid development of technology and the Internet, more and more people interact with their intelligent devices everyday, such as mobile phone, pad, lap and so on. Studies on the interaction between human and intelligent devices have been one of the most significant research hotspots right now and in the future. User interface is the space where human interact with all kinds of computers and the graphical interface design is to produce an interface, which can make it easy, efficient and enjoyable for users to operate an intelligent device. Icons are often used to transform lots of information in user interface design, because they are thought to be more useful at communicating ideas than words [1]. When working with computers or other smart devices with complex user interfaces, however, people receive large amounts of graphical information that they need to interpret. This kind of information should be presented in such a way that its perception is accurate, fast and as effortless as possible [2]. Properties of the human visual system determine the limits of icon cognitive process, which determine the optimal properties of different graphical interface attributes such as suitable icon size, appropriate icon spacing, applicable amount and density of icons in a user interface, minimum color contrast difference between background and icon color, and minimum amount of brightness contrast between background and icon color.

Although many empirical studies exist, few have specifically evaluated the impact of contributing factors on user performance and perception in Human Computer Interaction, especially for the element density and the color contrast on the intelligent device interface. In this paper, firstly a mapping relation between the icon density and perceptual performance is presented, and then a systematic experimental study based on chromaticity contrast and luminance contrast is investigated. Finally, optimization methods of intelligent device interface design are proposed according to the results.

2 Background

In this paper, we reviewed some earlier studies about the effects of icon density on users’ cognitive processes in human computer interaction, the effects of color contrast on users’ visual perception and the application of eye movement.

2.1 Icon Size and Density

Visual search is an important activity in our everyday life. It even constitutes several severe tasks, such as controlling an aircraft, monitoring the working state of nuclear power plants and selecting a military target. Therefore, icons need to be designed to optimize search accuracy and search time. Previously, it has been showed that two crucial factors assumed to greatly affect users’ icon cognitive process: icon size and density of icon [3]. Lindberg et al. [2] investigated the effects of spacing and size of individual interface elements on people’s perception. They found that spacing did not have an effect on search time, and icons smaller than 0.7 deg resulted in significantly raised search time. Besides, on average the perceptual span for icons was found to be 25 arranged in a 5 × 5 array. Moreover, they suggested that icons used in graphical user interfaces should be at least about 1 deg in size (about 0.7 cm at a viewing distance of 40 cm) for the majority of users to be able to perform their computerized tasks with relative ease. Also, the inter-icon spacing should be moderate, preferably about the same as the icon size. Huang [4] investigated the effects of the type of computer icon and the figure/background area ratio on visual search performance on a liquid crystal display (LCD) screen. He found that visual search performance was better for computer icons with a 90 % figure/background area ration than for a 70 % ratio. Vlaskamp et al. [5] measured search performance, defined as search time divided by number of elements as subjects searched for an “O” among “C”s. The results of the study indicated that inter-element distances larger than 1.5 deg do not have an impact on search performance, whereas for distances smaller than this, search performance decreased dramatically.

Similar findings have been made in visual search experiments [6–9]. Näsänen et al. [6] measured eye movements and the speed of visual letter search for character sizes between 0.143 and 0.62 deg. They found that visual search times, as well as the number and duration of eye fixations needed to perform the search task started to increase when character size decreased below 0.3 deg. Schröder et al. [7] used icons from real cell phones to study how the three factors (icon size, displays size and set size) affect users’ visual search efficiency (reaction times and error rates). The results showed that search efficiency was considerably higher with increasing icon size and both decreasing display size and set size. Näsänen et al. [8] used visual letter search task and varied luminance contrast in their visual experiment. They found that with decreasing luminance contrast the search times increased strongly, even when the character size used was relatively large, 0.9 deg. They also found that the number and duration of eye fixations increased with decreasing contrast. Ojanpää et al. [9] investigated the effect of luminance contrast on the speed of visual search and reading when characters and background differed also with respect to color. Stimuli with moderate (green/grey) or high color contrast (green/red or yellow/blue), and three character sizes (0.17, 0.37 and 1.26 deg) were used in his study.

2.2 Color Contrast

The effect of chromaticity contrast on legibility was investigated by several researchers [10–12]. Spenkelink [10] found that from the point of view of legibility, chromaticity contrast and luminance contras were found to be additive only for low luminance contrasts and for very saturated colors. K. Knoblauch [11] investigated that the effect of chromaticity contrast on reading rate (words/minute) depended on the level of luminance contrast present. Effects of chromaticity contrast became only evident when luminance contrast was sufficiently lowered, especially for the smallest character. G.E. Legge [12] found reading rates for high chromaticity contrast were found to be as fast as for high luminance. Other experiments were designed to study the nature of the color coding mechanisms mediating the visual search task. Search time was measured as a function of the color difference between the target and the distracter. It was found to increase linearly with the number of distracters when the color difference was small and to be constant when the color difference was large. Jing Li [13] discussed how to use color saliency properly to optimize interface design, and three laboratory experiments were conducted to assess the anti-interference performances of different colors in three dimensions (hue, brightness and saturation).

2.3 Eye Movements and Visual Span

Eye movement refers to the voluntary or involuntary movement of the eyes, helping in acquiring, fixating and tracking visual stimuli. According to the visual span control hypothesis [14], eye movements are controlled directly by the size of visual span. Rayner et al. [15] measured search time and eye movements in a task where the observer had to find a target letter in a one-dimensional letters string where the other letters were distractors. They used the moving window technique to determine the area from which information was acquired during one fixation. Moreover, Bertera et al. [16] investigated search time and eye movements in a task where the observer had to find a target letter in a two-dimensional irregular array of characters (numerals and letters) using the moving window technique.

The effect of visual span had been previously studied in series of experiments. Keech et al. [17] presented a computational model and corresponding computer simulations that mimic phenomenologically the eye movement trajectories observed in a conjunctive visual search task. Najemnik et al. [18] made a study that asking observers to search tasks in which a target was embedded at an unknown location within a random background that has the spectral characteristics of natural scenes. His finding reveals that there was little benefit from perfect integration across fixations—much more important was efficient processing of information on each fixation. Näsänen et al. [19] investigated how stimulus contrast affects the speed of two-dimensional visual search and how changes in eye movements and visual span could explain changes in performance. The task of the observer was to search for, and identify, an uppercase letter from a rectangular array of characters in which the other items were numerals. Zelinsky et al. [20] used two experiments (one using O and Q-like stimuli and the other using colored–oriented bars) to investigate the oculomotor behavior accompanying parallel–serial visual search. Eye movements were recorded as participants searched for a target.

2.4 Purpose of this Study

Design implications are that the number of icons should be minimized in pop-up menus and that the icons should be arranged in a manner reflective of the shape of the useful field of view. Frequently used menus or icon arrays should be permanently visible to minimize performance time. Dialogue windows, especially with a larger number of icons, should be built in compact, perhaps square, configurations [21]. When icons are complex, the search time increases because of the extra processing time required to bind all of the features in the icon together to form a percept [22]. According to the results of Lindberg et al. [2], the effects of inter-element spacing and icon density are negligible. The purpose of the study was to investigate the effects of the icon density, color contrast and luminance difference on the interaction between users and user interfaces. Based on the results of the study, we also gave user interface designers guidelines about the appropriate size and density of icon design.

3 Study 1: Effect of Icon Density on Visual Perception

It is difficult for users to identify one specific icon among a great number of icons. What’s the limitation number of icons in one area and what’s the appropriate spacing for these icons? In this study, we investigated the effects of the icon density on the interaction between users and user interfaces.

3.1 Participants

A total of 10 male and 10 female graduate students aged between 23 and 27 years (M = 25.2, SD = 2.1) who used computer almost everyday were recruited. All participants had normal or corrected vision without color blindness or color weakness.

3.2 Experimental Materials

The experiments were conducted in the ergonomics lab of Southeast University under normal lighting condition (about 300 lux). The stimuli were generated by one computer with a 2 GHz Intel Core i7 processor. The computer was running under the Mac OS operating system. The display used was a 23.8-inch LCD monitor (Dell u2414 h). The graphics adapter was used at a resolution of 1920 × 1080 pixels and a frame rate of 60 Hz. The viewing distance used was 50 cm.

The stimuli in this visual search experiment were five different rectangular arrays of icons (3 × 3, 4 × 4, 5 × 5, 6 × 6, 7 × 7). The arrays consisted one target and other distracters. The target in each trial was unchangeable, however, the position of the target icon was randomly selected for each stimulus presentation. The size of the single icon in stimulus array was 32 × 32 pixels (1.03 deg). There are five different levels of icon density (icon spacing being zero icon (0 pixels), 1/4 icon (8 pixels), 1/2 icon (16 pixels), 3/4 icon (24 pixels) and one icon (32 pixels)). Thus the total size of the icon sets ranged from 96 × 96 pixels for a 3 × 3 matrix with 0 icons spacing to 416 × 416 pixels for a 7 × 7 matrix with one icon spacing. While the total visual angle of the icon sets ranged from 3.1 deg for a 3 × 3 matrix with 0 icon spacing to 13.3 deg for a 7 × 7 matrix with one icon spacing, which were all within the scope of the instant vision (18 deg). Table 1 shows the detailed matrix size (pixels) and visual angle (degree) for 25 different kinds of icon density. The stimuli in the experiment were white icons on a mid-grey background. The luminance of the foreground color (L: 222.81, x: 0.305, y: 0.323) and background color (L: 22.09, x: 0.312, y: 0.334) were held constant. Figure 1 shows examples of icon matrices used in the experiment.

Table 1. Matrix size (px) and visual angle (deg) for 25 kinds of icon density
Full size table
Fig. 1.
figure 1

Search time as a function of icon spacing

Full size image

3.3 Procedure

The task of the subject was to search for and identify the target icon shown in the icon matrix. The target icon and other distracters changed their position every time. Each stimulus presentation was preceded and followed by a black screen stimulus. The subjects were not instructed to search from the top, bottom or center of the stimulus, they could use their different methods to search for the target icon. The “Space” button was used to response when subjects found the target icon in the matrix. After the response, a new stimulus array was presented after a delay of 500 ms. The next stimulus presentation would not be showed until the target icon was found.

Subjects practiced about one hundred stimulus consisting five different set sizes and five different kinds of icon spacing, which were not used in the formal experiment before the performance data were collected. Then, subjects first completed a series of 3 × 3 set size trials with different kinds of icon spacing (0 px, 8 px, 16 px, 24 px, 32 px) and other four series of set sizes (4 × 4, 5 × 5, 6 × 6, 7 × 7) followed one by one. Subjects could have a rest at the end of each series of stimulus when they felt tired.

4 Results

Figure 1 shows the mean search time as a function of set size during the visual search task. The main effect of set size on the search time was significant (\( \chi_{F}^{2} (4) = 136.637 \), p < 0.001). The time required to find the target icon increased greatly as the icon number is more than 25. What’s more, the search time varied more greatly in 5 × 5, 6 × 6 and 7 × 7 set sizes than in 3 × 3 and 4 × 4 set sizes as the icon spacing changed. Figure 2 shows the number of fixation per search as a function of set size during the visual search task. The number of fixation of 3 × 3, 4 × 4 and 5 × 5 varied appreciably as the icon spacing changed, while the number of fixation of 6 × 6 and 7 × 7 varied greatly. For five kinds of set size, fixation number became the largest as the inter-element spacing was one icon.

Fig. 2.
figure 2

Fixation number as a function of set size

Full size image

5 Discussion

The results showed that the main effect of set size on the search time was significant, the search time increased as the set size increased, which is in line with the theory by Treisman [23]. One interesting finding revealed was that subjects need much more time to find the target icon among distractors as the set size was larger than 5 × 5. What’s more, the number of fixation per search also increased greatly. Combined with interviews after the experiment, we believe that this is the limitation for subjects to find the target quickly. The eye movement data showed that the fixation number would be kept below four if the set size was not larger than 5 × 5. Besides, the fixation number varied more greatly in 6 × 6 and 7 × 7 set sizes than in other three set sizes as the icon spacing changed. For 5 × 5 set size, 1/2 icon would be the appropriate spacing for users.

6 Study 2: Effect of Color Contrast on Visual Perception

Based on the results of the Study 1, 5 × 5 set size with 1/2 icon spacing was selected as the stimuli in the next experiment. In this study, we conducted an exploratory study about the chromaticity contrast and luminance contrast of icon perception.

6.1 Participants

A total of 10 male and 10 female graduate students aged between 23 and 27 years (M = 25.2, SD = 2.1) who used computer almost everyday were recruited. All participants had normal or corrected vision without color blindness or color weakness.

6.2 Experimental Materials

The experiments were also conducted in the ergonomics lab of Southeast University under normal lighting condition (about 300 lux). The stimuli were generated by the same computer used in the Study 1. The viewing distance used was also 50 cm.

There were two levels of chromaticity contrast: low chromaticity contrast (green/celadon) and high chromaticity contrast (green/red). The luminance contrast between the icon and background was varied. The luminance of the icon was varied from dark to bright blue (6.38, 16.05, 29.52, 48.12, 68.51, 93.92, 128.14 cd/m2), while the background was red (50.68 cd/m2) and celadon (51.24 cd/m2). Luminance (Y) and chromaticity coordinates (x, y) of the icon and background were measured by using Minolta Chroma Meter CS-200. Michelson contrast was used to define the luminance difference between icons and background in this experiment. Michelson contrast is defined as C = (L max-L min)/(L max + L min), where L max and L min are the maximum and minimum luminance. Table 2 shows the all colors used in the experiment.

Table 2. The CIE coordinates of colors used in the experiment
Full size table

6.3 Procedure

The task of the subject was to search for and identify the target icon shown in the icon matrix. Each stimulus presentation was preceded and followed by a black screen stimulus. The subjects were not instructed to search from the top, bottom or center of the stimulus, they could use their different methods to search for the target icon. The “Space” button was used to response when subjects found the target icon in the matrix. After the response, a new stimulus array was presented after a delay of 500 ms. The next stimulus presentation would not be showed until the target icon was found.

7 Results

Figure 3 shows the number of fixation per search as a function of Michelson contrast. The main effect of luminance difference was significant for both high color contrast (\( \chi_{F}^{2} (6) = 29.969 \), p < 0.001) and low color contrast (\( \chi_{F}^{2} (6) = 27.339 \), p < 0.001). The number of fixation for both two kinds of color contrast decreased significantly as the value of icon-background Michelson contrast increased. What’s more, there were more fixation numbers when the color contrast was low. However, the fixation number increased when the value of Michelson contrast was more than 0.3. Figure 4 shows the search time as a function of Michelson contrast. The main effect of luminance difference was significant for low color contrast (\( \chi_{F}^{2} (6) = 19.607 \) p < 0.001), and it was not significant for high color contrast (\( \chi_{F}^{2} (6) = 7.342 \), p = 0.290). For low color contrast, the search time decreased significantly as the value of icon-background Michelson contrast increased. However, the search time for high color contrast decreased slightly as the value of icon-background Michelson contrast increased. Besides, the icons could be identified much more quickly when the icon-background color contrast was high.

Fig. 3.
figure 3

Fixation number as a function of Michelson contrast

Full size image
Fig. 4.
figure 4

Search time as a function of Michelson contrast

Full size image

8 Discussion

The results showed that the main effect of luminance difference between icon and background was significant, especially when the icon-background color contrast was low. Besides, there was an interesting finding: both the fixation number and search time increased when the value of Michelson contrast was more than 0.3. One possible explanation is that the icon luminance is too high, which may interfere the visual search tasks. Combined with interviews after the experiment, we believe that people will feel much more comfortable when the value of icon-background Michelson contrast is between 0.3 ~ 0.5, and the efficiency of the visual search tasks will be much higher.

9 Conclusion

We investigated the effects of icon density, color contrast and luminance contrast on the speed of visual search tasks. Although we used icons on computer display, we believe the results are applicable to other forms of user interface. Based on the results of present study, we propose user interface designers’ guidelines about the appropriate density and luminance contrast of icon design. (1) The number of the icons should not be more than 25 in one area. (2) For small number of the icons, the inter-element spacing should be more than 1/2 icon, which would make users easier to identify them. For large number of icons, small icon spacing (1/4 - 1/2 icons) is recommended. (3) High color contrast can enhance the efficiency of icon identification. (4) The value of icon-background Michelson contrast should be more than 0.3, and less than 0.5.