|
|
|
Effects of smartphone icon background shapes and figure/background area ratios on visual search performance and user preferences |
Shijian LUO( ),Yuxiao ZHOU |
| College of Computer Science and Technology, Zhejiang University, Hangzhou 310027, China |
|
|
|
|
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
|
|
Corresponding Author(s):
Shijian LUO
|
|
Issue Date: 24 September 2015
|
|
| 1 |
Yan R. Icon design study in computer interface. Procedia Engineering, 2011, 15: 3134―3138
https://doi.org/10.1016/j.proeng.2011.08.588
|
| 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
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
|
| 6 |
Fleetwood M D, Byrne M D. Modeling icon search in ACT-R/PM. Cognitive Systems Research, 2002, 3(1): 25―33
https://doi.org/10.1016/S1389-0417(01)00041-9
|
| 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
|
| 15 |
Lin R T. A study of visual features for icon design. Design Studies, 1994, 15(2): 185―197
https://doi.org/10.1016/0142-694X(94)90024-8
|
| 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
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
|
| 18 |
Huang H, Lai H H. Factors influencing the usability of icons in the LCD touchscreen. Displays, 2008, 29(4): 339―344
https://doi.org/10.1016/j.displa.2007.10.003
|
| 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
https://doi.org/10.1037/1076-898X.6.4.291
|
| 20 |
Bodrogi P. Chromaticity contrast in visual search on the multi-color user interface. Displays, 2003, 24(1): 39―48
https://doi.org/10.1016/S0141-9382(02)00070-7
|
| 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
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
|
| 23 |
Andersson P, Alm T. Perception aspects on perspective aircraft displays. Displays, 2003, 24(1): 1―13
https://doi.org/10.1016/S0141-9382(02)00054-9
|
| 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
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
|
| [1] |
Supplementary Material-Highlights in 3-page ppt
|
Download
|
|
Viewed |
|
|
|
Full text
|
|
|
|
|
Abstract
|
|
|
|
|
Cited |
|
|
|
|
| |
Shared |
|
|
|
|
| |
Discussed |
|
|
|
|