Approaches to Interface Icon Classification

Abstract

Various attempts have been made at creating a classification for user interface icons, with some focusing on their pictorial presentation, and others on the signs’ relation to their intended meaning. This paper provides a review of the existing classification systems, and discusses their strengths and weaknesses. Based on this review, we then propose an alternative practical approach to icon classification, which is aimed towards designers of user interface icons rather than the research community, and evaluate its usability based on data gathered from two online surveys.

1 Introduction

In this age of digitalisation, we are increasingly surrounded by devices and interfaces. The design of the user experience has become a key asset in the competition for consumers. An integral, but underrated, part of the experience, is the design of the interface icons. Many attempts have been made to create a classification for user interface icons, but none of them sufficiently for the benefit of the icon designer. The field of research is like a semantic puzzle, where researchers invent their own terms to describe the same things, or use similar terms to describe different relations. What is needed is a more concrete and practical system. One that can be adopted by designers, even without a very profound understanding of semiotic theory.

2 Semiotics or Semiology

The classification of signs in general is usually either related to semiotics or semiology, or both. Although these two terms are sometimes mixed with one another, they are based on two different models. While both were developed during the same time period and handle the same subject matter, semiology was created by Ferdinand de Saussure [1], and is connected to linguistics. Semiotics, on the other hand, was created by Charles Sanders Peirce [1] as part of his full philosophical system, composed of phaneroscopy (phenomenology), normative sciences, and metaphysics.

Following the Saussurean terminology, the signifier and the signified are both components of a sign [2]. For Peirce, on the other hand, a semiosis involves an operation of three subjects, a sign, its object and its interpretant. Furthermore, according to Peirce all signs can be classified into icons, symbols and indexes based on the signs relation to the referent [3]. In this traditional system, an icon is limited to a representation that resembles its object, an index carries an actual connection to its object (e.g. a sign of a telephone on the door of a phone booth), and a symbol in contrast has no visual connection to its object, and is an abstract sign that can only be understood through learning its meaning. In the context of user interface icon design the relevance of classifying a sign as an index is somewhat irrelevant, since it could be argued that there is no variation in the level of connectedness between a referent and a sign.

In describing the relationship between the signifier and the signified, arbitrary is one of the terms Saussure uses. Another closely related term used in linguistics is unmotivated. These two terms describe two different levels of logical relation. A system is arbitrary, when its signs are founded not by convention, but by unilateral decision. Similarly, a sign is unmotivated, when the relation between its signified and signifier is not analogical. According to this logic, it is possible to have systems and icons that are at the same time arbitrary and motivated, and others which are non-arbitrary and unmotivated. For example, if a designer decided to use an image of a bloodhound to signify the search function, the relation would be arbitrary but motivated. In contrast, the stop icon is a good example of a non-arbitrary and unmotivated sign, and its use is heavily based on convention, whereas the relation of its appearance to the stop function is logically difficult to explain.

3 The Classification of Icons

As is widely known, in 1973 Xerox released the first computer system with a graphical user interface, introducing bitmap graphics, menus and icons, along with the desktop metaphor with its trash can, folder, file and printer icons. The first attempts to create a classification or taxonomy of icons started in the 1980’s. Most of these classification systems are to some extent related to Peirce’s semiotics. One main difference, however, is that in these systems the “index” sign type usually isn’t a top level classification. Additionally, what Peirce classified as icon is commonly divided into two or more classes or subclasses based on the level of abstraction or the type of logical connection between the signifier and signified.

One of the first articles on icon classification is Keith Lodding’s iconic interfacing [4], published in 1983. According to Lodding, at the time of the writing, the era of graphical interfaces had arrived, but no unique discipline of “iconic communication” existed. Lodding recognized three types of interface icons: representational, abstract, and arbitrary. Representational icons serve as an example for a general class of objects. Abstract icons attempt to present a concept through the use of metaphor, and by reducing the image to its essential elements that carry the intended concept. Arbitrary icons are “invented” and assigned a meaning, which must then be learned. Interestingly, Lodding also notes that once arbitrary icons are entered into use, they appear to enjoy a long lifetime when compared to either representational or abstract icons.

Webb et al. [5] have also suggested three main categories for visual icon classification. Their classifications are: picture, symbol, and sign. Picture is a realistic depiction of a system object or function, and as such, pictures are the most detailed forms of icons, making them easiest to interpret and remember. Symbols emphasize critical features by analogy or symbolism, and therefore, they are simplified and are affected the most by context. It should, however, be noted that the use of the term symbol or symbolic by Webb et al. is contradictory to Peirce, who used the same term to describe an arbitrary relation. The third category, defined as sign, is used instead by Webb et al. to describe icons with no intuitive connection between the icon and its referent. Signs are therefore abstract and simple, but their association with their referent must be learned.

