Effects of App Icon Border Form and Interface Background Color Saturation on User Visual Experience and Search Performance

Deng, Li; Zhang, Zhirui; Zhou, Fangyuan; Liu, Ruiying

doi:https://doi.org/10.1155/2022/1166656

Advances in Multimedia

On this page

Abstract Introduction Results Discussion Conclusions Data Availability Conflicts of Interest Authors’ Contributions Acknowledgments References Copyright Related Articles

Research Article | Open Access

Volume 2022 | Article ID 1166656 | https://doi.org/10.1155/2022/1166656

Effects of App Icon Border Form and Interface Background Color Saturation on User Visual Experience and Search Performance

Li Deng,^1,2Zhirui Zhang,^1,2Fangyuan Zhou,^1,2and Ruiying Liu^1,2

Academic Editor: Zhongxu Hu

Received11 May 2022

Revised24 Jun 2022

Accepted06 Jul 2022

Published30 Jul 2022

Abstract

The purpose of this study was to investigate the icon border form and interface background color saturation’s individual and connected impacts on interface interaction. They were two important factors affecting user visual experience and search performance, but previously they have been studied individually. An experiment using eye-tracking, behavior measurement, and subjective evaluation was carried out to determine the influence of app icon border form and interface background color saturation on user visual experience and search performance. The statistical results showed that during the human-computer interaction process, compared with the circle and rounded square border forms, the square icons had the longest search completion time and first fixation time and the lowest subjective evaluation score. In addition, rounded square icons had the best user visual experience. Compared with high-saturation background color, less time was required to complete search tasks in the low-saturation background color condition. Higher perceptual usability and aesthetic scores were also obtained under this condition compared to the high-saturation background color condition. Hence, this study confirmed that the two factors of icon border form and interface background color saturation had the basic properties of the interaction effect. The combination of rounded square icons and low-saturation background color can be beneficial to improve user search performance and visual experience. The findings can help in the design of human-computer interaction interfaces.

1. Introduction

Visual search refers to the cognitive process of looking for a particular object in a specific background. It is a significant method for acquiring and processing external information throughout people’s daily behaviors. Icons, often referred to as pictographs, are designed for graphics-based interfaces. They have the advantages of overcoming language barriers, effectively reducing the cognitive and memory burden of users, making recall and recognition easier than text, and reducing interface complexity. Thus, icons have become a significant part of human-computer interaction interfaces. They are usually not displayed separately but together with other graphic symbols and visual elements to form a complex visual environment in human-computer interaction interfaces. Therefore, in addition to the physical characteristics of icons, the visual environment in which icons are located also affects individuals’ visual search performance.

In the human-computer interaction process, an icon serves as a point of entry for users to interact with the interface. Icon search is a constant task to obtain information. The visual characteristics of icons are important factors affecting cognitive processing [1]. Border form is an element of icon design, and interface background color saturation is an important attribute of human-computer interaction interface design. Both of them influence visual search performance, including accuracy and efficiency [2], and play a key role in affecting user visual experience. Therefore, designing icon border form and interface background color saturation remains an important consideration to improve usability and achieve efficient human-computer interaction processes.

1.1. Icon Border Form

As an early product of perception, shape contour is the first to be noticed and searched by individuals [3]. The influence of icon border form on visual search performance has been previously studied.

For instance, Fleetwood and Byrne [4] carried out a study on visual search processes and discovered that icon borders (no border, circle border, and square border) did not affect search time. They also indicated that people might disregard the icon borders, which could be a useful way to transmit more information without increasing search costs. Huang and Chiu [5] investigated the influence of four kinds of icon forms on visual search efficiency for a liquid crystal display screen, and the results showed that the search times for circular, diamond-shaped, and square icons were shorter than for triangular icons. Chang et al. [6] set 3 (no border, square border, and round border) X 2 (line and plane), totaling six shape attributes of icons. The experimental results showed that the line icons with square borders had a better search performance. They suggested that there should be a regular and orderly arrangement of positions with multiple function icons similar to the navigation interface, and line icons should be selected as much as possible to avoid mutual interference between icons. Therefore, icon border form has a certain guiding effect on human vision.

For icons on smartphones, Jiang et al. [7] studied the effect of the square, circle, and other graphics icon shapes on visual search in smartphone applications and found that mobile icons of different shapes had no significant differences in attracting individual attention; that is, rounded square icons did not show great advantages. However, Teng et al. [8] proposed that the shape of icons in mobile phone graphical user interfaces had a great influence on their visibility. Shu [9] studied the recognition efficiency of rounded rectangles, rectangles, circles, and no border graphics in mobile phone icon shapes. The results showed that users perceived icons with border forms significantly better than those without borders. Among the three border forms, the rounded rectangle had the highest recognition efficiency, and the circle had the worst. Liu et al. [10] investigated the effects of app icon color and icon border shape on smartphone interfaces. The results showed that icons with different colors and round square borders improved search performance and user experience. There were three types of icon border shapes: rounded square, circle, and mixed rounded square and circle. The rounded square border form was more user-friendly and pleasing than the other two border shapes.

