The challenge of understanding icons

Icons are very peculiar images. They are both pictorial and functional. An icon is literally a picture, e.g., of a magnifying glass, and at the same time it represents a function, i.e., the query in a search. So, one and the same image is meant both to attract attention to itself and to facilitate action. In addition, icons live in a world surrounded by other icons and images with which they share meaning and properties. Users give meaning to icons as they put together information from various contexts, physical and virtual.

Given all this complexity, it is always a great challenge to create truly effective icons.

We felt we needed to better understand how people make sense of icons. We began our inquiry with icons in Launchpad and adapted the methodology developed by Dessus and Peraya (Cognitive Modelling of Icon Comprehension). Their approach is multi-pronged: 1) understand how meanings are conveyed by certain icons, and 2) uncover the implicit rules that guide the interpretation of icons. Our overall aim is to develop a design language specifically for Ubuntu icons.

The methodology

The research takes the form of a survey. It is simple. Survey respondents are asked to propose 2 different interpretations for each icon and to gauge their level of confidence in each interpretation. The original survey designed by Dessus and Peraya has 4 statements to be completed by participants:

[Icon]

Statement 1 – (First interpretation) – This icon means __________

Statement 2 – I am ___% confident in this interpretation

Statement 3 – (Second interpretation) This icon means___________

Statement 4 – I am ___% confident in this interpretation

In the context of our research, I added for each option the following statement: “I would expect to find this icon when I _____.” This question helped draw distinctions between words used for describing icons that could be synonymous, for example, “save”, “submit” and “confirm”. If participants describe an identical context of action for different words, we conclude that these words mean the same thing.

Analysis

The analysis consisted in looking at the frequency of each hypothesis, comparing first and second interpretations for each participant and across participants, and looking at how icon interpretations crossed over certain features in relation to the expressed level of confidence. For example, if participants always mention ‘warning’ in icons that have the colour yellow in common, we would conclude that yellow should be used to express ‘warning’ rather than other states. Of course that hypothesis would need to be tested in another survey.

Results for the Launchpad icons

Intended meaning – Edit

High level of understanding, but a strong association with “attention”, “warning”, and “danger”. Might be worth modifying colour or shape to distance the icon from that interpretation.

Intended meaning – Merge

Reasonable understanding that the icon means “merge”. However, respondents were not entirely sure if the icon referred to the state ‘merged’ or to the branches to be merged. Need clarification.

Intended meaning – Remove

Icon strongly associated with “do not enter”, first, and “delete”, second. The interpretation “remove” came only in third place with low level of confidence. The icon has a strong symbolic association with prohibitive and final actions and might be better used in those contexts.

Intended meaning – Remote bug

A reasonable percentage of respondents understood the intended meaning. Still, many did not. It appears that the key for interpreting the icon is the representation of the bug itself. We know that because various potential states of a bug were suggested as interpretations. This icon could be made more explicit or precise.

Intended meaning – External link

Relatively well understood. It is worth noting that the icon has a powerful suggestion of global reach (associated with translation, languages, internationalization, etc.). It is very evocative, and might be more fully exploited in another context.

Intended meaning – OK

Most respondents agreed on the meaning of the icon and also suggested “confirm changes” or “changes completed”. Other proposed meanings were: “valid” and “submit”. The general idea behind the icon is fairly well understood, even if the very specific meaning is not. It conveys the meaning that the data presented is right. Secondary meanings people offered: “save”, “accept”, “correct”.

Intended meaning – Binary Package

The icon is associated with “package” in a general way. Only a handful of respondents paid attention to the fact that the icon had a visual modifier (the small symbol over the icon). Those who noticed thought it signaled that the icon was: “binary”, being built”, “in progress”, reviewed”, “a dev version”. Since the icon modifier is typically not seen the intended added meaning of the primary icon is lost. This might be due to the size of the icon.

Intended meaning – Cancel

Half of our respondents picked up this meaning. The other half proposed meanings that suggested a general sense of something important about to happen, something the user should be imminently aware of: “error”, “delete”, “invalid”, “wrong”.

Intended meaning – Download

This one was understood by almost all respondents. Other (minority) interpretations were: “link” and “expand”.

Intended meaning – Project

A large majority of respondents thought this icon meant “package”— consequently, it does not communicate well its meaning. The colours and shapes are too similar to that of a package. Stronger distinguishing features are needed.

Intended meaning – Private

The most common interpretation for this icon was “locked” as in “not allowed to change or modify”. “Private” came a distant second. “Secure” and “read only” were other, but even less popular, suggestions. The icon is symbolically too powerful to convey the intended meaning. It might, rather, be used to signal “locked” and “read only.”

What we learned

As these results suggest, our methodology should help us develop a systemic representation of icon attributes from which we can build a coherent design language and it promises to provide pointers to problem areas as it suggests alternative interpretations. Some of the learnings from this first effort:

1. Strong associations between icon features and meanings need to be exploited in ways to reinforce their meaning either by association or by contrast (edit, project, private).

2. When icons contain more than one symbol (remote bugs, binary package) respondents tend to ignore the visual that modifies the original meaning of the icon.

3. Certain interpretations of icons (external link, private, remove) revealed that these icons are too strong for the meaning they have been assigned and their full potential is not being exploited.

These findings are a first step in understanding the specific language of icons and in improving user experience.