The Influence of Icon Background Colors and Icon Symbols on Menu Item Selection for Smartphone

Pictorial-based designs are common for smartphone menu patterns; and the use of icons is prevalent. Icon symbols and icon background colors are two variables that contribute to icon usability. Using pictorial symbol has been a standard for icon design but using textual symbol has become more common [1]. Icon background colors also contribute to icon usability. Two common design decisions of background colors of a set of icons: multicolor, and one-color. Presently, no experimental research has been conducted to examine whether these the two variables influenced menu item selection on smartphone. This study investigated whether icon background colors and icon symbols affect menu selection time and satisfaction. A two-way ANOVA indicated that there were significant main effects of both icon background color and icon symbol, as well as an interaction effect of the two variables on menu selection time.

[1]  Jeffrey Johnson,et al.  Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules , 2010 .

[2]  Gavriel Salvendy,et al.  A survey of what customers want in a cell phone design , 2007, Behav. Inf. Technol..

[3]  Theresa Neil.  Mobile Design Pattern Gallery, Color Edition , 2012 .

[4]  Susan Wiedenbeck,et al.  The use of icons and labels in an end user application program: An empirical study of learning and retention , 1999, Behav. Inf. Technol..

[5]  Charles T. Scialfa,et al.  Age Differences in Search of Web Pages: The Effects of Link Size, Link Number, and Clutter , 2004, Hum. Factors.

[6]  Michael D. Byrne,et al.  Unintended effects: varying icon spacing changes users' visual search strategy , 2004, CHI.

[7]  David Gittins,et al.  Icon-Based Human-Computer Interaction , 1986, Int. J. Man Mach. Stud..

[8]  Gavriel Salvendy,et al.  Number of people required for usability evaluation , 2010, Commun. ACM.

[9]  Suna Lee.  The study concerning the Concreteness and Abstractness of Icon Design Focused on the Mobile Application Icon , 2014 .

[10]  Lumpapun Punchoojit,et al.  Usability Studies on Mobile User Interface Design Patterns: A Systematic Literature Review , 2017, Adv. Hum. Comput. Interact..

[11]  Qing Guo.  An icon recognition study on different simplicity levels , 2016 .

[12]  B. Schneirdeman,et al.  Designing the User Interface: Strategies for Effective Human-Computer Interaction , 1998 .

[13]  H. Müller,et al.  Visual search and selective attention , 2006 .

[14]  Marketta Niemelä,et al.  Visual search in graphical interfaces : a user psychological approach , 2003 .

[15]  John K. Tsotsos,et al.  Saliency, attention, and visual search: an information theoretic approach. , 2009, Journal of vision.