Example of signifier (a traffice sign) vs signified (a photo of an at-grade railroad crossing).

The same icon list as prior, with highlighting showing which were harder or easier to find. (Also discussed in text.)

Two different icons showing the concept of calculator.

Icon showing the classic red, octagonal stop sign.

What makes an icon a valuable addition to the interface, rather than a mere decorative element? Intuitiveness, aesthetic value, memorability, intercultural perception? While an effective icon would combine many of those characteristics, I’d like to focus on one measure–speed of recognition, or how fast a specific icon can be discovered and identified.

In a simple leisure app, the difference in speed of recognition may be too subtle to have any noticeable effect on the overall experience.

This may be different for a complex trading application: The requirements for iconography here are more likely to prioritize speed, since every second spent on processing individual elements can have a significant impact on the effectiveness of the overall interface.

Semiotic theory and structure of signs

User interface, like any language or other communication system, is a construct, made using series of signs. Semiotics, a branch in linguistics that studies signs, defines a sign as being composed of two elements–a signifier (the form which the sign takes) and a signified (the concept it represents).¹ A sign is a recognizable combination of a signifier with a particular signified.

The same signifier (form) could stand for a number of different signified (concepts), and multiple signifiers could be used to represent the same concept.² It is this unique pairing that forms a sign and makes it meaningful in a particular context.

Rail crossing signs

For example, the concept of a railway crossing can be represented in a number of different ways. At the same time, numerous interpretations can be suggested for the railway crossing road sign, by someone unfamiliar with the road sign system.

Based on this relationship between a signifier and signified, and their level of convention (symbolism), signs are classified into three categories:

iconic: relate to the concept through resemblance
symbolic: relate to the concept through convention, and
indexical: relate to the object through causation³

Typically UI icons are symbolic or iconic in nature, and many fall somewhere in between.⁴

Symbolic signs are often arbitrary and represent a concept in somewhat abstract way (using

to represent ‘refresh’ function). Their meaning is usually difficult to guess and has to be learned.

Iconic signs, on the other hand, can represent concepts in a more literal way and their meaning can often be guessed using common knowledge (such as

to represent ‘call’ functionality). Both types can adopt metaphors to enhance understanding.

Iconic versus symbolic

Some time ago I carried out a small icon intuitiveness test on Adobe InDesign and Quark XPress toolbars.⁵ The test participants, who were using the applications for the first time, were asked to guess the possible meaning of the icons.

I observed an interesting (although hardly surprising) pattern: When people were presented with unfamiliar signs, they usually tried to interpret them as iconic–based on the objects they resemble–and use existing common knowledge to understand them.

For example, the iconic ‘button’ sign

in the InDesign toolbar was quickly understood and interpreted by all participants correctly. On the other hand, the ‘Free transform tool’

was less successful in terms of its communicative function. The latter is a symbolic sign with indexical features.

For designers, it is obvious that the

icon is based on the graphical representation of the state that indicates an object has been selected for transformation. However, the people new to the jargon of the application tried to interpret it based on the elements of the sign they were already familiar with. Suggested interpretations included ‘cut rectangular shapes,’ ‘resize,’ ‘select an object by choosing points,’ and ‘select points.’

Naturally, interpreting more abstract (symbolic) icons took significantly longer than iconic signs.

Visual style and speed of recognition

If the icons have the same general shape and denote the same concept, what effect does their visual appearance have on the process of interpretation?

The author of an article recently published on Medium claims that a particular style–line icons–are harder for the brain to process than their solid style equivalents, and can ultimately lead to “cognitive fatigue.”

Setting aside cognitive psychology and theories on how brains process shapes, I wanted to compare the two styles of icons using the semiotic approach⁶ and some basic user testing.

This time, instead of guessing the meaning of icons, I was reading out the object names (e.g. Camera, Mail) and timing how fast people pointed to an icon that represented that concept.

Two versions, line and filled, of the same icon set were compared.

Icon sets shown to participants.

The participants⁷ were divided into two groups; each group was given one of the icon styles, initially, before trying the other style. The time taken to find and identify the icons is recorded in the table below.

Group A		Group B
Filled	Line	Line	Filled
64.2	28.2	72.6	31.2
63.0	27.6	61.8	26.4
71.4	35.46	60.6	27.6

The icons were in the same position for both rounds of the test, so due to the increased familiarity, the speed of recognition naturally increased for the second style, regardless which style it was.

On average, people who were shown the filled set first discovered the icons in 66.2 seconds, and those who were shown the line set first discovered them in 65 seconds. In the second round, the filled set was complete in 28.4 seconds on average, and the line set took about 30.4 seconds. The average increase in speed for the second part of the test was approximately 36 seconds for both groups.

There was no noticeable difference in speed of recognition for the two styles. So we could suggest that, if an icon is well designed and represents a particular recognizable shape clearly, its style doesn’t have a significant effect on the speed of recognition.⁸ The more notable difference, however, was in how individual signs relate to the concepts they represent–the relation of signifier to signified in particular signs.

The icons that performed faster in both sets were iconic signs–‘calculator,’ ‘camera,’ ‘mail.’ On the other hand, the icons that seemed to have required a short pause were symbolic: ‘download,’ ‘back,’ ‘copy.’ Even the ‘delete’ icon caused a slight delay in participants’ response.

