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!”.
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.
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”.
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.
For all those reasons, I do think icons are awesome. Yet they could kill an interface, couldn’t they?
Icons Are Evil
Icons are so evil that some blogs and corporate websites don’t use icons at all. And they’re great, they even make icons feel superfluous. A neat example is Information Architects’ website.
An Icon is not an Illustration, An Icon is a signal
In a technical point of view, an icon is an image. As an image, a icon is an illustration. And it could be used as such. For instance, on The Noun Project homepage, an icon of a train is used to illustrate the header. But is that still an icon?
In my view, this image has lost its rank as an icon. It’s just a sign used as an illustration. When I drive, traffic signs inform me and help me to find my direction. Icons should be used as signals on our interfaces: to ease users to navigate.
Meaning: It’s A Trap!
I don’t have the certainty that a link between a representation and its concept is unique and mutual. For instance, Nokia found it suitable to use a compass pictogram for its map application. Indeed Nokia maps will help its users to find the right direction and conceptually a compass could be a good way to express the concept of “finding his/her way”. Alas, Google and Apple have compass apps: real compass maps giving North and South. When a user will switch from an Android phone to a Nokia phone with Windows OS, will he guess that the app is a maps app when he sees the pictogram?
And its gets even messier for Apple and its iOS as they use the same pictogram, with the same metaphor for two different apps: Safari and the compass! The function information relies only on the style of those icons.
Should I use icons?
When I started to using icons, I was only focusing on the style, to find something pretty, something accurate for the interface. I was wrong. Using an icon is always taking a risk:
- Will it be understood?
- Will it be understood in the right way?
- Will it really enhance the interface user experience?
- Is it worth it?
Today, the process is longer. In most cases, I don’t use any icons. Each website has different answers which depends on its aim, its targets, the time we have to design them and all the other parameters.
Opening
When it comes to choose the pictogram. I can find a lot of signs to use without second thought for my icons. But within all the pictograms I can find in the standards, there is a real lack of standardized web pictograms. For instance, the pictogram for “geolocation” depends of the maps app: iOS Map, Here (Nokia) Maps, Google maps…
In the same way, the “navicon” is being actively discussed. Use of this pictogram is spreading to applications and websites, Youtube, Google plus and Google Chrome having recently adopted it in their icons. This three-line shape is mostly used as a “menu icon” but also for texts, lists, and even hamburgers!
This icon seems to be perfectly understood by regular users of such interfaces, but no one can tell if it is understood by absolutely everyone. Are we creating a standard that, like the restroom pictogram, would only be understandable after some explanation? I don’t have the answer and it would need to be thoroughly tested, like the ones used by the ISO standards but adapted for the web. If the tests have already done, it would be great to see them published.
I think we should have a consistent pictogram dictionary for our interfaces: we should start a standardization of pictogram for the web. This base could set a clear list of pictograms already understood by our users, simplifying their navigation and our design decisions. And this without signing a standardization of the interfaces act: talented graphic designers will always know how to style those pictograms to create gorgeous icons. So what are we waiting for to enhance the global user experience of the web?