Previous research has focused on the influence of border forms, including circles, squares, rounded rectangles, and triangles on search efficiency, but the research conclusions are inconsistent [11]. Therefore, the problem of icon border form needs to be further studied.

1.2. Interface Background Color

Studies have shown that the ability to search for a target object is influenced by the contrast between the object and its background, and the color of the background has an important influence on visual search [12]. Schaik and Ling [13] found that there was an interaction between frame layout and background contrast in reaction time for hits on visual search performance in web pages. The visual preattentive processing of the color feature played an important role in graphical panel operation efficiency [14, 15]. Michalski [16] investigated how different colors and color combinations utilized as grouping elements affect the visual search process and direct manipulation activities in toolbar-like graphical panels. The results demonstrated that layouts with larger colored regions were more operable than panels divided into smaller sections.

Some studies on the search efficiency of icons have focused on the attributes of task icons and interference icons [17]. For example, Gong et al. [18] carried out an experiment to examine the influence of the number of colors (single color icons, double color icons, and triple color icons) and the color consistency of interference items on the visual search performance of icons. It was found that the increase in the number of colors reduced the visual search performance for icons to some extent. On the other hand, the color could be used to improve the difference between icons and enhance the visual search performance for icons.

In addition to the task icons and interference icons, the interface background cannot be ignored [19]. The visual search is faster and easier to detect the target when the contrast between the graphics and the background is higher. However, when the contrast increases to a certain level, the search time will gradually stabilize. Näsänen and Ojanpää [20] conducted an experiment to explore the influence of image blur and contrast on visual search speed. The outcomes showed that with increasing contrast or sharpness, the search time, the number of fixations per search, and the fixation duration initially diminished and subsequently turned out to be consistent at medium levels of contrast or sharpness. Shen et al. [21] explored the influence of chromaticity difference and luminance difference on icon discernment. The outcomes showed that high color contrast could improve icon recognition efficiency, and the value of icon background Michelson contrast should be larger than 0.3 but under 0.5. Choi and Suk [22] carried out an eye-tracking experiment to explore the most appealing colors to the eyes in displays. The results demonstrated that warm colors were more appealing to the eye than cool and neutral colors while highly saturated colors inspired the maximum visual appeal against a black background, and high contrast between foreground and background produced remarkable effects.

As seen in Table 1, extensive research on target and background color matching has been conducted. Studies have combined various factors, such as screen type, ambient illumination, luminance contrast, presentation mode, exposure time, and gender differences, to explore their interactive effects on visual search. It is found that color matching affects visual search performance and interacts with some of the above factors. The abovementioned studies were conducted mainly from the perspective of hue and luminance contrast and gave some color matching suggestions. However, the studies did not cover all the hues, and the luminance contrast compared the effects of 3-4 levels. The strength of the hue contrast depends on the position of the color on the hue ring; the greater the color distance is, the stronger the contrast. The luminance contrast can improve visual search performance, but it is not the greater the better. In addition, people have better legibility for color combinations with high preferences than for those with low preferences.

For the legibility of characters, Bhattacharyya et al. [30] explored the impact of different character and background color combinations on search efficiency when conducting the on-screen searching task. The results suggested that blue and red characters on a white background were the best choices for dark character/light background combinations, and white characters on blue and green backgrounds were the best choices for light character/dark background combinations. Ko [31] investigated and distinguished the impacts of color combinations on brand icon intelligibility. The outcomes showed that yellow/black, yellow/blue, and white/blue were the three clearest target/background color combinations.

Previous studies have suggested that interface background color plays an important role in visual search, and high color differentiation can improve icon recognition performance. Various suggestions on the matching of target and background colors have been proposed. However, the examination of assessing the impact of interface background color saturation on user visual experience and search performance is still limited, and the interaction between icon border form and interface background color saturation needs to be further studied.

1.3. Research Objectives

In summary, icon border form and interface background color saturation are two elements that influence user visual experience and search performance, but they have been studied independently previously. These two aspects are likely to interact, which may partly explain some inconsistent results in the study of a single icon border form. Therefore, we designed a visual search experiment of two-factor within-subjects, focusing on the effect of icon border form and interface background color saturation on the visual search behavior of icons. The experimental task was to find the target icon by searching from the specified app interface. We orthogonally changed the factors of icon border form and interface background color saturation to investigate their combined effect on user visual experience and search performance. Using behavior data (search completion time), eye movement data (time to first fixation in AOI (areas of interest)), and subjective evaluation data (perceived usability and aesthetics), we comprehensively measured user visual experience and search performance.

2. Method

2.1. Experimental Design

A visual search experiment was carried out to explore the user recognition efficiency under two research variables and investigate the cognitive performance law under the interaction of the two. A repeated measurement design was conducted, including icon border form and interface background color saturation. There were three levels of icon border form: square (S), circle (C), and rounded square (RS). The interface background color saturation had two levels: low saturation (LS) and high saturation (HS).