Yet another icon classification has been proposed by Rogers [6], with the aim of discovering a primitive syntax and semantics for icons, which could then be used as a basis for designing a set of icons for a given application. According to Rogers, a common problem with iconic interfacing is the different meanings that can be attributed to a single icon. Verbal languages have syntactic and semantic rules which help to disambiguate their meaning. Pictorial languages do not yet have equivalent rulesets. Paradoxically, while pictorial communication could potentially be universally understood, it lacks the rules to guide this process. As such, context is a key factor in disambiguating the meanings of icons. Rogers presents Hungarian toilet signs as an example, where a stiletto shoe is used to represent women or men. Because of the user’s prior knowledge of where to find a toilet in a restaurant, and the fact that there are generally separate toilets for men and women, these kinds of signs are immediately recognisable. Indeed, many restaurants and pubs use such signs, often in a funny way, to represent male and female toilets.

Rogers also identifies four ways in which interface icons can refer to their referent. Resemblance icons depict the referent through an analogous image, exemplar icons serve as a typical example for a general class of objects (e.g. a knife and fork represent a restaurant), symbolic icons show the relationship between the referent and referrer in a more abstract or metaphoric manner (e.g. image of a wine glass with a fracture conveys the concept of fragility), and arbitrary icons bear no resemblance to the referent, and therefore, their associations must be learned.

Furthermore, Rogers recognizes the usefulness of icon-based interfaces, and proposes the development of a taxonomy and grammar for icons to assists designers with overcoming the challenges of choosing when to use icons and how to design them.

Similarly, Lidwell et al. [7] base their classification for iconic presentation on the work of Rogers in their Universal Principles of Design. They just replace the terms resemblance icons with similar icons and Exemplar icons with example icons.

Finally, Purchase [8] proposes a semiotic system for icons based on Peirce’s definitions, in which she introduced three classifications: symbolic, concrete-iconic, and abstract-iconic. Symbolic icons here are arbitrary in their relation to the concept they signify. Note that Rogers’ classification used the term arbitrary and Webb et al. sign for roughly the same purpose. Concrete-iconic icons can be seen as identical to the concept that they represent. Abstract-iconic icons are similar, but not identical to the concept, and lie higher up the abstraction scale.

4 Earcons and Auditory Icons

In one of the earliest articles on the use of auditory icons in computer interfaces, published in 1986, William Gaver proposes that icons could be categorized as either nomic, symbolic or metaphorical [9]. Gaver uses the term nomic to describe an icon’s relation to its referent, which is direct and descriptive. Symbolic is used for icons with an arbitrary relation to their referent; similar to Peirce’s and Purchase’s use of the term, but contradictory to Webb et al. Metaphorical icons can be either structure-mappings or metonymic mappings. Structure-mappings make use of similarities between the referent and the icon (e.g. an image of a tree can represent genealogy). While metonymic mappings use a part or a feature to represent the whole (e.g. a hissing sound can represent a snake).

A few years after the above publication, in 1989, Blattner et al. also studied auditory icons, or earcons, as they called them [10]. They suggested, that visual icons design techniques could be useful for earcons, even though at the time, there was little published material on visual icon design. They also suggested that the systems they developed for earcons could provide a useful basis for visual icons. A major difference they recognized between earcons and icons, is the fact that earcons are only used for informational purposes, whereas icons are both informational and interactive. Furthermore, multiple visual icons can be presented simultaneously, which is not possible for earcons. Blattner et al. recognized three main icon types: abstract, representational, and semi-abstract. Abstract icons consist of geometric shapes that are not recognizable as real-world things. Representational icons are pictures of familiar objects or operations. Whereas semi-abstract icons are simply everything in between, and they either consist of both abstract and representational elements, or they are representational images that are visually highly abstracted.

5 The Need for a New Classification

Wang et al. [11] recognized some limitations and weaknesses in the aforementioned systems for icons classification. According to them, in the existing classifications categories overlap, and different classifications use different terminologies, sometimes to describe the same concept. To highlight these problems, they compare nine existing taxonomies and their terminologies, and then they propose a classification of their own. In their taxonomy, they identify four icon categories: concrete, abstract, combination, and alphabetic icons. Concrete icons consist only of real-world objects. Abstract icons are the absolute opposite consisting only of shapes, metaphysical arrows and “arbitrary symbols”; the last of which is an interesting choice of terminology if you consider all the connotations that have been previously associated with the terms “symbol” and “arbitrary”. Combination icons are a fusion of concrete and abstract elements. Alphabetic icons are any icons that show written characters regardless of what other elements they contain.

