Comparative Study of Icon Design for Mobile Application

Icons are widely used in mobile applications as visual displays that can assist the acquisition and understanding of information. An icon creates better visual perception with the ability to communicate meaning. Icon design is an approach of designing a graphic icon that can express a specific meaning. Icon design principles and elements are considered as major factors for mobile user interface that would lead to higher icon usability and acceptance of mobile applications. The study is undertaken to conduct a systematic review of published scientific literature on icon design elements for mobile applications. The chosen articles were published between 2014 and 2019, with full text provided and written in the English language. The electronic databases used were Google Scholar, Scopus, ProQuest, and Research Gate. Other sources include secondary data through books and web pages. The search terms used were “mobile icon design”, “mobile icon design principle”, “mobile icon design element” and “apps icon design”. The outcomes of this paper are a comparative study and proposed elements for icon design that will contribute to the field of icon design for mobile application. The proposed elements for icon design consist of recognizable, colour, simple, semantics, familiarity, shape, aesthetic, consistency, uniqueness and concreteness. These proposed elements for icon design can assist designers and researchers in designing icons for mobile application that would improve user experience by enhancing the meaning of icons to users.


Introduction
Mobile application is a program intentionally for portable devices. Today, people regularly communicate for business and daily activities through their mobile devices [1]. Therefore, an enormous market for mobile apps has emerged. Malaysia's number of mobile phone users is projected to reach 18.4 million by 2019, compared to 17.2 million and 15.6 million in 2018 and 2017 respectively. More than 20 million expected to rise by 2020 [2]. It is also stated that smartphone is the most common device for internet access around 89.4 percent compared to other devices and that it continues to grow [3]. These statistics shows that mobile devices and mobile applications have become deeply engrained in Figure 1. Samples of icons in [12] Icon design means generating a graphic symbol that can express a specific meaning. An extensive guideline of icon design is significant, especially involving the style aspects of icon design. Icons should be designed prudently and simply to be identifiable. Otherwise, uncertainty would be increased [13]. Appropriate designed icons would let users to recognize their meanings without extra commands. Considerate the ways for designing effective icons that involve interdisciplinary study activities can benefit designers and researchers as cited by [1]. The business has considered the aesthetical aspect of icons for sometimes. Nevertheless, the study on approach for designing icons to entice user is still narrow. Various parts associated to the exclusive graphical features of mobile apps are less explored [1], [5]. Similarly to study on icon ease of use for various group of user [14].
Icon design is considered as a major issue for every mobile application user. Therefore, studies on icon design should be focused on to ensure that icon manages to convey the correct information to the user. Accordingly, the key objective of this study is to conclude the icon design elements that are important for mobile apps. The design elements of apps icon were analyzed to understand how they were designed.

Materials and Methods
This study has reviewed previous studies on icon design principles and elements for designing icons for mobile application. Several electronic databases were used, namely, Google Scholar, Scopus, ProQuest, and Research Gate. Other sources include secondary data through books and web pages. The search terms used were "mobile icon design", "mobile icon design principle" and "apps icon design". Studies were included if the articles were published between 2014 and 2019, with full text provided and written in the English language. Findings were collected from various icon design studies for mobile applications. Subsequently, a table of comparison matrix (see Appendix A) was developed for a comparative study to identify the most common elements in icon design for mobile application. Then, the proposed elements for icon design (see Table 3) was developed to summarize icon design elements for mobile app. Table 1 summarizes 40 articles that were identified and extracted during the review, which included various fields of icon design apps. The analysis of icon design studies consisted of icon design elements for mobile application and 42 elements within the 40 icon design studies are presented in Table 1. Table  2 presents the matrix comparison that identifies the common elements found in icon design studies. (Refer Appendix B for the definition of each element). This study has identified 10 most common elements of icon design out of 42 elements studied.

