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

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 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 (1 in=0.025 4 m) and 4.0-in displays, unified backgroundwould 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.

Keywords

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

References

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

[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

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

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

[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

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

[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

[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

[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

[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

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

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

[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

[14] Huang S M. The rating consistency of aesthetic preferences for iconbackground color combinations. Applied Ergonomics, 2012, 43(1): 141―150

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

[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

[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

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

[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

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

[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

[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

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

[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

[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

[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

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

[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

[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

[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

[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

[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

[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

[34] Chiang Z H, Wen C C, Chen A C, Hou C Y. Human interface and the management of information. In: Proceeding of Information and Interaction for Health, Safety, Mobility and Complex Environments. 2013, 363―372

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

[36] Cockburn A, Gutwin C, Greenburg S. A predictive model of menu performance. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. 2007, 627―636

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

[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

[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

RIGHTS & PERMISSIONS

Higher Education Press and Springer-Verlag Berlin Heidelberg