Icons seem to play a small and humble role on websites, but they can have a huge influence on the comprehensibility of certain information. They need to work as a whole together in a set. But why are they so essential and how to get started on designing them the right way?
Increasing comprehensibility trough datavisualisation
Otto Neurath has been a pioneer in the field of datavisualisation. He was concerned with designing clear and comprehensible datavisualisations and icons for the masses. With his system of pictograms Isotype (1928) Neurath – together with designers like Gerd Arntz [1] – laid the foundation for modern forms of datavisualisation.
He envisioned a visual and universal language that would be understandable for everyone. A language that would translate complex data to comprehesive visuals. These visuals would help the masses recognize patterns and make connections so that a deeper underlying meaning would be quickly picked up. As he stated in 1937:
Visual impressions have become more and more important in our “visual era,” and especially to unschooled adults and to children. The usual visual methods–even the most careful charts and the most elaborate exhibits–are frequently confusing rather than enlightening, because their elements are unfamiliar. It is almost as though people had to learn a new language for each new communication. One solution is Isotype … that is, a new visual world. [2]
Today, the traces of Neurath’ system, Isotype, can still be found at airports and train stations e.g. [3]. Some of these signages are striking examples of how icons can become very helpful tools to quickly understand what words would have taken more time to explain.
Mistakes made
There seems to be an tendency to forget how extremely important it is to pay a great amount of attention to the design and implemetation of icons on websites nowadays. It is most definitely a hard job getting to the right set of icons that express what you want to transmit to your users. Most mistakes are made because designers:
- Make insufficient use of differentiation between icons
- Provide too many elements in one icon
- Use unnecessary elements to stylize icons
- Lack in providing an unity of style within a set of icons
- Provide too overly original metaphors
- Do not take in account national and social characteristic
- Place images of real interface elements in icons
- Place text in icons
So, how to get to the right set of icons? What are the rules of thumb we should follow while designing effective icons that are comprehensible, clear and right to the point?
Thumb rules to get you started
If you have to think about an icon to ‘get it’, the metaphor is most definitely too complex. Some of the recommendations [4] below could definitly help improve the design and the comprehensibility of icons:
- Make icons suggestive of the functionality which they are associated with. Users recognize functionally suggestive icons more rapidly than other forms because they directly associate them with a physical object or action. Icons at best will suggest to the user the primary purpose of the application, operation or action without having to read the caption.
- Make icon silhouettes distinct. One of the most important things while designing icons is to make the icons that will be used together visually distinguishable. Our human visual sytem is excellent at making rapid distinctions and associations based on their shape. A good way thus to help your users sort out different icons is to make visual distinctions by designing different shapes that all together have a strong visual connection with each other.
- Avoid name suggestive icons. Some icons do not suggest the application’s purpose, but instead suggest the application’s name. This adds an extra layer of abstraction to the icon and it is thus less desirable. Name suggestive icons are also harder for users to distinguish and recognize whenever users are not familiar with the application.
- Do not include meaningful text in icons. These icons effectively contain no metaphor or picture for the user to identify with and are probably harder to read than the accompanying caption. Since icons draw the eyes, an icon that is harder to identify than text is potentially worse than no icon at all. Hence “text icons” should not be used. Moreover, text should be avoided in icons because it makes the icons difficult to translate.
- Do not rely on random icons thus customize icons. In most cases random icons won’t have any association with the application (except an interesting connection in the designer his or her mind). These icons should not be used and will likely serve to confuse the user rather than helping them. The icon’s purpose should not be to “look pretty”; this is merely a very desirable side effect.
- Do not include extraneous information. Icons will often be viewed in a smaller form. Too much information may lead to cluttering and may also lead to confusion about the purpose of the application. Fewer visual elements will increase the comprehensibility of the purpose of the icon.
- Avoid basing icons on word puns. Puns do not translate that well and national and social characteristics come into play. Hence most users won’t understand the word play until it is too late for the icon to help them out. One of the values of icons, like Otto Neurath stated, is that icons bypass the linguistic comprehension and create a universal language. Through using puns this goal won’t be achieved.
As stated the design of icons is not an easy job, but taking into account a few thumb rules, approaching the design of icons holistically, considering your audience and keeping it simple and down to earth steps can be made to a more comprehensive and clear visual language.
—–
[1]
http://www.gerdarntz.org/content/gerd-arntz#isotype
[3]
http://www.designworkplan.com/design/airport-signage-photo-inspiration.htm
[4]
http://developer.gnome.org/projects/gup/hig/2.0/icons-design.html
[5]
http://psd.tutsplus.com/articles/7-principles-of-effective-icon-design/