Similarly, Nakamura et al. [1] also identify problems with existing icon classifications, and argue that previous icon taxonomies are not granular enough to capture differences among representation strategies that can be visually subtle but semantically significant. Studies such as that of Blattner et al. focus only on the pictorial representation and overlook the relation between concept and representation, while others such as Rogers, Gaver and Lidwell et al. are more focused on the signs’ relation to their intended meaning.

Nakamura et al. also identify and propose their own classification using three basic representation strategies: visual similarity, semantic association and arbitrary convention. Representation through visual similarity has no subcategories, but semantic association is divided to eight subcategories: comparison or contrast, exemplification, semantic narrowing, physical decomposition, temporal decomposition, body language, metaphor, and contiguity. Contiguity is further narrowed to physical contiguity, container, source, use, tool, cause or effect, and object. Arbitrary convention is also further divided to abstract, concrete and transposed conventions. Transposed convention refers to a situation where the convention is in the referent, not in the pictorial representation. This relation however is not explained in a very detailed manner.

6 A Taxonomy for Trademarks

Mollerup’s Marks of Excellence [12], thoroughly studies trademarks, their design, functions and history. The function of trademarks is of course different to that of icons, but there are many similarities in the aspects of their design. Mollerup has also created a complete taxonomy system for trademarks. This system is derived from Aristotelian logic, following these five rules:

• 1. It must consist of classes that are distinct. The differences between the classes must be clear so that there is no room for misunderstanding as to which class an item belongs.

• 2. The characteristics on which the classes are based should be used consistently, and each step in the classification should be based on a single principle of division.

• 3. There should be no overlap between classes. Parallel (co-ordinate) classes should be exclusive.

• 4. Co-ordinate classes should be able to collectively cover all possible entries.

• 5. The classes should be relevant to the purpose of the taxonomy.

Using these logical rules, Mollerup proposes the following taxonomy.

• 1. Trademarks

  • a. Graphic marks

    • (1) Picture marks

      • i. Figurative marks

        • (a) Descriptive marks

        • (b) Metaphoric marks

        • (c) Found marks

      • ii. Non-figurative marks

    • (2) Letter marks

      • i. Name marks

        • (a) Proper names

        • (b) Descriptive names

        • (c) Metaphoric names

        • (d) Found names

        • (e) Artificial names

      • ii. Abbreviations

        • (a) Initial abbreviations

          • A. Acronyms

          • B. Non-acronym initial abbreviations

        • (b) Non-initial abbreviations

  • b. Non-graphic marks

Icons rarely consist only of letters but sometimes letters and words may be a part of an icon. Therefore, branch 1.a.(1) (Picture marks), is the most relevant to the purpose of icon taxonomy. If we examine the subclasses it contains, figurative marks are marks that depict an object, and non-figurative marks are pictures in their own right. Non-figurative marks are marks that appear completely abstract. For instance, the stop icon by itself might be considered non-figurative. Also, icons whose graphical meanings are unclear to a user, might be considered non-figurative. The power icon for instance, is a logical graphical reference to zero (off) and one (on), but to some users it might seem completely abstract.

Descriptive marks refer directly to their object. The printer icon is a clear example of a descriptive icon. Metaphoric marks refer to their object through a shared quality. The file and thrash can are metaphoric icons. Found marks show something recognizable that is arbitrary to its object. The relationship of the symbol and its object might often have a historical explanation that is logical. Over time the connection is lost and the symbol becomes arbitrary. For instance, the floppy disk as an icon for the save function, is becoming arbitrary to younger users who have never used the floppy disk storage media, and as such, it might even be considered a found mark.

The major difference in Mollerup’s system is the top level division to figurative and non-figurative marks. The semantic relation between the trademark and its object is only relevant to figurative marks in this system.

7 A Practical Approach on Icon Classification

This paper proposes an alternative approach on icon classification that addresses the concerns put forward by Nakamura et al., and builds on the same Aristotelian logic and aim for practicality as Mollerup’s system. The proposed taxonomy is aimed towards designers of user interfaces and icons rather than the research community.

