CG27

Icons And Interfaces

Too often we fill interfaces with icons, without even realizing it. But choosing and/or designing the right icon is not as easy as it looks.

Icons And Pictograms

What icons actually are? An icon is a pictogram with a certain style used in a certain context.

Pictogram

A pictogram is a visual translation of a concept. It is a sign : a combination of shapes associated to carry meaning. (Symbol and signs: Exploration, A. Frutiger, 1999) For instance, to create a visual translation of “Lighting”. We could use a “lightbulb” sign out if lines, circles and square. In order to be sure it would be recognizable we can also add lines to show the light being emitted, could’nt we? Is it “the” pictogram?

A perfect pictogram would be universally and unambiguously understandable. But, culture, education, work habits, knowledge and more, influence the way we understand signs. No pictogram can ever be universally understood.

Style

Icons are styled pictograms. The purity of the conceptual minimalism is one thing, and the style is another. An icon should adapt to its visual neighborhood, to the final support art direction: in a website about sustainable development, the filament bulb might need to be replaced by a low-energy bulb. If I change the shape of the pictogram when adding some type information, I need to double-check that the styling does not obscure the concept for the target.

Context

There is still more to icons: context. A pictogram can be perfect, yet be affected by polysemy. No, that’s not a disease, it means the pictogram can carry more than one concept.

For instance, our lightbulb can very well mean “artificial light” but also “Eureka, I have an idea!”. In order to find the concept that will be recognized by users, I will need to adjust icons to their context. On a switch, it should mean “Switch on this light!”. In a thought bubble, it translates to “Oh, I have an idea!”.

Long story short: pictogram + context + style = icon

It’s great to know what goes into making an icon. But why do I (or my clients) want to use those visual elements? The answer looks easy enough: it’s because icons are awesome.

Icons Are Awesome

Icons Speed Up Understanding

Images are faster to understand than words in many cases (Cognitive artifacts, DA Norman, 1991). Thus, a simple and effective “home” icon, for my website homepage, will be understood in a quicker way than the word “home” as a whole. A brain doesn’t read a word one letter after the other. It doesn’t recognize its global shape neither. The recognition of a word is complex process and the neurologists are still investing the way our brains read.

Let’s go back home

For an icon, the recognition relies on the understanding of the pictogram part. If the concept and the shape are already associated in our mind, the icon will be recognized quicker than its label. This association requires a strong connection between the drawing and the idea (or better the physical representation) but once the link between the pictogram and its concept is made, they can be understood instinctively (The design, understanding and usage of pictograms, Tijus, Barcenilla, Cambon de Lavalette and Meunier — 2007). The International Organisation for Standardization provides a catalogue of pictograms that can be used as already known in its ISO 7001 standard defined by the ISO/TC 145, Graphical symbols commitee. This association can sometimes become so obvious that we don’t understand why some people doesn’t understand. “Oh dear! This woman silhouette obviously means that this door leads to the toilets”.

Women’s, Men’s… Robots? What does this mean? Toilet door at the google office in Bruxelles licence cc by Paul Keller

If this link isn’t made, then the brain will need to recreate the association between the concept and the pictogram and context of our icon. And needless to say, it won’t be as quick as reading a word.

If I want an icon to be understood, I need to find “The concept” for its pictogram. All this information will help us to ascertain the right context for the pictogram. In order to have some leads, ISO pictograms are allowed into the standard only after meeting an understandability ratio. The results were gathered from world wide user testing. For conformance, a pictogram must be understood in an unquestionable way or almost by 67 % of the panel (ISO 9186-1989), and the opposite meaning assumed by less than 10 percent. Pictograms that pass this test can then be added to a standard list. With a smaller target, the US standardization office sets the ratio to 85% of understanding (ANSIZ 535-1987) and 10% of opposite understanding. The understandability ratio clearly depends on the target audience and global understandability ratio for interfaces couldn’t exist. Building an universal pictogram could take years.

Anchors For Memory

Recreating the link between a concept and its representation over and over again will lead users to assimilate the association and “learn” the icon. I can’t imagine to force users to get through this process on a single-visit based website. Yet, it could be more than useful on a daily used interface, like a professional dashboard. Creating a new link is like learning a new word. It asks time, explanations and a lot of repetition but once memorized, icons will be anchors for memory and reduce the user mnemonic load (Vezin, 1984). And those elements will help user to have an instinctive way to use the application

Giving My Interface Some Consistency

Another reason why “icons are awesome” is the styling part. Whereas pictograms have no stylistic information, icons should give consistency to the user interface. Thus, I could start styling icons taking inspiration from the logo and/or brand identity and/or art direction. That’s a real bonus to the branding and consistency of a website.

A set of icons (for the CMS SPIP) using common style

For all those reasons, I do think icons are awesome. Yet they could kill an interface, couldn’t they?