Interestingly, even though some icons were slightly slower to be recognized, they were not always perceived as being harder to find. When interviewed afterwards, participants classified the ‘delete’ icon as being very easy to find even though it took them slightly longer than some of the others. My guess would be that the reason for it is psychological. We experience a certain satisfaction when discovering the signs we learned well, such as a trash can for ‘delete,’ a floppy disk for ‘save,’ and the like. They are like a secret code, and, feeling pleased with ourselves for learning them, we don’t notice that it took slightly longer to recognize.

The table below summarizes the performance of the individual icons in both sets. The icons with a red outline took slightly longer, on average, to recognize in both sets than the ones outlined in green.

Icons flagged with relative ease/difficulty of identification.

Other factors

Consistency in the use of terminology for the icon labels and functionality they represent also seemed to impact the speed of recognition. For example, those who were asked to find a ‘clock’ completed the task slightly faster than those who were trying to find a ‘recent or history’ function. In both cases, the function was represented by the same ‘clock’ icon.

Another aspect that could influence speed is proximity of similar shapes, as well as proximity of icons which represent related concepts. For example, both flag and folder icons (top right) are based on a similar size rectangular shape, which may have caused a slight delay in response. Another example is ‘important’ (flag) and ‘favorites’ (star)–they represent similar concepts and could therefore be mistaken for one another, particularly if placed close to each other.

Therefore, it was not the style of the icon set but rather the individual icons in both sets, their shapes, and their position in relation to each other that made the most difference in the speed of recognition in this test.

Guidelines for ‘faster’ icons

It is well known that icons with labels are more effective than icons alone, particularly for the learners of the application. This is expected, since a text label is a direct link that serves to bridge the gap between the signifier and signified.

However, sometimes, for whatever reason, you may need to use icons alone or use hover over tooltips only. You may also need those icons to be discovered and recognized quickly. Here are the guidelines when that’s the case.

When possible, choose iconic signs that relate to concepts through resemblance, rather than symbolic signs. For example, the ‘calculator’ icon on the left is expected to be discovered and recognized faster than the one on the right.⁹

For crucial concepts that must be understood fast and also for abstract concepts, a combination of word labels and color is more effective than an icon. For example, it’s this combination that allows the ‘stop’ road sign to be recognized quickly.

Placing icons that represent similar concepts close to each other–for example, ‘tasks,’ ‘inbox,’ ‘notifications’–may slow down the recognition of each individual icon in the group.

Terminology used in the user interface should relate to the icon labels as closely as possible. For example, if you are using a flag icon to represent ‘important,’ label it ‘flag as important’ rather than ‘mark as important.’

Above all, when testing the icons, the main focus should be not on the style but rather individual shapes of the icons, how they relate to the concepts they represent, and how they work with each other–visually and conceptually.

Footnotes

¹This is the original definition by a Swiss linguist Ferdinand de Saussure. Another well known sign structure was suggested by Charles Peirce.

²In fact, the number of combinations is unlimited–which is known in linguistics as unlimited semiosis.

³Although Peirce’s original classification of signs is much more elaborate.

⁴This classification is made when comparing the interface icons to each other. In a more general sense, all UI icons are essentially iconic signs.

⁵The test was part of my BA dissertation based on a comparative semiotic analysis of the two interfaces.

⁶A semiotic approach views an interface as a medium of communication which operates through a form of metalanguage. All elements are seen as encoded signs and all operations represent communicative processes between the designer and the user of the system. The semiotic approach is not an alternative but rather complementary to the user-centred approach. While the choice of signs in the user-centred approach is mainly determined by empirical studies (the sign is considered to be successful when it is recognised by a statistically significant number of users), semiotics aim to provide a theoretical basis to explain the phenomenon of user-centeredness and direct the designer towards the correct choice of signification systems amongst all of the possible signifiers. A book by C. de Souza provides a great insight into the semiotic approach.

⁷Six people took part in the test (thanks to my brave and adventurous colleagues). While the number of participants was too low to make any definite conclusions, it helped to see the general pattern in interpreting the icons.

⁸It may be worth mentioning that two of the participants found the full set “easier on the eye.” While this could be the case, it could also be due to the their better familiarity with the solid style. Four other participants did not notice the difference between the two styles, and only mentioned that one was ‘black’ while the other was ‘white’ which they didn’t see as notably different.

⁹Note: This is based on my assumptions and observations of testing similar icons; those particular examples have not been verified by user testing.

References

Andersen, P. B. 1990. A Theory of Computer Semiotics. Cambridge: Cambridge University Press.

Barr, P. 2003. User-Interface Metaphors in Theory and Practice

http://www.pippinbarr.com/academic/Pippin_Barr_MSc_Thesis.pdf

de Souza, C. S., 2004. The Semiotic Engineering of Human-Computer Interaction. Cambridge: The MIT Press.

Eco, U. 1978. A Theory of Semiotics. Bloomington: Indiana University Press.

Peirce’s Theory of Signs

http://plato.stanford.edu/entries/peirce-semiotics/

Peirce, Eco, and unlimited semiosis

http://courses.logos.it/EN/2_20.html

Peirce, C.S. 1998. The Essential Peirce. Volume 2. Indiana University Press.

Semiotics for beginners

http://www.aber.ac.uk/media/Documents/S4B/semiotic.html

Saussure, F. de. 1983. Course in General Linguistics. London: Duckworth.

Wiedenbeck, S., 1999. The use of icons and labels in an end user application program: an empirical study of learning and retention.

http://portfolio.educ.kent.edu/daltone/cmc2/articles/jp_use%20of%20icon%20labels_wiedenbeck.pdf

Free Templates on Speckyboy Design Magazine