Data Visualisation Style Guides; Part III - Using Icons

For Part I (Intro) of this series you can find it here
For Part II (Chart Types) of this series you can find it here

Icons are all around us and are visual cues to so many aspects of our lives. Small, often square, these pictures are images which we cognitively associate to the relevant area. And we don't even think about it. 

Let's take this image the the left.

Immediately, most people in the western world, and indeed many across the eastern, northern and southern world, will recognise this as the "Information" symbol. It can also mean instruction, but the meaning is the same - This indicates that there is either a guide or more detail in or around this icon. 

Even just typing the word into a search engine, the first six images are all of icons.

Computers - the medium in which indeed my, and many of our lives revolve around - are filled with icons. The Windows icon in the bottom left of a Windows PC, the Apple icon at the top left of a Mac, the logos for Twitter, Facebook, Instagram.. 

This evidences that we associate so much subliminally, and that is is crucial for firms, corporations and even individuals to play upon these cognitive biases to ingrain associations in our mind. Is this through smart marketing? Through popularity? Through just being aware of one thing over another? I think it's a mix of these factors.

Even within the brands of Twitter and Facebook, I'd wager if we did a test, people would know which cues belonged to which social networking site. (Also noteworthy in the picture below... Notice how the "write tweet" icon stands out, through simple use of the Twitter icon? And that the other icons seem peripheral in comparison - the Twitter logo, embossed, even more so)

The icon for new post, the icon to 'like' something... Even the settings icon! This is because meticulous work has gone into the branding of these firms, and the styles they should take. Check out the Google icon guide for instance (https://material.google.com/style/icons.html#) 

The guide takes into account minute details in order to ensure that icons which are created are on brand. Of course, Google also tap into their use of font and colour to do this, but we'll explore that a bit further later in the series. 

What's the link to data visualisation?

So we understand how icons are used by brands; but how does this related to data visualisation? How can we, as artists of data, use this to homogenise our product so it's instantly recognisable?

Take this photograph for example of a possible dated Facebook homepage.

We see the icons on two places - on the left hand pane, and on the top right underneath a post. What can we see here?

Via https://webdesign.tutsplus.com/articles/use-and-abuse-of-icons-in-the-modern-age--webdesign-17064

What we see is that on the left, so many icons are used alongside text, that they are redundant - they act as decoration, or perhaps as added factors of association. But if we look up at the top underneath the post… we see two icons. And immediately, without thinking, most of us would recognise these. The first, is the "Like" button, with the number of likes to the right, and to the right of that is the "number of comments" icon - with the number to the right of that as well. Sure, there is text to the left to that effect as well, but our eyes no longer linger on text unless they have to - visual cues take priority.

Shapes, sizes and tones

Icons can also be in different tones - by tones I'm talking about being either filled or unfilled; lets look at the example below:

Though the icons themselves are largely the same, a survey carried out here (http://boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/) found that there's no obvious difference between recognition between filled and unfilled. 

So we can infer that style of shape isn't really that difficult to understand, so it makes sense for a firm to have different shapes and colours as stock icons (as below) - This means that on different themed dashboards, different icons can be used to support the message being shared. For instance, a filled icon perhaps is more poignant and 'in your face' than a unfilled one, whilst shades of grey are more subtle than a strong corporate colour such as red, blue or green.

Let's follow a specific theme - Design company Column Five worked with USA Today to help update their style guides to be more clear and consistent. Within this, they created stock iconography in order to allow users to easily grab visual elements, and enhance the content they're consuming.

This allows designers to create on-brand materials which are consistent and clear. Having a level consistency is essential as it means that certain shapes, icons and styles begin to be associated with your brand - This is evidenced by the Facebook example above. We can also see it in the "style" of Android icons below. 

Simplicity is essential

When designing data visualisations, the central piece of the viz should be the data & the story - Iconography should act as a visual cue which allows the user to quickly and easily understand. The moment a user has to ask what an icon represents, it can be seen that the battle is already lost and the icon is not doing as it is required. Of course, interactive cues can still be used to help explain, but the instant recognition and understanding can be lost when using a complex icon. 

Visual language is only as good as the effectiveness of execution. Within a firms style guide, adding a stock icon pack for commonly used icons or visuals can save a designer so much time when creating views or pieces of work. And when applying this to data visualisation, caution should be applied - always remember the message, and think about the sound of the colour on the viz. Is it too loud? It is distracting away from the overall message that the dashboard is trying to show? 

Key Benefits & Conclusion

Icons can be used as:

• Visual cues in order to associate without drawing attention away from the main object/message
• Icons in homogeneous styles in order to follow & enforce branding and consistency

In this post, we have discussed the benefits of icons and how they are used to impose branding and therefore how they can bring identity and consistency to dashboarding. Further, we have explored the way that colour, tone and shape are used to ensure that icons to not take the spotlight away from the data visualisation, but act in a supporting role to aid the understanding of a visualisation or dashboard.

Next Time...

In the next installment of the series, we will explore one of the key factors for any visualisation - the use of colour. Could it be used for association? How can you select the optimal palette to accentuate the data you're using? 

As always, please reach out and send your thoughts, feedback and comments.

Endnote

I'm going to start adding links to the end of posts to references I used - It's an idea which is regularly used by the legendary Keith Helfrich in his blog & I think, particularly in these cases, it would be useful to check out the resources I've used to build these posts (especially since the research part has been super eye-opening and interesting.) - You'll notice I've used a lot of links from web user interface sites - Data viz is very much a computational area, and given we by and large use computers to create such visuals now, the overlap is almost too obvious not to use.

References

https://en.wikipedia.org/wiki/Icon_(computing)#Brand_icons_for_commercial_software

https://en.wikipedia.org/wiki/Icon_brand

https://www.behance.net/gallery/9028077/google-visual-assets-guidelines-part-1

https://material.google.com/style/icons.html#icons-product-icons

https://www.freelancer.co.uk/community/articles/100-style-guides-you-should-see-before-designing-yours

http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/

http://boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/

https://webdesign.tutsplus.com/articles/use-and-abuse-of-icons-in-the-modern-age--webdesign-17064

http://www.columnfivemedia.com/work-items/visual-language-usa-today

https://visage.co/modern-brand-style-guide-elements-of-visual-language/

https://infoactive.co/data-design/ch15.html

https://visage.co/branding-with-visualization/