The dependent variables constituted user visual experience and search performance. User visual experience included all aspects of the interaction between user and product. Perceived usability and aesthetics were two key aspects used to measure user visual experience [32–34]. Perceived usability referred to the users’ subjective perception of the usability of the interface. The visual search that required little physical or mental effort would obtain good visual comfort. The more reasonable the design of icon border form and interface background color saturation, the higher the subjects’ visual comfort and the more conducive to visual search, which meant better usability. Therefore, perceived usability was measured by visual comfort. Aesthetics was defined as the users’ most intuitive visual perception of the interface, which was measured by attractiveness [35, 36].

Based on previous research [10, 18, 37, 38], search performance was evaluated by search completion time and time to first fixation in AOI. The search completion time recorded the assessment of the total time from the presentation of experimental materials to the time when subjects found the target icon and pressed the left mouse button. Fixation referred to the gaze lasting for a period of time, and the eyes were locked on a specific object. The first fixation time referred to the time required for subjects to view a particular AOI from the beginning of stimulation. The shorter first fixation time of the target indicates that it can attract attention.

2.2. Stimuli

The interface of the app used in the experiment was designed using Adobe XD. As shown in Figure 1, the app was designed to help rest by playing adjustable white noise to relieve insomnia. The figure shows a page of the app for selecting white noise. There are 20 icons in five rows and four columns from which users can choose. These icons are common in people’s daily lives and show the types of white noise through graphical language.

For the border form of mobile phone icons, previous studies mainly discussed the effect of rounded rectangles, rectangles, circles, and borderless graphics on visual search performance. The controversial conclusions mainly focused on border graphics. Therefore, in our study, the icon border form was designed in three levels: square (S-icons), circle (C-icons), and rounded square (RS-icons). The S-icons and RS-icons were approximately 160 pixels in width and height, and the C-icons were approximately 155 pixels in diameter. All icons were displayed on the phone interface (resolution 1042 × 2256 pixels), and their position on the interface was randomly designed to eliminate the effect of location. The icons were first coded, then the location of the icons was determined by random numbers, and finally the Adobe XD software was used to design the layout of interface icons.

For the interface background color, on the one hand, the color visual effect was determined according to the product characteristics of the app mainly used at night; the other was to explore the influence of color saturation on user visual experience and search performance. Gray was moderately irritating to the eyes and was not easy to feel tired. Ko [31] reported that the target white and background blue was one of the clear color combinations. Therefore, two kinds of background color saturation were set. The RGB value of the low-saturation (LS) background gray color was (108, 98, 96), and the HSB value was (10, 11, 42). The RGB value of the high-saturation (HS) background blue color was (21, 73, 131), and the HSB value was (212, 84, 51).

2.3. Experimental Equipment

The experimental equipment used in the experiment is shown in Figure 2. Eye movements were collected using the noninvasive head-mounted tracking module Tobii Glasses 2. The hardware of the system included glasses, a recording module, and two Dell monitors. The software of the system included Glass Controller that can control and run Tobii Pro Glasses eye movement experiments and Tobii Pro Lab Analyzer software for data analysis.

2.4. Subjects

GPower 3.1 software was used to estimate the sample size. To detect a medium effect size f of 0.25, 30 subjects were required when error probability ɑ and statistical power (1- β) were set as 0.05 and 0.95, respectively. In addition, referring to relevant literature [17], we recruited 40 university students (20 males and 20 females) to participate in this visual search experiment, ranging in age from 19 to 23 years old, with an average age of 20.63 years. All subjects were very familiar with smartphone applications, had normal vision, and had never participated in similar experiments before. To encourage subjects to participate seriously, all subjects received a small gift after completing the experiment.

2.5. Procedure

All subjects were individually invited to the ergonomic laboratory. First, the experimental procedure was briefly introduced to each subject. Then, they were required to sign an informed consent. Next, the subject sat down approximately 0.7 m away from the presentation screen. The calibration card was placed 0.5 to 1 m away from the subject, and the subject stared at the black dot in the middle of the calibration card for automatic calibration. After completion of calibration, formal experimental procedures were initiated.

Before the formal experiment, instructions were presented to the subjects through the display so that the subjects could comprehend the entire task and requirements of the experiment. At the start of the formal experiment, a target icon was displayed in the center of the presentation screen. After the subjects left-clicked, the icon disappeared, and the app interface was displayed. The target icon among the 20 icons was searched by the subjects. If the target icon was found, the target icon was clicked with the left mouse button to complete a search task. After a test, the next target icon to be found was displayed on the screen. This process continued until all the visual search tasks were completed. The test process is shown in Figure 3. The eye-tracking process ended after each subject completed the visual search task under six randomly presented experimental conditions, 3 (icon border forms: S-icons, C-icons, and RS-icons) x 2 (background color saturation: LS and HS). The eye tracker system recorded the subjects’ eye movement data and reaction time.

