Frontiers of Computer Science

, Volume 9, Issue 5, pp 751–764 | Cite as

Effects of smartphone icon background shapes and figure/background area ratios on visual search performance and user preferences

  • Shijian LuoEmail author
  • Yuxiao Zhou
Research Article


Smartphones are becoming increasingly popular, users are provided with various interface styles with different designed icons. Icon, as an important competent of user interface, is regarded to be more efficient and more pleasurable. However, compared with desktop computers, fewer design principles on smartphone icon were proposed. This paper investigated the effects of icon background shape and the figure/background area ratio on visual search performance and user preference. Icon figures combined with six different geometric background shapes and five different figure/background area ratios were studied on three different screens in experiments with 40 subjects. The results of an analysis of variance (ANOVA) showed that these two independent variables (background shape and figure/background area ratio) significantly affected the visual search performance and user preference. On 3.5-in (11 in=0.025 4 m) and 4.0-in displays, unified background would be optimal, shapes such as square, circle and transitions between them (e.g., rounded square, squircle, etc.) are recommended because backgrounds in these shapes yield a better search time performance and subjective satisfaction for ease of use, search and visual preference. A 60% figure/background area ratio is the most appropriate for smartphone icon design on the 3.5-in screen, while a 50% area ratio could be a suggestion for both relatively optimized search performance and user preference on 4.0-in. In terms of the 4.7-in, icon figure is used directly for its better performance and preference compared with icons with background.


icon design background shape figure/background area ratio visual search performance user preference 


Unable to display preview. Download preview PDF.