The semiotic or logical relationship, logical vs. arbitrary, is the top level of classification of the system. Logical icons are divided to two subclasses: descriptive and metaphoric, which further describe the relation of the icon to its object. This is similar to Mollerup’s division of figurative marks. Arbitrary icons are divided into concrete and abstract subclasses. These subclasses are more concerned with the type of pictorial presentation, since there is no logical relationship to define. The purpose of developing this system was to evaluate whether the terminology of even such a basic classification can be understood and mastered by test subjects, who are not familiar with the field of research.

The proposed terminology can be explained in the following manner:

• Concrete: The icon is visually recognizable as an image that represents a real-world object. To put it more simply, it is possible to clearly name the object that image shows.

• Abstract: The icon is not visually recognizable as an image that represents a real-world object. The icon is just a combination of shapes that does not resemble any recognizable real-world object.

• Logical: There is a clear logical connection between the icon image and the functionality it represents. The icon is self-explanatory and can be interpreted with little previous knowledge.

• Arbitrary: There is no logical connection between the icon image and the functionality it represents. Any association between the image and its functionality must be learned.

As you may notice there is an overlap and direct conflict with Saussure’s terminology. Even this proposed system is becoming entangled in the same semantic debate that was mentioned before. The term arbitrary here, is similar to what Saussure described as unmotivated, and logical equals to Saussure’s motivated. Instead, Saussure used the term arbitrary to describe a system where the signs are not founded by convention, but by unilateral decision. For the purpose of designing user friendly interfaces with legible icons, the whole premise of making such unilateral decisions should only come to play, when the designer needs to introduce an icon for a completely new element or action of the interface. It is not as useful for the purpose of classifying existing interface icons (Fig. 1).

Fig. 1.

Proposed taxonomy system.

8 Online Surveys

The functionality of the system was evaluated through two online surveys. The first survey tested two basic classifications questions that concerned both the semiotic relationship between the sign and its object, and the visual type of the sign. The results were published in full detail in a poster article for HCI Toronto 2016 [13].

The respondents were recruited from university students and staff, LinkedIn and Facebook GUI interest groups and the author’s personal networks. The majority of the 119 participants were designers, design students and IT professionals. In all there were participants with 22 different nationalities ranging from United States and Germany, to Iran and China. The largest group (66%) were Finnish. 58% of the participants were male and 42% Female. The majority of the respondents (49%) were 30 to 40 years old, with the entire range being between 10 and 57 years.

The participants were asked to describe their skills in using digital devices on a five step range: very good, good, average, poor, or very poor. 66% of the respondents described their skills as very good, 28% good, and the rest 6% average. They were also asked how often they found it difficult to understand the meaning of interface icons or buttons. This was also measured on a five step range: very rarely, rarely, occasionally, often, or very often. 29% of the respondents replied very rarely, 40% rarely, 29% occasionally, and 2% often. So it seems, that even skilful users sometimes encounter problems in understanding interface icons.

Due to the relatively small sample size, it is not of great worth to compare small percentage differences in the classification of individual icons, but rather to have an overall understanding of how accurate and applicable such a classification can be (Fig. 2).

Fig. 2.

The icon set that was used in the surveys.

The participants were asked to classify a set of twenty icons through the following questions:

• 1. Is the icon abstract or concrete?

• 2. Is the icon logical or arbitrary?

8.1 Importance of Context

The participants were also asked to shortly name what they thought each of the icons stands for, i.e. what is its meaning or function. The purpose of this question was to verify, that the user had correctly recognized the icon. It was clear from the answers, that some of the icons could be understood in a variety of ways, and others were not always recognized at all. The lack of context is one important factor in this. For instance, the magnifying glass was recognized as both a search and magnifying tool. Similarly, the cross icon that stands for closing or deleting, was also recognized as the symbol for irritating substances. The total number of icon classifications was 2380 (119 participants classified 20 icons). Out of these, there were 242 cases where the icon had not been correctly recognized. Therefore, 89.8% of the data was valid, and this part of it was analysed further.

8.2 Abstract and Arbitrary

In the icons that were classified as abstract, there appeared to be two clusters. One comprised of strongly arbitrary icons. The other cluster of icons was above 58% in the logical scale. This group consisted of the arrow icons of the survey: play, fast forward, rewind, and reload. It is clear, that arrows were considered as abstract representations. Yet they are so commonly used, that users intuitively understand their meaning. The origin of the arrow symbol most likely derives from the concrete archer’s arrow object. So, the case seems to be, that the appearance of the arrow has just become so simplified and abstracted, that it is no longer considered concrete.

8.3 Arbitrary and Concrete

