Semiotics in Usability: Guidelines for the Development of Icon Metaphors

Semiotics is the study of signs and describes the perception, comprehension and communication of symbols. In the field of computer science, semiotics is especially relevant to the design of icons. A perfect metaphor is the prerequisite to unmistakably associate a function with an image. This article sums up some principles how to create icons, which we derived from a study with more than 3000 LibreOffice users.

This article was posted first on 2013-Apr-10 at user-prompt.com (site closed now; previous postings on icon tests not resurrected).

Introduction

A lot of guide lines support designers creating icons. For example, the Microsoft Styleguide precisely defines for Aero icons how perspective, source of light, shade, saturation, size or level of detail should be like. Similar standards have been created for most projects, e.g. the LibreOffice Flat Icon Set. There are other, more generic lists that offer tips for icon creation (e.g here and here).

All these guides primarily serve the creation of a consistent look-and-feel. But an icon rarely stands for itself. Therefore the integration into an icon set needs to be considered, whereby homogeneity (the icons of a set should belong together) and heterogeneity (within a set the risk of mix-ups should be minimized) become relevant. Here is a good list on how to avoid mistakes in creating an icon set.

Along the aspects of homogeneity, heterogeneity and a graphically appropriate design, the most important premise for unambiguous symbols is the distinct association between the underlying function and its visual depiction. This relation is called a metaphor.

When creating a new set of icons the metaphors need to be defined first. They have to be a representable of the function within the whole functionality, easy to recognize and understandable. The results of a study on LibreOffice icons will illustrate most important aspects how to find these metaphors.

1. Apply metaphors only once.

On the one hand an icon set should be homogeneous and show the affiliation between the items. On the other hand there should be sufficient discrimination between the elements of a set to avoid mix-ups. This problem is especially relevant if the same metaphor is used for different functions. In our LibreOffice study we found this problem in the functions Format Paintbrush and Show Draw Functions: Both use a brush as metaphor. (Outcome of the icon tests was that the metaphor “paintbrush” is used for two different functions.)

2. Rethink conventionally used metaphors.

A lot of metaphors have been iconized so much that they were integrated into common usage. For more than 50 years a green triangle is used for play, a gray square for stop and a red circle for record in music players (and respectively software). A little more recent, but similarly famous are some functions we investigated in the context of word processing. But in our detailed analysis of Copy/Paste and Redo/Undo it becomes apparent that the usual depiction of these icons has a tendency for mutual mix-ups. (The metaphor for the icons copy and paste from the tango set do not depict their natural function.)

Even though it is obvious that things are not working well, changes in those quasi standardized solutions should only be done with great care. However, we received a lot of interesting suggestions how to trigger these problems in the comments to our original articles. For example, the short-cuts ctrl+c and ctrl+v are so well-known that an icon might be created on the grounds of this information.

3. Antiquated metaphors might work well.

At the same time not all conventionally used metaphors need an overhaul, even when the underlying functions are not used in the same way anymore. In our study this was apparent for Save. This depiction of a floppy disc is intuitively associated with its function and clearly exceeds the alternative, even though a lot of people actually never touched a floppy disc. (The metaphor floppy disk of the oxygen set is superior to the alternative from the tango set.

4. Adjust the degree of abstractness according to familiarity of the metaphor.

While creating a metaphor the degree of abstraction from the original is of utmost importance. A lightning bolt can stand for ‘fast’ or ‘immediate’, but at the same time it can be interpreted as energy or hazard. The guiding principle should be deemed: The better known a function, the more abstract the metaphor can be. However, less known functions need explicit metaphors and a figurative support. In LibreOffice there are a few seldom used functions (e.g. the Navigator, that should be placed less prominently or require a more pictorial icon. (The Navigator icon as a stylized compass is a good abstraction of the (English) function label, but it does not describe the actual function ‘Show document structure’.)

 5. Arrows are not specific.

Human action and every software procedure has an immanent sequence. It is an obvious choice to use this sequence for the depiction of the icon; for example to use a downward pointed arrow to represent the storing of data from working memory into a file (see figure 2). You can clearly see the preference of designers for arrows in the comments to our detailed articles: There were a lot of proposed solutions that apply arrows. Next to the unspecific overflow of arrows, they might be problematic in sinistrograde localizations and when the sequence is ambiguous. Hence, when searching for a metaphor, try to avoid arrows as much as possible. (At first glance the left arrow might describe the function ‘(Show) Nonprinting Characters’ accurately, but the right pilcrow symbol scored optimum values in our test.)

6. Define metaphors independent from language and culture.

Upon creating an icon, it should be considered that the original label of a function might not be understood all over the world. A well-known example is the term ‘Burn CD’ which is translated in French as ‘engrave’ (‘Graveur CD’). Therefore icons representing this term should not be based on the metaphor of fire. Similarly, colors can be understood differently and even pictograms are not necessarily standardized. In our study this becomes apparent in the function Hyperlink in the Oxygen icon set. The depicted ‘chain link’ works only in the English language and thus has a score of only 8.8 (e.g. it scores a worse 8.2 for answers in German). (The icon for hyperlink in the oxygen set is not culture independent.)

 7. Make icons simple.

An icon should be rapidly recognized by its symbolic depiction and not be mixed-up with other icons. The simpler an illustration, the better these requirements are fulfilled. Two ways lead to these easy solutions: a perfect metaphor, like the scissor for the function Cut or a branding, respectively the establishment of a distinct symbolism, e.g. the logo of the Adobe Acrobat for the output of PDF documents. These icons get optimum values in the test. (Unambiguous icons are often distinguished by a plain symbolism. Both oxygen icons ‘Directly export as PDF’ and ‘Cut’ scored a perfect 10.)