Results and Discussion
These elements contribute to about 25% of the importance that influences icon design for mobile application. The 10 elements of icon design found were recognizable, colour, simple, semantics, familiarity, shape, aesthetic, consistency, uniqueness and concreteness as summarized in Table  2 and Appendix A.
A break-down of the most common elements are as follows: "recognizable" and "colour" were found in 11 studies, "simple" was found in 10 studies, "semantics" and "familiarity" were found in 8 studies, "shape" was found in 7 studies, "aesthetic" was found in 6 studies and "consistency", "uniqueness" and "concreteness" were found in 5 studies.   The summary of 10 key elements of app icon design as below: 1) Recognizable is the ability to be recognized or identified from previous knowledge [45]. People will understand icon that used familiar images [9]. High identification accuracy of icon yields better search performance [4]. Thus, identifiable icons are preferred [11], [43] to establish mutual connection and grab attention [22]. Icon has better recognition with simplified stylization, open edge shape and realistic adaptation [29]. 2) Colour is a property owned by object in producing diverse perceptions on eye that returns or produce light [45]. Icon colourfulness and brightness are related to number of downloads [1] that attract user attention [43]. Use exciting contrast colour contrast [11], [36] and warm colour [25] graphic to connect event group and important action [31]. Select colour for influence, legibility, meaning, storytelling and environment [9]. Unified design thru effectual design principles, colour palette and flexibility concern for an effective icon set [20]. Choose background colour for applicable brand and escape transparency [18]. 3) Simple means straightforward and easily implicit [45]. Simple icons easy to comprehend and quick found than complex icon [15]. Simple forms deliver message efficiently [8].
Embrace icon with simple graphic style [29], [11] in two-dimensional (2D) [11] and keep icon design simple [10], [44], [34], [15]. In addition, maintain a simple background and escape transparency [24]. 4) Semantic is related to meaning in language or logic [45]. Regular adjacent connection between icon entity and its purpose [14], [19] by reducing semantic distance [19] of icon. Semantic distance is closeness of an icon's graphic to its meaning [46] which is one of the most significant characteristic [39], [22] that can improve user experience [32]. 5) Familiarity is the close acquaintance with something [45]. Also referred to frequency with which images are encountered [14]. Easy to find familiar icon and familiarity of icon's colour assisted to identify app [42]. Icons should represent concrete information from familiar context [34]. Use familiar metaphors [19]. Familiarity improve consumer experience [32]. 6) Shape is the exterior appearance of something [45]. By illustrating the shape of object to will allow user to identify and interpret the icon instantly [9], [18]. The open border shape will enhanced recognition and icon favourite [29]. The background shape effect search performance and user favourite [37]. 7) Aesthetic is concerned with artistic, or appreciation of elegance [45]. Aesthetic icon design will increase attentiveness [25] and user interaction [26]. Aesthetic appeal is one of the most significant icon characteristic [39] that adopt aesthetic integrity for appearance and behaviour combination [24] . 8) Consistency means the way in which a substance holds together; thickness [45]. Maintain consistency in icon style of visualization [24], [43] and consistent design or design uniformity [47] for any circumstance [21] . Uniform shape is more tempting and simpler to adapt [18]. 9) Uniqueness is the quality of being special, or unusual [45] and creative apps icon design [21]. Uniqueness of colour aids to find app among other apps on single screen [42]. App icons that deemed unique bring about more clicks, downloads and purchases [23]. 10) Concreteness is the specific or definite, not abstract [45]. The more specific icon, the more operative it was [30]. Icon concreteness is vital to define user performance compared to complexity [34]. Concrete icon perform better than abstract icon [27]. Perception correlated with solid and concrete icon compared to flat and abstract icon [17].
Based on the comparative analysis, the researcher would like to propose elements for icon design for mobile application as presented in Table 3.

Conclusions
Icon design for mobile application is among the vital challenges in adopting mobile applications. Appropriate icon designs for mobile applications are essential to improve the meaning of icons to the user. This comparative study has found 42 elements of icon design for mobile application from the total of 40 works that have been studied. The proposed 10 key elements of icon design for mobile application are recognizable, colour, simple, semantics, familiarity, shape aesthetic, consistency, uniqueness and concreteness. These proposed elements are useful for designing mobile icons that can assist designers and researchers to enhance user experience. Therefore, it is crucial to manage these elements to ensure the effectiveness of the icon for mobile application. This study could be enhanced by focusing on any specific field of study. The proposed elements for icon design can be applied in apps icon design but may require further works by assessing and adjusting through questionnaires, observation, interview and expert evaluation to examine the most useful icon design elements and identifying the real situations related to icon design.

Scalability
The capacity to be changed in size, or scale.

Recognizable
Able to be recognized, or identified from previous encounters, or knowledge. 6

Uniqueness
The quality of being particularly remarkable, special, or unusual.

Consistency
The way in which a substance holds together; thickness or stability. The exterior appearance or silhouette of something.

Content
The things that are held or included in something.

Familiarity
The close acquaintance with, or knowledge of something. The frequency with which images are encountered.

12
Metaphor A thing regarded as representative, or symbolic of something else.

Semantics
Relating to meaning in language, or logic. The regular adjacent connection between icon entity and its purpose.

Repetition
The act of reiterating something that has already been thought or put in writing. Helps to tie lots of individual elements together.

18
Unified Make or become united, uniform, or whole.

Similarity
The state or fact of being similar. A similar feature or aspect. 20 No word Without text.

Skeuomorphism
It is the design concept that concentrates on creating items resembling their real-world analogues.

Memorable
Value memorizing, or simply recalled, specifically for being superior, or rare.

23
Fineness A very high quality; the best of its kind. The quality of being suitable to fulfill a particular role or task.

Emotional
Relating to an individual's feelings. Affecting or categorized by strong sensation.

Complexity
The situation or quality of being difficult or complicated. 26

Context
The conditions that form the setting for an occasion, declaration, or knowledge, and in positions of which it can be fully tacit.

Relevance
The quality or state of being closely connected or appropriate.

33
Concreteness Specific or definite, not abstract.

Angle
The space (normally in units) between dual crossing lines, or sides at or near to the point where they come across.

Background
The portion of an image or scheme that forms the setting for the core data or items, or looks utmost from the observer.   The feature of being particularly visible or essential; eminence.

Interactive
The ability to interconnect, or to have a direct involvement with someone, or something.