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

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.