Research Article

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

Table 1

Research on target and background color matching.

ScholarsResearch objectiveResearch conclusionColor combination recommendation

Shieh and Lin [23]This study investigated the effects of screen type, ambient illumination, and target/background color combination on visual identification performance and subjective preference for visual display terminal screen characteristicsThe color combination significantly affected visual performanceBlue letters on a yellow background resulted in the best performance and purple-on-red resulted in the worst

Shieh and Ko [24]This study explored the effects of display characteristics, such as target/background color combination, single/simultaneous presentation, and individual differences by sex, and design specialty on preferences of VDT (visual display terminal) icon designThe black targets (black-on-white, black-on-yellow) and black backgrounds (red-on-black, yellow-on-black) were the most popular, and white targets (white-on-red, white-on-black) and white backgrounds (blue-on-white, red-on-white) were the second most popularThe yellow-on-blue was the most favored

Huang and Chiu [5]This study investigated the effects of color combinations for the figure/icon background, icon shape, and line width of the icon border on visual search performance on a liquid crystal display screenThe color combination significantly affected the visual search performanceWhite/yellow, white/blue, black/red, and black/yellow color combinations for the figure/icon background had shorter correct response times compared to yellow/blue, red/green, yellow/green, and blue/red

Huang et al. [25]This study investigated the effects of color combinations of an icon’s symbol/background and components of flicker and flicker rate on visual search performance on a liquid crystal display screenThe icon’s symbol/background color significantly affected search timeThe search times for icons with black/red and white/blue were significantly shorter than for white/yellow, black/yellow, and black/blue

Yeh et al. [26]This study explored the effect of target/background color combination and exposure time on the legibility of and EEG response to icons presented on a visual display terminalPeak latency of P100 at visual-cortex area (O1, O2, OZ) showed significantly faster response time with high preference color combinations than with low preferenceThe color combinations with high preference (white-on-blue, blue-on-white) had better legibility than those with low preference (purple-on-red, red-on-purple)

Shi et al. [27]This study explored the effects of ambient illumination, color combination, sign height, and observation angle on wayfinding signs’ legibility in metro stationsAchromatic color combination was more legible than chromatic color combination, but not significantlyAchromatic-white target on black background

Shen et al. [28]This study investigated the effects of the color combination, luminance contrast, and icon area ratio in the visual search of graphic symbolsThe participants responded more quickly to medium luminance contrast than to low or high luminance contrastWhite-on-black, yellow-on-black, turquoise-on-black, white-on-red, yellow-on-red, and white-on-purple resulted in better performance than other color combinations
Icon color combinations also significantly affected visual search performance

Ming et al. [29]This study explored and identified the effects of luminance contrast and color combinations on icon cognitive performanceBoth luminance contrast and color combination can significantly affect cognitive performanceYellow-on-black, yellow-on-blue, and white-on-blue significantly improved the search speed, while green-on-red, yellow-on-purple, green-on-blue, and turquoise-on-blue significantly slowed down the search speed