After the eye-tracking experiment, the subjects were assigned to score the questionnaire scales to analyze their perceptual evaluation and preference information under different variables. The subjects were invited to participate in the subjective evaluation. A 5-point Likert-type scale was used to evaluate the perceived usability and aesthetics of the above app interfaces. To minimize the impact of printing color differences, all questionnaire scores were completed on the computer. Perceived usability ranged from 1 to 5; 1 meant it was very difficult to use and 5 meant easy to use. The aesthetics score ranged from 1 to 5, where 1 meant ugly and 5 meant beautiful—3 represented a neutral attitude.

2.6. Experimental Data Analysis

The reaction process of all subjects was first checked to ensure that the subjects performed the click operation under the condition of effective fixation to guarantee the legitimacy of eye movement data. After checking the data, it was found to be valid for all subjects. Figure 4(a) shows an illustration of the eye movement track of a subject’s gaze plot under the condition of RS border form and LS background color. The gaze plot presents the visual browsing order of the subjects in the form of points. The size of the circle intuitively reflects the fixation duration at this point, and the numbers represent the observation order. Figure 4(b) shows the heat map of all subjects under the same conditions. The heat map shows visual attention through the depth of color. The darker the color, the more subjects pay attention to the area. The gaze plot and heat map are visual displays of the result data, which visually reflect the degree of attention of the subjects to different areas of the sample. As can be seen from Figure 4, in the icon search experiments, most of the fixation points are fixed on the icons, so the icons and search tasks are correlated.

(a)

(b)

The influence of icon border form and interface background color saturation on user visual experience and search performance was analyzed by a two-factor repeated measure analysis of variance (ANOVAs). The data of each group obeyed normal distribution by the Shapiro–Wilk test (). Greenhouse–Geisser adjustment was utilized to estimate the spherical symmetry coefficient and correct the degrees of freedom if the spherical hypothesis of ANOVAs was violated. The significance level was set as α = 0.05 when using SPSS 26 for statistical analysis.

3. Results

The statistical results of behavioral data (search completion time), eye movement data (time to first fixation in AOI), and subjective evaluation data (perceived usability and aesthetics) are shown in Table 2. The error rate of all subjects was less than 1% under the two experimental conditions of icon border form and interface background color saturation, so the error rate was not analyzed.

3.1. Behavioral Data (Search Completion Time)

The results of repeated measures ANOVAs showed that the icon border form had a significant effect on search completion time [F (2, 77) = 24.972, ]. The post hoc test showed that the search completion time of S-icons was the longest, and there was no significant contrast between C-icons and RS-icons (). The interface background color saturation had a significant effect on search completion time [F (1, 78) = 12.135, ]. Compared with the LS background, the HS background took more time to complete the search task (see Figure 5). The interaction between the icon border form and interface background color saturation was significant [F (2, 77) = 23.920, ].

Simple effect analysis showed that, under the S-icon situation, the LS background color took less time to complete the search task than the HS background color, and the simple effect of background color saturation was very significant (). For the C-icon and RS-icon situations, there was no significant contrast between the LS background color and HS background color (). For the LS background color situation, there was no significant distinction between the three forms of icons (). For the HS background color situation, the search completion time of C-icons and RS-icons was shorter than that of S-icons, and there was no significant contrast between C-icons and RS-icons ().

3.2. Eye Movement Data (Time to First Fixation in AOI)

There was a significant main effect of icon border form on the time to first fixation in AOI [F (2, 77) = 3.464, ]. The post hoc test showed that S-icons had the longest first fixation time, and there was a significant distinction between S-icons and RS-icons (). The main effect of interface background color saturation on time to first fixation in AOI was not significant [F (1, 78) = 0.400, ] (see Figure 6). There was a significant interaction between icon border form and interface background color saturation [F (2, 77) = 3.785, ].

Simple effect analysis showed that under the S-icon condition, the first fixation time of the LS background color was shorter than that of the HS background color, and the simple effect of background color saturation was very significant (). However, for the C-icon and RS-icon conditions, the results showed that the distinction between LS background color and HS background color was not significant (). For the LS background color situation, there was no significant distinction between the three border forms of icons (). For the HS background color situation, S-icons had a longer first fixation time than C-icons and RS-icons, and the first fixation times of S-icons and RS-icons were significantly different ().

3.3. Subjective Evaluation

3.3.1. Perceived Usability

There was a significant main effect of icon border form on perceived usability [F (2, 77) = 109.309, ]. The post hoc test showed that the three border forms had significant distinctions between each other (). RS-icons scored the highest, C-icons scored next to RS-icons, and S-icons scored the least. There was a significant main effect of interface background color saturation on perceived usability [F (1, 78) = 16.192, ]. The LS background color was easier to use than the HS background color (see Figure 7). There was a significant interaction between icon border form and interface background color saturation [F (2, 77) = 4.524, ].

Simple effect analysis showed that for the LS background situation, the three icon border forms had significant distinctions. For the HS background situation, S-icons had significant distinctions relative to the other two forms, while there was no significant distinction in the scores of C-icons and RS-icons (). For S-icon and C-icon situations, the distinction between HS background color and LS background color was not significant (). For RS-icons, the distinction between HS background color and LS background color was significant

