How do app icon color and border shape influence visual search efficiency and user experience? Evidence from an eye-tracking study

Li, Weilin; Cao, Yaqin; Proctor, Robert W.

doi:10.1016/j.ergon.2021.103160

Cited by 36 publications

(21 citation statements)

References 38 publications

Supporting

Mentioning

Contrasting

Order By: Relevance

“…Aside from considering how the icons satisfy the subjective preferences of the users, future research should also incorporate the performance of the icons in terms of the effectiveness to accurately interpret their corresponding function names. Finally, future study should utilize eye-tracker [43] to find the relationship between the results of ranking test and eye movement behavior to provide more meaningful findings.…”

Section: Discussionmentioning

confidence: 99%

The Evaluation of Preference and Perceived Quality of Health Communication Icons Associated with COVID-19 Prevention Measures

et al. 2021

View full text Add to dashboard Cite

Icons have been widely utilized to describe and promote COVID-19 prevention measures. The purpose of this study was to analyze the preference and subjective design features of 133 existing icons associated with COVID-19 prevention measures published by the health and medical organizations of different countries. The 133 icons represent nineteen different function names, such as “Wash Hands” and “Wear Face Mask”. A total of 57 participants were recruited to perform two different tests: ranking test and subjective rating test. The ranking test was conducted to elicit the preference ranking of seven icon designs representing each function name. It was followed by a subjective rating test using 13 semantic scales on the two most preferred icons to analyze their perceived quality. Spearmen correlation was applied to derive the possible correlations between users’ rankings and the semantic scales, and Friedman’s test was also performed to determine the true difference between ranking in terms of each semantic scale to provide a fully meaningful interpretation of the data. Generally, findings from the current study showed that the image presented in the icon is the key point that affects the icons’ perceived quality. Interestingly, Spearman’s correlation analysis between preference ranking and semantic scales showed that vague–clear, weak–strong, incompatible–compatible, and ineffective–effective were the four strongest semantic scales that highly correlated with the preference ranking. Considering the significant relationships between the semantic distances and the functions, images depicted in an icon should be realistic and as close as possible to its respected function to cater to users’ preferences. In addition, the results of Spearman’s correlation and Friedman’s test also inferred that compatibility and clarity of icon elements are the main factors determining a particular icon’s preferability. This study is the first comprehensive study to evaluate the icons associated with the COVID-19 prevention measures. The findings of this study can be utilized as the basis for redesigning icons, particularly for icons related to COVID-19 prevention measures. Furthermore, the approach can also be applied and extended for evaluating other medical icons.

show abstract

Section: Discussionmentioning

confidence: 99%

The Evaluation of Preference and Perceived Quality of Health Communication Icons Associated with COVID-19 Prevention Measures

et al. 2021

View full text Add to dashboard Cite

show abstract

“…Based on previous research [10,18,37,38], search performance was evaluated by search completion time and time to first fixation in AOI. e 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.…”

Section: Experimental Designmentioning

confidence: 99%

“…erefore, two kinds of background color saturation were set. e RGB value of the low-saturation (LS) background gray color was (108, 98, 96), and the HSB value was (10,11,42). e RGB value of the high-saturation (HS) background blue color was (21,73,131), and the HSB value was (212, 84, 51).…”

Section: Stimulimentioning

confidence: 99%

See 1 more Smart Citation

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

Deng

Zhang

Zhou

et al. 2022

Advances in Multimedia

View full text Add to dashboard Cite

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.

show abstract

“…In contrast to the other colors, the three primary colors (red, green and blue) facilitate a higher accuracy rate during tasks [33] , with yellow font on a black background offering a higher degree of legibility as found in Wu et al [34] and Huang [35] . Similarly, color variations can also improve search efficiency and reduce cognitive strain [36] .…”

Section: Introductionmentioning

confidence: 99%

Recognition efficiency of atypical cardiovascular readings on ECG devices through fogged goggles

Ren

Wang

et al. 2022

Displays

View full text Add to dashboard Cite

In their continuing battle against the COVID-19 pandemic, medical workers in hospitals worldwide need to wear safety glasses and goggles to protect their eyes from the possible transmission of the virus. However, they work for long hours and need to wear a mask and other personal protective equipment, which causes their protective eye wear to fog up. This fogging up of eye wear, in turn, has a substantial impact in the speed and accuracy of reading information on the interface of electrocardiogram (ECG) machines. To gain a better understanding of the extent of the impact, this study experimentally simulates the fogging of protective goggles when viewing the interface with three variables: the degree of fogging of the goggles, brightness of the screen, and color of the font of the cardiovascular readings. This experimental study on the target recognition of digital font is carried out by simulating the interface of an ECG machine and readability of the ECG machine with fogged eye wear. The experimental results indicate that the fogging of the lenses has a significant impact on the recognition speed and the degree of fogging has a significant correlation with the font color and brightness of the screen. With a reduction in screen brightness, its influence on recognition speed shows a v-shaped trend, and the response time is the shortest when the screen brightness is 150 cd/m2. When eyewear is fogged, yellow and green font colors allow a quicker response with a higher accuracy. On the whole, the subjects show a better performance with the use of green font, but there are inconsistencies. In terms of the interaction among the three variables, the same results are also found and the same conclusion can be made accordingly. This research study can act as a reference for the interface design of medical equipment in events where medical staff wear protective eyewear for a long period of time.

show abstract

How do app icon color and border shape influence visual search efficiency and user experience? Evidence from an eye-tracking study

Cited by 36 publications

References 38 publications

The Evaluation of Preference and Perceived Quality of Health Communication Icons Associated with COVID-19 Prevention Measures

The Evaluation of Preference and Perceived Quality of Health Communication Icons Associated with COVID-19 Prevention Measures

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

Recognition efficiency of atypical cardiovascular readings on ECG devices through fogged goggles

Contact Info

Product

Resources

About