How icons and pictograms can help deliver your message

March 13, 2014 | Design, Insights | No Comments

This series of posts are all about iconography: How to use them in your collateral and how they can make your message clear and easily understood.

And don’t forget to look out for our super-special download that contains a huge selection of social media icons to use in your marketing materials. Coming soon.

Why use icons and pictograms?
These days people want information. And they want it quick. So icons and pictograms bring an added level of visual language to your communications, which help your audience understand your message more easily.

Thanks to smartphone and tablet user interface (UI) design, the popularity of icons and pictograms is on the increase. But some of our earliest written communications also shared ideas through simple pictures. Cave painting, anybody? What’s really interesting is the way we use them hasn’t really changed. The intended outcome for the symbols and images used thousands of years ago and those we’re using today in our marketing materials and UI design is exactly the same: quick, easy and effective communication.

So what’s the key to a good icon or pictogram?

When you’re adding a new icon to your marketing materials ask yourself:

  • Is the simplified representation of the object universally recognisable?
  • Is there enough context given by the surrounding elements to make the message of the icon understood?

Let’s look at some examples. If you want an icon set for your user interface that needs to be easily understood without any additional explanation, it’s important the symbols you choose have a high level of international recognition.

An example of this is the mobile menu icon ( ) which you can see on the mobile version of the Pink website.

pink-website-icons

It’s rapidly gained international recognition because of its widespread use on responsive websites. Users know that if they tap on that particular icon the menu will be revealed.

If we had chosen to use a different icon in its place there was a danger we might have confused users on mobile devices.

The second example is how to use an icon on a page on your site where you’re selling the benefits of one of your services. In this instance the icon is not the primary source of communication. But by combining it with short copy it can help to separate the content visually and make it easier for the reader to digest.

We did this for our client Crystal Interactive when we designed the technology pages on their new website. We had to quickly convey the benefits of each device. So instead of the usual block of text we used three icons and short copy. This made this section attention-grabbing and easy to understand.

crystal-website-icons

But don’t use icons to communicate brand emotion
Icons are a functional element to aid the communication of individual elements, for example, a service feature, product benefit or UI navigation item. They shouldn’t be relied on to communicate the overall emotion of your brand.

We recently completed a project for Bookatable where we created a set of hand drawn icons to help illustrate their core values in their brandbook. We took care in making sure these icons were only a supporting visual element within the book; the primary message and story were communicated through copy and imagery, which are much better tools for connecting emotionally to an audience.

bookatable-brandbook-icons2

Icon and pictogram case study
Design consultancy PearsonLloyd recently completed a project for the Department of Health Design Council where they used iconography to explain a patient’s journey through A&E. The primary objective of the project was to help reduce patients’ frustrations at the often-confusing process and in turn reduce levels of violence and aggression towards staff.

The icons and pictograms help to illustrate each stage of the process and in the two test sites “75% of patients said the improved signage reduced their frustration during waiting times” and “threatening body language and aggressive behaviour fell by 50%.”*

pl_icons

*http://pearsonlloyd.com/2013/11/a-better-ae/

Leave a Reply

Your email address will not be published.

Go ahead and get in touch, let's create something together Contact Us