Skip to main content
SpringerLink
Log in

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

  • Research Article
  • Published:
Frontiers of Computer Science Aims and scope Submit manuscript

Abstract

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.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Log in via an institution

Price excludes VAT (USA)
Tax calculation will be finalised during checkout.

Instant access to the full article PDF.

Institutional subscriptions

Similar content being viewed by others

References

  1. Yan R. Icon design study in computer interface. Procedia Engineering, 2011, 15: 3134–3138

    Article  Google Scholar 

  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–120

    Article  Google Scholar 

  3. Dunlop M, Brewster S. The challenge of mobile devices for human computer interaction. Personal and Ubiquitous Computing, 2002, 6(4): 235–236

    Article  Google Scholar 

  4. Siau K, Shen Z. Mobile communication and mobile services. International Journal of Mobile Communications, 2003, 1(1–2): 3–14

    Article  Google Scholar 

  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–355

    Article  Google Scholar 

  6. Fleetwood M D, Byrne M D. Modeling icon search in ACT-R/PM. Cognitive Systems Research, 2002, 3(1): 25–33

    Article  Google Scholar 

  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, 253

    Google Scholar 

  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–471

    Article  Google Scholar 

  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–216

    Article  Google Scholar 

  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–288

    Article  Google Scholar 

  11. Bloch P H. Seeking the ideal form: product design and consumer response. Journal of Marketing, 1995, 59(3): 16–29

    Article  Google Scholar 

  12. Norman D A. Introduction to this special section on beauty, goodness, and usability. Human-Computer Interaction, 2004, 19(4): 311–318

    Article  MathSciNet  Google Scholar 

  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–128

    Google Scholar 

  14. Huang S M. The rating consistency of aesthetic preferences for icon background color combinations. Applied Ergonomics, 2012, 43(1): 141–150

    Article  Google Scholar 

  15. Lin R T. A study of visual features for icon design. Design Studies, 1994, 15(2): 185–197

    Article  Google Scholar 

  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–218

    Article  Google Scholar 

  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–404

    Article  Google Scholar 

  18. Huang H, Lai H H. Factors influencing the usability of icons in the LCD touchscreen. Displays, 2008, 29(4): 339–344

    Article  MathSciNet  Google Scholar 

  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–306

    Google Scholar 

  20. Bodrogi P. Chromaticity contrast in visual search on the multi-color user interface. Displays, 2003, 24(1): 39–48

    Article  Google Scholar 

  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–221

    Article  Google Scholar 

  22. Näsänen R, Ojanpää H. Effects of image contrast and sharpness on visual search for computer icons. Displays, 2003, 24(3): 137–144

    Article  Google Scholar 

  23. Andersson P, Alm T. Perception aspects on perspective aircraft Displays. displays, 2003, 24(1): 1–13

    Article  Google Scholar 

  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–574

    Article  Google Scholar 

  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–242

    Article  Google Scholar 

  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–170

    Article  Google Scholar 

  27. Vishwanath D, Kowler E. Localization of shapes: eye movements and perception compared. Vision Research, 2003, 43(15): 1637–1653

    Article  Google Scholar 

  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–977

    Article  Google Scholar 

  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–10

    Google Scholar 

  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–893

    Article  Google Scholar 

  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–89

    Article  Google Scholar 

  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–211

    Article  Google Scholar 

  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–341

    Article  Google Scholar 

  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–372

    Chapter  Google Scholar 

  35. Jacko J A, Salvendy G. Hierarchical menu design: breadth, depth, and task complexity. Perceptual and Motor Skill, 1996, 82: 1187–1201

    Article  Google Scholar 

  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–636

    Chapter  Google Scholar 

  37. Barreau D, Nardi B. Finding and reminding: file organization from the desktop. SIGCHI Bulletin, 1995, 27(3): 39–43

    Article  Google Scholar 

  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–395

    Article  Google Scholar 

  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–207

    Article  Google Scholar 

Download references

Author information

Authors and Affiliations

  1. College of Computer Science and Technology, Zhejiang University, Hangzhou, 310027, China

    Shijian Luo & Yuxiao Zhou

Authors
  1. Shijian Luo
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. Yuxiao Zhou
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Shijian Luo.

Additional information

Luo Shijian is the vice dean of Department of Industrial Design, College of Computer Science and Technology, Zhejiang University, China. He got his MS at Hunan University and PhD at Zhejiang University, China. He has professional experience on user experience and product innovation design, service design and computer-aided industrial design.

Zhou Yuxiao is a PhD candidate at Zhejiang University, China. He got his BS from School of Art, Zhejiang University of Technology, China. He has professional experience on user experience design, interaction design and user research.

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Luo, S., Zhou, Y. Effects of smartphone icon background shapes and figure/background area ratios on visual search performance and user preferences. Front. Comput. Sci. 9, 751–764 (2015). https://doi.org/10.1007/s11704-014-4155-x

Download citation

  • Received:

  • Accepted:

  • Published:

  • Issue Date:

  • DOI: https://doi.org/10.1007/s11704-014-4155-x

Keywords

Search

Navigation