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.
. [J]. Frontiers of Computer Science, 2015, 9(5): 751-764.
Shijian LUO,Yuxiao ZHOU. Effects of smartphone icon background shapes and figure/background area ratios on visual search performance and user preferences. Front. Comput. Sci., 2015, 9(5): 751-764.
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
https://doi.org/10.1016/S0141-9382(03)00035-0
3
Dunlop M, Brewster S. The challenge of mobile devices for human computer interaction. Personal and Ubiquitous Computing, 2002, 6(4): 235―236
https://doi.org/10.1007/s007790200022
4
Siau K, Shen Z. Mobile communication and mobile services. International Journal of Mobile Communications, 2003, 1(1-2): 3―14
https://doi.org/10.1504/IJMC.2003.002457
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
https://doi.org/10.1007/s00779-005-0050-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
https://doi.org/10.1207/S15327566IJCE0504_6
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
https://doi.org/10.1016/j.ijinfomgt.2010.06.006
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
https://doi.org/10.1016/j.ergon.2011.02.009
11
Bloch P H. Seeking the ideal form: product design and consumer response. Journal of Marketing, 1995, 59(3): 16―29
https://doi.org/10.2307/1252116
12
Norman D A. Introduction to this special section on beauty, goodness, and usability. Human-Computer Interaction, 2004, 19(4): 311―318
https://doi.org/10.1207/s15327051hci1904_1
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
https://doi.org/10.1037/1076-898x.12.2.118
14
Huang S M. The rating consistency of aesthetic preferences for iconbackground color combinations. Applied Ergonomics, 2012, 43(1): 141―150
https://doi.org/10.1016/j.apergo.2011.04.006
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
https://doi.org/10.1016/S0169-8141(01)00064-6
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
https://doi.org/10.1016/S0169-8141(01)00007-5
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
https://doi.org/10.1037/1076-898X.6.4.291
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
https://doi.org/10.1518/0018720024497862
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
https://doi.org/10.1016/j.displa.2003.09.003
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
https://doi.org/10.2466/pms.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
https://doi.org/10.1016/j.displa.2007.08.005
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
https://doi.org/10.1016/j.brainres.2008.04.064
27
Vishwanath D, Kowler E. Localization of shapes: eye movements and perception compared. Vision Research, 2003, 43(15): 1637―1653
https://doi.org/10.1016/S0042-6989(03)00168-8
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
https://doi.org/10.1016/j.ergon.2006.06.013
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
https://doi.org/10.1145/259964.259974
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
https://doi.org/10.1016/j.ergon.2009.02.013
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
https://doi.org/10.1016/j.ergon.2008.09.004
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
https://doi.org/10.1016/0953-5438(94)90024-8
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
https://doi.org/10.1016/j.compind.2009.12.004
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
https://doi.org/10.2466/pms.1996.82.3c.1187
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
https://doi.org/10.1145/1240624.1240723
37
Barreau D, Nardi B. Finding and reminding: file organization from the desktop. SIGCHI Bulletin, 1995, 27(3): 39―43
https://doi.org/10.1145/221296.221307
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
https://doi.org/10.1016/j.ergon.2008.07.001
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
https://doi.org/10.1016/j.ergon.2004.04.002