A Preliminary Study on How the Icon Composition and Background of Graphical Icons Affect Users’ Preference Levels

  • Hsuan LinEmail author
  • Yu-Chen Hsieh
  • Wei Lin
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 9754)


Currently, it is a common scene that users click on-screen graphical user interfaces (GUI), or visual icons, to operate computers, tablet computers and smartphones as well as to execute program instructions. Employing eye-trackers as experimental tools, this study aimed to explore how different presentation modes of graphical icons affect users’ preference levels. The experiment was designed to investigate two variables: icon composition and background. Through permutation and combination, six presentation modes were obtained as follows: line + positive background (M1), plane + positive background (M2), line + negative background (M3), plane + negative background (M4), line + no background (M5), and plane + no background (M6). With the help of eye-trackers, seven participants were demanded to view thirty stimuli, or the contour drawings of graphical icons, presented simultaneously in the six above-mentioned modes. The participants’ fixation duration and fixation frequency were analyzed through two-way ANOVA. The analytical results showed that in terms of the two performance indicators above, M4 performed the best among the six presentation modes. Moreover, negative background performed better than positive background. The findings herein can serve as a reference when icons are researched or designed in the future.


Icon composition Background Icon border Fixation Eye-tracking 



The authors hereby extend sincere thanks to Ministry of Science and Technology (MOST) of the Republic of China (ROC) for their financial support of this research, whose project code is MOST 104-2221-E-165-001. It is thanks to the generous patronage of MOST that this study has been smoothly performed.


  1. 1.
    Näsänen, R., Ojanpää, H.: Effect of image contrast and sharpness on visual search for computer icons. Displays 24, 137–144 (2003)CrossRefGoogle Scholar
  2. 2.
    Huang, K.-C.: Effects of computer icons and figure/background area ratios and color combinations on visual search performance on an LCD monitor. Displays 29, 237–242 (2008)CrossRefGoogle Scholar
  3. 3.
    Lindberg, T., Näsänen, R.: The effect of icon spacing and size on the speed of icon processing in the human visual system. Displays 24, 111–120 (2003)CrossRefGoogle Scholar
  4. 4.
    Memon, A., Banerjee, I., Nagarajan, A.: GUI ripping: reverse engineering of graphical user interfaces for testing. In: Proceedings. 10th Working Conference on Reverse Engineering 2003, WCRE 2003, pp. 260. IEEE (2003)Google Scholar
  5. 5.
    Wu, F.-G., Lin, H., You, M.: The enhanced navigator for the touch screen: a comparative study on navigational techniques of web maps. Displays 32, 284–295 (2011)CrossRefGoogle Scholar
  6. 6.
    Fleetwood, M.D., Byrne, M.D.: Modeling icon search in ACT-R/PM. Cogn. Syst. Res. 3, 25–33 (2002)CrossRefGoogle Scholar
  7. 7.
    Legge, G.E., Pelli, D.G., Rubin, G.S., Schleske, M.M.: Psychophysics of reading—I normal vision. Vis. Res. 25, 239–252 (1985)CrossRefGoogle Scholar
  8. 8.
    Legge, G.E., Rubin, G.S., Luebker, A.: Psychophysics of reading—V. the role of contrast in normal vision. Vis. Res. 27, 1165–1177 (1987)CrossRefGoogle Scholar
  9. 9.
    Näsänen, R., Ojanpää, H., Kojo, I.: Effect of stimulus contrast on performance and eye movements in visual search. Vis. Res. 41, 1817–1824 (2001)CrossRefGoogle Scholar
  10. 10.
    Huang, H., Lai, H.-H.: Factors influencing the usability of icons in the LCD touchscreen. Displays 29, 339–344 (2008)CrossRefGoogle Scholar
  11. 11.
    Lin, H., Lin, W., Tsai, W.-C., Cheng, Yune-Yu., Wu, F.-G.: Effect of the color tablet computer’s polarity and character size on legibility. In: Stephanidis, C., Antona, M. (eds.) UAHCI 2014, Part II. LNCS, vol. 8514, pp. 132–143. Springer, Heidelberg (2014)Google Scholar
  12. 12.
    Ho, C.-H., Lu, Y.-N.: Can pupil size be measured to assess design products? Int. J. Ind. Ergon. 44, 436–441 (2014)CrossRefGoogle Scholar
  13. 13.
    Lin, H., Lin, W., Tsai, W.-C., Hsieh, Y.-C., Wu, F.-G.: How different presentation modes of graphical icons affect viewers’ first fixation and attention. In: Antona, M., Stephanidis, C. (eds.) UAHCI 2015. LNCS, vol. 9176, pp. 226–237. Springer, Heidelberg (2015)CrossRefGoogle Scholar
  14. 14.
    Huang, K.-C., Chiu, T.-L.: 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. Percept. Mot. Skills 104, 562–574 (2007)CrossRefGoogle Scholar
  15. 15.
    Wolfe, J.M., Oliva, A., Horowitz, T.S., Butcher, S.J., Bompas, A.: Segmentation of objects from backgrounds in visual search tasks. Vis. Res. 42, 2985–3004 (2002)CrossRefGoogle Scholar
  16. 16.
    Shieh, K.-K., Huang, S.-M.: Effects of pictorial size and circle-slash thickness on glance legibility for prohibitive symbols. Int. J. Ind. Ergon. 33, 73–83 (2004)CrossRefGoogle Scholar
  17. 17.
    Curry, M.B., McDougall, S.J., de Bruijn, O.: The effects of the visual metaphor in determining icon efficacy. In: Proceedings of the Human Factors and Ergonomics Society Annual Meeting, pp. 1590–1594. SAGE Publications (1998)Google Scholar
  18. 18.
    Dewar, R.: Design and evaluation of public information symbols. Visual information for everyday use: Design and research perspectives, pp. 285–303 (1999)Google Scholar
  19. 19.
    Wong, W.: Principles of form and design. John Wiley & Sons, New York (1993)Google Scholar
  20. 20.
    Bullimore, M., Howarth, P., Fulton, J.: Assessment of visual performance. Evaluation of human work: a practical ergonomics methodology, pp. 804–839 (1990)Google Scholar
  21. 21.
    Mirzoeff, N.: The Visual Culture Reader. Psychology Press, New York (2002)Google Scholar

Copyright information

© Springer International Publishing Switzerland 2016

Authors and Affiliations

  1. 1.Department of Product DesignTainan University of TechnologyTainanTaiwan
  2. 2.Department of Industrial DesignNational Yunlin University of Science and TechnologyYunlinTaiwan
  3. 3.Department of Interior DesignHwa Hsia University of TechnologyTaipeiTaiwan

Personalised recommendations