In this icon set there were no occurrences of icons that are clearly arbitrary and concrete at the same time. The paste icon comes closest to this, being 81% concrete and only 58,3% logical. It would seem, that icons are most commonly in this group, if the metaphor or descriptive relation of the icon (signifier) and its signified is weak from the beginning, or becomes unclear over time (Table 1).

Table 1. Summary of the first survey data.

8.4 Descriptive and Metaphoric

The second survey received 105 responses, 70% of which were from Finnish respondents. In all there were participants with 18 different nationalities. 67% of the respondents were male and 33% female. The largest age group of the respondents were 30 to 40 years old (39%), with the entire age range varying from 21 to 57 years. 68% of the participants described their skills as very good, 23% good, 8% average and 1% poor. To the question whether the respondents found it difficult to understand the meaning of interface icons or buttons, 28% replied very rarely, 40% rarely, 29% occasionally, 2% often and 1% very often.

In general, the demography was similar to the previous survey. The portion of male respondents was however 9% higher and the 30–40 age group was less dominant, 39% versus the previous 49%.

The total number of icon classifications was 2100 (105 participants × 20 icons). Out of these, there were 219 cases, where the icon had not been correctly recognized. Therefore, 89.6% of the data was valid, and this part of it was analyzed further.

In the second survey the respondents were asked to classify the same set of interface icons as metaphoric, descriptive or not applicable. The hypotheses was, that the icons that were classified as arbitrary in the first survey, should be classified as not applicable in the second survey, since there apparently is no logical relation between the icon and its object. The icons that were classified dominantly arbitrary were: stop, record, power, pause, eject, and close. All of these were indeed classified as dominantly not applicable. The only flaw in the logic was, that two additional icons (fast forward and rewind) were also classified as not applicable (Table 2).

Table 2. Icons classified as not applicable.

The icons that were classified as mostly descriptive were: print, calculator, folder, trash, copy, file, and play. Perhaps the most surprising result here was, that calculator, folder, and trash icons were seen as descriptive rather than metaphoric. The calculator application is clearly a part of the classic desktop metaphor, but perhaps the icon can be also considered as descriptive since it looks similar to the application itself. Interestingly also the play icon was the only playback icon in this group, as all the others (stop, pause, rewind, fast forward, eject) were classified as not applicable (Table 3).

Table 3. Icons classified as not descriptive.

The metaphoric classification group didn’t offer as many deviations. The group consisted of the icons: search, save, paste, cut, and reload. What is surprising, is the fact that cut and paste were a part of this group, but copy was seen as a descriptive rather than metaphoric icon (Table 4).

Table 4. Icons classified as metaphoric.

9 Discussion

Although there are logical patterns in the classification data, it is also apparent that the respondents found the task of classifying icons according to this terminology challenging. This was also clear from the open feedback that was received from the respondents. It might explain why the differentiation between the classes is not so decisive. Certainly, this type of classification can only be useful for a designer or researcher, who is more used to dealing with such logical relations, and even that can be questioned. The classification corresponds to Nakamura et al.’s aspiration for a system that takes into account both the type of pictorial representation, as well as the relation between the icon and its object. The level of granularity at present, is not as ambitious as that of Nakamura et al. Future research can add depth and granularity to the system, but it is perhaps not necessary, bearing in mind the original goal of creating a concrete and practical system that can be adopted by designers without a very profound understanding of semiotic theory and terminology.

10 Conclusions

The motivation for the creation of the existing classification systems has been to discover or create logical rulesets for the creation and interpretation of interface icons. What Rogers [6] called a primitive syntax and semantics for icons, a taxonomy and grammar for icons, to assists designers with overcoming the challenges of choosing when to use icons and how to design them. The effectiveness and clarity of such systems has proven to be questionable, but such an approach is also insufficient to guide the design of icons and icon sets. The design process is also affected by other factors, such as the physiology and mechanics of the human eye, neural processes of how the brain interprets images, and cognitive psychology of how visual symbols are linked to non-visual concepts. Outside of these human centered factors there are other forces at play. Device and OS manufacturers, such as Apple, Microsoft, and Google provide their own interface guidelines that include specifications for icons. The never ending technical development of devices and displays affects what is necessary and possible in the reproduction of icon designs. Icons are also commonly extensions of a company’s or product’s brand. Icons and icon systems need to consistently follow a specific visual style that derives from brand guidelines. Still the stylistic changes need to be subtle, so that commonly used icons don’t lose their recognizable connection to the original form. Further research needs to address how all these factors affect the way in which interface icons take shape through intentional design choices and environmental factors.