Unable to display preview. Download preview PDF.


  1. 1.
    Yan R. Icon design study in computer interface. Procedia Engineering, 2011, 15: 3134–3138CrossRefGoogle Scholar
  2. 2.
    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, 2003, 24(3): 111–120CrossRefGoogle Scholar
  3. 3.
    Dunlop M, Brewster S. The challenge of mobile devices for human computer interaction. Personal and Ubiquitous Computing, 2002, 6(4): 235–236CrossRefGoogle Scholar
  4. 4.
    Siau K, Shen Z. Mobile communication and mobile services. International Journal of Mobile Communications, 2003, 1(1–2): 3–14CrossRefGoogle Scholar
  5. 5.
    Jokela T, Koivumaa J, Pirkola J, Salminen P, Kantola N. Methods for quantitative usability requirements: a case study on the development of the user interface of a mobile phone. Personal and Ubiquitous Computing, 2006, 10(6): 345–355CrossRefGoogle Scholar
  6. 6.
    Fleetwood M D, Byrne M D. Modeling icon search in ACT-R/PM. Cognitive Systems Research, 2002, 3(1): 25–33CrossRefGoogle Scholar
  7. 7.
    Repokari L, Saarela T, Kurki I. Visual search on a mobile phone display. In: Proceedings of the 2002 Annual Research Conference of the South African Institute of Computer Scientists and Information Technologists on Enablement through Technology. 2002, 253Google Scholar
  8. 8.
    van Schaik P, Ling J. Design parameters in Web pages: frame location and differential background contrast in visual search performance. International Journal of Cognitive Ergonomics, 2001, 5(4): 459–471CrossRefGoogle Scholar
  9. 9.
    Doong H S, Wang H C, Foxall G R. An investigation of consumers’ webstore shopping: a view of click-and-mortar company. International Journal of Information Management, 2011, 31(3): 210–216CrossRefGoogle Scholar
  10. 10.
    Chun J, Han S H, Im H, Park Y S. A method for searching photos on a mobile phone by using the fisheye view technique. International Journal of Industrial Ergonomics, 2011, 41(3): 280–288CrossRefGoogle Scholar
  11. 11.
    Bloch P H. Seeking the ideal form: product design and consumer response. Journal of Marketing, 1995, 59(3): 16–29CrossRefGoogle Scholar
  12. 12.
    Norman D A. Introduction to this special section on beauty, goodness, and usability. Human-Computer Interaction, 2004, 19(4): 311–318MathSciNetCrossRefGoogle Scholar
  13. 13.
    McDougall S, Tyrer V, Folkard S. Searching for signs, symbols, and icons: effects of time of day, visual complexity, and grouping. Journal of Experimental Psychology, 2006, 12(2): 118–128Google Scholar
  14. 14.
    Huang S M. The rating consistency of aesthetic preferences for icon background color combinations. Applied Ergonomics, 2012, 43(1): 141–150CrossRefGoogle Scholar
  15. 15.
    Lin R T. A study of visual features for icon design. Design Studies, 1994, 15(2): 185–197CrossRefGoogle Scholar
  16. 16.
    Huang S M, Shieh K K, Chi C F. Factors affecting the design of computer icons. International Journal of Industrial Ergonomics, 2002, 29 (4): 211–218CrossRefGoogle Scholar
  17. 17.
    Piamonte D P T, Abeysekera J D A, Ohlsson K. Understanding small graphical symbols: a cross-cultural study. International Journal of Industrial Ergonomics, 2001, 27(6): 399–404CrossRefGoogle Scholar
  18. 18.
    Huang H, Lai H H. Factors influencing the usability of icons in the LCD touchscreen. Displays, 2008, 29(4): 339–344MathSciNetCrossRefGoogle Scholar
  19. 19.
    McDougall S J P, Bruijn O, Curry M B. Exploring the effects of icon characteristics on user performance: the role of icon concreteness, complexity, and distinctiveness. Journal of Experimental Psychology: Applied, 2000, 6(4): 291–306Google Scholar
  20. 20.
    Bodrogi P. Chromaticity contrast in visual search on the multi-color user interface. Displays, 2003, 24(1): 39–48CrossRefGoogle Scholar
  21. 21.
    Hollands J G, Cassidy H A, McFadden S H, Boothby R D. LCD versus CRT displays: a comparison of visual search performance for colored symbols. Human Factors, 2002, 44(2): 210–221CrossRefGoogle Scholar
  22. 22.
    Näsänen R, Ojanpää H. Effects of image contrast and sharpness on visual search for computer icons. Displays, 2003, 24(3): 137–144CrossRefGoogle Scholar
  23. 23.
    Andersson P, Alm T. Perception aspects on perspective aircraft Displays. displays, 2003, 24(1): 1–13CrossRefGoogle Scholar
  24. 24.
    Hunag 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. Perceptual and Motor Skills, 2007, 104(2): 562–574CrossRefGoogle Scholar
  25. 25.
    Huang K C. Effects of computer icons and figure/background area ratios and color combinations on visual search performance on an LCD monitor. Displays, 2008, 29(3): 237–242CrossRefGoogle Scholar
  26. 26.
    Taddei-Ferretti C, Radilova J, Musio C, Santillo S, Cibelli E, Cotugno A, Radil T. The effects of pattern shape, subliminal stimulation, and voluntary control on multistable visual perception. Brain Research, 2008, 1225(15): 163–170CrossRefGoogle Scholar
  27. 27.
    Vishwanath D, Kowler E. Localization of shapes: eye movements and perception compared. Vision Research, 2003, 43(15): 1637–1653CrossRefGoogle Scholar
  28. 28.
    Michalski R, Grobelnya J, Karwowski W. The effects of graphical interface design characteristics on human-computer interaction task efficiency. International Journal of Industrial Ergonomics, 2006, 36(11): 959–977CrossRefGoogle Scholar
  29. 29.
    Houde S, Salomon G. Working towards rich and flexible file representations. In: Proceedings of the CHI’ 94 Conference Companion on Human Factors in Computing Systems. 1993, 9–10Google Scholar
  30. 30.
    Kwon S H, Lee D H, Chung M K. Effect of key size and activation area on the performance of a regional error correction method in a touch-screen QWERTY keyboard. International Journal of Industrial Ergonomics, 2009, 39(5): 888–893CrossRefGoogle Scholar
  31. 31.
    Huang D L, Rau P L P, Liu Y. Effects of font size, display resolution and task type on reading Chinese fonts from mobile devices. International Journal of Industrial Ergonomics, 2009, 39(1): 81–89CrossRefGoogle Scholar
  32. 32.
    García M, Badre A N, Stasko J T. Development and validation of icons varying in their abstractness. Interacting With Computers, 1994, 6(2): 191–211CrossRefGoogle Scholar
  33. 33.
    Lee S, Koubek R J. The effects of usability and web design attributes on user preference for e-commerce web sites. Computers in Industry, 2010, 61(4): 329–341CrossRefGoogle Scholar
  34. 34.
    Chiang Z H, Wen C C, Chen A C, Hou C Y. Human interface and the management of information. In: Proceedings of Information and Interaction for Health, Safety, Mobility and Complex Environments. 2013, 363–372CrossRefGoogle Scholar
  35. 35.
    Jacko J A, Salvendy G. Hierarchical menu design: breadth, depth, and task complexity. Perceptual and Motor Skill, 1996, 82: 1187–1201CrossRefGoogle Scholar
  36. 36.
    Cockburn A, Gutwin C, Greenburg S. A predictive model of menu performance. In: CHI’ 07 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. 2007, 627–636CrossRefGoogle Scholar
  37. 37.
    Barreau D, Nardi B. Finding and reminding: file organization from the desktop. SIGCHI Bulletin, 1995, 27(3): 39–43CrossRefGoogle Scholar
  38. 38.
    Ntuen C A, Goings M, Reddin M, Holmes K. Comparison between 2-D & 3-D using an autostereoscopic display: the effects of viewing field and illumination on performance and visual fatigue. International Journal of Industrial Ergonomics, 2009, 39(2): 388–395CrossRefGoogle Scholar
  39. 39.
    Taylor W, Melloy B, Dharwada P, Gramopadhye A, Toler J. The effects of static multiple sources of noise on the visual search component of human inspection. International Journal of Industrial Ergonomics, 2004, 34(3): 195–207CrossRefGoogle Scholar

Copyright information

© Higher Education Press and Springer-Verlag Berlin Heidelberg 2014

Authors and Affiliations

  1. 1.College of Computer Science and TechnologyZhejiang UniversityHangzhouChina

Personalised recommendations