3.3.2. Aesthetics

There was a significant main effect of icon border form on aesthetics [F (2, 77) = 253.168, ]. The post hoc test showed that the three border forms had significant distinctions between each other (). RS-icons scored the highest, C-icons scored next to RS-icons, and S-icons scored the least. There was a significant main effect of interface background color saturation on aesthetics [F (1, 78) = 31.468, . The LS background color was more aesthetically pleasing than the HS background color (see Figure 8). There was a significant interaction between icon border form and interface background color saturation [F (2,77) = 7.145, ].

Simple effect analysis showed that for the LS background color situation, the three icon border forms had significant distinctions. For the HS background color situation, the three icon border forms also had significant distinctions. For S-icons, the distinction between HS background color and LS background color was not significant (). For C-icons and RS-icons, the distinction between HS background color and LS background color was significant.

4. Discussion

Finding the target icon quickly from a large number of icons can enhance search performance and create a good user visual experience. Based on an eye-tracking experiment, this study has investigated the influence of icon border form and interface background color saturation on user visual experience and search performance, which extends previous studies.

4.1. Effects of Icon Border Form

Previous studies have not reached a unified conclusion on the effect of icon border form on the performance of visual search activities. Some argued that icon border form did not affect visual search [4, 7]. In contrast, other people believed that the icon border form affected people’s attention, and an appropriate icon border form was conducive to the transmission and exchange of information [5, 6, 8–10, 39].

Our experimental results demonstrated that icon border form had significant main effects on search completion time, time to first fixation in AOI, perceived usability, and aesthetics. The S-icons had the longest search completion time and time to first fixation in AOI. The shorter the first fixation on the target icon, the more attention it could attract. The S-icons had the longest first fixation time, indicating that they could not improve the users’ visual search efficiency. The interaction efficiency between users and icons should be measured by users’ search and click operation of icons. From the experimental results, the longer the visual search time for icons, the longer the corresponding task completion time. In the subjective evaluation, S-icons had the lowest score, while RS-icons had the highest score. This was related to people’s preference for curves. Research has shown that [40] people prefer curved objects, and this preference comes from natural physiological responses. Angles symbolize threats, and sharp and jagged objects are usually dangerous. Therefore, the RS-icon had the highest subjective evaluation score. There was no significant difference in task completion time or first fixation time between the C-icon and RS-icon. However, from the perspective of the area effect, when the side length of RS icons was equal to the diameter of the C-icon, the RS icons had larger icon areas than the C-icons, and the subjects engaged less in cognitive processing. Therefore, RS-icons not only had a good user visual experience but also had high recognition efficiency, which was consistent with the research conclusion of Shu [9].

In summary, the icon border form had a significant effect on visual attention processing. Visual interaction designers should pay attention to the influence of shape on the cognitive effect in the process of icon design and be good at using the rounded square to improve visual search performance, visual experience, and user emotional needs.

4.2. Effects of Interface Background Color Saturation

As one of the significant components of design, color plays a major role in visual attention distribution in the human-computer interaction process [12]. The experimental outcomes demonstrated that interface background color saturation had significant main effects on behavioral measurement and subjective evaluation variables. Compared with the LS background color, the HS background color required more time to complete the search task. LS background color obtained higher perceptual usability and aesthetic scores than HS background color.

Previous studies have suggested that the background colors’ hue, brightness, and contrast play an important role in visual search. Different color combinations affected recognition efficiency [41]. This effect depended on the background contrast of the target and the distractor [12]. The high difference between foreground and background produced a more significant effect [22]. Our study expanded on this by examining the effects of interface background color saturation on users’ visual search behavior. The experimental outcomes showed that HS background color reduced visual search efficiency, and the search completion time of LS background color was shorter. One possible explanation is that background color saturation affects the distribution of attention. HS background color could attract users’ attention and overstimulate the retina, resulting in eye fatigue. Reducing the saturation and increasing the gray level in the color would darken the background color, which would weaken the impact of color on the eyes. LS background color did not compete with foreground content, and users could react quickly.

Color could also affect user visual experience. The LS background color was easier to use and more aesthetic than the HS background color. One possible explanation is that LS background color has weak characteristics, soft effects on visual stimuli, a low degree of attention, and lasting fixation, which is conducive to improving users’ psychological and physiological experience and making the interaction process natural and smooth. HS background color had a strong effect on visual stimulation and an obvious effect on psychological emotion. It was easy to make people feel tired and they could not watch for a long time. The use of low saturation could not only make the overall visual experience more harmonious but also maximize the importance of presentation information implied by saturation so that users could be more focused on the interactive experience.

4.3. Interaction Effect between Icon Border Form and Interface Background Color Saturation

By checking the icon border form and background color saturation, this study extended previous studies. The results showed that there was a significant interaction between icon border form and interface background color saturation on search completion time, time to first fixation in AOI, and subjective evaluation. The outcomes confirmed the importance of a feasible constitution of icon border form and background color saturation in affecting search performance and user visual experience.

The interaction between the icon border form and interface background color saturation on the search completion time was significant. Simple effect analysis showed that for the S-icon condition, interface background color saturation had a significant effect on search completion time. Therefore, under this condition, the design of interface background color could use low-saturation color to improve the visual search efficiency. Under the HS background condition, S-icons and C-icons, S-icons and RS-icons had different search efficiency. The search completion time of C-icons and RS-icons was shorter than that of S-icons. One possible explanation is that the HS background color had great visual stimulation on people, and the square border was sharp, which would also produce an undesirable stimulation effect on people. Therefore, under the HS background color condition, C-icons and RS-icons achieved good recognition performance. Compared with the HS background color, the LS background color improved the search efficiency of S-icons.

The interaction between icon border form and interface background color saturation on time to first fixation in AOI was significant. Our results showed that under S-icon conditions, background interface color saturation had a significant effect on attention-getting and the time to first fixation in AOI of LS background color was shorter than that of HS background color. The LS background color contributed to eliminating the undesirable stimulation of S-icons. For HS background color conditions, there was a significant difference in the first fixation time between S-icons and RS-icons. S-icons had a longer first fixation time than C-icons and RS-icons. The combination of HS background color and S-icons would demand considerable visual consideration and therefore perform poorly in terms of visual search performance.

The interaction between icon border form and interface background color saturation had a significant effect on perceived usability. For the RS-icons condition, interface background color saturation had a significant effect on users’ visual comfort, and usability scores were higher for LS background color. Under the LS background color condition, the perceived usability of the three icon border forms differed. The combination of LS background color and RS-icons received the best subjective score. Under the HS background color condition, the perceived usability between S-icons and C-icons and between S-icons and RS-icons was different.

The interaction of icon border form and interface background color saturation had a significant effect on aesthetics. For C-icons and RS-icons, the aesthetic feeling brought by interface background color saturation was different. The aesthetic score of LS background color was higher. One could say that the LS background color would not affect the recognition of foreground information, and users focused on searching icons. Under LS and HS background conditions, the aesthetics of the three icon border forms were different. RS-icons scored highest in aesthetics, followed by C-icons and S-icons scored the lowest. Therefore, the effect of the icon border form was significant. RS-icons required less visual consideration and provided the user with a good visual experience while generating a better recognition effect.

In summary, the interaction effect showed that the combination of LS background color and RS-icons had better search performance and user visual experience. This could provide valuable guidance for interaction designers. When the icon border form changes, the background color should also be considered to change. Under the LS background color condition, the influence of the icon border form was more prominent than that of the background color.

4.4. Limitations

There are several limitations of this study. First, the subjects of the experiment were college students. Although college students are an important part of app users, they cannot represent all users. Future research should include more subjects from different fields and cultural backgrounds.

Second, the visual search task was performed on a computer monitor, and the prototype of the app interface was used as stimulus material and presented through E-prime software. The use of mobile phones should be considered in the future to simulate a more realistic user experience process.

Third, this study mainly explored the effects of three kinds of icon border forms: square, circle, and rounded square. Future research should consider a wider range of icon border forms, as well as the effects of icon size, spacing, and color.

Fourth, for the influence of background color saturation, we studied different saturation levels of a blue hue, that was, the gray low-saturation color and blue high-saturation color. There were two shortcomings. One was that there were few hues, and the other was that there were only two levels of saturation. Because the experiment involved two subjective evaluation indicators, the subjective evaluation was affected by personal preferences to a certain extent, and the living environment, personal experience, and other factors might affect people’s preference of hue. Therefore, future studies should increase the types of hues to enlarge the sample size, eliminate the influence of personal preferences, and study the effect of saturation difference between icon color and background color on user visual experience and search performance.

5. Conclusions

An icon is a very small visual control that can easily and conveniently guide visitors to obtain the information resources they want. This study explored the influence of icon border form and interface background color saturation on user visual experience and search performance. The following main conclusions were drawn from the experiments. First, compared with the other two boundary shape conditions, S-icons had the longest search completion time and first fixation time and the lowest subjective evaluation score. RS-icons had the best user visual experience. Second, compared with the LS background color, the HS background color required more time to accomplish the visual search task. LS background color received higher perceptual usability and aesthetic scores than HS background color. Third, there were significant interactions of app icon border form and interface background color saturation on search completion time, time to first fixation in AOI, and subjective evaluation. The combination of RS icons and LS background color may produce the best user visual experience and the most efficient search effectiveness. These findings can help in the design of human-computer interaction interfaces.

Data Availability

The data used to support the findings of this study are included in the article.

Conflicts of Interest

The authors declare that they have no conflicts of interest.

Authors’ Contributions

Conceptualization was done by Li Deng and Fangyuan Zhou; methodology was developed by Li Deng; validation was performed by Li Deng; formal analysis was performed by Li Deng; investigation was done by Li Deng and Ruiying Liu; original draft was prepared by Li Deng and Zhirui Zhang; project administration was done by Li Deng.

Acknowledgments

This project was supported by the National Natural Science Foundation of China (Grant no. 51905458) and sub-project of National Key Research and Development Program (Grant nos. 2018YFC0310201-08).

References

R. Michalski, J. Grobelny, and W. Karwowski, “The effects of graphical interface design characteristics on human–computer interaction task efficiency,” International Journal of Industrial Ergonomics, vol. 36, no. 11, pp. 959–977, 2006.
View at: Publisher Site | Google Scholar
Y. Cao, Y. Ding, Y. Deng, and X. Zhang, “Effects of mobile application icon complexity and border on college students' cognition,” in Proceedings of the International Conference on Applied Human Factors and Ergonomics, pp. 273–279, Springer, San Diego, CA, USA, July 2020.
View at: Google Scholar
Z. Shao and X. Wang, “An experimental research on search order based on contour,” Psychol Sci, vol. 29, pp. 898–900, 2006.
View at: Google Scholar
M. Fleetwood and M. Byrne, “Modeling icon search in ACT-R/PM,” Cognitive Systems Research, vol. 3, no. 1, pp. 25–33, 2002.
View at: Publisher Site | Google Scholar
K. C. Huang and T. L. Chiu, “Visual search performance on an LCD monitor: effects of color combination of figure and icon background, shape of icon, and line width of icon border,” Perceptual & Motor Skills, vol. 104, no. 2, pp. 562–574, 2007.
View at: Publisher Site | Google Scholar
J. Chang, X. Xu, and X. Gong, “Design and optimization of intelligent device interface icon based on eye movement experiment,” Journal of Harbin University of Commerce (Natural Sciences Edition), vol. 35, pp. 426–430, 2019.
View at: Google Scholar
W. Jiang, Z. Yang, M. Jiang et al., “A study on usability of application icon design in smart phones,” Chinese Journal of Ergonomics, vol. 21, pp. 21–24, 2015.
View at: Google Scholar
Z. Teng, S. Jin, and Y. Zhen, “The visibility of icon in graphical user interface of mobile phones,” Packaging Engineering, vol. 34, pp. 66–70, 2013.
View at: Google Scholar
Y. Shu, Research on smartphone Icon Recognition efficiency based on design factors, Southwest Jiaotong University, Chengdu, China, 2018.
W. Liu, Y. Cao, and R. 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, vol. 84, Article ID 103160, 2021.
View at: Publisher Site | Google Scholar
Y. Yuan, Phone interface icons recognition degree study, Beijing Jiaotong University, Beijing, China, 2016.
J. De Vries, I. Hooge, A. Wertheim, and F. Verstraten, “Background, an important factor in visual search,” Vision Research, vol. 86, pp. 128–138, 2013.
View at: Publisher Site | Google Scholar
P. van Schaik and J. Ling, “The effects of frame layout and differential background contrast on visual search performance in Web pages,” Interacting with Computers, vol. 13, no. 5, pp. 513–525, 2001.
View at: Publisher Site | Google Scholar
R. Michalski and J. Grobelny, “The role of colour preattentive processing in human–computer interaction task efficiency: a preliminary study,” International Journal of Industrial Ergonomics, vol. 38, no. 3-4, pp. 321–332, 2008.
View at: Publisher Site | Google Scholar
Y. Hou, L. Zhang, and D. Miao, “Physiological influence in vision perception tests with different color background,” Chinese Journal of Clinical Psychology, vol. 16, pp. 506–511, 2008.
View at: Google Scholar
R. Michalski, “The influence of color grouping on users' visual search behavior and preferences,” Displays, vol. 35, no. 4, pp. 176–195, 2014.
View at: Publisher Site | Google Scholar
Y. Gong, S. Zhang, F. Shen, and Z. Liu, “Effect of color combination on graphical symbol visual search efficiency,” Journal of Computer-Aided Design & Computer Graphics, vol. 28, pp. 1115–1120, 2016.
View at: Google Scholar
Y. Gong, S. Zhang, Z. Liu, and F. Shen, “Eye movement study on color effects to icon visual search efficiency,” Journal of Zhejiang University (Science Edition), vol. 50, pp. 1987–1994, 2016.
View at: Google Scholar
K. C. Huang, “Effects of computer icons and figure/background area ratios and color combinations on visual search performance on an LCD monitor,” Displays, vol. 29, no. 3, pp. 237–242, 2008.
View at: Publisher Site | Google Scholar
R. Näsänen and H. Ojanpää, “Effect of image contrast and sharpness on visual search for computer icons,” Displays, vol. 24, no. 3, pp. 137–144, 2003.
View at: Publisher Site | Google Scholar
Z. Shen, C. Xue, J. Li, and X. Zhou, “Effect of icon density and color contrast on users' visual perception in human computer interaction,” in Proceedings of the International Conference on Engineering Psychology and Cognitive Ergonomics, pp. 66–76, Springer, Los Angeles, CA, USA, August 2015.
View at: Google Scholar
K. Choi and H. J. Suk, “Optimal employment of color attributes to achieve saliency in icon matrix designs,” Color Research & Application, vol. 40, no. 5, pp. 429–436, 2014.
View at: Publisher Site | Google Scholar
K. K. Shieh and C. C. Lin, “Effects of screen type, ambient illumination, and color combination on VDT visual performance and subjective preference,” International Journal of Industrial Ergonomics, vol. 26, no. 5, pp. 527–536, 2000.
View at: Publisher Site | Google Scholar
K. K. Shieh and Y. H. Ko, “Effects of display characteristics and individual differences on preferences of VDT icon design,” Perceptual & Motor Skills, vol. 100, no. 2, pp. 305–318, 2005.
View at: Publisher Site | Google Scholar
K. C. Huang, C. F. Chen, and S. Y. Chiang, “Icon flickering, flicker rate, and color combinations of an icon's symbol/background in visual search performance,” Percept Mot Skills, vol. 106, no. 1, pp. 117–127, 2008.
View at: Publisher Site | Google Scholar
Y. Y. Yeh, D. S. Lee, and Y. H. Ko, “Color combination and exposure time on legibility and EEG response of icon presented on visual display terminal,” Displays, vol. 34, no. 1, pp. 33–38, 2013.
View at: Publisher Site | Google Scholar
Y. Shi, Y. Zhang, T. Wang, C. Li, and S. Yuan, “The effects of ambient illumination, color combination, sign height, and observation angle on the legibility of wayfinding signs in metro stations,” Sustainability, vol. 12, no. 10, p. 4133, 2020.
View at: Publisher Site | Google Scholar
Z. Shen, L. Zhang, R. Li, J. Hou, C. Liu, and W. Hu, “The effects of color combinations, luminance contrast, and area ratio on icon visual search performance,” Displays, vol. 67, Article ID 101999, 2021.
View at: Publisher Site | Google Scholar
C. Ming, Z. Wu, H. Gu, C. Chen, and Y. Zhang, “The effects of luminance contrast and color combination on icon cognitive performance,” Color Research & Application, vol. 47, no. 2, pp. 498–506, 2022.
View at: Publisher Site | Google Scholar
D. Bhattacharyya, B. Chowdhury, T. Chatterjee, M. Pal, and D. Majumdar, “Selection of character/background colour combinations for onscreen searching tasks: an eye movement, subjective and performance approach,” Displays, vol. 35, no. 3, pp. 101–109, 2014.
View at: Publisher Site | Google Scholar
Y. H. Ko, “The effects of luminance contrast, colour combinations, font, and search time on brand icon legibility,” Applied Ergonomics, vol. 65, pp. 33–40, 2017.
View at: Publisher Site | Google Scholar
S. Feng, J. Wang, Y. Cai, D. Feng, and W. Wang, “Eye movement analysis and evaluation of human-computer interface background color under intermediate vision,” Computer Engineering and Applications, vol. 56, pp. 262–267, 2020.
View at: Google Scholar
N. Yu and J. Kong, “User experience with web browsing on small screens: experimental investigations of mobile-page interface design and homepage design for news websites,” Information Sciences, vol. 330, pp. 427–443, 2016.
View at: Publisher Site | Google Scholar
L. Deng and G. Wang, “Quantitative evaluation of visual aesthetics of human-machine interaction interface layout,” Computational Intelligence and Neuroscience, vol. 2020, Article ID 9815937, 14 pages, 2020.
View at: Publisher Site | Google Scholar
M. Moshagen and M. Thielsch, “Facets of visual aesthetics,” International Journal of Human-Computer Studies, vol. 68, no. 10, pp. 689–709, 2010.
View at: Publisher Site | Google Scholar
K. Reinecke and K. Gajos, “Quantifying visual preferences around the world,” in Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '14), pp. 11–20, Toronto, Canada, May, 2014.
View at: Google Scholar
B. Sun, J. Yang, Y. Sun, H. Yan, and S. Li, “Color design of human vehicle interaction based on eye-tracking experiment,” Packaging Engineering, vol. 40, pp. 23–30, 2019.
View at: Google Scholar
Q. Wang, S. Yang, M. Liu, Z. Cao, and Q. Ma, “An eye-tracking study of website complexity from cognitive load perspective,” Decision Support Systems, vol. 62, pp. 1–10, 2014.
View at: Publisher Site | Google Scholar
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, vol. 63, pp. 218–228, 2016.
View at: Publisher Site | Google Scholar
M. Bar and M. Neta, “Humans prefer curved visual objects,” Psychological Science, vol. 17, no. 8, pp. 645–648, 2006.
View at: Publisher Site | Google Scholar
Z. Guo, Y. Li, G. Ma, Z. Song, and B. Qian, “Influence of color-matching of EMU control interface on recognition efficiency,” Journal of the China Railway Society, vol. 34, pp. 27–31, 2012.
View at: Google Scholar

Copyright

Copyright © 2022 Li Deng et al. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.

PDF Download Citation

Download other formats

Order printed copies